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