第九章 网页中的层.pptVIP

第2章 Dreamweaver基础 第9章 网页中的层 第9章 网页中的层 层的基本概念 在网页中插入层 层的参数设置和属性面板 层的编辑 层与表格 9.1 层的基本概念 层的优势 (1)提供了精确的定位技术 (2)在网页布局上为设计者增加了自由空间 9.1 层的基本概念 对应的HTML代码： style type=text/css !-- #Layer1 { position:absolute; width:200px; height:115px; z-index:1; left: 172px; top: 63px; } -- /style 9.2 在网页中插入层 创建新的层 方法一：插入|布局对象|层 方法二： 9.2 在网页中插入层 层编辑器 启动方法：1)窗口|层 2) F2键 层编辑器 9.2 在网页中插入层 创建嵌套层 当一个层嵌套在另一个层内部时，在内 部的层就称为子层，而外部的层就是它的父 层。 9.2 在网页中插入层 创建嵌套层 方法一：先在页面内创建一个新层，然后把 插入点放在该层的内部，选择“插入|布局对 象|层”命令，则在现有层中创建一个嵌套的 子层。(方法二和方法三见课本P115) 9.3 层的参数设置和属性面板 层的参数设置(编辑|首选参数，见课本P116页) 9.3 层的参数设置和属性面板 层的属性面板(窗口|属性，见课本P117页) 层的溢出属性 作用：用来设定当层中的内容超过它本身大小 时将产生的后果。 (1)Visible(可见)：根据超出层本身的范围增 加层的大小，向右和向下拓展，以便能够将所 有溢出部分可见 层的溢出属性 (2)Hidden(隐藏)：保持层本身的大小不变，对 溢出部分进行裁剪。 (3)Scroll(滚动)：无论层中的内容是否溢出， 都在层右和下方添加滚动条。 (4)Auto(自动):自动判断层中的内容是否超出 范围，超出则添加滚动条，否则不添加。 层的剪辑属性 用来定义层的可见区域。指定左侧、顶部、 右侧和底部坐标，从而在层的坐标空间中定义 一个矩形。经过剪辑的层，只有在指定区域内 才是可见的。 层的剪辑属性 9.4 层的编辑 层的选择 层的移动 添加内容到层 调整层的大小 层的对齐 (1)层的选择 选择层的方法见课本P118 注意：被选中的层边框部分会以蓝色 高度显示，同时出现8个控制点，通过 拖动它们可以改变层的大小。 (2)层的移动 移动层的方法见课本P119 注意：一旦在层编辑器面板中选择了 “防止重叠”选项，则层移动时无法到 达其他层已经覆盖的位置。 (3)添加内容到层 添加内容到层的操作过程见课本P119 注意：当添加的内容超过了层本身大小时 (也就是前面提到的溢出情况)，需要对层的 溢出属性进行设置。 (4)调整层的大小 调整层大小的方法见课本P119-P120 同时调整多个层的大小：选择要同时改变大 小的多个层，然后选择“修改|排列顺序”命 令，选择自己所需的选项。 同时调整多个层的大小 (5) 层的对齐 操作方法：首先选择想要对齐的多个层，然 后打开“修改|排列顺序”命令，在其中选择 相应的选项。 层的对齐-对齐上缘 9.5 层与表格 防止层重叠 只有在页面中所有层之间均未出现重 叠时，才可以转换为表格。要保证层之间 不发生重叠，最好还是在层编辑器面板设 置层“防止重叠”复选项。 9.5 层与表格 层与表格的相互转换 (1)层转换为表格(修改|转换|层到表格) 9.5 层与表格 层与表格的相互转换 (2)表格转换为层(修改|转换|表格到层) 方法二：在页面内创建一个新层，然后从插入面板组“布局”面板中直接把绘制层按钮拖动到现有层的内部，可以创建现有层的嵌套子层。 方法三：在页面内创建两个层，然后打开层编辑器面板，按住Ctrl键的同时，把层编辑器面板中的其中一个层的名称拖动到另一个层的上面，则可以实现 把被拖到层创建成另一个层的子层。 首 页 目 录 上一页 下一页 返 回 退 出 【知识目标】、【能力目标】 了解层的基本概念 掌握在网页中创建层及编辑层的基本操作 　 body div id=Layer1 img src=照片1.jpg width=300 height=200 / /div /body 按住Ctrl键，可以一次在文档窗口中绘制多个层。 层编辑器的作用：可以改变层的名称、可见 性和叠加顺序，同时可以防止层重叠。 Z列：输入一个比当前数字大 的数会把层的叠放顺序向上 层移;输入一个较小的数，则 下移。即Z列的数字越大， 该层离我们越近(越在上层) 防止重叠：一旦选中该项，则所有层在网页中不能叠加显示。 原始状态 对齐状态 style t