网页设计第7讲.ppt

网页设计三合一教程 主讲教师 第7章　网页布局、层排版和模板 主讲教师 本章要点 版式设计 layout（布局）运用 应用表格进行布局 应用层进行布局 表格与图层的相互转换 创建模板 编辑模板 应用模板 7.1　版式 常用的版式为分栏式结构，如二分栏、三分栏、四分栏。 新浪网就是一个三分栏的结构。 个人网页可以采用二分栏的结构。 三分栏版式结构 二分栏版式结构 7.2　布局 7.2.1　布局表格的绘制 7.2.2　布局单元格的绘制 7.2.3　嵌套布局表格的绘制 7.2.4　布局单元格和表格的调整 7.2.1　布局表格的绘制 7.2.2　布局单元格的绘制 7.2.3　嵌套布局表格的绘制 7.2.4　布局单元格和表格的调整 移动布局单元格 调整布局单元格的大小 移动布局表格方法类似移动布局单元格 注意：只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格。 7.3　层排版 1. 插入层 2. 选择、移动层 3. 调整层大小 4. 对齐层 1. 插入层 2. 选择、移动层 选择层的方法 直接单击层的边框选中层。 还可以通过单击一个层的选择柄来选择层。 移动层 选择层后就可以将它移动到任意的位置。 3. 调整层大小 调整单个层的大小 拖动该层的任一选择控制手柄来调整层的大小。 同时调整多个层的大小 按住Shift键，连续选择两个或更多个层，然后执行【修改】|【排列顺序】|【设成宽度相同】命令。 也可以选中这几个层后，在【属性】面板中输入【多个层】的宽度和高度值。 4. 对齐层 选择相应的层后执行对齐命令可对齐层。 执行【修改】|【排列顺序】|【左对齐】命令，所有选定层的左边框会与最后一个选定层的左边框处于同一垂直位置。 执行【修改】|【排列顺序】|【对齐上缘】命令，所有选定层的上边框会与最后一个选定层的上边框处于同一水平位置。 7.4　表格与图层 防止重叠 Dreamweaver无法将重叠层转换为表格。 层和表之间的转换 执行【修改】|【转换】|【层到表格】命令后，层被转换为表格。 同样可以把表格再转换成层，但是将表格转换为层时，空单元格不会被转换为层（除非它们具有背景颜色）。另外，位于表格外的页面元素也会放入层中。 7.5　模板 7.5.1　创建模板 7.5.2　编辑模板 7.5.3　应用模板 7.5.1　创建模板 1．打开一个已经存在的网页另存为模板 2．插入可编辑区域 1．打开一个已经存在的网页另存为模板 Templates文件夹 Dreamweaver会将模板文件自动保存在站点根目录中的Templates文件夹中，文件的扩展名是.dwt。 如果Templates文件夹在站点中还不存在，Dreamweaver会在保存新建模板时自动创建该文件夹。 将已经存在的网页另存为模板举例： 例如：将“小慧的家”的主页面另存为模板。 打开“小慧的家”的主页面，执行【文件】|【另存为模板】命令，如图7-19所示。 2．插入可编辑区域 7.5.2　编辑模板 1．删除可编辑区域 2．更改可编辑区域的名称 3．保存更改后的模板 4．设置模板区域的高亮显示首选参数 1．删除可编辑区域 方法一 选中可编辑区域后执行【修改】|【模板】|【删除模板标记】命令。 方法二 选中可编辑区域后按Delete键。 2．更改可编辑区域的名称 方法 选中可编辑区域，在【属性】面板的【名称】文本框中输入一个新名称，按Enter键使所做的修改生效。 举例（效果如下图所示） 3．保存更改后的模板 模板修改后执行【文件】|【保存】命令即可保存修改后的模板。 4．设置模板区域的高亮显示首选参数 在【首选参数】对话框中进行设置 例如：执行【编辑】|【首选参数】命令，弹出【首选参数】对话框。在左侧的【分类】列表框中选择【代码颜色】，在右侧【文档类型】列表中选择【HTML】，然后单击【编辑颜色方案】按钮，会弹出【编辑HTML的颜色方案】对话框，如下图所示。 7.5.3　应用模板 1．创建基于模板的页面 2．编辑基于模板的页面 1．创建基于模板的页面 2．编辑基于模板的页面 说明 只能在文档的可编辑区域内对该文档进行编辑。 举例 在可编辑区域内插入一个3×3的表格。 插入表格后的效果如下图所示。 * * 教师进行实际操作演示布局表格的绘制过程 * 教师演示讲解 （1）移动布局单元格。选择需要移动的单元格，可以单击该单元格的边缘，或者在按住Ctrl键的同时单击该单元格中的任何位置，选中后，则该单元格周围会出现选择控制手柄。然后将该单元格拖曳到另一个位置。 （2）调整布局单元格的大小。可以先选择单元格，然后拖动选择控制手柄来调整单元格的大小。 * 教师进行实际操作演示嵌套布局表格的绘制过程 * * * * 教师进行实际操作演示布局单元格的绘制过程 * * * 教师演示 * * 教