第7章 使用AP Div元素.ppt

第7章 使用AP Div元素 7.1学习任务：AP Div元素 7.2 案例1 使用AP Div元素布局网页 7.3 学习任务：AP Div与表格相互转换 7.4 学习任务：AP Div标签 7.5 学习任务：使用Div标签 7.6 实训——用DIV+CSS制作企业网站主页 7.1学习任务：AP Div元素 7.1.1 AP Div概述 7.1.2 创建AP Div元素 7.1.3 设置AP Div元素的属性 7.1.4 AP元素面板 7.1.5 AP Div元素的基本操作 7.1.1 AP Div概述 AP Div是指存放用DIV标记描述的HTML内容的容器，用来控制浏览器窗口中元素的位置、层次。AP Div最主要的特性就是它是浮动在网页内容之上的，也就是说，可以在网页上任意改变其位置，实现对AP Div的准确定位。 在Dreamweaver CS4环境下，可以利用AP Div灵活方便的进行页面布局。层作为网页的容器元素，不仅可在其中放置图像，还可以放置文字、表单、插件等网页元素。把页面元素放在AP Div中，可以控制AP Div堆叠次序、显示或隐藏等性质。将AP Div元素和时间轴相结合，可以在网页中轻松创建动画效果。 ?提示：在Dreamweaver中，通常创建层叠样式表AP Div。层叠样式表的特点是使用div和span标签定位页面内容，通过CSS样式表设置AP Div的属性。具体方法将在第7章中详细介绍。 7.1.2 创建AP Div元素 创建AP Div元素有以下几种方法： 使用主菜单插入AP Div元素。将光标置于文档窗口中要插入AP Div的位置，选择“插入→布局对象→AP Div”命令，在插入点的位置插入一个AP Div元素。 绘制AP Div元素。在“插入”面板中选择“布局”标签，点击后，在文档窗口要插入AP Div的位置按下鼠标左按钮拖曳出一个AP Div元素。 直接拖曳“绘制AP Div”按钮到文档窗口中插入AP Div元素。在“插入”面板的“布局”标签中，按下“绘制AP Div”按钮不放，将其拖曳到文档窗口中即可创建一个AP Div元素。 ?提示：在“插入”面板中选择“布局”标签，点击后，在文档窗口中，按住〈Ctrl〉键的同时按住鼠标左键拖曳鼠标，可以绘制多个AP Div元素。 在默认情况下，每当用户创建一个新的AP Div，都会使用DIV标志它，并将标记 显示到网页左上角的位置。创建的AP Div元素如图7-1所示。 若要在网页左上角显示出AP Div标记，首先选择“查看→可视化助理→不可见元素”命令，使“不可见元素”命令呈被选择状态，然后再选择“编辑→首选参数”命令，弹出“首选参数”对话框，选择“分类”选项框中的“不可见元素”选项，选择右侧的“AP元素的锚点”复选框，如图7-2所示，单击【确定】按钮完成设置。 7.1.3 设置AP Div元素的属性 要正确地运用AP Div元素来设计网页，必须了解AP Div元素的属性和设置方法。设置AP Div元素的属性之前，必须选中AP Div元素。 选中AP Div元素的方法一般有以下几种： 在文档窗口中，单击要选择的AP Div元素左上角的AP Div元素标记。 在AP Div元素的任意位置单击，激活AP Div元素，再单击AP Div左上角的矩形框标记。 单击AP Div元素的边框。 在AP Div元素未被选中或激活情况下，按住〈Shift〉键的同时再单击AP Div元素中的任意位置。 在“AP Div元素”面板中，直接单击AP Div元素的名称。 选中AP Div元素后，其对应的“属性”面板如图7-3所示。 AP Div“属性”面板中各项含义： CSS-P元素：为选中的AP Div元素设置名称。名称由数字或字母组成，不能用特殊字符。每个AP Div元素的名称是唯一的。 左、上：分别设置AP Div元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（px）。也可以指定为pc（pica）、pt（点）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。 宽、高：分别设置AP Div元素高度和宽度，单位设置同“左”、“上”属性。 Z轴：设置AP Div元素的堆叠次序，该值越大，则表示其在越前端显示。 可见性：设置AP Div元素的显示状态。“可见性”右侧下拉列表框包括四个可选项：“default（缺省）”，选中该项，则不明确指定其可见性属性，在大多数浏览器中，该AP Div会继承其父级AP Div的可见性。“inherit（继承）”，选择该项，则继承其父级AP Div的可见性。“visible（可见）”，选择该项，则显示AP Div及其中内容，而不管其父级AP Div是否可见。“hidden（隐藏）”，选择该项，则隐藏AP