网页设计与制作技术十三.pptx

《网页设计与制作技术十三.pptx》由会员分享，可在线阅读，更多相关《网页设计与制作技术十三.pptx（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网页网页(wn y)设计与制作技术设计与制作技术 十三十三第一页，共17页。项目三 布局(bj)技术3.3.1 使用(shyng)层AP Div搭建页面 3.3.2 问题探究认识层AP Div3.3.3 知识拓展AP元素与表格的转换 3.3.3 知识拓展拖动AP元素行为 3.3.3 知识拓展显示-隐藏元素行为 布局布局布局布局(bj)(bj)技术技术技术技术层层层层AP Div AP Div 第2页/共17页第二页，共17页。项目(xingm)三 布局技术AP Div 构建构建(u jin)任务任务工作任务 层是网页制作时经常用到的对象(duxing)，也是重要的网页布局工具之一。由于

2、层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。第3页/共17页第三页，共17页。项目(xingm)三 布局技术AP Div AP Div 构建构建构建构建(u jin)u jin)任务任务任务任务工作流程在站点中新建一个页面并保存。在网页中插入一个层作为整个(zhngg)页面的限制范围。插入嵌套子层。在层中插入文字和图片元素。在层中插入表格等复杂网页元素。通过属性设置精确调整层的位置和大小。第4页/共17页第四页，共17页。项目(xingm)三

3、 布局技术AP Div 构建构建(u jin)任务任务网页(wn y)布局效果第5页/共17页第五页，共17页。项目三 布局(bj)技术AP Div 问题问题(wnt)探究探究 在在Dreamweaver CS4Dreamweaver CS4以下版本以下版本AP DivAP Div被称为层。被称为层。AP DivAP Div又又称绝对定位元素（称绝对定位元素（APAP元素），是分配有绝对位置的，用元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的来精确控制浏览器窗口对象位置的HTMLHTML页面构成元素。页面构成元素。AP DivAP Div可以通过层的重叠和次序的改变，实现一组包含

4、着可以通过层的重叠和次序的改变，实现一组包含着文字文字(wnz)(wnz)或图像等元素的胶片变换效果；可以通过动态或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过层子层遗传父层的嵌套特征，实现内容的可见效果；通过层子层遗传父层的嵌套特征，实现内容的可见及位置移动等。及位置移动等。AP DivAP Div的出现使网页技术从二维空间拓展的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。

5、局设计，成为网页设计新的发展方向。第6页/共17页第六页，共17页。项目三 布局(bj)技术AP Div AP Div 问题问题问题问题(wnt)(wnt)探究探究探究探究AP Div的创建 在Dreamweaver CS3中，可以在页面上轻松地创建和定位层AP Div。创建步骤如下：选择菜单“插入记录/布局对象/AP Div”命令，在设计窗口(chungku)创建一个预设大小的AP Div。直接将“绘制AP Div”按钮拖动到设计窗口(chungku)松开左键，就可在编辑区创建一个预设大小的AP Div。单击“插入”面板中“布局”选项下的“绘制AP Div”按钮，这时鼠标形状变成了“+”形，

6、按下鼠标左键并向右下拖动，画出大小合适的一个矩形，释放鼠标左键，就可以绘制AP Div。第7页/共17页第七页，共17页。项目三 布局(bj)技术AP Div 问题问题(wnt)探究探究属性设置 选中页面上的某个层后，在属性检查器上对应显示该层的所有(suyu)属性，可查看或修改对应的属性值，如图所示。图 层的属性面板第8页/共17页第八页，共17页。项目(xingm)三 布局技术AP Div 问题问题(wnt)探究探究AP元素面板 在AP元素比较多的情况下，AP元素面板提供了一种快速管理方法。利用AP元素面板可准确指定AP元素、防止重叠、更改可见性、嵌套或堆叠AP元素，大大简化了操作方法。A

7、P元素按照Z轴的顺序显示为一列名称(mngchng)。默认情况下，第一个创建的AP元素（Z轴为1）显示在列表底部，最新创建的AP元素显示在列表顶部。不过，可以通过更改AP元素在堆叠顺序中的位置来更改它的Z轴。图 AP元素面板第9页/共17页第九页，共17页。项目(xingm)三 布局技术AP Div 问题问题(wnt)探究探究AP元素(yun s)面板改变AP元素(yun s)的可见性 AP元素(yun s)面板中的眼睛图标表示其可见性，单击面板上眼睛图标就可以显示或隐藏对应APDiv。如果图标是睁开的眼睛，表示该AP元素(yun s)是可见的；如果图标是闭上的眼睛，表示该AP元素(yun s

8、)是不可见的。如果没有眼睛图标，那么继承其父APDiv的可见性，没有嵌套的APDiv总是可见的。改变层的堆叠顺序 在HTML代码中，AP元素(yun s)的堆叠顺序或Z轴决定了AP元素(yun s)在浏览器中绘制的顺序。AP元素(yun s)的Z轴值越高，该AP元素(yun s)在堆叠顺序中的位置就越高。第10页/共17页第十页，共17页。项目三 布局(bj)技术AP Div 问题问题(wnt)探究探究APAP元素面板元素面板AP DivAP Div的重叠与嵌套的重叠与嵌套 如果页面上有两个交叉的如果页面上有两个交叉的AP DivAP Div，存在重，存在重叠与嵌套两种关系。重叠的两个叠与嵌套

