网页中的图层

3 4图层 本节学习目标 理解图层的含义和特点掌握插入层 设置层属性的方法掌握改变层叠放顺序的方法 掌握层与表格的相互转换方法 利用层进行排版布局 本节内容 插入层设置层的属性创建嵌套层改变层的次序层和表格的转换 图层的概念 在网页中使用层可以在不影响整个网页中大部分元素的情况下处理其中一个元素 我们可以把图层想象成是一张一张叠加起来的透明胶片 每张透明胶片上都有不同的画面 可以包含文本 图像 表单和插件 甚至还可以包含其他层 改变层的顺序和属性可以改变页面的显示效果 通过对层的操作 使用它的特殊功能可以创建很多复杂的网页特效 图层是网页制作的新技术 特点是使用方便 可以使用 图层 来布局网页 比表格更灵活 在Dreamweaver中 图层可以放置在网页内任何位置 不但可以包含文本 图像 表格 插件 还可以在图层中嵌套另外的图层 图层是指一种用DIV和SPAN标记描述的HTML页面元素 在默认情况下 Dreamweaver使用DIV标记创建层 层在网页的定位中使用非常广泛 也十分方便 但用层设计的网页在不同分辨率的显示器上显示时有时会出现错位现象 不容易准确定位 因此层常作为附属工具配合表格 框架等技术来对网页进行设计 利用层精确定位网页元素 Dreamweaver可以方便地在页面上创建层 并精确地定位层 可以对层进行选择 移动 调整大小和对齐等操作 层主要有如下功能 有了层以后可以将元素置于层中 因为层可以重叠 所以就可以产生许多重叠效果 可以利用层来精确定位网页元素 它可以包含文本 图像甚至其它层 凡是HTML文件可包含的元素均可包含在层中 层还有非常特殊的功能 就是通过应用时间轴可以使其移动和变换 这样在层中放置一些图片或文本 就能够实现动画效果 层可以转换成表格 为不支持层的浏览器提供解决方法 层可以显示和隐藏 应用这一功能可以实现网页导航中的下拉菜单 在HTML中 层的描述如下所示 在Dreamweaver8中 用户可以使用2种层来定位页面 1 级联样式表 层使用DIV和SPAN确定定位页面内容的位置 CSS层的属性由全球广域网协会W3C WorldWideWebConsotium 的PositioningHTMLElementswithCascadingStyleSheets 使用级联样式表确定HTML元素的位置 定义 2 Netscape层 使用Netscape的LAYER和ILAYER确定定位页面内容的位置 Netscape层的属性由Netscape的特有层格式定义 InternetExplorer4 0和NetscapeNavigator4 0及更高版本的浏览器均支持使用DIV和SPAN标记建立的层 而Navigator还支持用LAYER和ILAYER标记建立的层 所以 最好都只用DIV和SPAN标记建立的层 从而避免浏览器的兼容问题 层的分类 3 4 1创建图层 一 在网页中插入图层在网页中插入图层的操作步骤为 将插入点置于要插入新层的位置 单击 插入 栏 布局 页中的 层 按钮 在设计页面中用鼠标拖动形成一个矩形框 即所建立的新层 按快捷键F2或者直接选择层面板 可以查看网页设计中层的情况 将插入点放置在层内 在层内插入图像 或者输入文本 也可以直接粘贴现成的文本 2 在层中插入内容 层是一种容器 可以向其中插入任何对象 具体步骤 1 将插入点置于层中 使该层处于激活状态 2 在层中输入文本或者插入图像 方法与在空白页面中的操作相同 二 设置层的属性 选择层使用层属性面板改变层的大小改变层的位置 可以通过执行以下操作之一来选定一个层 1 在 层 面板中单击该层的名称 2 单击一个层的选择柄 如果选择柄不可见 请在该层中的任意位置单击以显示该选项柄 3 单击一个层的边框 4 在一个层中按住Ctrl Shift键并单击 如果已选定多个层 此操作会取消选定其他所有层而只选择所单击的层 一 选择层 在文档窗口中选择单个层 在层面板中选择单个层 1 选择单个层 通过执行以下操作之一选择多个层 1 按住Shift键并单击 层 面板上的两个或更多个名称 2 在两个或更多个层的边框内 或边框上 按住Shift键并单击 当选定多个层时 最后选定层的大小调整柄将以黑色突出显示 其他层的大小调整柄则以白色显示 2 选择多个层 在文档窗口中选择多个层 在层面板中选择多个层 选中多个层图示 二 使用层属性面板 通过层属性面板定义属性 选定层后 其属性面板如图所示 图层属性参数 层编号 用于指定一个名称 用于识别不同的层 左和上 指定层的左上角相对于页面 如果嵌套 则为父层 左上角的位置 宽和高 指定层的宽度和高度 Z轴 确定层的z轴顺序 即堆叠顺序 编号大的层在编号小的层上面 可见性 指定该层最初是否是可见的 有4个选项 default 默认 不指定可见性属性 默认为 继承 inherit 继承 使用该层父级的可见性属性 visible 可见 显示这些层的内容 hidden 隐藏 隐藏这些层的内容 背景图像 指定层的背景图像 背景颜色 指定层的背景颜色 溢出 控制当层的内容超过层的指定大小时如何在浏览器中显示层 选择visible 可见 指示在层中显示额外的内容 即扩展层的大小使其所有内容均可见选择hidden 隐藏 指定不在浏览器中显示额外的内容 即保持层的大小裁掉所有超出层大小的内容选择scroll 滚动 指定浏览器应在层上添加滚动条 不管内容是否超过层的大小都提供滚动条 选择auto 自动 使浏览器仅在需要时才显示层的滚动条 即只有在内容超出层的大小时才出现滚动条 剪辑 定义层的可见区域 指定左侧 顶部 右侧和底边坐标可在层的坐标空间中定义一个矩形 层经过 剪辑 后 只有指定的矩形区域才是可见的 层的首选参数 相关参数 可见属性 设置新插入层的可见性 有4个选项同层的属性中可见性参数 层的尺寸 设置层的宽和高 默认的值是200和115背景颜色 默认的没有背景颜色即透明 背景图象 嵌套 一般情况下嵌套层必须使用插入或拖放的方法 而使用绘制无法建立 如果选择了该选项 只要所绘制的层与已存在的层有重叠部分 那么新建立的层就嵌套在已存在的层的内部了 Netscape4兼容性 选择该选项会自动插入一段JavaScript代码 防止出现错误 可通过执行以下操作之一来调整选定层的大小 若要通过拖动来调整大小 则拖动该层的任一大小调整柄 若要一次调整一个像素的大小 则在按箭头键时按住Ctrl键 箭头键移动层的右边框和下边框 对于此方法 不能使用上边框和左边框来调整大小 若要按网格靠齐增量来调整大小 则在按箭头键时按住Shift Ctrl键 在属性检查器中输入宽度 W 和高度 H 的值 在设计视图中选择两个或更多个层 可通过执行以下操作同时调整多个层的大小 选择 修改 对齐 设成宽度相同 或 修改 对齐 设成高度相同 命令 选定的层符合最后一个选定层 黑色突出显示 的宽度或高度 在属性检查器中的 多个层 下输入宽度和高度值 这些值将应用于所有选定层 三 改变层的大小 单击层边缘选择层 拖动层左上角突出的部分 选择层后 每按一次方向键 层在相应的方向上移动一个像素 四 改变层的位置 选定层后按住鼠标左键拖动层左上角的句柄图标 或者直接按键盘上的方向键进行移动 每按一次方向键可将选定的层沿相应的方向移动一个像素 按箭头键时按住Shift键可按当前网格靠齐增量来移动层 对齐图层 使用对齐命令显示标尺显示网格 按住Shift键 选择页面中的层 选择命令 修改 排列顺序 1 使用对齐命令 使用层的对齐命令 可以对齐两个或者多个层 在对齐多个层时将使用最后一个被选定的层作为基准 对齐层的操作步骤为 选定需要对齐的多个层 修改 菜单 对齐 从级联菜单中选择一种对齐方式 选择命令 查看 标尺 显示 2 显示标尺 选择命令 查看 网格 显示网格 3 显示网格 1 显示网格 选择命令 查看 网格 网格设置 2 设置网格 3 4 2嵌套图层 嵌套层是包含在其他层中的层 嵌套可以将若干层组织在一起 嵌套层随父层一起移动 并且可以设置为继承其父层的可见性 要创建嵌套层 只需将插入点置于已经创建的层中 单击 插入 菜单 选 层 命令即可 嵌套层如右图所示 在页面中插入一个父级层 将插入点置于父级层内 在父级层内插入新的层 2 创建嵌套层 创建嵌套层 嵌套图层的关系 嵌套图层并不意味着子图层必须在父图层里 嵌套是体现在HTML中的 嵌套图层之间存在着继承关系 继承的作用就是使子图层的可见性永远和父图层保持一致 并且保持子图层与父图层的相对位置不变 3 4 3图层的 Z轴 图层与表格相比最大的优势在于图层可以重叠 为了表示各个图层的上下位置 就要给每个图层一个序号 称为 Z轴 Z轴的取值可以为正 可以为负 也可以为0 数值大的图层在上面 改变图层 Z轴 的方法 在 层 面板中 用鼠标指向需要改变序号的图层 按下鼠标 向上或向下拖曳鼠标 层面板是一个可视化管理层的工具 选择 窗口 中的 层 或按F2键 均可打开 层 面板 如图所示 在层面板中 层以堆叠的名称列表的形式显示 先建立的层位于列表的底部 最后建立的层位于列表的上部 使用层面板可防止层重叠 改变层的可见性和堆叠顺序 层面板 层窗口的操作1 改变层堆栈顺序 眼睛睁开表示该层是可见的 眼睛闭合表示该层是不可见的 2 改变层的可见性 3 4 4使用图层建立表格 应用层排版虽然通过层定位网页元素比表格方便很多 但由于受到浏览器版本的限制不是所有的浏览器都支持层 只有IE4 0以上的版本才能支持 Dreamweaver提供了层和表格相互转换功能 可以最大程度方便网页设计 同时兼顾低版本浏览器的访问者 打开含有层的页面 选择命令 修改 转换 层到表格 如果页面中含有嵌套层 则不能使用上面的方法将层转换为表格 1 层转换为表格 打开含有表格的页面 选择命令 修改 转换 表格到层 2 表格转换为层 给出网页的页面如下 利用层布局页面版面举例 制作后的插入菜单效果如下 课后习题 一 填空题 1 层可分为 和 两类 2 网格是用作在文档窗口的设计视图中对层进行绘制 或 调整的可视化向导 1 下列哪种元素不能插入层中 A 层B 框架C 表格D 表单及各种表单对象 2 下列关于层的说法中