《第八章使用APDiv布局网ppt课件.ppt》由会员分享，可在线阅读，更多相关《第八章使用APDiv布局网ppt课件.ppt（17页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网页设计与制作网页设计与制作网页设计与制作网页设计与制作第八章使用第八章使用AP DivAP Div布局网页布局网页 网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用第八章使用AP Div布局网页 本章学习要点：AP Div的基本概念AP Div的创建和基本操作AP Div与表格的相互转换AP Div综合应用网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.1 学习任务：AP
2、 Div基础知识 所谓AP Div，是指存放用DIV标记描述的HTML内容的容器，用来控制浏览器窗口中元素的位置、层次。在Dreamweaver CS3环境下，可以利用AP Div灵活方便的进行页面布局。AP Div最主要的特性就是它是浮动在网页内容之上的。也就是说，可以在网页上任意改变其位置，实现对AP Div的准确定位。AP Div可以相互堆叠，通过定义AP Div的层次关系，可以方便实现文字阴影等效果；网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.1.2 创建AP Div元
3、素工具栏在Dreamweaver中可以通过“布局”工具栏方便的创建AP Div元素在菜单栏中，选择“插入布局”命令，可以展开“布局”工具栏。在“标准”模式下，和AP Div创建有关的是“插入Div标签”按钮和“绘制AP Div”按钮。“插入Div标签”按钮：单击此按钮，在文档中自动插入一个AP Div元素。“绘制AP Div”按钮：单击此按钮，将鼠标指针移到文档窗口中，鼠标指针变为十字状，按下鼠标并拖动，可以绘制一个AP Div元素。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.
4、1.3 AP Div元素的“属性”面板AP Div“属性”面板中各项含义如下：CSSP元素：为选中的AP Div元素设置名称。名称由数字或字母组成，不能用特殊字符。每个AP Div元素的名称是唯一的。左、上：分别设置AP Div元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（px）。也可以指定为pc（pica）、pt（点）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。宽、高：分别设置AP Div元素高度和宽度，单位设置同“左”、“上”属性。Z轴：设置AP Div元素的堆叠次序，该值越大，则表示其在越前端显示。可见性：设置AP Div元素的显示状态。“可见性”右侧下
5、拉列表框包括四个可选项：default（缺省）：选中该项，则不明确指定其可见性属性，在大多数浏览器中，该AP Div会继承其父级AP Div的可见性。inherit（继承）：选择该项，则继承其父级AP Div的可见性。visible（可见）：选择该项，则显示AP Div及其中内容，而不管其父级AP Div是否可见。hidden（隐藏）：选择该项，则隐藏AP Div及其中内容，而不管其父级AP Div是否可见。背景图像：设置AP Div元素的背景图像。可以通过单击“文件夹”按钮选择本地文件，也可以在文本框中直接输入背景图像文件的路径确定其位置。背景颜色：设置AP Div的背景颜色，值为空表示背景
6、为透明。类：可以将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 D
7、iv右端和下端都出现滚动条，以使其中的内容能通过拖动滚动条显示。剪辑：设置AP Div可见区域大小。在“上”、“下”、“左”、“右”文本框中，可以指定AP Div可见区域上、下、左、右端相对于AP Div边界距离。AP Div经过剪辑后，只有指定的矩形区域才是可见的。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.1.4 AP元素面板“AP元素”面板各选项含义如下：防止重叠：选中此选项，可以防止AP Div元素之间发生重叠。不选中此复选框，AP元素则可以相互重叠。该选项主要用在AP
8、 Div和表格相互转换时，当将AP Div转换为表格，为防止浏览器不兼容，选中该选项，以防止AP元素相互重叠。图标：如果某一个AP 元素左侧有该图标，表示该AP 元素可见，如果图标变成，则不可见。如果没有该图标，表示该层继承其父级AP Div元素的可见性。如果没有父级AP Div元素，则父级AP Div元素可以看成其本身，通常情况下，这意味着是可见的。可以通过单击图标控制该AP Div的可见属性。名称：该属性用来显示和更改AP Div元素的名称。如果想更改该AP Div元素的名称，可以通过双击名字进行更改。Z：该属性见“属性”面板相关设置。可以通过双击AP Div元素的Z值属性来更改其值。网页
9、设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用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制作的图文混排网页效果如图所示。网页设计与制作网页设计与制作经营者提供商品或者
10、服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.3 学习任务：AP Div与表格相互转换8.3.1 将AP Div元素转换为表格网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用转换步骤：1）选择“修改转换将AP Div转换为表格”菜单命令，弹出“将AP Div元素转换为表格”对话框中，从中进行相应设置，如图8-11所示。“将AP Div元素转换为表格”对话框各选项含义如下：“最精确”单选按钮：将所有AP Div转换为表
11、格。“最小：合并空白单元”单选按钮：将一定距离以内的AP Div元素创建为相邻的单元格，即融合其间的间隙。“使用透明GIFs”复选框：将转换后表格的最后一行中填充为透明的GIF图像，这样可以确保在所有的浏览器中表格显示结果一致。“置于页面中央”复选框：选中此复选框，则生成的表格在页面居中位置；若取消此复选框，则生成的表格在页面中左对齐。“防止重叠”复选框：选中此复选框，可以防止AP Div重叠。“显示AP元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。“显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。“靠齐到网格”复选框：选中此复选框，可以将转换后的文档靠齐
12、到网格。2）保持默认设置。单击【确定】按钮，将文档中的AP Div元素转换为表格。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.3.2 将表格转换为AP Div元素8.3.2 将表格转换为AP Div元素网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用操作步骤：操作步骤：1）打开一个用表格布局的网页文件，选择“修改转换将表格转换为AP Div”菜单命令，弹出“将表格转换为
13、AP Div”对话框，“将表格转换为AP Div”对话框各选项含义如下：“防止重叠”复选框：选中此复选框，可以在操作AP Div元素时，防止AP Div元素之间相互重叠。“显示AP Div元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。“显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。“靠齐到网格”复选框：选中此复选框，可以将转换后的文档同网格靠齐。2）选中“防止重叠”复选框和“显示AP Div元素面板”复选框，单击【确定】按钮，将文档中的表格转换为AP Div元素。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿
14、其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.4 案例2 使用Div制作网页下拉菜单学习目标 使用AP Div元素的“显示”和“隐藏”属性制作下拉菜单，并熟悉AP Div标签。知识要点AP Div元素的基本操作；AP Div标签的HTML代码规范；网页中的行为；使用“行为”面板设置行为的方法；AP Div元素“可见性”属性使用的技巧。案例效果：当鼠标移动到导航条的相关位置时，弹出下拉菜单，当鼠标移开时，下拉菜单隐藏。鼠标经过前和鼠标经过时的页面效果分别如图所示。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加
15、赔偿的金额为消费者购买商品的价款或接受服务的费用鼠标经过前的页面 网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用鼠标经过文字时显示的下拉菜单鼠标经过文字时显示的下拉菜单 网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用8.4.1 Div标签Div标签的基本格式为：content其中，property是Div标签的属性，value是该属性的值。Div标签的属性及含义如表81所示
16、。网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用Div标签属性及其含义标签属性及其含义 属性属性含义含义positionpositionrelativerelative：该：该APAP元素相对于其他元素相对于其他APAP元素放置元素放置absoluteabsolute：该：该APAP元素相对于其所在的窗口放置元素相对于其所在的窗口放置leftleft设置设置APAP元素与窗口左边距元素与窗口左边距toptop设置设置APAP元素与窗口上边距元素与窗口上边距widthwidth设置设置
17、APAP元素的宽度元素的宽度heightheight设置设置APAP元素的高度元素的高度clipclipautoauto：设置：设置APAP元素内方块位置为默认属性元素内方块位置为默认属性inheritinherit：设置：设置APAP元素内方块位置为继承父级元素内方块位置为继承父级APAP元素属性元素属性visibilityvisibilityvisiblevisible：设置：设置APAP元素为可见元素为可见hiddenhidden：设置：设置APAP元素为不可见元素为不可见inheritinherit：设置：设置APAP元素为继承父级元素为继承父级APAP元素可见性元素可见性margin
18、margin设置设置APAP元素的页边距属性元素的页边距属性paddingpadding设置设置APAP元素的填充距离属性元素的填充距离属性borderborder设置设置APAP元素的宽度属性元素的宽度属性z-indexz-index设置设置APAP元素的层级位置元素的层级位置background-colorbackground-color设置设置APAP元素的背景颜色元素的背景颜色 background-imagebackground-image设置设置APAP元素的背景图像元素的背景图像网页设计与制作网页设计与制作经营者提供商品或者服务有欺诈行为的，应当按照消费者的要求增加赔偿其受到的损失，增加赔偿的金额为消费者购买商品的价款或接受服务的费用谢 谢！