第7章 使用AP Div元素——(网页设计与制作共11章)

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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元素和时间轴相结合,可以在网页中轻松创 建动画效果。
第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元素
(1)创建嵌套AP元素 使用下列方法之一,创建嵌套AP元素: 应用菜单命令。将插入点放在现有AP元素中,选择“插入 →布局对象→AP Div”命令。 应用按钮拖曳。拖曳“插入”面板“布局”选项卡中的“绘 制AP Div”按钮,然后将其放在现有AP元素中。 应用按钮绘制。选择“编辑→首选参数”命令,启用“首选 参数”对话框,在“分类”选项列表中选择“AP元素”选 项,在右侧选择“在AP Div中创建以后嵌套”复选框,单击 【确定】按钮。单击“插入”面板“布局”标签中的“绘制 AP Div”按钮,在现有AP元素中,按住〈Ctrl〉键的同时拖曳 鼠标绘制一个嵌套AP元素。 创建的嵌套AP元素如图7-6所示。 (2)将现有AP元素嵌套在另一个AP元素中 使用“AP元素”控制面板,将现有AP元素嵌套在另一个AP 元
图7-6 创建嵌套的AP元素
图7-7将apDiv1嵌套在apDiv2中
提示:如果已启用“AP元素”控制面板中的“防止重叠”选项,那 么在移动AP元素时将无法使AP元素相互重叠。
4.对齐AP元素 使用AP元素对齐操作可将一个或多个AP元素与最后一个被 选中AP元素的边界对齐。当对选定AP元素进行对齐时,未 选定的子层可能会因为其父层被选定并移动而随之移动。为 了避免出现这种情况,不要用嵌套层。对齐两个或更多个 AP元素有以下几种方法。 (1)应用菜单命令对齐AP元素 在文档窗口中,按住〈Shift〉键,依次选中需要对齐的多个 AP元素,然后选择“修改→排列顺序”命令,在其子菜单 中选择一种对齐方式: 左对齐:以最后一个被选中AP元素的左侧为基准对齐。 右对齐:以最后一个被选中AP元素的右侧为基准对齐。 上对齐:以最后一个被选中AP元素的顶部为基准对齐。 对齐下缘:以最后一个被选中AP元素的底部为基准对齐。
图7-4 “AP元素”面板
图标:如果某一个AP 元素左侧有该图标,表示该AP 元 素可见,如果图标变成,则不可见。如果没有该图标,表示 该层继承其父级AP Div元素的可见性。如果没有父级AP Div 元素,则父级AP Div元素可以看成其本身,通常情况下,这 意味着是可见的。可以通过单击图标控制该AP Div的可见属 性。 ID:该属性用来显示和更改AP Div元素的名称。通过双击ID AP AP 下面对应的AP元素默认名称来更改AP元素的名称。 Z:该属性见“属性”面板相关设置。可以通过双击AP Div 元素的Z值属性来更改其值。
素中的具体操作步骤如下: 1)选择“窗口→AP元素”命令,启用“AP元素”控制面 板。 2)在“AP元素”控制面板中选择一个AP元素,然后按住 〈Ctrl〉键的同时拖曳鼠标,将其移动到“AP元素”控制 面板的目标AP元素上,当目标AP元素的名称突出显示时, 松开鼠标左健,即可完成操作。本例将apDiv1拖曳到目标 apDiv2 apDiv2中,效果如图7-7所示。 7-7
图7-3
“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)或%(百分比)。
7.1.5 AP Div元素的基本操作
1.调整AP Div的大小 调整AP Div时,既可以单独调整一个AP Div,也可以同时调 整多个AP Div。 (1)调整一个AP Div的大小 选中一个AP Div后,执行下列操作之一,可调整一个AP Div 的大小: 应用鼠标拖曳方式。选中AP Div,拖动四周的任何调整手柄。 应用键盘方式。选中AP Div,按住〈Ctrl+方向键〉,每次调 整一个像素大小。 应用网络靠齐方式。选中AP Div,同时按住〈Ctrl+Shift+方 向键〉,可按网格靠齐增量来调整大小。
7.1.4 AP元素面板
通过“AP元素”面板可以方便地管理网页文档中AP Div元 素。在Dreamweaver中,选择“窗口→AP元素”菜单命令 或按〈F2〉键,均可打开“AP元素”面板,如图7-4所示。 “AP元素”面板各选项含义如下: 防止重叠:选中此选项,可以防止AP Div元素之间发生重叠。 不选中此复选框,AP元素则可以相互重叠。该选项主要用 在AP Div和表格相互转换时,当将 AP Div转换为表格,为防止浏览器 不兼容,选中该选项,以防止AP 元素相互重叠。
提示:在“插入”面板中选择“布局”标签,点击后,在文档窗口中, 按住〈Ctrl〉键的同时按住鼠标左键拖曳鼠标,可以绘制多个AP Div元 素。
在默认情况下,每当用户创建一个新的AP Div,都会使用 DIV标志它,并将标记 显示到网页左上角的位置。创建的 AP Div元素如图7-1所示。 若要在网页左上角显示出AP Div标记,首先选择“查看→可 视化助理→不可见元素”命令,使“不可见元素”命令呈被 选择状态,然后再选择“编辑→首选参数”命令,弹出“首 选参数”对话框,选择“分类”选项框中的“不可见元素” 选项,选择右侧的“AP元素的锚点”复选框,如图7-2所示, 单击【确定】按钮完成设置。
提示:在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元素。
类:可以将CSS样式表应用于AP Div。 溢出:设置AP Div中的内容超过其大小时的处理方法。“溢 出”右侧下拉列表框中包括四个可选项:“visible(可 见)”,选择该项,当AP Div中内容超过其大小时,AP Div 会自动向右或者向下扩展。“hidden(隐藏)”,选择该项, 当AP Div中内容超过其大小时,AP Div的大小不变,也不会 出现滚动条,超出AP Div内容不被显示。“scroll(滚 动)”,选择该项,无论AP Div中的内容是否超出AP Div的 大小,AP Div右端和下端都会显示滚动条。“auto(自 AP Div auto 动)”,选择该项,当AP Div内容超过其大小时,AP Div保 持不变,在AP Div右端和下端都出现滚动条,以使其中的内 容能通过拖动滚动条显示。 剪辑:设置AP Div可见区域大小。在“上”、“下”、 “左”、“右”文本框中,可以指定AP Div可见区域上、下、 左、右端相对于AP Div边界距离。AP Div经过剪辑后,只有 指定的矩形区域才是可见的。
应用修改属性值方式。在“属性”面板中,修改“宽”和 “高”选项值来调整AP Div的大小 (2)同时调整多个AP Div的大小 在“文档”窗口中按住〈Shift〉键,依次选中两个或多个 AP Div,执行以下操作之一,可同时调整多个AP Div的大小: 应用菜单命令。选择“修改→排列顺序→设成宽度(或高度) 相同”命令。 应用快捷键。按下组合键〈Ctrl+Shift+7〉或者〈Ctrl+Shift+ 9〉,则以当前AP Div为标准同时调整多个层的宽度或高度。 2.更改AP Div的堆叠顺序 对网页进行排版时,常需要控制叠放在一起的不同网页元素 的显示顺序,以实现特殊的效果。 使用AP元素“属性”面板或“AP”面板可以改变AP元素的 堆叠顺序。AP元素的显示顺序与Z轴值的顺序一致。Z值越 大,AP元素的位置越靠上。在“AP元素”控制面板中按照 堆叠顺序排列AP元素的名称,如图7-5所示。
图7-5 AP AP元素的显示顺序与Z轴值的顺序一致
(1)使用“AP”面板改变层的堆叠顺序 打开“AP”面板,在“AP”面板中执行下列操作之一,改变 AP元素的堆叠顺序。 选中指定的AP元素名,将其拖动到所需的堆叠顺序处,然 后释放鼠标。 在“Z”列中单击需要修改的AP元素编号,如果要上移则输入 一个比当前值更大的数值,如果要下移则输入一个比当前值 更小的数值。 (2)使用AP元素“属性”面板改变层的堆叠顺序。 在“AP元素”面板或文档窗口中选择一个AP元素,在其 “属性”面板的“Z轴”文本框中输入一个更高或更低的编 号,使当前AP元素沿着堆叠顺序向上或向下移动。 3.嵌套AP元素 所谓嵌套AP Div,是指在一个AP Div元素中创建子AP Div元 素。使用嵌套AP Div的好处是能确保子AP Div永远定位于父 级AP Div上方。嵌套通常用于将AP元素组织在一起。
图7-1 创建的AP Div元素
图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元素未被选中或激活情况下,按住〈Shift〉键的同 时再单击AP Div元素中的任意位置。
宽、高:分别设置AP Div元素高度和宽度,单位设置同 “左”、“上”属性。 Z轴:设置AP Div元素的堆叠次序,该值越大,则表示其在 越前端显示。 可见性:设置AP Div元素的显示状态。“可见性”右侧下拉 列表框包括四个可选项:“default(缺省)”,选中该项, 则不明确指定其可见性属性,在大多数浏览器中,该AP Div 会继承其父级AP Div的可见性。“inherit(继承)”,选择 该项,则继承其父级AP Div的可见性。“visible(可见)”, 选择该项,则显示AP Div及其中内容,而不管其父级AP Div 是否可见。“hidden(隐藏)”,选择该项,则隐藏AP Div 及其中内容,而不管其父级AP Div是否可见。 背景图像:设置AP Div元素的背景图像。可以通过单击“文 件夹”按钮选择本地文件,也可以在文本框中直接输入背景 图像文件的路径确定其位置。 背景颜色:设置AP Div的背景颜色,值为空表示背景为透明。
相关文档
最新文档