欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!
 你现在的位置:  DW学习

 

网页布局--页面设计

  我的网页边学边做,已经快3年了,里面有一部分连接没有做好,网页布局我自己都不喜欢,下个决心,重新做吧。

1.固定背景图片:

   我想做一个整体图片的背景。导入背景图,结果,因为背景为平铺效果,内容多了,背景就不断复制出来,这不是我想要的,必须把背景固定起来。从百度搜索后,得到以下代码,试用后,效果不错:

  在<head>和</head>之间用了以下代码(红色文字为图片连接地址)
<style>
body{
background-image:url(images/01bj.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom
}
</style>

  我把第6行改为:background-position:center top; 因为我想要水平为居中,垂直为顶对齐。这样还不是居中对齐,我就又把它改为:background-position:50% 50%。图片是屏幕抓图得来,尺寸为1024*768,全屏尺寸为1024*600,所以又把图片高度调整为600,全屏整幅固定背景搞定了。最后代码如下:

BODY {
background-image:url(images/bj01.jpg); 定义背景图片
background-repeat:no-repeat; 定义背景图片不滚动
background-position:50% 50%; 定义背景图片上下左右都居中
background-attachment:fixed; 定义背景图片固定(让背景图片永远固定在下层,无论上层文本怎样滚动,背景图片都静止不动,没有这一句还真不行)
margin-top: 0px; 定义顶对齐
margin-bottom: 0px; 定义底对齐
OVERFLOW: auto; 滚动条自动出现
}

2.主体页面阴影设计:

 用阴影分割主体页面与背景的效果我很喜欢,png-24格式的图片阴影效果比较好,但网页好象不支持这个格式,其他格式的阴影图片与背景融合效果不好,做了N次以后,只好考虑直接做在背景上,怎么样,还漂亮吧?

  因为左边有树,所以我想设置为左宽右窄,主体网页水平设置方法是左、中、右三种,第一个表格设置为宽1024像素,结果下面出来滚动条,滚动条一拉,阴影与主体页面分离了,这下可又难到了我,用绝对定位方法应该可以解决,但我不会,去群里请教吧。群友告诉以下方法,对表格进行如下设置:<table style="margin-left:115px"> 再把第一个表格宽1024像素改为980像素,滚动条没有了,OK!解决啦。主体网页老老实实贴附在阴影旁边。

3.用表格布局网页

  这张网页布局很简单,用表格布局吧。头部考虑到与背景的融合问题,flash就做成透明的,中间3行导航条也做成透明的,无背景,这样天空自然而然与页面融合,阴影效果的魅力在这里体现出来了。这正是我想要的效果。

  我用两个表格嵌套进行布局,上下结构,方便不少,但实行起来,也不是一帆风顺,修改了好几次才完工,现在留下的问题还有网页不能在其他分辨率正常观看,要变形。我暂时还解决不了这个问题,以后慢慢学。现在这张网页就是我现在的学习网页,没有做连接,导航按钮还要修改。

2008年3月7日

4.网页不能在其他分辨率正常观看,要变形

  网页不能在其他分辨率下正常观看,要变形的问题,我想主要是绝对定位关系吧,今天用一个表格布局,把表格居中,把底图宽度改为784来适应居中需要,在大分辨率情况下,背景图片完全居中,表格也居中,背景不复制,也不增大,周围是白色背景填充,就是滚动条没有了。

  原来设置:

<table style="margin-left:115px" width="778" border="0" cellpadding="0" cellspacing="0">

  现在设置:

<table align="center" width="784" border="0" cellpadding="0" cellspacing="0">

5.单元格使用带给我的烦恼:

  一开始,我觉得插入表格很简单,这个网页插入6行1列,第2行导航条拆分成9列,第4行拆分成3列,然后在里面添加内容,结果,内容加好后,下面行的宽度就不听你的了。这就是表格自动伸缩的原理吧,直接影响上下左右的表格。我就用嵌套表格来解决,在第2、4行分别插入一个同宽度、高度的表格,或用 % 设置宽高度,然后再拆分,表格对不齐的问题也解决了。
  昨天的网页出现右边缘不齐,我想,可能是我在表格增加表格行时,从下面添加插入表格的原因吧,今天重新再做,在表格中用拆分办法添加表格,并在第2行、第4行中先插入表格,再拆分表格,这样,上下左右互不干扰,现在看到的页面右边缘已经整齐了。
  第3行导航条中,日期的设置为右对齐,但太靠右了。我发现存在这个问题,在设计视图里不可见,无法退格,最后还是在代码视图里,调整单元格宽度,然后设置为居中,才解决。
  呵呵,最简单的布局工作我却费了那么大的劲,还留一个没有解决的问题:分辨率不兼容。唉,菜鸟学飞真不容易哦 。

2008年3月8日

6.画边框线

  头部由于设置成透明效果,只看到3条白色横线,是否再增加两条白色直线把它框起来,我用左右两条白色的1像素边框来解决,在<head>和</head>之间用了以下代码:

.biankuang {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #ffffff;
border-left-color: #ffffff;
}

  然后在第一个表格处套用:

<table align="center" width="784" border="0" cellspacing="0" cellpadding="0" class="biankuang">

今天又解决了一个问题,真是一招一招学织网啊,虽然辛苦,但是有收获,也很开心。

2008年3月9日

今天把按钮动画做好了,因为老是要忘记,就做了一个教程,以后自己也可以看看,举一反三。

2008年3月10日

  网页设置又进行一些改动,头部减少一格,已经做成模板,DW的内容就用这个模板了,其他的内容还得再设计网页。因为部分连接页面还没有做好,就用这个模板做个“正在建设中的页面”,也许一年我也建设不好 ,也许全部用这个模板,反正边学边设计,首次设计到修改,不也拖了3年吗。这个就是最后完成的模板:  http://nbhbp.cn/DW080311js.html

2008年3月11日