第5讲层 - 上海财经大学.PPT

《Web应用开发》 上海财经大学信息管理与工程学院 第五讲：层 电子商务网站开发 第*页 本讲主要内容 层的创建与属性设置 利用层建立上海财经大学班级主页 层与表格的转换 第*页 5.1 层的概念 层的概念： 层是网页内容的容器，网页元素如文本、图像、动画、表格、表单等都可以放置在层中。利用层可以将这些内容灵活地布置在网页的任意位置上 例如，许多网页常用层来制作浮动广告，这些广告往往浮动在网页上方 层与表格的比较 层比表格灵活，可以放置在网页上的任何位置 一个网页上层太多的时候，则显得比较杂乱，不易管理 第*页 层的创建 层的创建方法有两种 单击“插入”面板上的“描绘层”图标，然后用鼠标在页面上拖动来绘制层。 将插入点放在文档窗口中要插入层的位置，然后单击“插入”菜单的“层”命令。 提示： 如果看不到层代码标记，可以单击“查看”菜单的“可视化助理”/“不可见元素”命令。 如果要连续绘制多个层，可以单击“插入”面板上的“描绘层”图标，按住Ctrl键并多次拖动鼠标以绘制多个层。 “描绘层”图标 第*页 层的选择 选择层几种方法： 单击层的边框； 单击层的标签； 在“层”面板中，单击层的名称； 如果要同时选择多个层，可以按住Shift键，连续单击要选择的层。 第*页 层的属性 层编号：用于指定层的名称 层的位置：左、上、宽、高 确定层的层叠顺序，编号较大的层出现在编号较小的层的前面 指定该层是否可见：inherit、visible、hidden和default 指定当层的内容超过其大小时如何在浏览器中显示层：Visible、hidden、 scroll和auto 通过指定上、下、左、右坐标，在层的坐标空间中定义一个可见矩形区域，除此之外其他区域是不可见的 第*页 设置层的默认属性 层默认属性的设置方法 单击“编辑”菜单中的“参数选择”命令，在随后出现的“参数选择”对话框的“分类”列表中选择“层”，然后就可以进行层参数的设置 “嵌套”：选中该复选框，表明在一个层中创建的层是嵌套层。 详见 第*页 层的嵌套 嵌入层与被嵌入层（父层）的概念与特点 嵌入层的层代码标记会出现在被嵌入层中 嵌入层将随被嵌入层一起移动，而且还可以继承被嵌入层的显示方式，但被嵌入层不会随嵌入层一起移动 创建嵌套层的方法 当层参数中的“嵌套”项处于选中状态时 单击“插入”面板上的“描绘层”，然后用鼠标在被嵌入层内拖动来绘制嵌入层 将插入点放在已建立好的层内，然后单击“插入”菜单的“层”命令 当层参数中的“嵌套”项未选中时 拖动一个已存在的层代码到另一个已存在的层中 利用层面板建立嵌入层：先显示层面板，然后按住Ctrl键，在层面板中将“layer2“拖至”layer1“中，这样”layer2“就变成了layer1的嵌入层了。 例如 第*页 编辑层 层的移动 在层中插入内容 更改层的名称 修改层属性中的层编号 层的显示与隐藏 可用层面板来操作 层的层叠顺序 改变Z属性的值或是在层面板中改变层的上下顺序 层的对齐 按住Shift键选中需要对齐的多个层，最后选中的层将作为对齐时的基准，该层的8个控点是黑色的。 单击“修改”/”对齐”菜单，在子菜单中有以下命令可以用来对齐：左对齐、右对齐、对齐上缘、对齐下缘。 第*页 5.2 用层进行网页布局 上海财经大学班级主页的层布局方法（实例显示） 第*页 5.3 层与表格的转换 层转换成表格 单击“修改”-转换-”层到表格”命令，选择相应的设置，再单击“确定”即可 详细设置的含义 表格转换成层 选中要转换为层的表格 单“修改”菜单的转换/表格到层命令 单击确定，即可将表格转换为层 结束 第*页 用层实现的浮动广告 返回 第*页 返回 第*页 返回 被嵌入层 嵌入层 第*页 返回 当层与层之间的缝隙小于4时被忽略不计 《Web应用开发》