第6章 AP元素.pptVIP

第6章 AP元素 * * 在Dreamweaver中，可以使用AP元素来设计页面的布局。利用AP元素可以灵活准确地在页面中放置内容，无论将其放置到文档中的哪一个位置，都可以随意移动和设置大小。 6.1 AP元素简介 在Dreamweaver CS3中，层被称为AP元素。Dreamweaver使用div标签创建AP元素。 AP元素可以包含文本、图像，或其它任何可放置到网页中的内容。 当创建AP元素时，Dreamweaver在网页中插入一个div标签，并为该div指定一个ID值（默认情况下第一个div指定为apDiv1，第二个div指定为apDiv2，依此类推）。Dreamweaver使用文档头中的嵌入式CSS代码来定位AP Div以及设置AP Div大小。 启动Dreamweaver，切换到代码视图，在head和/head之间输入如下代码： style type=text/css !-- #apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } -- /style 在body和/body之间输入如下代码： div id=apDiv1 /div 切换到设计视图，在文档中即看到AP Div，如图所示。 6.2 创建AP元素 可在页面上轻松地创建和定位AP Div。还可以创建嵌套的AP Div。创建AP元素之后就可以使用【AP元素】面板来选中AP元素，改变各个AP元素的叠放顺序，并可以在其中插入嵌套AP元素；还可以利用AP元素的属性面板来设置AP元素的属性。 6.2.1 插入AP Div 将光标置于文档窗口中要插入AP Div的位置,单击【插入记录】/【布局对象】/【AP Div】命令，文档中就会出现插入的AP Div，如下图所示。 6.2.2 绘制嵌套的AP Div 嵌套的AP Div就是在已有的AP Div中再绘制一个AP Div。通常称为父级和子级。 确保在【AP 元素】面板中取消选择【防止重叠】选项，单击布局选项卡中的【绘制AP Div】按钮，在文档窗口中现有AP Div内部拖动鼠标进行绘制，如下图所示。 6.2.3 AP元素面板 可以使用【AP元素】面板来管理文档中的AP元素。使用【AP元素】面板可防止AP元素重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多个AP元素。 AP 元素将按照z轴的顺序显示为一列名称；默认情况下，第一个创建的AP素显示在列表底部，最新创建的AP元素显示在列表顶部。可以通过更改AP元素在堆叠顺序中的位置来更改它的顺序。 单击【窗口】/【AP元素】命令，可打开【AP元素】面板，如图下图所示。当前文档中所有的AP元素都显示在【名称】列表中。如果存在嵌套AP元素，还会以树状结构显示AP元素的嵌套。 6.3 设置AP元素 利用属性面板，可设置AP元素的属性，如：可见性、宽和高、背景图像和背景颜色等。可以一次设置单个AP元素的属性，也可以一次设置多个AP元素的属性。 6.3.1 设置单个AP的属性 在文档中单击AP元素的选择柄，选择AP元素，如下图所示。单击【窗口】/【属性】命令，打开【属性】面板，在【属性】面板中显示出该AP元素的属性，可根据需要进行设置。 6.3.2 设置多个AP的属性 按下【Shift】键的同时，在文档中单击AP元素的选择柄以选择多个AP元素，如下图所示。在【属性】面板中会显示出文本属性以及全部AP元素属性，从而可以同时修改多个AP元素。 6.4 编辑AP元素 AP元素的编辑操作包括：调整大小、改变名称、显示与隐藏，等等。 6.4.1 调整AP元素大小 选择需要进行调整大小的AP元素，拖动选择柄进行调整，如下图所示。若要一次调整一个像素的大小，按住Ctrl键同时按下方向键，可调整右边框和下边框。 6.4.2 对齐AP元素 选中要对齐的多个AP元素，如下图左所示 。单击【修改】/【排列顺序】命令，从打开的子菜单中选择所需的命令即可，如下图右所示为选择【左对齐】命令的效果。 6.4.3 改变AP元素名称 在【AP元素】面板中，双击要修改的AP元素名称，激活该AP元素，如下图左所示。输入新名称，然后按回车键，即可完成对AP元素名称的修改，如下图右所示。 6.4.4 显示或隐藏AP元素 利用【AP元素】面板，可以设置AP元素的可见性。 要显示单个AP元素的可见性，单击该AP元素左