第7章 DIV元素.ppt

《网页制作基础教程（Dreamweaver CS4）》电子教案 第7章　 Div元素 本章重点： 什么DIV元素 DIV元素的创建、编辑、保存等操作 AP元素的属性设置 第7章　 Div元素 7.1 应用AP元素布局页面 7.2 AP元素的创建与编辑 7.3 AP元素面板的使用 7.4 AP元素与表格互换 7.5 时间轴概述 7.1 应用AP元素布局页面―――“环游世界” 7.1.1 实例综述 Div是一种网页内容的容器，包含文本、图像或其他任何可以在HTML文档正文中放入的内容。 可以定位在页面上的任意位置，可实现对Div中文档内容的精确定位，还可以在一个Div中插入另一个Div，实现Div的嵌套 7.1 应用AP元素布局页面―――“环游世界” 7.1.1 实例综述 DIV元素包括：Div标签和AP Div标签， 插入DIV是在当前位置插入固定层 绘制AP DIV是在当前位置插入可移动层，也就是说这个层是浮动的。 7.1 应用AP元素布局页面―――“环游世界” 7.1.1 实例综述 本例不仅采用AP Div进行页面布局，实现图片重叠的效果，本例效果如图所示。 7.1 应用AP元素布局页面―――“环游世界” 7.1.2 实例分析 　　本例中不论文字还是图片都是采用AP元素来进行定位的，这里将逐步介绍： 如何在页面插入AP元素 如何通过控制AP元素的Z轴参数来设置AP元素之间的重叠关系 如何精确定位AP元素等操作方法。 7.1 应用AP元素布局页面―――“环游世界” 7.1.3　实现步骤 1、创建站点及首页 2、打开首页，创建AP DIV元素 3、在DIV中插入图片及文字 4、设置Z轴值。 7.1 应用AP元素布局页面―――“环游世界” 7.1.3　实现步骤 7.1 应用AP元素布局页面―――“环游世界” 7.1.3　实现步骤 3、制作小鸟飞翔动画 7.2 DIV标签的使用 7.2.1 插入DIV标签 7.2.2 用DIV+CSS实现页面布局 7.2 DIV标签的使用 7.2.1 插入DIV标签 步骤： ① 在“文档”窗口中，将插入点放置在要显示 div 标签的位置。 ② 选择“插入”|“布局对象”|“Div 标签”；或在“插入”工具栏的“布局”类别中，单击“插入 Div 标签”按钮 。 ③在弹出“插入 Div 标签”对话框中，设置以下选项： 7.2 DIV标签的使用 7.2.1 插入DIV标签 步骤： ③在弹出“插入 Div 标签”对话框中，设置以下选项： 插入：选择 div 标签的位置（位于插入点、标签的前后或标签起点的前后）和标签名称。 类：显示了当前应用于标签的类样式。如果附加了样式表，则该样式表中定义的类将出现在列表中。 ID：可更改用于标识 div 标签的名称。 7.2 DIV标签的使用 7.2.2 创建AP元素 方法： 1、插入法 插入｜布局对象｜AP元素 2、拖放法 拖AP元素图标到编辑区 3、绘制法 单击AP元素图标后，到编辑区拖动鼠标绘制。 7.2 DIV标签的使用 7.2.3 创建多个AP元素及AP元素的嵌套 方法： 1、连续创建多个AP元素 “插入”面板|“布局” |“绘制apDiv”按钮，按下Shift键，在文档窗口中可以连续绘制多个AP元素。 2、创建嵌套的AP元素 在AP元素中再插入AP元素称为AP元素的嵌套,嵌套AP元素可称为子AP元素，包含嵌套AP元素的那个AP元素称为父AP元素。 将光标插入到已建好的AP元素中，然后前面所说的插入法或拖入法继续插入新一个AP元素，即可在已建的AP元素中插入一个嵌套AP元素。 7.3 AP元素的编辑 7.3.1 AP元素属性设置 AP元素编号：AP元素的名称。 左和上：距页面或父AP元素的左上角相对位置 宽和高：AP元素的宽度和高度。 Z轴：AP元素的重叠顺序。 可见性：AP元素的初始显示状况（可见或隐藏） 背景图像、背景颜色： 溢出：确定当AP元素中内容超出设定大小时要采取的行动。 剪辑：定义AP元素的可见区域，并用于将该范围外的内容裁剪掉。 7.3 AP元素的编辑 7.3.2　AP元素的编辑 激活和选中AP Div 调整AP元素的大小 移动AP元素 对齐AP元素 删除AP元素 7.3 AP元素的编辑 7.3.2　AP元素的编辑 激活和选中AP Div 选择AP Div的方法有多种，方法如下。 单击AP Div左上角的选择柄，可选中该AP Div。 将光标置于AP Div中，然后在编辑窗口左下角标签选择器中选择div标签。 单击AP Div的边框，也可选中AP Div。 在“AP 元素”面板中，单击