【Dreamweaver+ASP】【第5章 页面布局及制作技巧】

第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·styletype=text/css!--.fixedimgbg{background-attachment:fixed;/*定义背景为固定*/background-image:url(bg.gif);/*定义背景的填充图案*/background-repeat:no-repeat;/*定义背景图案填充的重复方式*/background-position:50%50%;/*定义背景图案所处的位置，左右50%为居中*/}--/style经过这样的定义，在页面中就可以看到所设置的背景图片位于页面的正中间。在拉动浏览器窗口的滚动条时，图片背景仍然位于页面的正中间而不随页面内容一起滚动。当然如果你觉得图片所处页面中的位置并不满意，你也可以通过设置“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代码：styletype=text/css!--.fillinput{border-top-style:none;/*定义上部边框为无边框效果*/border-right-style:none;/*定义右侧边框为无边框效果*/border-left-style:none;/*定义左侧边框为无边框效果*/border-bottom-width:thin;/*定义底部边框为细线型*/border-bottom-style:solid;/*定义底部边框为实线效果*/border-bottom-color:#000000;/*定义底部边框颜色为黑色，颜色代码#000000*/}--/style同样，对这个方法进行扩展就可以制作出很多网站上都能看到的虚线效果。不过这种效果的实现需要IE5.5以上支持，如图5.10所示。图5.10CSS定义虚线效果只需要更改【CSS规则定义】对话框中【边框】的样式为“虚线”，【宽度】为“细”线，【颜色】为“红（FF0000）”，具体设置如图5.11所示。第4章页面布局及制作技巧·73·图5.11定义“虚线效果”的样式规则通过这样的设置，DreamweaverCS3自动在页面文档中生成如下的CSS代码：styletype=text/css!--.dotline{border:thindashed#FF0000;/*定义边框样式为细虚线型，红色颜色代码为#FF0000*/}--/style5.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插入【