教案《网页设计与制作项目教程》4.doc

PAGE 14 X X X X职业技术学院 教 案 第 4周 第 1 次课 授课时间 授课题目 层的应用（2/2） 授课方式 理论课（ √ ）；实践课（　 ）；实习（　 ） 教学时数 2学时 教学目的 教学要求 学会在网页中运用层实现布局及网页效果的制作技巧。 教学重点 教学难点 1.理解层概念 2.创建并应用层 3.灵活运用层的高级属性 教学方法 教学手段 教学方法：本课程属于理论与实践结合的专业课程，主要采用任务驱动式、项目任务式、案例分析式、实操等教学方法。 教学手段：多媒体网络教学或投影演示，师生互动。 教学内容 时间分配 教学进程 1.导入新课： 层的嵌套和与行为结合可进行更高级的操作。 2.讲授新课： 8．层的嵌套 在网页中可以通过创建父层和子层来实现具有嵌套关系的层。通常将位于层内部的层称为嵌套层或子层，而将在嵌套层外部的层，称为父层。父层还可以有父层，可根据需要嵌套多个层。 从代码视图上看，嵌套层就是其代码包含在另一个层的代码内。 利用层的嵌套，可以把不同的层组合在一起。嵌套层随父层一起移动，并且可以继承父层的可见性。子层可以浮动于父层之外的任何位置，子层的大小也可以大于父层。例如，可以在一个父层中放置背景图像，然后在子层中包含带有透明背景的文本。 其中有5个层，层1、2、3没有嵌套，层4和层5是嵌套层。层5就是层4的子层，层4就是5的父层，嵌套关系可以通过层面板来体现 创建嵌套层的具体操作如下。 （1）将光标放置于要作为父层的层中； （2）选择“插入”→“布局对象”→“AP Div（层）”。或者，在现有层的内部直接拖动绘制子层，一个新层就出现在父层中了。 在层面板中，嵌套层的父层左侧有个符号“▼”，单击该符号可展开或闭合嵌套的子层。如前面图4-16所示层面板中的apDiv4层和ApDiv5层。 （3）若要逐级添加，只需要将光标定位到要添加子层的层中，按创建嵌套层的方法添加即可。 4.3 灵活运用层的高级属性 1．将多个层对齐到相同位置 在设计网页时常需要将某些层在按照一定的规定对齐，层的对齐是对层精确定位属性的重要体现。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，所有子层的位置都会随父层进行相应移动，并始终与父层保持相对的固定位置。 对齐层的具体操作如下： 首先选择要对齐的所有层；然后选择“修改”菜单中的“排列顺序”菜单项下的对齐方式即可。对齐方式有“左对齐、右对齐、上对齐、或对齐下缘” 2．确定层的层叠顺序 在网页设计中，会应用到多个层，多个层之间就会出现重叠。在层面板中可以对层的重叠进行设置。 在层面板上方，有一个“防止重叠”的选项，一旦选中该项，则所有层在网页中不能叠加显示。如果要创建嵌套层必须取消该复选框的选择。 （1）使用属性面板和层面板 选择要改变顺序的层，在属性面板和层面板中，改变“Z轴”选项的值，就可以修改层的叠放次序，即Z列的数字越大，该层离我们越近(越在上层)。 （2）使用菜单 使用“修改”菜单中的“排列顺序”菜单项中的“移到最上层”或“移到最下层”命令可以改变层的层叠顺序。 3．掌握层的显示／隐藏属性 当处理页面时，可以使用层面板手动显示和隐藏层，以查看层在不同条件下的显示方式。当前选择的层总是可见的，它在被选择时会出现在其他层的前面。 更改层的可见性具体操作是：在层面板中选择操作的层，单击列表中第一栏的眼睛图标，可以在显示和隐藏状态中进行切换。 4．为层添加滚动条 在层的属性面板中有一个选项是溢出，如前面图4-11所示。该选项用来设定当层中的内容超过它本身大小时将产生的后果，其中Scroll(滚动) 参数项是用来添加滚动条的选项，无论层中的内容溢出与否，都在层右和下方添加滚动条；Auto(自动)选项可自动判断层中的内容是否超出范围，超出则添加滚动条，否则不添加。注意：滚动条是在网页预览时才可以看到。 5．将层转换为表格 层和表格都是网页布局的工具，但是层适用较高版本的浏览器。而表格却对浏览器版本的高低没有限制，因此，为了保证能在低版本的浏览器上浏览本网页，可以先利用层灵活地放置网页中的内容，或使用层设计页面布局，然后再将层转换为表格形式。 如果确信都访问者大都使用了较高版本的浏览器，则大可不必像前面那样做了，甚至还可以将用表格设计的网页转换为用层设计的网页，使网页更加专业化。 但值得注意的是，位于模板文件和应用模板文件设计的页面中层和表格不能转换，有嵌套的层也不能转换。 在网页布局中要将层布局转化为表格布局，可选择菜单中的“修改”→“转换”→“将层转换为表格”，再进行表格具体选项的设置 各选项含义如下： “最精确”选项：层在转换时将以最精确的方式生成表格。每个层都会转换为一个单元格，且层之间的空隙也自动转换为