DWCS3网页布局与优化.ppt

第7章 网页布局 当遨游Internet时，一幅幅漂亮的网页令人流连忘返，网页的精彩和色彩的搭配、文字的变化、图片的处理等关系密切，除此之外，还有一个非常重要的因素——网页的布局。 本章介绍用Dreamweaver进行网页布局的方法和技巧，主要内容有： 使用布局模式进行布局 利用层进行布局 利用表格＋CSS进行布局 利用DIV＋CSS进行布局 7.1 使用布局模式 前面学习了利用表格布局页面的方法，利用表格直接布局网页元素灵活性不强，比如无法精确定位网页内容，对网页版面进行调整时，也不很方便。为了提高表格布局的灵活性，Dreamweaver提供了布局模式，在布局模式下，可以使用表格作为基础结构来设计网页，同时也使网页布局更加高效。 7.1.1 在布局模式下绘制表格 1．切换布局模式 在【插入】工具栏上选择【布局】类别。在右边的工具栏上单击【布局】按钮，弹出一个【从布局模式开始】对话框。按【确定】按钮即进入“布局模式”中。 2．绘制布局表格 在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。 3．绘制布局单元格 在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。鼠标移到布局表格上或者网页内容下边的空白处时指针变为加号“+”。拖动鼠标绘制一个布局单元格。 4．绘制嵌套布局表格 绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表格中。对外部表格所进行的更改不会影响嵌套表格中的单元格。 7.1.2 设置布局表格 布局表格是使用布局模式的基础，进入布局模式首先要做的就是要插入一个布局表格，然后设置尺寸、背景等属性，另外布局表格还有个特有的属性——“自动伸展”也需要进行设置。 1．设置布局表格的大小 2．设置布局表格自动伸展 7.1.3 设置布局单元格 在布局模式中，光有布局表格是不够的，布局表格内部不能直接插入页面内容，必须先添加布局单元格，然后再在布局单元格内部插入页面内容。本小节讲解布局单元格的设置。 1．设置布局单元格的位置 2．设置布局单元格内容的格式 3．为布局单元格添加间隔图像 7.1.4 课堂实例――用布局表格布局网站主页 要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 1．绘制网页顶部布局 2．布局网页主体部分布局 3．绘制网页底部布局 7.2 应用层布局网页 层（Layer）是一种 HTML 页面元素，它的功能强大，可以创建复杂的页面布局。层提供了一种在网页上比较自由地进行布局和设计的途径，在进行页面布局时，可以任意调整层的大小、背景、叠放顺序等，如同在绘图软件中作图一样方便。 7.2.1 制作层 在Dreamweaver的“标准”模式下，利用“布局”工具栏上的“绘制层”按钮可以绘制层。 1．插入层 2．为层添加内容 3．层的可见性 4．层的重叠 7.2.2 层属性详解 1．单个层的层属性 2．多个层的层属性 7.2.3 嵌套层 嵌套层是指在层内部的子层，当移动层的时候，其内部的嵌套层也会随之移动。制作嵌套层有两种方式，一种是在层内部新建嵌套层，另外一种是将已经存在的层添加为另外一个层的嵌套层。 1．添加嵌套层 2．设置层之间的嵌套关系 7.2.4 层HTML代码 当在网页文档中创建层时，Dreamweaver 将在代码视图中自动插入该层对应的HTML代码。当在 Dreamweaver 中使用工具栏上的【绘制层】按钮 绘制一个层时，在设计视图中，该层会显示在绘制它的当前位置；但在代码视图中，Dreamweaver将在页开头且紧接在body标签之后插入该层的代码，如图所示。 层CSS样式 层标签 图7-57　用绘制层的方法时层HTML代码的位置 7.2.5使用辅助工具精确定位网页元素 当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，Dreamweaver 8提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。 1．垂直辅助线 2．水平辅助线 3．缩放和选取工具 7.2.6 表格和层的相互转换 层的主要特点是操作比较灵活，比如可以通过拖动任意设置层在页面中的位置，而表格的主要优势是比较整洁，布局清晰。早期版本的浏览器无法显示层，但能够显示表格。为了灵活应用表格和层这两种页面布局手段，Dreamweaver 8提供了层和表格之间相互转换的方法。 1．将层转换成表格 2．将表格转换成层 7.3 课堂实例――用层布局网站