9、两种关系。重叠的两个AP DivAP Div是相互是相互独立的，任何一个独立的，任何一个AP DivAP Div的改变不影响另外一的改变不影响另外一个个AP DivAP Div。嵌套通常用于将嵌套通常用于将AP DivAP Div组合在一起。嵌套组合在一起。嵌套AP DivAP Div和表格的嵌套有些类似，就是在层和表格的嵌套有些类似，就是在层AP AP DivDiv里面再建一个层里面再建一个层AP DivAP Div。嵌套。嵌套AP DivAP Div总是总是随其父随其父AP DivAP Div一起被移动，并继承其父一起被移动，并继承其父AP DivAP Div的所有特征，包括可视性和背景颜

10、色等。与表的所有特征，包括可视性和背景颜色等。与表格嵌套不同的是，父表格一定格嵌套不同的是，父表格一定(ydng)(ydng)是大于子是大于子表格的，但是表格的，但是AP DivAP Div的子的子AP DivAP Div可以超出父可以超出父AP AP DivDiv或在父或在父AP DivAP Div之外。之外。第11页/共17页第十一页，共17页。项目(xingm)三 布局技术AP Div 知识知识(zh shi)拓拓展展注意：Dreamweaver CS4不会把重叠的AP元素(yun s)转换为表格，要防止AP元素(yun s)重叠，可在AP元素(yun s)面板中启用“防止重叠”选项。如

11、果是在建立了重叠AP元素(yun s)之后才选择了此选项，此时只有通过移动AP元素(yun s)的方法把重叠的AP元素(yun s)分开。第12页/共17页第十二页，共17页。项目三 布局(bj)技术AP Div 知识知识(zh shi)拓展拓展 DeamweaverCS4 DeamweaverCS4提供的提供的“拖动拖动APAP元素元素”功能，功能，允许访问者自由的放置网页的各个允许访问者自由的放置网页的各个(gg)(gg)栏目栏目模块，让用户自定义网页的布局，大大增加了模块，让用户自定义网页的布局，大大增加了用户的体验性，受到越来越多网友的欢迎，其用户的体验性，受到越来越多网友的欢迎，其设

12、置非常简单，功能又十分强大，大大简化了设置非常简单，功能又十分强大，大大简化了设计工作。设计工作。第13页/共17页第十三页，共17页。项目三 布局(bj)技术任务七任务七任务七任务七 AP Div AP Div 知识知识知识知识(zh shi)(zh shi)拓展拓展拓展拓展 “拖动拖动APAP元素元素”对话框由对话框由“基本基本”和和“高级高级”两个选项卡组成。在基本选项两个选项卡组成。在基本选项卡中，可以设置是否限制拖动卡中，可以设置是否限制拖动APAP元素时可移动范围（若选择限元素时可移动范围（若选择限制则需给出有效范围的上、下、左、右坐标）、拖动制则需给出有效范围的上、下、左、右坐标

13、）、拖动APAP元素的元素的“放下目标放下目标”位置位置(wi zhi)(wi zhi)以及以及“靠齐距离靠齐距离”属性，该属性与属性，该属性与“放下目放下目标标”配合使用，当配合使用，当APAP元素被拖动到元素被拖动到“放下目标放下目标”位置位置(wi zhi)(wi zhi)的距离的距离小于小于“靠齐距离靠齐距离”时，将自动靠齐以实现时，将自动靠齐以实现APAP元素的精确移动。元素的精确移动。如果还要定义图如果还要定义图APAP元素的拖动柄等动作，可以单击元素的拖动柄等动作，可以单击“高级高级”标签，弹出标签，弹出高级选项卡。高级选项卡。在高级选项卡，可设置在高级选项卡，可设置“拖动控制点

14、拖动控制点”（用于设置（用于设置APAP元素区域内用户执元素区域内用户执行该动作的范围，如果选择行该动作的范围，如果选择“整个元素整个元素”则无需设置范围坐标，控则无需设置范围坐标，控制点为整个元素范围）、拖动时是否使该层在文档的最前方，制点为整个元素范围）、拖动时是否使该层在文档的最前方，以及拖动整个元素时和放下整个元素后需要的以及拖动整个元素时和放下整个元素后需要的JavaScriptJavaScript脚本程序。脚本程序。第14页/共17页第十四页，共17页。项目(xingm)三 布局技术任务七任务七任务七任务七 AP Div AP Div 知识知识知识知识(zh shi)(zh shi

15、)拓展拓展拓展拓展显示-隐藏元素行为 利用显示-隐藏元素动作可以显示、隐藏或恢复一个或多个图AP元素默认的可见性。此动作用于在用户与页面进行交互时显示信息。“显示-隐藏元素”行为其实是由“显示元素”和“隐藏”元素两上行为组成，由于这两个元素通常搭配使用，因此Dreamweaver CS3将其归为一个行为。还可用于创建预先载入AP元素，即一个最初挡住页的内容的较大(jio d)的AP元素，在所有页组件都完成载入后该AP元素即消失。第15页/共17页第十五页，共17页。项目三 布局(bj)技术任务七任务七任务七任务七 AP Div AP Div 知识知识知识知识(zh shi)(zh shi)拓展

16、拓展拓展拓展调用该动作的方法如下：在页面中插入一张图片，在图片旁边插入一个AP元素，设置为隐藏属性。选中图片，在行为面板(min bn)中单击按钮添加行为，从弹出菜单中选择“显示-隐藏元素”命令，弹出显示-隐藏元素对话框。选择显示，行为面板(min bn)就增加了一个行为，修改事件为“onMouseOver”，再次选择图片，同样增加行为，事件选择“onMouseOut”，在对话框中选择隐藏。按下F12键预览，可以看到鼠标经过图片AP元素就显示，鼠标离开图片AP元素就隐藏。第16页/共17页第十六页，共17页。17 主讲(zhjing)教师：徐颖感谢您的观看感谢您的观看(gunkn)！第17页/共17页第十七页，共17页。