层布局和表单.pptVIP

上海理工大学计算机基础教研室 学习目标 层的使用 嵌入表单元素 　层的使用 本章重点：层的创建、选择、编辑、保存等操作方法，层的属性设置，层及嵌套层、层的叠放次序、层的可见性等内容。 　层的使用 1.1 制作层布局页面 1.2 层的基本操作 1.3 层的属性设置 1.4 层与表格互换 1.5 实战演练 1.1 制作层布局页面―――“环游世界” 1.1.1 实例综述 　　通过本例的学习，读者可充分体会使用层布局页面的随意性。 1.1 制作层布局页面―――“环游世界” 1.1.2 实例分析 　　不论文字还是图片都是采用层来进行定位的，因此在例中我们逐步介绍 如何在页面插入层 如何通过控制层的Z轴参数来设置层之间的重叠关系 如何精确定位层等操作方法。 1.1.3　实现步骤 　　插入层→在层中添加内容→精确定位层，控制大小→设置层之间的叠放次序。 1.2 层的基本操作 1.2.1 创建层 方法： 1、插入法 插入｜布局对象｜层 2、拖放法 拖层图标到编辑区 3、绘制法 单击层图标后，到编辑区拖动鼠标绘制。 1.2 层的基本操作 1.2.2 激活和选中层 方法： 单击层的激活标志，或层内任何地方 将光标置于该层内，然后单击div标签。 单击层边界。 在层面板中单击层。（＋shift可选择多个层）。 1.2 层的基本操作 1.2.3 删除层 方法： 当选中一个层后，按Delete键或单击【剪切】按钮，可删除该层。 也可在层面板中删除该层 1.2 层的基本操作 1.2.4　调整、移动和对齐层 1、调整层的大小 方法： 选中需要调整的层，此时在层的边框四周出现8个黑色活动块，用鼠标拖曳某个活动块，即可调整层的大小。 选中需要调整的层，在层的【属性】面板的【宽】和【高】，两个文本框中，输入层的宽度和高度和高度尺寸，可精确调整该层的尺寸。 1.2 层的基本操作 1.2.4　调整、移动和对齐层 2、移动层 前提： “防止重叠”未被勾选。 方法： 选定层，出现层激活标志，用鼠标左键拖该标志。 选定层，用键盘方向键移动层。 1.2 层的基本操作 3、 对齐层 选定多个层，对齐的标准是最后一个选择的层，该层控制点的实心点，而其他为空心点。 修改｜对齐｜对齐下缘。 1.3 层的属性设置 1.3.1 设置层的属性 层编号：层的名称。 左和上：距页面或父层的左上角相对位置 宽和高：层的宽度和高度。 Z轴：层的重叠顺序。 可见性：层的初始显示状况（可见或隐藏） Default 默认不指定可见性 Inherit ：继承，继承上一级层的该项属性,多数浏览器把本项解释为Inherit (继承) Visible :可见，显示层的内容 Hidden： 隐藏，隐藏层的内容 背景图像、背景颜色： 剪辑：定义层的可见区域，并用于将该范围外的内容裁剪掉。 1.3 层的属性设置 1.3.1 设置层的属性 溢出：确定当层中内容超出设定大小时要采取的行动。指定如果层的内容超过了它的大小将如何处理 Visible： 自动扩充层的大小以便层的所有内容都可见，层向下和向右扩大 Hidden： 保持层的大小并屏蔽掉超出层范围的任何内容不显示滚动条 Scroll：给层添加滚动条，不管内容是否超过了层的大小，特别是通过始终提供滚动条来避免在动态环境中显示和不显示滚动条导致的混乱 Auto ：在层的内容超过它的边界时自动显示滚动条 1.3 层的属性设置 1.3.2 层面板的使用 　选择【窗口】｜【其他】｜【层】命令，或按F2键，可打开【层】面板 。 选定某个层 更改层名 显示、隐藏层 改变层的叠放次序 创建和取消嵌套层 禁止层重叠 1.4 层与表格互换 1.4.1 将表格转换为层 操作步骤如下: 选中要转换为层的表格。 选择“修改”|“转换表格到层”命令，系统将打开“转换表格为层”对话框 选中合适的布局工具复选框后，单击【确定】按钮，表格就可按要求转换为层。 1.4 层与表格互换 1.4.2 层转换为表格 问题：不是所有的浏览器都支持层。 解决方法：使用层创建网页布局，然后将层转换为表格。 嵌入表单元素 　　　　重点：创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表等多种表单元素的方法，以及各种表单对象属性的设置，表单的递交方法等。 嵌入表单元素 2.1　表单页面制作 2.2 表单概述 2.3　添加表单对象 2.4　实战演练 2.1　表单页面制作－－－注册 2.1.1 案例综述 表单是一个专业网站必不可少的内容，也是一个网站是否具有交互功能的重要体