网页设计模块六 层时间轴框架.ppt

模块五使用层\时间轴和框架 任务一 初识并使用层 任务二 使用时间轴 任务三 框架使用 学材小结 任务一 初识并使用层? 子任务1 创建层 层（Div）是一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层的位置比较随意可以放到网页的任意位置 创建层可以使用以下3种方法中的任何一种： 执行【插入记录】→【布局对象】→【AP div】命令 单击【插入】工具栏的“布局”面板上的【绘制层】按钮，如图6-3所示。鼠标左键按住此按钮把层按钮拖到文档窗口里。如图6-6所示。 单击【插入】工具栏的“布局”面板上的【绘制层】按钮，如图6-3所示。在文档窗口中拖动鼠标绘制一个层。 任务一 初识并使用层? 在Dreamweaver CS3 中可以在网页中随意插入层，但是插入层后通常还不能完全达到设计者的要求，还需要对其进行修改调整、移动、对齐、隐藏等操作。 层的基本操作： 选择层 调整层的大小 移动层 对齐层 在层中插入文本内容或者图像 嵌套层 子任务2 层的基本操作 任务一 初识并使用层? 层的基本操作： 选择层的四种方法： 1、 将光标移动到需要选择的层边框上，当光标指针变成“十字双向箭头”光标时，单击鼠标左键即可选中该层。如图6-7所示。 2、直接单击层的内部，当出现显示层的选择柄图标时，如图6-8所示。接下来单击文档窗口左下角状态栏里的“div#layer1”层标签，也可选择层。如图6-9所示。 3、 直接单击文档窗口中的层标记符 ，即可选中该层，如图6-10所示 4、在“层”面板中选择层的名称，即可选择层。“层”面板如图6-12所示。选择多层时，可按住Shift键，点选要选择的层的名称即可。 子任务2 层的基本操作 任务一 初识并使用层? 层的基本操作： 选择层的四种方法： 1、 将光标移动到需要选择的层边框上，当光标指针变成“十字双向箭头”光标时，单击鼠标左键即可选中该层。如图6-7所示。 2、直接单击层的内部，当出现显示层的选择柄图标时，如图6-8所示。接下来单击文档窗口左下角状态栏里的“div#layer1”层标签，也可选择层。如图6-9所示。 3、 直接单击文档窗口中的层标记符 ，即可选中该层，如图6-10所示 4、在“层”面板中选择层的名称，即可选择层。“层”面板如图6-12所示。选择多层时，可按住Shift键，点选要选择的层的名称即可。 子任务2 层的基本操作 任务一 初识并使用层? 层的基本操作： 调整层的大小 移动层 对齐层 在层中插入文本内容或者图像 嵌套层 子任务2 层的基本操作 任务一 初识并使用层? 在层“属性”面板中，查看和设置层的属性，只要选择一个层，执行【窗口】→【属性】命令，就会打开如图6-19所示的“属性”面板， 子任务3 设置层属性 任务一 初识并使用层? 层“属性” 层编号：在其右边的下拉列表中，可以指定一个名称来标识层，在文本框中可以输入层名。层名只能使用英文字母和数字，不能使用特殊字符。 左和上：在文本框中输入相应数值使得层进行位置定位，指定层相对与页面或者嵌套的父层左上角的位置，左指定距左边的像素数，上指定距顶边的像素数。 宽和高：在文本框中，设置层的宽度和高度。 Z轴：指定层的堆叠顺序号。标号较大的层出现在标号较小的层上面。 可见性：在其右边的下拉列表中设置层的4种显示模式。Default表示默认值，即不指定层的可见性属性、inherit表示继承，当对嵌套层应用时，将使用父级层的可见性属性、visible表示可见，无条件显示、hidden表示隐藏，绝对隐藏层以及层中的内容 溢出：仅适用于CSS层，指定如果层中的内容超过了层的大小，将发生的事件。此处有4种选择模式。Visible 表示可见，增加层的大小，以便层里的所有内容都可见，层自动向下和向右扩大。Hidden表示隐藏，保持层的大小不变，裁剪掉与层大小不符的任何内容。Scroll表示滚动，不管内容是否超出层的大小，为层添加滚动条。Auto表示自动，在层的内容超过层的大小时自动显示滚动条，否则不显示滚动条。 背景颜色：指定层的背景颜色。 背景图像：为该层指定背景图像。 剪辑： 左右上下：定义层的可见区即设置层的边距，分别通过左右上下属性值来设置。 类：表示对层应用CSS样式。 子任务3 设置层属性（层可见案例） 任务一 初识并使用层? 我们在设计网页布局时，可以先用层来设计页面，然后使用“层到表格”功能，把层转化为表格。同样也可以通过“表格到层”功能把表格转化为层。选择菜单【修改】→【转换】→【层到表格】命令，会弹出“转换层为表格”的对话框，如图6-33所示。 子任务3 转化表格和层 图6-33 “转换层为表格”对