网页制作教程(第2版) 项目3 网页布局与批量制作.pptVIP

　　学习网页布局技术，可以使网页页面布局更加合理、界面更加美观；学习网页批量制作技术，可以制作出具有相同外观的网页。本项目将介绍网页布局和批量制作的基本技术，包括表格、Div+CSS、库和模板等。 （一） 预备知识──库和模板 (2) 添加模板对象 在模板中，比较常用的模板对象有可编辑区域、重复区域和重复表格。下面进行简要介绍。 ① 可编辑区域 可编辑区域是指可以对其进行添加、修改和删除网页元素等操作的区域。选择【插入】/【模板对象】/【可编辑区域】命令，弹出【新建可编辑区域】对话框，在【名称】文本框中输入可编辑区域名称，单击 按钮即可，如图所示。 （一） 预备知识──库和模板 ② 重复区域 重复区域是指可以在模板中复制任意次数的指定区域。选择【插入】/【模板对象】/【重复区域】命令，弹出【新建重复区域】对话框，在【名称】文本框中输入重复区域名称并单击 按钮，即可插入重复区域，如图所示。 （一） 预备知识──库和模板 ③ 重复表格 重复表格是指包含重复行的表格格式的可编辑区域，可以定义表格的属性并设置哪些单元格可编辑。选择【插入】/【模板对象】/【重复表格】命令，弹出【插入重复表格】对话框，并进行参数设置，然后单击 按钮，即可插入重复表格，如图所示。 （一） 预备知识──Div和CSS （一） 预备知识──Div和CSS (3) 使用【层】面板制作嵌套层 在【层】面板中选择一个层，按住Ctrl键，将其拖曳到另一个层上面，形成嵌套层。 层的嵌套和重叠不一样。嵌套的层与父层是有一定关系的，而重叠的层除视觉上会有一些联系外，其他根本没有什么关系。 5. 编辑层 在创建了层以后，许多时候要根据实际需要对其进行编辑操作，包括选择层、缩放层、移动层、对齐层、层的可见性和层的Z轴顺序等。 （一） 预备知识──Div和CSS (1) 选择层 选择层有以下几种方法。 ? 单击文档中的 图标来选定层，如图所示，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【层锚记】复选框。 ? 将光标置于层内，然后在文档窗口底边的标签条中选择相应的HTML标签，如图所示。 （一） 预备知识──Div和CSS ? 单击层的边框线，如图所示。 ? 在【层】面板中单击层的名称，如图所示。 ? 如果要选定两个以上的层，只要按住Shift键，在文档窗口中逐个单击层手柄或在【层】面板中逐个单击层的名称即可。 （一） 预备知识──Div和CSS (2) 缩放层 缩放层仅改变层的宽度和高度，不改变层中的内容。在文档窗口中可以缩放一个层，也可同时缩放多个层，使它们具有相同的尺寸。缩放单个层有以下几种方法。 ? 选定层，然后拖曳缩放手柄（层周围出现的小方块）来改变层的尺寸。拖曳上或下手柄改变层的高度，拖曳左或右手柄改变层的宽度，拖曳4个角的任意一个缩放点同时改变层的宽度和高度，如图所示。 （一） 预备知识──Div和CSS ? 选定层，然后按住Ctrl键，每按一次方向键，层就被改变一个像素值。 ? 选定层，然后同时按住Shift＋Ctrl 组合键，每按一次方向键，层就被改变10个像素值。 如果同时对多个层的大小进行统一调整，方法是，按住Shift 键，将所有的层逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有层的宽度全部变成了指定的宽度。还可以选择【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的层的宽度为标准。 （一） 预备知识──Div和CSS (3) 移动层 要想精确定位层，许多时候要根据需要移动层。移动层时，首先要确定层是可以重叠的，也就是不勾选【层】面板中的【防止重叠】复选框，这样层可以不受限制地被移动。移动层的方法主要有以下几种。 ? 选定层后，当鼠标指针靠近缩放手柄，变为 形状时，按住鼠标左键并拖曳，层将跟着鼠标的移动而发生位移。 ? 选定层，然后按4个方向键，向4个方向移动层。每按一次方向键，将使层移动1个像素值的距离。 ? 选定层，按住Shift键，然后按4个方向键，向4个方向移动层。每按一次方向键，将使层移动10个像素值的距离。 （一） 预备知识──Div和CSS (4) 对齐层 对齐功能可以使两个或两个以上的层按照某一边界对齐。对齐层的方法是，首先将所有层选定，然后选择【修改】/【排列顺序】中的相应命令（如【对齐下缘】），将使所有被选中的层的底边按照最后选定层的底边对齐，即所有层的底边都排列在一条水平线上。 (5) 层的可见性 层内可以包含所有的网页元素，通过改变层的可见性，可以控制层内元素的显示与隐藏。改变层的可见性可以通过【层】面板或【属性】面板进行。 （一） 预备知