第八章 使用AP Div布局网页
合集下载
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
8.4 案例2 使用Div制作网页下拉菜单
〖学习目标〗 使用AP Div元素的“显示”和“隐 藏”属性制作下拉菜单,并熟悉AP Div标签。 〖知识要点〗AP Div元素的基本操作;AP Div标 签的HTML代码规范;网页中的行为;使用“行为” 面板设置行为的方法;AP Div元素“可见性”属 性使用的技巧。案例效果:当鼠标移动到导航条 的相关位置时,弹出下拉菜单,当鼠标移开时, 下拉菜单隐藏。鼠标经过前和鼠标经过时的页面 效果分别如图所示。
网页设计与制作
8.3 学习任务:AP Div与表格相互转换
8.3.1 将AP Div元素转换为表格
网页设计与制作
转换步骤:
1)选择“修改→转换→将AP Div转换为表格”菜单命令,弹出“将AP Div元素 转换为表格”对话框中,从中进行相应设置,如图8-11所示。 “将AP Div元素转换为表格”对话框各选项含义如下: “最精确”单选按钮:将所有AP Div转换为表格。 “最小:合并空白单元”单选按钮:将一定距离以内的AP Div元素创建为相 邻的单元格,即融合其间的间隙。 “使用透明GIFs”复选框:将转换后表格的最后一行中填充为透明的GIF图 像,这样可以确保在所有的浏览器中表格显示结果一致。 “置于页面中央”复选框:选中此复选框,则生成的表格在页面居中位置; 若取消此复选框,则生成的表格在页面中左对齐。 “防止重叠”复选框:选中此复选框,可以防止AP Div重叠。 “显示AP元素面板”复选框:选中此复选框,在转换完成后会显示“AP元素” 面板。 “显示网格”复选框:选中此复选框,可以在转换后的文档中显示网格线。 “靠齐到网格”复选框:选中此复选框,可以将转换后的文档靠齐到网格。 2)保持默认设置。单击【确定】按钮,将文档中的AP Div元素转换为表格。
网页设计与制作
8.2 案例1 创建AP Div元素并在其中添加文字和图像
〖学习目标〗在Dreamweaver CS3中,创建若干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的创建和基本操作
AP Div与表格的相互转换
AP Div综合应用
网页设计与制作
8.1 学习任务:AP Div基础知识
所谓AP Div,是指存放用DIV标记描述的HTML内 容的容器,用来控制浏览器窗口中元素的位置、 层次。在Dreamweaver CS3环境下,可以利用 AP Div灵活方便的进行页面布局。 AP Div最主要的特性就是它是浮动在网页内容之 上的。也就是说,可以在网页上任意改变其位置, 实现对AP Div的准确定位。 AP Div可以相互堆叠,通过定义AP Div的层次关 系,可以方便实现文字阴影等效果;
网页设计与制作
谢 谢!
网页设计与制作
所示。
网页设计与制作
Div标签属性及其含义
属性 position left top width height clip relative:该AP元素相对于其他AP元素放置 absolute:该AP元素相对于其所在的窗口放置 设置AP元素与窗口左边距 设置AP元素与窗口上边距 设置AP元素的宽度 设置AP元素的高度 auto:设置AP元素内方块位置为默认属性 inherit:设置AP元素内方块位置为继承父级AP元素属性 visible:设置AP元素为可见 visibility hidden:设置AP元素为不可见 inherit:设置AP元素为继承父级AP元素可见性 margin padding border z-index background-color background-image 设置AP元素的页边距属性 设置AP元素的填充距离属性 设置AP元素的宽度属性 设置AP元素的层级位置 设置AP元素的背景颜色 设置AP元素的背景图像 含义
网页设计与制作
鼠标经过前的页面
网页设计与制作
鼠标经过文字时显示的下拉菜单
网页设计与制作
8.4.1 Div标签
Div标签的基本格式为:
<div-property:value
property:value…>content</div>
其中,property是Div标签的属性,value是
该属性的值。Div标签的属性及含义如表8-1
8.1.3 AP Div元素的“属性”面 板
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 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内容超过其大小时,AP Div保持不变,在AP Div右端和下端都出现滚动条,以使其中 的内容能通过拖动滚动条显示。 剪辑:设置AP Div可见区域大小。在“上”、“下”、“左”、“右”文本框中,可以指定AP Div可见区域上、下、左、 右端相对于AP Div边界距离。AP Div经过剪辑后,只有指定的矩形区域才是可见的。
网页设计与制作
8.1.4 AP元素面板
“AP元素”面板各选项含义如下: 防止重叠:选中此选项,可以防止AP Div元素之间发生重叠。不选中 此复选框,AP元素则可以相互重叠。该选项主要用在AP Div和表格相 互转换时,当将AP Div转换为表格,为防止浏览器不兼容,选中该选 项,以防止AP元素相互重叠。 图标:如果某一个AP 元素左侧有该图标,表示该AP 元素可见,如果 图标变成,则不可见。如果没有该图标,表示该层继承其父级AP Div 元素的可见性。如果没有父级AP Div元素,则父级AP Div元素可以看 成其本身,通常情况下,这意味着是可见的。可以通过单击图标控制 该AP Div的可见属性。 名称:该属性用来显示和更改AP Div元素的名称。如果想更改该AP Div元素的名称,可以通过双击名字进行更改。 Z:该属性见“属性”面板相关设置。可以通过双击AP Div元素的Z值 属性来更改其值。
网页设计与制作
8.3.2 将表格转换为AP Div元素
8.3.2 将表格转换为AP Div元素
网页设计与制作
操作步骤:
1)打开一个用表格布局的网页文件,选择“修改→转换→ 将表格转换为AP Div”菜单命令,弹出“将表格转换为AP Div”对话框, “将表格转换为AP Div”对话框各选项含义如下: “防止重叠”复选框:选中此复选框,可以在操作AP Div 元素时,防止AP Div元素之间相互重叠。 “显示AP Div元素面板”复选框:选中此复选框,在转换 完成后会显示“AP元素”面板。 “显示网格”复选框:选中此复选框,可以在转换后的文 档中显示网格线。 “靠齐到网格”复选框:选中此复选框,可以将转换后的 文档同网格靠齐。 2)选中“防止重叠”复选框和“显示AP Div元素面板”复 选框,单击【确定】按钮,将文档中的表格转换为AP Div 元素。 网页设计与制作
网页设计与制作
8.1.2 创建AP Div元素工具栏
在Dreamweaver中可以通过“布局”工具栏方便的创建AP Div元素 在菜单栏中,选择“插入→布局”命令,可以展开“布局” 工具栏。在“标准”模式下,和AP Div创建有关的是“插 入Div标签”按钮和“绘制AP Div”按钮。 “插入Div标签”按钮:单击此按钮,在文档中自动插入 一个AP Div元素。 “绘制AP Div”按钮:单击此按钮,将鼠标指针移到文档 窗口中,鼠标指针变为十字状,按下鼠标并拖动,可以绘 制一个AP Div元素。 网页设计与制作