第4章 层、 行为与时间轴.ppt

层、 行为和时间轴 一 、用层进行页面布局 二、行为 三、利用时间轴制作动画效果 一 、用层进行页面布局 层是一种HTML页面元素，可以用来包含文本、图像、表格或其他任何可在HTML文档正文中放入的内容，而且层可以定位到网页上任何位置，并可以随意移动，层之间也可以前后放置、隐藏或者显示，利用动作行为，层还可以制作出动画效果，所以层的功能非常强大。 创建层有以下方式： （1）插入层：将光标移动到设计视图中想要插入层的位置，然后选择“插入”｜“布局对象”｜“层”命令。 （2）绘制层：在“布局”插入栏中单击“绘制层”按钮，然后在设计视图拖拽鼠标形成一个层。 （3）绘制多个层：使用绘制层的方法并按住Ctrl键不放，可以连续绘制多个层。 通过“层”面板可以管理文档中的层。选择“窗口”｜“层”命令就可以打开“层”面板 “层”面板分3栏，最左侧是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层，中间显示的是层的名称，最右侧是层在Z轴排列的情况。 防止重叠打钩可以避免层发生重叠，这在层转化为表格时有用 层的属性主要有以下几项： （1）层编号：指定层的名称。层的名称只能使用字母和数字。 （2）宽和高：指定层的宽度和高度。 （3）左和上：指定层的左上角相对于页面或父层（如果嵌套）左上角的位置。 （4）可见性：指定层的初始状态是否可见。Default：缺省属性，一般默认为“继承”；Inherit：继承父层的可见性属性；visible：显示层；hidden：隐藏层。 （5）溢出：指定当层的内容超过层指定的大小是应如何处理。visible：指定在层中显示额外的内容，该层会自动延伸来容纳额外的内容；Hidden：不在浏览器中显示；Scroll：滚动显示；Auto：当层的内容超出浏览器边界时，使用滚动条显示。 （6）剪辑：定义层的可见区域 层与表格的转换 层和表格都能在页面中排版布局，定位网页对象元素，例如，定位图片、文本等。但各有不同优势，也各有一些缺点。用户在网页中定位对象时可以相互转换，以发挥各自优势实现优势互补。 1．转换层到表格 （1）在层内定位好网页对象元素，然后选中所有要转换为表格的层 （Shift） （2）选择“修改”｜“转换”｜“层到表格”命令，打开“转换层为表格”对话框 “最精确”单选按钮：选择该单选按钮会严格按照层的排版布局生成表格，但表格的结构会非常复杂。一般会为每个层创建一个单元格，同时为空白区域创建任何单元格。以保证布局固定为原状态。 “最小：合并空白单元格”单选按钮：选中该单选按钮将设置如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择该选项，结果表格将包含较少的空行和空列，但可能不与页面的布局精确匹配。 “使用透明GIF”复选框：选中该复选框，会在转化的空白单元格中插入透明的GIF格式图像，包括表格的最后一行，支持表格的长度，避免表格因无内容而缩小为最小状态。这将确保该表在所有浏览器中以相同的列宽显示。当启用此选项后，不能通过拖动表列来编辑结果表。当禁用此选项后，结果表将不包含透明GIF格式图像，但在不同的浏览器中可能会具有不同的列宽。 “置于页面中央”复选框：将结果表放置在页面的中央。如果取消此复选框，表将在页面的左边缘开始。 转换表格到层 当页面布局需要进行调整，如果是表格布局，调整起来会比较困难。这时，如果先把表格布局转换为层布局，通过移动层来调整布局，即方便又快捷，最后根据情况再将层转换为表格。 转换表格到层的操作步骤如下： （1）打开要转换为层表格的网页。 （2）选择“修改”｜“转换”｜“表格到层”菜单命令，打开“转换表格到层”对话框 防止层重叠：选中该复选框可以在转换后的页面中激活防止层重叠的功能。 显示层面板：选中该复选框可以在转换后的页面中显示“层”面板。 显示网格：选中该复选框可以在转换后的页面中显示网格线。 靠齐到网格：选中该复选框可以在转换后的页面中将层与网格线对齐。 （3）在弹出的对话框中选择想要的选项。 例：插入层（“飞扬书城”）并创建可编辑区域 将光标移动到设计视图中想要插入层的位置，然后选择“插入”｜“布局对象”｜“层”命令 在层中输入“飞扬书城”，并进行相关的样式设置。 例：CSS+DIV（Web标准）布局页面 附件中有相关教程《十天学会DIV+CSS(WEB标准）》讲授布局页面的方法。 二、行为 1. 网页事件 网页中的事件（Event）是指鼠标、键盘的响应方法，Dreamweaver 8提供了许多常用的事件。 启动Dreamweaver ，单击“【窗口】→【行为】”菜单命令，系统打开“行为”面板 OnClick：当访问者在指定的元素上单击时产生。 onDblClick：当访问者在指定的元素上双击时产生。 onKey