3章网页的排版和布局.ppt
文本预览下载声明
第3章 网页的排版和布局 本章学习目标 通过学习表格、框架和层等方面的知识,掌握网页的排版和布局。表格通常用于以行列形式来组织文字、图像、数字等数据,方便用户浏览。为了简化使用表格进行页面布局的过程,Macromedia Dreamweaver MX 2004还提供了“布局”模式。在“布局”模式中,可以使用布局表格和布局单元格来设计网页。框架和层也是网页布局的工具。 3.1 页面布局概述 所谓“网页布局”,就是给将要出现在网页中的所有元素进行定位。 网页的具体布局还与网页内容、网页风格、网页大小等因素有关。 3.2 表格的应用 3.2.1 标准模式、扩展模式和布局模式 “标准模式”是基本按浏览器预览结果来显示网页 “扩展模式”下,表格被强制以双线形式显示,方便了对表格的操作 “布局模式”中,可以在添加内容前使用布局单元格和表格来对页面进行布局 3.2 表格的应用 3.2.2 新建表格 1.插入表格(新建表格) 2.插入嵌入表格,即在一个已有的单元格中再插入另外一个表格 (1)如果一个单元格中的元素(如文字、数字、图像等)比较多,为了很好安排这些元素位置,可以在该单元格中再插入一个单元格。 (2)把表格用于网页布局的情况下,每个单元格都有可能安排多个元素,使用嵌入表格能使得这些元素排列整齐。 3.2 表格的应用 3)把表格用于网页布局的情况下,在一个单元格需要用表格来组织数据。 3.导入表格式数据 注意:当导出表格时,将导出整个表格,不能选择导出部分表格。 4.表格的HTML语言表达 表格的标签:table 表格行:tr 表格列:td 3.2 表格的应用 3.2.3 表格结构的修改 1.选择表格元素 (1)在首选参数中更改高亮颜色 (2)选取表格 (3)选择行或列 (4)选择单元格 2.添加表格的行或列 3.删除表格的行或列 4.拆分和合并单元格 3.2 表格的应用 5.复制和粘贴单元格 (1)选择要粘贴单元格的位置 (2)选择“编辑”/“粘贴” 3.2.4 设置表格属性 3.2 表格的应用 3.2.5 设置单元格、行和列属性 水平 垂直 宽和高 背景 背景颜色 边框 合并单元格按钮 拆分单元格按钮 不换行按钮 标题 3.2 表格的应用 3.2.6 表格用于布局 3.3 布局表格的应用 3.3.1 绘制布局表格和布局单元格 1.绘制布局表格 ① 把表格视图切换到“布局”模式中 ② 在“插入”栏的“布局”类别中,单击“绘制布局表格”按钮,或单击“插入”/“布局对象”/“布局表格” 2.绘制布局单元格 ① 把表格视图切换到“布局”模式中 ② 在“插入”栏的“布局”类别中,单击“绘制布局单元格”按钮,或单击“插入”/“布局对象”/“布局单元格” 3.3 布局表格的应用 3.布局单元格与布局表格的区别 布局表格仅仅用于对网页进行布局,布局表格只是布局单元格的容器 网页的内容是添加在布局单元格中 4.将内容添加到布局单元格中 将文本添加到布局单元格 将图像添加到布局单元格中 3.3.2 使用辅助设计手段 1.显示标尺 2.显示和编辑网格 3.跟踪图像 3.3 布局表格的应用 所谓“跟踪图像”是在设计网页之前Dreamweaver导入的草图。它的作用就相当于红本上的文字。设计者可以根据草图的设计进行布局,如下图所示。 3.3 布局表格的应用 跟踪图像与背景图像的区别 : 在 Dreamweaver中只显示跟踪图像,页面的实际背景图像和颜色在“文档”窗口中是不可见的 ; 在浏览器中查看页面时,背景图像和颜色是可见的,跟踪图像不会被用户下载,所以是不可见的。 3.3.3 调整布局表格和布局单元格 1.调整和移动布局单元格 (1)调整布局单元格的大小以及移动它们 (2)若要移动布局单元格,可执行以下操作: 2.调整和移动布局表格 3.3 布局表格的应用 3.3.4 设置布局单元格和表格的格式 (1)设置布局单元格属性 3.3 布局表格的应用 (2)设置布局表格属性 3.3 布局表格的应用 3.3.5 设置列宽 (1)列自动伸展 (2)将某个列设置为固定宽度 (3)列自动伸展的应用 3.4 建立框架网页 框架集结构图 3.4 建立框架网页 3.4.1 使用框架的优、缺点 优点: (1)访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 (2)每个框架都具有自己的滚动条(如果内容太大,在窗口中显示不下),因此访问者可以独立滚动这些框架。 (3)各个页面之间的逻辑关系可以很好的表示出来。 缺点: (1)可能难以实现不同框架中各元素的精确图形对齐。 (2)有些浏览器可能不支持框架。 3.4 建立框架网页 3.4.2 创建框架和框架集 1.选择预定义
显示全部