所示滚动文字代码

第5章页面布局及制作技巧在开始建立Web页面前整体规划页面设计和布局,将有助于在开发过程中提高效率.
通过页面的合理安排,条理清晰的框架结构,能使页面的形式美能得到更好的展现.
Dreamweaver不仅是一款优秀的页面制作工具,同时还可以进行精确的页面排版和布局.
其提供了一系列创建Web页面布局的方法.
本章的学习重点就是掌握DreamweaverCS3所提供的这些用于页面布局的方法和技巧.
5.
1DreamweaverCS3中使用样式表CSS5.
1.
1了解DreamweaverCS3中CSS可视化显示新特性DreamweaverCS3中增强了复杂样式表信息的显示模块功能,扩展了可视化展现的特性.
在以往页面布局中,复杂CSS布局作为一个难题,一直没有很好的解决方法.
DreamweaverCS3所增强的CSS可视化功能,能够快速勾画出CSS布局边框或给CSS布局上色,从而实现比较复杂的嵌套布局方案.
1.
更为实用的CSS控制面板DreamweaverCS3中将以往众多分散的CSS面板集合成了一个面板,所有CSS功能都被整合到了一个更富有可用性的控制面板中.
设计者只需在该面板中进行操作,便可以快速确认样式、编辑样式、查看应用于页面元素的样式等,就如查看段落、图像和链接一样.
2.
更具人性化的样式工具栏DreamweaverCS3改进了CSS的选择操作,当单击CSS布局时,会显示出对应的工具提示,如ID、填充、边距、边框设置等,有助于网页设计人员更好地理解CSS布局设计的各个元素.
样式呈现工具栏的使用,可以方便的为不同的媒体类型(例如,屏幕、手持设备和打印输出)进行设计.
3.
CSS渲染改进借助对设计视图精度方面的显著改进,使得网页设计师在复杂CSS布局中对浏览器的渲染操作更为便捷.
DreamweaverCS3完全支持高级CSS技术,包括溢出、伪元素和表单元素等.
这样网页设计师就可以做出更高级、更复杂的页面,为浏览者提供更方便、更友善的Web界面.
5.
1.
2自动进行"首行缩进"前面介绍了CSS可视化显示的一些新特性,接下来介绍一些简单实例.
通过实例,来了解快速生成CSS样式的方法.
首先介绍的是自动进行"首行缩进"的方法.
所谓"首行"是指每一段内容的第一行,也就是直接按回车键所形成的新段落.
网页设计师往往会遇到这么一个问题,由于在Dreamweaver中"首行缩进"没有比较方便的方法,所以以往常用连续输入几个空格的方法来达成"首行缩进"的效果.
但是无论是在精确定位还是实际操作上来看,该方法效果并不好.
而现在可以利用CSS来设计"首行缩进"功能,很好的解决这个问题.
国内的文学网站"榕树第4章页面布局及制作技巧·69·下"其文章内容页面的样式定义就采用了这种样式规则,具体效果如图5.
1所示.
图5.
1"首行缩进"效果具体的制作步骤如下:(1)打开Dreamweaver的设计界面.
在【CSS】控制面板中单击【新建CSS规则】按钮,在弹出的【新建CSS规则】属性对话框中定义类名为"textindent"的规则,定义范围选择在【仅对该文档】,然后单击【确定】按钮,如图5.
2所示.
(2)在【.
textindent的CSS规则定义】对话框中选择【区块】标签下的【文字缩进】属性定义设置项中来设置"首行缩进"功能.
缩进最好以"em"(字符)为单位,例如,汉字编排要求每段首行缩进两个汉字,设置好的CSS样式,如图5.
3所示.
图5.
2定义textindent的样式规则图5.
3定义"首行缩进"的样式规则通过以上设置,DreamweaverCS3自动会在页面文档中生成如下的CSS代码:.
textindent{text-indent:2em;/*定义文本段落缩进为2em*/}这样就实现了段落缩进或悬挂,同样,可以对这个方法进行变通,用来控制文字或者图片在网页上所处相对位置.
在标准化技术"盒模型"问题中,由于padding或者margin与width、height结合来控制内容在div所处位置时,常产生错位现象,此时可以利用上面所说的"缩进"技巧,定义text-indent属性来控制其相对位置.
·70·5.
1.
3背景图案静止不动随着内容的增加,当网页不能在一屏显示所有内容时,往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时,一般图像和文字是一起移动的.
那么有没有办法使背景图像不随其中内容一起"滚动"呢这种特效在一些服装展示类网站上经常可以看到,用一幅大版面的人物图片作为整个页面的背景,其余文字内容附着在其之上,具体效果如图5.
4所示.
图5.
4服装展示类网站固定背景图案效果具体的制作步骤如下:(1)打开Dreamweaver的设计界面,在CSS控制面板中点选【新建CSS规则】按钮,在弹出的【新建CSS规则】属性对话框中定义类名为"fixedimgbg"的规则,定义范围选择在"仅对该文档",选择好后,单击【确定】按钮,如图5.
5所示.
(2)选择确定后,在【.
fixedimgbg的CSS规则定义】对话框中选择【背景】标签下的【背景图像】来选择你所要设置背景的图片路径,在【重复】中选择"纵向重复"选项,在【】中选择选项,设置好的CSS如图5.
6所示.
图5.
5定义fixedimgbg的样式规则图5.
6定义"让背景图案静止不动"的样式规则通过这样的设置,DreamweaverCS3自动在页面文档中生成如下的CSS代码:第4章页面布局及制作技巧·71·经过这样的定义,在页面中就可以看到所设置的背景图片位于页面的正中间.
在拉动浏览器窗口的滚动条时,图片背景仍然位于页面的正中间而不随页面内容一起滚动.
当然如果你觉得图片所处页面中的位置并不满意,你也可以通过设置"background-position"的值随意调整.
5.
1.
4在线填空测试经常看见在一些注册表单中,页面上留有下划线供用户填写,就如日常试卷中的填空题形式.
这种效果经常被用于在线测试上,用来模拟真实的考试答卷,如图5.
7所示.
图5.
7在线填空测试效果具体的实现步骤如下.
(1)打开Dreamweaver的设计界面,在【CSS控制面板】中单击【新建CSS规则】按钮,在弹出的【新建CSS规则】属性对话框中定义类名为"fillinput"的规则,定义范围选择"仅对该文档",选择好后,单击【确定】按钮,如图5.
8所示.
(2)选中对象后,在【.
fillinput的CSS规则定义】对话框中选择【边框】标签分别对上、右、·72·下、左侧的边框进行【样式】、【宽度】、【颜色】上的定义.
在本例中,只需要对下边框进行控制"实线"样式、"细"线宽度及颜色(#000000),对于另外三个边框只需要设置样式为"无",具体设置如图5.
9所示.
图5.
8定义fillinput的样式规则图5.
9定义"在线填空测试"的样式规则通过这样的设置,DreamweaverCS3自动在页面文档中生成如下的CSS代码:同样,对这个方法进行扩展就可以制作出很多网站上都能看到的虚线效果.
不过这种效果的实现需要IE5.
5以上支持,如图5.
10所示.
图5.
10CSS定义虚线效果只需要更改【CSS规则定义】对话框中【边框】的样式为"虚线",【宽度】为"细"线,【颜色】为"红(FF0000)",具体设置如图5.
11所示.
第4章页面布局及制作技巧·73·图5.
11定义"虚线效果"的样式规则通过这样的设置,DreamweaverCS3自动在页面文档中生成如下的CSS代码:5.
1.
5如何高效率使用样式表如何更为高效地去使用样式表是个很值得探讨的话题.
一般都会选用重复调用的方法.
也就是在创建了一个独立的CSS样式文件后,通过链接的方式来使用该样式表文件.
这样做的好处又是什么呢主要体现在对整体项目的外观进行修改时,只需针对该样式表文件进行调整,而不是针对每个具体文件而进行大范围修改.
这也就极大程度上节省了开发时间,提高了效率.
具体的实现步骤如下:(1)单击【窗口】|【CSS样式】命令,弹出【CSS】样式窗口.
(2)在窗口最下面有一排快捷操作按钮,单击【附加样式表】按钮,如图5.
12鼠标所指位置.
(3)在【链接外部样式表】对话框中,单击【浏览】按钮,定位到需要链接到的css文件.
在【媒体】下拉列表中选择"所有"选项,如图5.
13所示.
·74·图5.
12【CSS】样式窗口图5.
13【链接外部样式表】对话框(4)单击【确定】按钮,关闭【链接外部样式表】对话框.
在【CSS】样式窗口中就会显示出刚才所链接的css样式文件中的所有已定义样式,如图5.
14所示.
(5)如若要对这个外部样式表进行编辑,可以先选择要编辑的样式对象,例如"body"对象.
然后单击【编辑样式】按钮,打开相应的样式规则定义窗口,例如【body的css定义规则】对话框,如图5.
15所示.
图5.
14【CSS】样式窗口图5.
15【body的css定义规则】对话框(6)可以定义相关的css样式,例如宽度为"800像素",上下边距都为"0"等.
单击【确定】按钮,保存之前的所有修改.
5.
2表格工具栏使用5.
2.
1利用表格美化页面表格的作用不仅仅局限于布局排版,通过嵌套或者给其赋予一定的css样式,同样也能起着美化页面的效果.
下面将通过具体实例来介绍一些关于表格美化的常用方法和技巧,具体效果如图5.
16所示.
第4章页面布局及制作技巧·75·图5.
16表格美化实例在这个实例子中,网页设计师利用了css定义了外部表格的黑色边框.
还对其下的三个单元格分别指定了各自的宽度及颜色属性.
在每一个单元格中嵌套了另外一个独立的产品说明表格来做为明细说明.
具体的实现步骤如下:(1)单击Dreamweaver【插入】工具栏中【常用】|【表格】命令,如图5.
17所示.
图5.
17插入【表格】工具(2)在弹出的【表格】对话框中进行具体设置.
在【行数】文本框中输入"1",【列数】文本框中输入"3",【表格宽度】文本框中输入"460".
在其右侧下拉列表中选择以"像素"作为单位.
其余都保持默认选项不作更改,如图5.
18所示.
单击【确定】按钮,在【文档】窗口中就插入了一个"1行3列"的表格.
(3)选中该表格对象,在【属性】检查器中的【高】文本框中输入"220".
在其右侧下拉列表中选择以"像素"作为单位.
(4)单击【窗口】|【CSS样式】命令,弹出【CSS】样式窗口.
单击【新建CSS规则】按钮,弹出【新建CSS规则】对话框.
在【选择器类型】选项组中选择【类(可应用于任何标签)】选项.
【名称】文本框中定义该类的名称,例如"blackbordertable".
【定义在】选项组中选择【仅对该文档】选项,如图5.
19所示.
图5.
18插入【表格】对话框图5.
19【新建CSS规则】对话框(5)单击【确定】按钮,就定义了一个名为"blackbordertable"的css样式类.
在弹出的【.
Blackbordertable的CSS规则定义】对话框左侧的【分类】下拉列表中选中【边框】选项.
在右侧·76·属性窗口中【样式】选项组、【宽度】选项组以及【颜色】选项组都选中【全部相同】选项.
(6)在【上】所对应的样式下拉列表中分别选中【实线】选项.
宽度组合框中输入"7",并在其右侧下拉列表中选择以"像素"作为单位.
颜色输入框中输入"#000000",如图5.
20所示.
图5.
20【.
Blackbordertable的CSS规则定义】对话框(7)单击【确定】按钮,关闭【.
blackbordertable的CSS规则定义】对话框.
选中表格对象,在【属性】检查器中的【类】下拉列表中选中刚才定义的【blackbordertable】选项,如图5.
21所示.
图5.
21【属性】检查器(8)在【属性】检查器中,定义表格左、右两侧单元格的宽度为150像素,背景颜色为白色(色值为"#FFFFFF").
中间单元格的背景颜色为灰色(色值为"#313031").
三个单元格的【垂直】对齐模式都选用"顶端".
经过如上操作后具体效果如图5.
22所示.
(9)由于三个单元格中的内容设置大同小异,所以就以左侧单元格(产品一)作为典型接着详细介绍.
用上述相同的方法在单元格中插入一个"3行1列"的表格,宽度为"100%".
(10)定义最上层单元格高度为18像素,背景颜色为灰色(色值为"#949294").
输入相应的文字信息,作为标题,例如"产品一".
在中间单元格中插入产品图片作为展示.
最下面的单元格中输入产品说明信息,例如"相关产品介绍".
具体效果如图5.
23所示.
图5.
22经过定义后的表格样式图5.
23插入产品介绍表格后的效果第4章页面布局及制作技巧·77·(11)可以进行复制,在另外两个单元格中插入类似这样的产品明细表格.
对内容进行一定的修改,就达到了实例的最终效果.
5.
2.
2活用表格数据功能表格具有数据功能可能对很多资深的网页设计师来说也是个新课题.
利用这种数据功能可以不通过动态数据库语言或者数据库操作,而直接实现对数据库资料的排序功能.
具体效果如图5.
24所示.
图5.
24依据总分实现的表格数据降序排列效果在这个实例子中,网页设计师就利用了表格的数据功能实现了对学生成绩的排序.
在这里依据学生总分,以从高到低的降序进行排序.
具体的实现步骤如下:(1)单击Dreamweaver【插入】|【常用】|【表格】命令,在弹出的【表格】对话框中进行相应设置,在【文档】窗口中插入了一个"6行5列"的表格.
可以对所有的单元格进行宽度和背景颜色的指定,来修饰表格的外观.
(2)根据实际情况录入一定的数据,例如学生姓名、科目成绩、总分等.
这个数据可以打乱,不需要按照特定的规则,否则在排序之后容易造成混淆.
(3)光标定位到表格内任一单元格内,或是选定表格.
单击【命令】|【排序表格】命令.
(4)在弹出的【排序表格】对话框中,【排序按】下拉列表框中选择【列4】选项.
也就是按表格中"总分"所处的列进行排序.
【顺序】下拉列表框中选择【按数字顺序】选项.
并在其右侧下拉列表框中选择【升序】选项.
(5)如若要在不同的列进行次一级的排序,也就是当"总分"相同的情况下确定的排序规则.
可以在【再按】下拉列表框中进行设置,例如选择【列4】选项,也就是按"语文"成绩进行排序.
【顺序】下拉列表框中选择【按数字顺序】选项.
并在其右侧下拉列表框中选择【升序】选项.
(6)选中【选项】选项组下的【完成排序后所有行颜色保持不变】选项.
那么表格的行(TR)属性(例如颜色)将同排序单元格中的属性一同变化,否则将不作变化,如图5.
25所示.
图5.
25【排序表格】对话框注意:根据实际情况,也可以选中【选项】选项组下的【排序包含第一行】选项来实现对首行内容的排序.
若是选中【排序标题行】选项或【排序脚注行】选项,则在排序过程中将包含对表格标题和脚·78·注行内容的处理.
(7)单击【确定】按钮,在【文档】窗口中的表格数据就依据"总分"进行了从低到高的升序排列.
具体效果如图5.
26所示.
图5.
26依据总分实现的表格数据升序排列效果5.
2.
3表格使用高级进阶表格在网页定位上发挥着极为重要的作用.
尤其是在非IE浏览器上,使用表格定位的制作方式比使用层定位来得更为简易.
但有很多网页设计师提出表格定位过于呆板,不能像层一样变化多样,任意控制.
其实要解决这个问题并不难,只需要通过几步简单的操作,表格也能变得像层一样可可任意移动.
具体效果如图5.
27所示.
图5.
27可移动表格效果具体的实现步骤如下:(1)单击Dreamweaver【插入】工具栏中【常用】|【表格】命令.
对弹出的【表格】对话框中进行相应设置,在【文档】窗口中插入了一个"2行1列"的表格.
(2)选中该表格对象,在【属性】检查器中的【宽】文本框中输入"287".
在其右侧下拉列表中选择以"像素"作为单位.
在【高】文本框中输入"123".
在其右侧下拉列表中选择以"像素"作为单位.
在【背景图像】文本框中输入作为表格底图背景的图片路径,例如"bg.
jpg".
或者单击【浏览文件】按钮定位到该文件,如图5.
28所示.
图5.
28【属性】检查器(3)根据实际情况,可以在单元格中再嵌套一个表格,进行适当的排版.
录入相应的文字信息,例如"表格使用高级进阶"等.
具体效果如图5.
29所示.
(4)单击【窗口】|【CSS样式】命令,弹出【CSS】样式窗口.
单击【新建CSS规则】按钮,弹出【新建CSS规则】对话框.
在【选择器类型】选项组中选择【类(可应用于任何标签)】选项.
【名称】文本框中定义该类的名称,例如"canmovetable".
【定义在】选项组中选择【仅对该文档】选项,如第4章页面布局及制作技巧·79·图5.
30所示.
图5.
29文字排版效果图5.
30【新建CSS规则】对话框(5)单击【确定】按钮,就定义了一个名为"canmovetable"的css样式类.
在弹出的【.
canmovetable的CSS规则定义】对话框左侧的【分类】下拉列表中选中【定位】选项.
在右侧属性窗口中【类型】下拉列表中选择【绝对】选项,如图5.
31所示.
图5.
31【.
canmovetable的CSS规则定义】对话框(6)单击【确定】按钮,关闭【.
canmovetable的CSS规则定义】对话框.
选中表格对象,在【属性】检查器中的【类】下拉列表中选中刚才定义的【blackbordertable】选项,如图5.
32所示.
图5.
32【属性】检查器(7)经过这样的处理,前面的表格就能像层一样可以随鼠标自由移动,不再受限制了,如图5.
33所示.
图5.
33随鼠标移动的表格·80·5.
2.
4DWCS3表格使用经验总结在网页制作过程中,许多地方都用到了表格.
如果能在实际操作中灵活运用表格技巧,就可以设计出更为大方得体的页面.
下面就总结了一些表格使用过程中的常用技巧.
1.
学会使用百分比来定义表格宽度有时会把表格的宽度定义为100%来解决最佳浏览分辨率的问题.
为了让设计制作的网页在常用的浏览分辨率(例如800*600、1024*768等)下都能够占满整个屏幕,就会选用百分比做为宽度单位.
经过这样处理的网页在分辨率改变后会自动伸缩来适应各种情况,也就拥有更好的兼容性.
2.
学会使用自动清除功能初学者在网页布局的时候经常会犯一个通病,喜欢用鼠标拖放来控制表格的大小.
这样做的直接后果就是在网页代码中出现了许多关于这些高和宽定义的代码.
当网页预览时,对于一些涉及图片精度拼接的网页就会产生错乱现象.
例如正常情况下的无缝拼接效果如图5.
34所示,出现拼接瑕疵时的效果如图5.
35所示.
图5.
34无缝拼接效果图5.
35拼接瑕疵时的效果要避免产生这种现象,Dreamweaver也提供了很好的方法.
就是利用【属性】检查器中的【清除列宽】与【清除行高】这两个快捷操作.
网页设计师可以利用这两个按钮快速除掉表格中定义高度与宽度的Html语句,如图5.
36所示.
图5.
36【清除列宽】与【清除行高】按钮3.
学会使用背景图片平铺这个技巧经常用于做一些带重复花纹的图案效果,例如制作一条带花纹的分割线等.
利用表格的这个特性,可以在其单元格中用处理好的图案作为其背景图案进行填充.
这样做很大的好处是可以大幅度的减小网页中图片的大小.
因为对于重复填充的图片,网页在加载过程中只需要下载一次.
也就很大程度上节省了带宽,加快了浏览速度.
5.
3层工具栏使用5.
3.
1层的精确定位层有着很好的机动性,网页设计师可以把其拖放到任意位置.
可这样的定位方式是否能够自动地适应用户设置的分辨率,始终固定在同一个位置上呢专业设计师一般都会采用CSS相对定位的方式,来根本性解决这个问题.
这也是一种最为简单而有效的方法.
第4章页面布局及制作技巧·81·具体的实现步骤如下:(1)单击Dreamweaver【插入】工具栏中【布局】|【绘制层】命令,如图5.
37所示.
图5.
37【绘制层】工具(2)然后拖动鼠标在【文档】窗口中绘制一个透明层.
根据实际需要,可以对层进行一定的修饰.
选中该层对象,在【属性】检查器中的【宽】文本框中输入"290px".
【高】文本框中输入"107px".
然后将预先处理好的图片文件作为层的背景图像.
例如"bg.
gif".
具体效果如图5.
38所示.
(3)单击【窗口】|【CSS样式】命令,弹出【CSS】样式窗口.
单击【新建CSS规则】按钮,弹出【新建CSS规则】对话框.
在【选择器类型】选项组中选择【类(可应用于任何标签)】选项.
【名称】文本框中定义该类的名称,例如"relativediv".
【定义在】选项组中选择【仅对该文档】选项,如图5.
39所示.
图5.
38绘制层演示效果图5.
39【新建CSS规则】对话框(4)单击【确定】按钮,就定义了一个名为"relativediv"的css样式类.
在弹出的【.
relativediv的CSS规则定义】对话框左侧的【分类】下拉列表中选中【定位】选项.
在右侧属性窗口中【类型】下拉列表中选择【相对】选项,如图5.
40所示.
图5.
40【.
relativediv的CSS规则定义】对话框(5)单击【确定】按钮,关闭【.
relativediv的CSS规则定义】对话框.
选中表格对象,在【属性】检查器中的【类】下拉列表中选中刚才定义的【relativediv】选项,如图5.
41所示.
·82·图5.
41【属性】检查器注意:经过这样定义后,该层就有了相对定位的属性.
可以把其作为表格或者层等载体的下层对象来引用.
根据特殊要求,也可以设置该层对象的left、top属性,来确定其相对位置的具体值.
也就能完成各种使用层且自动适应用户分辨率设置的网页效果.
以上的方法初学者可以尝试一下.
若能够举一反三的话,就可以做出各种使用层且自动适应用户分辨率设置的网页效果.
5.
3.
2层的高级应用在实际开发过程中,层被广泛应用于下拉菜单的制作.
下拉菜单是网页上最常见的效果.
当鼠标触发时,会出现一个子菜单.
这种形式很大程度上节省了空间,使得网页布局更为简洁有序.
下拉菜单的制作方法多种多样,这里介绍借助层的高级应用来实现的方法.
实现原理就是利用Dreamweaver行为面板中的内置方法(即隐藏、显示层方法).
并结合鼠标事件进行触发控制.
具体效果如图5.
42所示.
图5.
42下拉菜单效果具体的实现步骤如下:(1)单击Dreamweaver【插入】工具栏中【常用】|【表格】命令.
对弹出的【表格】对话框中进行相应设置,在【文档】窗口中插入了一个"1行5列"的表格.
(2)选中该表格对象,在【属性】检查器中的【高】文本框中输入"31".
在其右侧下拉列表中选择以"像素"作为单位.
在【间距】文本框中输入"5".
并以准备好的平铺图片进行背景填充,例如"bg.
gif"来修饰表格的外观,如图5.
43所示.
图5.
43表格对象的属性设置(3)依次选中每一个单元格,在【属性】检查器中的【垂直】列表框中选择【顶端】列表项.
插入准备好的主菜单图片,也可以根据实际情况输入文字内容作为菜单项,如图5.
44所示.
图5.
44主菜单项(4)单击【插入】工具栏中【布局】|【绘制层】命令,在【文档】窗口中插入一个层.
用于放置相应的子菜单内容,例如对应于"FINDSHOWS&MOVIES"主菜单的下级子菜单,内容包括"TVListings、Movies、OnlineVideoHotList".
调整好子菜单的对应位置,如图5.
45所示.
第4章页面布局及制作技巧·83·图5.
45子菜单效果(5)选中该子菜单所在的层,在【属性】检查器中【层编号】文本框中输入"sub1".
在【可见性】下拉列表中选择【hidden】选项,如图5.
46所示.
图5.
46子菜单所在层属性设置(6)选中主菜单项,例如"FINDSHOWS&MOVIES"所对应的图片.
单击【窗口】|【行为】命令,弹出【行为】对话框,如图5.
47所示.
(7)单击【添加行为】|【显示-隐藏层】命令.
在【显示-隐藏层】对话框中,单击【显示】按钮.
则会在【命名的层】列表框中增加【层"sub1"(显示)】项,如图5.
48所示.
图5.
47【行为】对话框图5.
48【显示-隐藏层】对话框(8)单击【确定】按钮关闭对话框.
返回到【行为】窗口,会在其下列表框中增加一条行为事件.
在事件下拉列表中选择【onMouseOver】项,如图5.
49所示.
(9)同样重复上面的操作,再添加一个鼠标行为"onMouseOut"来控制层"sub1"的隐藏,如图5.
50所示.
也就是在鼠标离开主菜单时,子菜单恢复原先默认设置为不可见.
图5.
49【onMouseOver】事件图5.
50【onMouseOut】事件经过这两步行为效果的添加后,会在网页的区域添加了如下代码:0&&parent.
frames.
length){d=parent.
frames[n.
substring(p+1)].
document;n=n.
substring(0,p);}if(!
(x=d[n])&&d.
all)x=d.
all[n];for(i=0;!
x&&i这种实现下拉菜单的方法比较简单,网页设计师可以更多地发挥自己的想象.
进行变通,制作出更多外观更为漂亮大方的菜单特效.
5.
3.
3DWCS3层使用经验总结下面就介绍一些使用层过程中的经验总结.
这些技巧性的建议,可以避免初学者在使用层时陷入可能的困惑中.
1.
尽量使用相对定位不要期望当浏览器窗口大小或屏幕分辨率发生变化后,绝对定位的层仍能保持原由的位置.
所以在非必要情况下,尽量使用相对定位的方式.
2.
Id命名的惟一性每个层应该有惟一的并区别于页面中其他元素的名字.
否则不符合标准化的要求,在元素的引用时也容易造成混淆.
注意:在Dreamweaver中使用"绘制层"工具绘制层时,自动会为层分配id值.
默认的命名规则是用"Layer1"表示第一层,"Layer2"表示第二层,依此类推.
网页设计师可以在【属性】检查器将层进行重新命名操作.
3.
保证层在各浏览器中的兼容性Dreamweaver中提供了高效的检测工具.
使用Netscape调整修复工具可以保证在改变浏览器窗口大小的时候页面不会走样.
具体的实现步骤如下:(1)单击【命令】|【添加/移除Netscape调整修复】命令.
弹出【添加/移除Netscape调整大小修复】对话框,如图5.
51所示.
图5.
51【添加/移除Netscape调整大小修复】对话框第4章页面布局及制作技巧·85·(2)单击【删除】按钮,确认操作.
Dreamweaver会修正或者移除页面中JavaScript程式码中存在的bug.
5.
3.
4层与表格进行网页综合布局很多时候考虑到兼容性,网页设计师会使用层与表格进行综合布局.
在编辑网页时采用一定的层布局,而在发布网页时再将其转换为表格布局.
或者在部分特殊效果区域把表格转换为图层,增加其的可控性.
1.
将层布局转换为表格布局将层布局转换为表格布局的主要目的是为了与低版本的浏览器兼容,具体操作步骤如下:(1)在【文档】窗口选中要转换的层对象.
(2)单击【修改】|【转换】|【层到表格】命令.
在弹出的【转换层为表格】对话框中的【表格布局】选项组中选中【最精确】选项,如图5.
52所示.
这样就能将每一个层转换成一个表格单元.
有时在为保持层与层之间的间隔会创建一些附加单元格.
选中【使用透明】项,Dreamweaver将会用透明的GIF图像填充表格的最后一行.
这样就可确保表格在所有浏览器中都能正常显示.
图5.
52【转换层为表格】对话框注意:如若选中了【使用透明】项,将不再能通过鼠标拖动生成的列来改变表格大小.
(3)单击【确定】按钮开始转换.
如若文档未保存,将先出现提示对话框.
2.
将表格布局转换为层布局将表格布局转换为层布局的主要目的是为了能更方便地编辑网页的整体布局,具体操作步骤如下:(1)在【文档】窗口选中要转换的表格对象.
(2)单击【修改】|【转换】|【表格到层】命令.
在弹出的【转换表格为层】对话框中的最主要的一步操作是选中【布局工具】选项组下的【防止层重叠】选项,如图5.
53所示.
这样就可以确保转换后移动层或调整层大小时不会重叠.
图5.
53【转换层为表格】对话框如若选中了【显示层面板】项,将在转换后自动显示层面板.
如若选中了【显示网格】项,将在转换后显示网格.
如若选中了【吸附到网格】项,在转换后可借助网格来作定位.
注意:将表格布局转换为层布局时,为空的表格单元不作转换.
也不会把重叠的层转换为表格.
(3)单击【确定】按钮,开始转换.
如若文档未保存,将先出现提示对话框.
·86·5.
4表单工具栏使用5.
4.
1表单布局设计网站项目中总是利用表单来处理数据录入.
表单各元素特点多样化,例如对齐方式、操作方式等都有所不同.
而这些因素会或多或少地影响网页浏览者实际操作.
布局时要尽可能考虑到浏览者的阅读习惯,尽可能缩短其视觉路线.
让整个布局能体现出最大的亲和力,最佳的操作模式.
下面就总结了一些在表单布局时的一些注意点.
1.
表单涉及内容规划必须合理对涉及内容比较多的表单项目进行逻辑分组.
合并那些同类项目,舍弃那些不必要项目.
让浏览者尽快能了解需要填写的表单项目内容,也避免了内容上的混淆.
2.
整体界面设计必须有亲和力尽可能让浏览者视线从一个方向进行查看,例如从上而下.
突显标签,增加视觉比重,使得标签和表单填写内容有所区分.
3.
添加一些必要的内容细节提示对一些表单项给出适当的细节提示是很必要的.
这种完全站在浏览者角度考虑会给网站项目带来意想不到的效果.
5.
4.
2借助可视化元素美化表单通常网页设计师也会借助一些可视化元素,例如分割线、背景色块等来美化表单.
习惯上会根据列项内容来增加背景色和分割线.
不同的背景色产生了一列垂直的标签和输入框.
每一组标签和输入框之间又借助分割线分开,如图5.
54所示.
图5.
54借助可视化元素美化表单一条细线甚至一个淡的背景,都可以从视觉上很好的组合相关数据.
合理的运用好这类可视化元素能将原先感觉分散的布局进行集中,进行归类.
注意:必须明白任何对布局无用的视觉元素都会扰乱整体布局.
过多地使用可视化元素进行修饰,会让打断浏览者的思路.
第4章页面布局及制作技巧·87·5.
4.
3表单主次操作对于任何布局,主次的理念必须清晰.
在表单布局中的主要操作一般是针对按钮.
对于这一部分内容需要给出一个比较强的视觉比重,例如使用较为鲜艳的颜色、较粗的字体等,如图5.
55所示.
图5.
55表单主次操作在上图中就这重强化了【下一步】按钮,让浏览者对当前所操作的表单内容一目了然.
很清楚现在正在做什么操作.
注意:当一个表单布局中有多个操作,例如【提交】、【关闭】按钮等.
那就有必要减轻次要操作【关闭】按钮的视觉重量,强化主要操作【提交】按钮的视觉重量.
这也在一定程度上降低了浏览者潜在的操作错误的可能性.
5.
4.
4操作label和表单项每一个表单元素都应该独享一个id标记,label标签借助for属性与其关联.
这样做的好处是浏览者直接可以通过label标签使相关表单域获得焦点,如图5.
56所示.
图5.
56操作label和表单项这个实例中【以下资料】选项组中的分类选项,可以直接用鼠标单击选项文字内容进行选取.
例如单击【完全公开】文字,就可以选中此选项.
这就不同于一般的表单元素操作,因为在传统模式下浏览者必须通过单击选项本身进行选取.
这也就极大程度上方便了网页浏览者.
而要达成这种便捷操作,可以借助Dreamweaver中的标签辅助功能来实现.
具体操作如下:(1)单击【插入】工具栏中【表单】|【复选框】命令,弹出【输入标签辅助功能属性】对话框,如图5.
57所示.
·88·图5.
57【输入标签辅助功能属性】对话框(2)在【标签文字】文本框中输入"全部公开".
在【样式】选项组内选中【使用"for"属性附加标签标记】选项.
在【位置】选项组中选中【在表单项后】选项.
在【访问键】文本框中输入"q".
在【Tab键索引】文本框中输入"1".
注意:设定了访问键后,在预览窗口中浏览者就可以通过"Alt+Q"组合键进行快捷操作.
该表单元素在通过Tab键访问时的索引值是"1",也是最先被访问的表单元素.
5.
4.
5表单综合运用表单最常用于搜集一些必要的用户信息,来实现信息的及时反馈.
表单的运用包括调查、搜索等.
下面就借助一个实例来说明表单综合运用的方法.
在这个例子中主要是实现使用电子邮件发送反馈意见的方法,如图5.
58所示.
图5.
58反馈表单(1)单击Dreamweaver【插入】工具栏中【表单】|【表单】命令,如图5.
59所示.
在【文档】窗口中就会出现一个带红虚线框表示的表单.
图5.
59插入【表单】命令(2)单击Dreamweaver【插入】工具栏中【常用】|【表格】命令.
对弹出的【表格】对话框中进行相应设置,在【文档】窗口中插入了一个"6行3列"的表格.
第4章页面布局及制作技巧·89·(3)选中该表格对象,在【属性】检查器中的【宽】文本框中输入"320".
在其右侧下拉列表中选择以"像素"作为单位.
在【填充】文本框中输入"5".
在【对齐】下拉列表中选中【居中对齐】选项,如图5.
60所示.
图5.
60表格对象属性设置(4)将最上层一列中合并同列的三个单元格作为表头.
在【背景图像】文本框中输入作为表格底图背景的图片路径,例如"titlebg.
gif".
或者单击【浏览文件】按钮定位到该文件,如图5.
61所示.
图5.
61单元格属性设置(5)对其余一些必要的单元格进行合并.
根据列来设置单元格的交错颜色.
例如在用色值分别为"#FFF7F7"和"#FFEBD6"颜色进行填充.
具体表格布局效果如图5.
62所示.
图5.
62单元格背景颜色设置(6)输入相关的内容作为单项标题,例如"姓名"、"固话"、"意见"等.
还需要输入一些提示性的文字内容,例如"*必填"提示.
(7)单击Dreamweaver【插入】工具栏中【表格】|【文本字段】命令,如图5.
63所示.
在对应单元格中插入用于输入"姓名"、"固话"和"手机"的文本框.
图5.
63插入【文本字段】命令(8)单击Dreamweaver【插入】工具栏中【表格】|【文本区域】命令,如图5.
64所示.
在对应单元格中插入用于输入"意见"的多行文本框.
选中此文本框,在【属性】检查器中的【字符宽度】文本框中输入"30".
在【行数】文本框中输入"10".
图5.
53插入【文本区域】命令(9)单击Dreamweaver【插入】工具栏中【表格】|【图像域】命令,如图5.
65所示.
在对应单元格中插入用于提交的【发送邮件】按钮.
·90·图5.
65插入【图像域】命令(10)进行最后的布局修正工作,例如一些单元格的对齐方式、表单元素的宽度等.
在【文档】窗口中展现出的最终布局效果如图5.
66所示.
图5.
66布局修正(11)在标签选择器中,选中表单(form)标签,如图5.
67所示.
图5.
67标签选择器(12)在【属性】检查器中的【表单名称】文本框中输入"formmail".
在【动作】文本框中输入"mailto;webmaster2eoner.
com",也就是表单提交后发送的邮件地址.
在【方法】下拉列表中选择【POST】选项,如图5.
68所示.
图5.
68表单对象属性设置经过如上步骤的操作,这个邮件反馈表单就制作完成了.
在表单文本框中输入一定的文字信息,单击【发送邮件】按钮就会在不加密的情况下发送表单数据.
并且会将该电子邮件地址显示给收件人.
注意:在提交前如若没有对默认的邮件发送进行设置,系统会给出提示信息要求创建新的培植文件,如图5.
69所示.
图5.
69系统提示信息5.
5超链接全接触网站项目中原先零散独立的各个页面能够组成一个有机的整体,可以通过超链接的方式.
通过这种联系,网页浏览者能够在相关的页面之间跳转.
第4章页面布局及制作技巧·91·5.
5.
1链接图片和文字给文字或者图片加超链接是一项最基本的操作.
一般都会通过Dreamweaver的【属性】检查器来快速链接文件.
具体操作如下:(1)在【文档】窗口选中要加超链接的文字或者图片对象.
(2)在【属性】检查器的【链接】文本框中输入要链接到的URL地址,例如"http://www.
eoner.
biz".
或者单击【浏览文件】按钮定位到本地站点上的某个文件.
在【目标】下拉列表中选择【_blank】选项,表示在新窗口中打开超链接所指向的网页,如图5.
70所示.
【_self】选项表示在本窗口中打开链接;【_parent】选项表示在父窗口中打开链接;【_top】选项表示在顶层窗口中打开链接.
图5.
70链接对象属性设置(3)也可以使用Dreamweaver中的拖拽技术来添加超链接.
直接拖拽属性面板中标靶图标,当将出现的箭头指向站点管理【文件】面板中的某个文件时,如图5.
71所示.
图5.
71拖拽技术来添加超链接注意:在建立链接的时要留意URL是采用绝对地址还是相对地址.
例如"http://www.
eoner.
biz"就是一个绝对地址.
"webs/content.
html"就是相对地址形式.
建议在绝对地址前加上"http://".
5.
5.
2同一图片上设定多个链接建立图像热点,可以在同一图片上设定多个链接.
这样网页浏览者就可以通过点击该图片上的不同位置进入不同的页面.
这种应用经常被用于建立地图导航系统.
具体效果如图5.
72所示.
·92·图5.
71地图导航系统具体操作步骤如下:(1)单击Dreamweaver【插入】工具栏中【常用】|【图像】命令.
把事先处理好的地图图片插入到【文档】窗口中.
(2)选中该图片对象,在【属性】检查器中借助热点工具建立图像热点,如图5.
73所示.
图5.
73热点工具(3)选择【矩形热点工具】,在图片对象中建立"浙江"的选区,如图5.
74所示.
图5.
74矩形热点工具(4)在【属性】检查器的【链接】文本框中输入要链接到的URL地址,例如"zj.
html".
或者单击【浏览文件】按钮定位到本地站点上的某个文件.
在【目标】下拉列表中选择【_blank】选项,如图5.
75所示.
图5.
75热点链接对象属性设置用相同的方法建立其他省份的图片热点,然后指定相应的链接地址.
就可以实现简单的地图导航系统.
第4章页面布局及制作技巧·93·5.
5.
3定制页面内跳转的链接页面内跳转链接主要是应用在浏览教长的页面中,或者是内容分类比较多的页面中.
通过一个类似目录的列表来方便地跳转到页面内任何部分.
这种形式的链接,经常被应用于一些音乐网站上.
根据字母把歌手进行了分类.
单击字母能够跳转到页面内对应的以该字母为首的歌手群.
具体效果如图5.
76所示.
图5.
76按字母分类的歌手列表具体操作步骤如下:(1)按上图所示进行布局,把页面划分为若干部分.
字母列表区用来展现所有供选择的字母.
下面又列出每一个字母区块的明细内容.
(2)选中跳转的目标文本或者图片对象,例如分块标题中的字母"A".
单击【插入】|【命名锚记】命令,在【命名锚记】对话框中的【锚记名称】文本框中输入"a",如图5.
77所示.
图5.
77【命名锚记】对话框(3)单击【确定】按钮,关闭对话框.
Dreamweaver将在【文档】窗口中插入一个锚记图标.
(4)选中字母列表中的字母"A".
在【属性】检查器的【链接】文本框中输入"#a".
"a"就是刚才所命名的锚记名称.
在【目标】下拉列表中选择【_self】选项,如图5.
78所示.
图5.
78锚记对象属性设置注意:锚记的应用可以被扩展到另一个页面.
通过这类跳转链接到页面外的锚记所标识的位置.
·94·5.
5.
4快速检查网页链接在前面章节介绍如何对网站进行测试与调试时,曾指出链接有效性测试的重要性.
一个发布站点如果出现了过多的无效链接,就不能保证整个网站的通畅,更不能提供完整的服务.
可以通过DreamweaverCS3来快速检查网页链接,具体方法如下:(1)单击【站点】|【检查站点范围的链接】命令,弹出【链接检查器】对话框,Dreamweaver将开始自动检查本地站点中的所有网页链接.
所有结果会显示在其列表框中,如图5.
79所示.
图5.
79【链接检查器】对话框(2)如若在【显示】下拉列表中选择【断掉的链接】选项.
Dreamweaver将对当前链接情况进行检查,并且将孤立文件以列表形式显示出来.
(3)双击文件列表框中出现问题的文件,就可以在Dreamweaver中对该文件进行编辑.
注意:在【显示】下拉列表中的【外部链接】选项是针对外部网站的链接地址.
对于这些链接Dreamweaver是无法对其正确性进行检查的.
5.
7DWCS3特效制作5.
7.
1扩展插件的应用借助Dreamweaver的插件管理器(ExtensionManager简称EM),对其进行扩展安装可以实现很多特殊效果.
例如可以利用CustomScrollbars这一插件来达到个性化浏览器滚动条的目的.
在安装Dreamweaver的过程中会自动安装插件管理器.
一般安装插件的具体操作步骤如下:(1)单击插件管理器【文件】|【安装扩展】命令,在弹出的【选取要安装的扩展】对话框中定位到要安装的扩展名为.
mxp的安装文件,例如ie55_scrollbar.
mxp,如图5.
93所示.
第4章页面布局及制作技巧·95·图5.
93插件管理器(2)单击【安装】按钮,会出现扩展功能免责声明.
单击【接受】按钮,开始安装.
(3)安装结束后,会出现要求重新启动Dreamweaver的警告提示,如图5.
94所示.
图5.
94重新启动的警告提示(4)单击【确定】按钮,关闭对话框.
在插件管理器中就会出现刚安装的插件的相关信息,例如版本号、类型和作者等,如图5.
95所示.
图5.
95插件相关信息按要求重新启动Dreamweaver,就可以在菜单中通过相应的命令来调用CustomScrollbars这一插件.
从而用于改变浏览器滚动条的属性,配合站点整体风格重新定义滚动条的颜色.
具体操作步骤如下:(1)单击Dreamweaver【插入】工具栏中【常用】|【IE5.
5CustomScrollbars】命令,如图5.
96所示.
图5.
96【IE5.
5CustomScrollbars】命令(2)在弹出的【IE5.
5CustomScrollbars】对话框中可以定义滚动条各个部分的颜色,如图5.
97所示.
图5.
97【IE5.
5CustomScrollbars】对话框下面就提供了所有参数的说明列表,如表4.
1所示.
·96·表4.
1IE5.
5CustomScrollbars插件参数列表参数说明Scrollbarfacecolor滚动条凸出部分的颜色Scrollbarhighlightcolor滚动条空白部分的颜色Scrollbarshadowcolor立体滚动条阴影的颜色Scrollbar3dlightcolor滚动条亮边的颜色Scrollbararrowcolor上下按钮上三角箭头的颜色Scrollbartrackcolor滚动条的背景颜色Scrollbardarkshadowcolor滚动条强阴影的颜色(3)单击【确定】按钮,关闭对话框.
DreamweaverCS3自动在页面文档中生成如下的CSS代码:BODY{SCROLLBAR-FACE-COLOR:#f892cc;SCROLLBAR-HIGHLIGHT-COLOR:#f892cc;SCROLLBAR-SHADOW-COLOR:#fd76c2;SCROLLBAR-3DLIGHT-COLOR:#fd76c2;SCROLLBAR-ARROW-COLOR:#fd76c2;SCROLLBAR-TRACK-COLOR:f629b9;SCROLLBAR-DARKSHADOW-COLOR:#e9cfe0;}5.
7.
2Behaviors功能应用Dreamweaver的行为(Behaviors)功能非常强大,可以借助可视化的操作来应用Javascript.
不必再去花费大量时间和精力去手动编程.
网页设计师只需要通过鼠标操作就能把相应的Javascript程序插入到网页中,来实现很多特殊的动态效果.
例如想在网页中通过改变文本内容来实现动态文字效果.
当鼠标触发文本时,文本内容起变化;当鼠标离开文本时,文本内容又恢复到原先的内容.
具体效果如图5.
98、4.
99所示.
图5.
98鼠标离开时文本效果图4.
99鼠标触发时文本效果具体操作步骤如下:(1)单击【插入】工具栏中【布局】|【绘制层】命令,在【文档】窗口中插入一个层.
(2)鼠标定位到该层当中,输入文本,例如"Behaviors功能应用".
(3)选中该层对象.
在【属性】检查器的【层编号】文本框中输入"txtdiv".
在【背景颜色】文本框中输入"#00CCFF",或者通过颜色选择器进行选取,如图所示.
(4)单击【窗口】|【行为】命令,弹出【行为】对话框,如图5.
100所示.
(5)单击【添加行为】|【改变属性】命令.
在【改变属性】对话框中的【对象类型】下拉列表中选择【DIV】选项.
在【命名对象】下拉列表中选择【div"txtdiv"】选项.
在【属性】选项组的【选择】下拉列表中选择【innerHTML】选项.
在【新的值】文本框中输入"文字特效实例",如图5.
101第4章页面布局及制作技巧·97·所示.
图5.
100【行为】对话框图5.
101【改变属性】对话框(6)单击【确定】按钮关闭对话框.
返回到【行为】窗口,会在其下列表框中添加一条行为事件.
在事件下拉列表中选择【onMouseOver】项,如图5.
102所示.
(7)同样重复上面的操作,再添加一个鼠标行为"onMouseOut"来控制层"txtdiv"的文本内容恢复,如图5.
103所示.
也就是在鼠标离开时,文本内容到恢复原先"Behaviors功能应用".
图5.
102添加【onMouseOver】事件图5.
103添加【onMouseOut】事件经过如上的处理,按"F12"预览生成的网页,就已经查看到文本这种动态效果.
当然也可以对这个方法进行适当的扩展,例如改变文本的颜色、大小属性,就能够实现更多的绚丽的视觉特效.
Dreamweaver自动在标签内生成如下代码:0&&parent.
frames.
length){d=parent.
frames[n.
substring(p+1)].
document;n=n.
substring(0,p);}if(!
(x=d[n])&&d.
all)x=d.
all[n];for(i=0;!
x&&iDreamweaver自动在标签内生成如下代码:Behaviors功能应用