【dreamweaver+asp】【第5章 页面布局及制作技巧】

《【dreamweaver+asp】【第5章 页面布局及制作技巧】》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章页面布局及制作技巧在开始建立Web页面前整体规划页面设计和布局，将有助于在开发过程中提高效率。通过页面的合理安排，条理清晰的框架结构，能使页面的形式美能得到更好的展现。Dreamweaver不仅是一款优秀的页面制作工具，同时还可以进行精确的页面排版和布局。其提供了一系列创建Web页面布局的方法。本章的学习重点就是掌握DreamweaverCS3所提供的这些用于页面布局的方法和技巧。5.1DreamweaverCS3中使用样式表CSS5.1.1了解DreamweaverCS3中CSS可视化显示新特性Dreamweaver

2、CS3中增强了复杂样式表信息的显示模块功能，扩展了可视化展现的特性。在以往页面布局中，复杂CSS布局作为一个难题，一直没有很好的解决方法。DreamweaverCS3所增强的CSS可视化功能，能够快速勾画出CSS布局边框或给CSS布局上色，从而实现比较复杂的嵌套布局方案。1．更为实用的CSS控制面板DreamweaverCS3中将以往众多分散的CSS面板集合成了一个面板，所有CSS功能都被整合到了一个更富有可用性的控制面板中。设计者只需在该面板中进行操作，便可以快速确认样式、编辑样式、查看应用于页面元素的样式等，就如查看段落

3、、图像和链接一样。2．更具人性化的样式工具栏DreamweaverCS3改进了CSS的选择操作，当单击CSS布局时，会显示出对应的工具提示，如ID、填充、边距、边框设置等，有助于网页设计人员更好地理解CSS布局设计的各个元素。样式呈现工具栏的使用，可以方便的为不同的媒体类型（例如，屏幕、手持设备和打印输出）进行设计。3．CSS渲染改进借助对设计视图精度方面的显著改进，使得网页设计师在复杂CSS布局中对浏览器的渲染操作更为便捷。DreamweaverCS3完全支持高级CSS技术，包括溢出、伪元素和表单元素等。这样网页设计师就可

4、以做出更高级、更复杂的页面，为浏览者提供更方便、更友善的Web界面。5.1.2自动进行“首行缩进”前面介绍了CSS可视化显示的一些新特性，接下来介绍一些简单实例。通过实例，来了解快速生成CSS样式的方法。首先介绍的是自动进行“首行缩进”的方法。所谓“首行”是指每一段内容的第一行，也就是直接按回车键所形成的新段落。网页设计师往往会遇到这么一个问题，由于在Dreamweaver中“首行缩进”没有比较方便的方法，所以以往常用连续输入几个空格的方法来达成“首行缩进”的效果。但是无论是在精确定位还是实际操作上来看，该方法效果并不好。而

5、现在可以利用CSS来设计“首行缩进”功能，很好的解决这个问题。国内的文学网站“榕树第4章页面布局及制作技巧·69·下”其文章内容页面的样式定义就采用了这种样式规则，具体效果如图5.1所示。图5.1“首行缩进”效果具体的制作步骤如下：（1）打开Dreamweaver的设计界面。在【CSS】控制面板中单击【新建CSS规则】按钮，在弹出的【新建CSS规则】属性对话框中定义类名为“textindent”的规则，定义范围选择在【仅对该文档】，然后单击【确定】按钮，如图5.2所示。（2）在【.textindent的CSS规则定义】对话框

6、中选择【区块】标签下的【文字缩进】属性定义设置项中来设置“首行缩进”功能。缩进最好以“em”（字符）为单位，例如，汉字编排要求每段首行缩进两个汉字，设置好的CSS样式，如图5.3所示。图5.2定义textindent的样式规则图5.3定义“首行缩进”的样式规则通过以上设置，DreamweaverCS3自动会在页面文档中生成如下的CSS代码：.textindent{text-indent:2em;/*定义文本段落缩进为2em*/}这样就实现了段落缩进或悬挂，同样，可以对这个方法进行变通，用来控制文字或者图片在网页上所处相对位置

7、。在标准化技术“盒模型”问题中，由于padding或者margin与width、height结合来控制内容在div所处位置时，常产生错位现象，此时可以利用上面所说的“缩进”技巧，定义text-indent属性来控制其相对位置。·70·5.1.3背景图案静止不动随着内容的增加，当网页不能在一屏显示所有内容时，往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时，一般图像和文字是一起移动的。那么有没有办法使背景图像不随其中内容一起“滚动”呢？这种特效在一些服装展示类网站上经常可以看到，用一幅大版面的人物图片作为整个

8、页面的背景，其余文字内容附着在其之上，具体效果如图5.4所示。图5.4服装展示类网站固定背景图案效果具体的制作步骤如下：（1）打开Dreamweaver的设计界面，在CSS控制面板中点选【新建CSS规则】按钮，在弹出的【新建CSS规则】属性对话框中定义类名为“fixedimgbg”的规则，