《网页常见布局》由会员分享，可在线阅读，更多相关《网页常见布局（64页珍藏版）》请在金锄头文库上搜索。
1、DreamweaverCS3网页制作实训教程 第四章 网页的布局第4章 网页的布局 目录前进结束后退本章导读上机实训知识细目本章任务DreamweaverCS3网页制作实训教程 第四章 网页的布局本章导读本章主要介绍了网页的布局方法，包括表 格的创建和布局、框架的创建及应用、AP 元素的创建及属性设置、模板的创建和应 用。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局本章任务了解使用表格、框架规划网页布局的方法；掌握表格的创建、编辑等基本操作；掌握框架的创建及属性设置的方法；学会使用框架进行网页导航的方法；学会AP Div的基本操作及属性设置；学会模板的创建方
2、法；学会使用模板创建和更新网页的方法。 目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局知识细目4.1 表格的基本操作4.2 设置表格属性4.3 使用表格“布局”视图4.4 框架(集)的基本操作4.5 设置框架(集)的属性4.6 AP Div的基本操作4.7 设置AP Div的属性4.8 AP Div在排版中的应用4.9 模板的建立4.10 模板的应用目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局4.1 表格的基本操作创建表格 （1）打开“表格”对话框，如右图： 选择“插入记录表格”命令。 选择插入栏“常用”类别中的“表 格”按
3、钮。 按Ctrl+Alt+T键。 （2）设置表格的行数、列数、宽度和 边框等属性后，单击“确定”按钮，即 可创建一个表格。表格对话框“表格”对话框 行和列：设置插入表格的行数和列数。 单元格边距：指单元格内容和单元格边框之间的距离，单位为像素。 单元格间距：指相邻单元格之间的距离，单位为像素。 边框：表格边框线的宽度。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局像素：表格的宽度是一个绝对值，大小不发生变化。 百分比：表格的宽度是一个相对值，大小会随其父元素的改变而改变。表格宽度单位提示创建表格时，如果没有明确指定边框粗细、单元格间距和单元格边 距的值，则大多
4、数浏览器都按边框粗细和单元格边距为1、单元格 间距为2来显示表格。表格宽度为百分比时，最外层表格的父元素为浏览器窗口，嵌 套表格的父元素为其所在的单元格。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局选择表格元素选择整个表格标签选择器中单击选择“修改表格选择表格”命令 右单击某个单元格，选择“表格选择表格” 单击表格的外边框 光标定位表格中，按两次Ctrl+A快捷键选择行直接用鼠标拖动 单击行中的某个单元格，在标签选择器中单击 鼠标指向表格行的左边缘，指针变为“”时单 击目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局通过“列标
5、题”菜单选择列选择列直接用鼠标拖动鼠标指向列的上边缘，当鼠标指针变为“”时单 击选择列中的某个单元格，在“列标题”菜单中选择“ 选择列”命令选择单个单元格按住Ctrl键在单元格内单击 将光标定位到单元格内，单击标签选择器上的 将光标定位到单元格内，按Ctrl+A快捷键目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局选择不连续的多个单元格:按住Ctrl键单击要选择的单元格、行或 列，再次单击取消选择。选择连续单元格用鼠标从第一个单元格拖到最后一个单元格将光标定位到第一个单元格内，然后按住Shift键 单击最后一个单元格表格的基本操作鼠标指向控制柄呈双向箭头时拖动鼠
6、标，即可调整整个表格的 大小；也可用表格“属性”面板精确指定表格的宽度和高度。改变变整个表格的大小（1）调整表格的大小目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局提示当调整整个表格的大小时，表格中所有单元格将按比例更改大 小。如果表格的单元格指定了明确的宽度或高度，则调整表格 大小将更改“文档”窗口中单元格的可视大小，但不更改这些 单元格指定的宽度和高度。更改列宽度并保持整个表格的宽度不变用鼠标拖动要更改列的右边框，同时相邻列的宽度也随之 更改，但整个表格的宽度没有发生变化。 更改某个列的宽度并保持其它列的大小不变按下Shift键，用鼠标拖动要更改列的右边框
7、，相邻列的宽 度不会改变，表格的总宽度将被更改，以容纳正在调整的列。 调整行高直接用鼠标拖动行的下边框。（2）调整表格中行或列的大小目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局（3）插入单行或单列 选中行或列，右单击，在弹出的快捷菜单中选择“表格插入行 ”或“表格插入列”命令。 单击某列的“列标题”菜单，选择“左侧插入列”或“右侧插入 列”。（4）插入多行或多列选中行或列，右单击，在弹出的快捷菜单中选择“表格插入 行或列”命令，弹出“插入行或列”对话框,如下图所示。设置要 插入的行（列）数及位置，单击“确定”按钮。（5）删除行或列选中要删除的行或列，右单击在
8、弹出的快捷菜单中选择“表格 删除行”或“表格删除列”命令。“插入行或列”对话对话 框目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局（7）拆分单元格 将光标定位到要拆分的单元格中。 执行下列操作之一，打开“拆分单元格”对话框。 选择“修改表格拆分单元格”命令。 按Ctrl+Alt+S快捷键。 单击属性面板上的“拆分单元格”按钮。 设置要拆分的行数或列数，单击“确定”按钮。 （6）合并单元格 选择相邻的两个或两个以上的单元格 选择“修改表格合并单元格”命令或按Ctrl+Alt+M快捷键或 单击属性面板上的“合并单元格”按钮。 “拆分单单元格”对话对话 框目录前进结
9、束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局（8）创建嵌套表格嵌套表格是指在表格的单元格中插入新的表格。若要在表格单 元格中插入嵌套表格，只需将光标定位到该单元格中，然后再插入 表格即可。嵌套表格提示嵌套表格的宽度受所在单元格宽度的限制。 在网页表格中，表格嵌套层数不宜过多,否则会影响浏览速度。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局（9）使用“列标题”菜单当选定表格或表格中有插入点，默认情况下，DreamweaverCS3 会显示表格宽度和每个表格列的列宽，宽度旁边是表格标题菜单与 列标题菜单的箭头，使用这些菜单可以快速选择与
10、表格相关的常用 命令。当页面处于“设计”视图时，如果创建表格后没有看到表格宽 度和标题菜单箭头，可以选择“查看可视化助理表格宽度”命 令调出。提示“列标题标题 ”菜单单目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局4.2 设置表格属性表格属性的设置 单击表格外边框，选中整个表格，打开“表格”属性面板。各 选项的作用如下：“表格Id”：表格的Id，用来输入表格的名字。 “行”和“列”：用来指定表格中行、列的数目。 “宽”：以像素为单位或按百分比指定表格宽度。 “填充”：指单元格边距,即单元格内容与边框之间的距离。 “间距”：指单元格间距，即相邻单元格之间的像素数
11、。 “对齐”：用于设置表格相对于同一段落中其他元素的显示位置 ，包括“左对齐”、“右对齐”、“居中对齐”和“默认”4个选 项。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局“边框”：指定表格边框的宽度，单位为像素。 “背景图像”：设置表格的背景图像。 “背景颜色”：设置表格的背景颜色。 “清除列宽”按钮：从表格中删除所有明确指定的列宽。 “清除行高”按钮：从表格中删除所有明确指定的行高。 “将表格宽度转换成像素”按钮：将表格中每列的宽度设置为以 像素为单位的当前宽度，同时将整个表格的宽度设置为以像素为单 位的当前宽度。 “将表格宽度转换成百分比”按钮：将表格中
12、每列的宽度设置为 按百分比表示的宽度，同时将整个表格的宽度设置为按百分比表示 的宽度。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局单元格属性的设置选中单元格，打开“单元格”属性面板。各选项的作用如下：“合并单元格”按钮：将所选的单元格、行或列合并为一个单元 格。只有当所选择的区域为矩形时才可以合并这些单元格。 “拆分单元格”按钮：将一个单元格拆分成多个单元格。一次只 能拆分一个单元格，如果选择的单元格多于一个，则此按钮禁用。 “水平”和“垂直”列表框：设置单元格、行或列内容的水平对 齐方式和垂直对齐方式。目录前进结束后退DreamweaverCS3网页制作实
13、训教程 第四章 网页的布局“宽”和“高”：用来设置所选单元格的宽度和高度。“不换行”复选框：如果选中了该复选框，当单元格内的数据超过单元的宽度时，单元格会自动加宽来容纳所有数据；如果没有选中该复选框，则当单元格内的数据超过单元格的宽度时，自动换行。“标题”复选框：可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体且居中。“背景”和“背景颜色”：设置所选单元格、列或行的背景图像和背景颜色。“边框”：设置单元格的边框颜色。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局表格格式设置优先顺序 单元格表格行高低提示在使用表格布局页面时，首
14、先需要对页面中的各类元素作一个 大致的规划，事先构思好布局的草图，这样可以在创建表格时 节省大量的时间。 创建表格时，最外层表格宽度单位最好采用像素，内部嵌套表 格宽度单位采用百分比。为防止浏览过程中出现水平方向的滚 动条，通常在800*600分辨率下，把表格宽度最大设置为778像 素，在1024*768分辨率下最大设置为1002像素。 为提高浏览速度，整个网页不要放在一个表格里，表格的嵌套 层次尽量要少。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局4.3 使用表格“布局”视图表格三种视图模式 视图 模式特点标准模式表格默认的视图 模式，表格及其内容的绝大
15、部分操作适合在该模式下进行扩展表格 模式临时 向文档中的所有表格添加单元格边距和 间距，并且增加表格的边框可使编辑 操作更 加容易 布局模式主要用于绘制比较复杂的表格，可任意绘制 布局表格和布局单元格目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局表格布局模式 “布局”模式选择“查看表格模式布局模式”命令切换到“布局”模式 ， 如下图所示。绘制布局表格 在“布局”模式下，单击插入栏“布局”类别中的“绘制布局 表格”按钮，在编辑窗口中拖动鼠标绘制表格。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局“布局”模式工具栏栏绘制布局单元格
16、 单击插入栏“布局”类别中的“布局单元格”按钮，移动光标 到要绘制单元格的位置，拖动鼠标绘制“布局单元格”。 如果要连续绘制多个布局单元格，只需在绘制过程中按下Ctrl 键即可。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局选选中布局单单元格调整布局表格和布局单元格的大小 单击布局表格的边线选中布局表格，拖动布局表格的控制柄，即 可改变布局表格的大小。 将鼠标指针移到布局单元格的蓝色线条处，布局单元格的线条会 变成红色，此时单击布局单元格的线条，即可选中布局单元格，拖 动单元格的控制柄，即可改变单元格的大小。目录前进结束后退DreamweaverCS3网页制作实训教程 第四章 网页的布局提示绘制布局表格时，可以在网页的空白区域或其他布局表格内绘 制布局表格。如果页面已包含内容，则只能在现有内容的下方 绘制新的布局表格。布局表格绘制后，整个表格呈灰色显示，不能在表格内插入图 像或输入文本，要插入图像或输入文本，必
