Dreamweaver CS3 项目教程之div

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,项目三 布局技术,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,项目三 布局技术,*,淘宝网女装,Dreamweaver CS3,项目教程,项目三 布局技术,任务七 布局技术之三,层,AP Div,技能目标,熟练运用层,AP Div,进行页面布局技术。,熟练运用层的嵌套和定位技术改变页面的布局。,知识目标,熟练掌握如何描绘层和层的插入。,掌握层的属性设置及调整。,掌握在层中输入文字、插入图像的方法。,掌握嵌套层的创建方法。,了解层与表格之间的相互转换方法。,项目三 布局技术,3.3.1,使用层,AP Div,搭建页面,3.3.2,问题探究,认识层,AP Div,3.3.3,知识拓展,AP,元素与表格的转换,3.3.3,知识拓展,拖动,AP,元素行为,3.3.3,知识拓展,显示,-,隐藏元素行为,任务七 布局技术之三,层,AP Div,项目三 布局技术,任务七,AP Div,构建任务,工作任务,层是网页制作时经常用到的对象，也是重要的网页布局工具之一。由于层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。,项目三 布局技术,任务七,AP Div,构建任务,工作流程,在站点中新建一个页面并保存。,在网页中插入一个层作为整个页面的限制范围。,插入嵌套子层。,在层中插入文字和图片元素。,在层中插入表格等复杂网页元素。,通过属性设置精确调整层的位置和大小。,项目三 布局技术,任务七,AP Div,构建任务,网页布局效果,项目三 布局技术,任务七,AP Div,问题探究,在,Dreamweaver CS3,以下版本,AP Div,被称为层。,AP Div,又称绝对定位元素（,AP,元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的,HTML,页面构成元素。,AP Div,可以通过层的重叠和次序的改变，实现一组包含着文字或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过层子层遗传父层的嵌套特征，实现内容的可见及位置移动等。,AP Div,的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。,项目三 布局技术,任务七,AP Div,问题探究,AP Div,的创建,在,Dreamweaver CS3,中，可以在页面上轻松地创建和定位层,AP Div,。创建步骤如下：,选择菜单“插入记录,/,布局对象,/AP Div”,命令，在设计窗口创建一个预设大小的,AP Div,。,直接将“绘制,AP Div”,按钮拖动到设计窗口松开左键，就可在编辑区创建一个预设大小的,AP Div,。,单击“插入”面板中“布局”选项下的“绘制,AP Div”,按钮，这时鼠标形状变成了“,+”,形，按下鼠标左键并向右下拖动，画出大小合适的一个矩形，释放鼠标左键，就可以绘制,AP Div,。,项目三 布局技术,任务七,AP Div,问题探究,属性设置,选中页面上的某个层后，在属性检查器上对应显示该层的所有属性，可查看或修改对应的属性值，如图所示。,图,层的属性面板,项目三 布局技术,任务七,AP Div,问题探究,AP,元素面板,在,AP,元素比较多的情况下，,AP,元素面板提供了一种快速管理方法。利用,AP,元素面板可准确指定,AP,元素、防止重叠、更改可见性、嵌套或堆叠,AP,元素，大大简化了操作方法。,AP,元素按照,Z,轴的顺序显示为一列名称。默认情况下，第一个创建的,AP,元素（,Z,轴为,1,）显示在列表底部，最新创建的,AP,元素显示在列表顶部。不过，可以通过更改,AP,元素在堆叠顺序中的位置来更改它的,Z,轴。,图,AP,元素面板,项目三 布局技术,任务七,AP Div,问题探究,AP,元素面板,改变,AP,元素的可见性,AP,元素面板中的眼睛图标表示其可见性，单击面板上眼睛图标就可以显示或隐藏对应,APDiv,。如果图标是睁开的眼睛，表示该,AP,元素是可见的；如果图标是闭上的眼睛，表示该,AP,元素是不可见的。如果没有眼睛图标，那么继承其父,APDiv,的可见性，没有嵌套的,APDiv,总是可见的。,改变层的堆叠顺序,在,HTML,代码中，,AP,元素的堆叠顺序或,Z,轴决定了,AP,元素在浏览器中绘制的顺序。,AP,元素的,Z,轴值越高，该,AP,元素在堆叠顺序中的位置就越高。,项目三 布局技术,任务七,AP Div,问题探究,AP,元素面板,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,或在父,AP Div,之外。,项目三 布局技术,任务七,AP Div,知识拓展,AP,元素和表格都是用来定位页面内容的，,AP,元素能够更方便、精确地定位页面元素。,Dreamweaver CS3,可以使用,AP,元素来快速创建复杂页面布局，然后再把它们转换成表格，供不支持,AP Div,的浏览器浏览。建议尽量不要将,AP,元素转换成表格，因为这样会产生带有大量空白单元格的表格，更不用说急剧增加的代码了。如果需要一个使用表格的页面布局，最好使用标准表格布局工具来创建。,项目三 布局技术,任务七,AP Div,知识拓展,AP,元素,与表格的转换,将表格转换为,AP Div,。,将表格转换为,AP Div,是为了便于网页布局的调整。,AP,元素转换为表格,。,把,AP,元素转换为表格是为了与低版本的浏览器兼容。,项目三 布局技术,任务七,AP Div,知识拓展,注意：,Dreamweaver CS3,不会把重叠的,AP,元素转换为表格，要防止,AP,元素重叠，可在,AP,元素面板中启用“防止重叠”选项。如果是在建立了重叠,AP,元素之后才选择了此选项，此时只有通过移动,AP,元素的方法把重叠的,AP,元素分开。,项目三 布局技术,任务七,AP Div,知识拓展,AP,元素,与表格的转换,DeamweaverCS3,提供的“拖动,AP,元素”功能，允许访问者自由的放置网页的各个栏目模块，让用户自定义网页的布局，大大增加了用户的体验性，受到越来越多网友的欢迎，其设置非常简单，功能又十分强大，大大简化了设计工作。,项目三 布局技术,任务七,AP Div,知识拓展,DeamweaverCS3,提供的“拖动,AP,元素”功能，允许访问者自由的放置网页的各个栏目模块，让用户自定义网页的布局，大大增加了用户的体验性，受到越来越多网友的欢迎，其设置非常简单，功能又十分强大，大大简化了设计工作。,项目三 布局技术,任务七,AP Div,知识拓展,在使用“拖动,AP,元素”行为时，必须确保触发该动作的事件发生在访问者试图拖动,AP,元素之前。最佳的方法是使用,onLoad,事件，将“拖动,AP,元素”附加到,body,对象上，,操作如下：,插入一个,AP,元素，单击窗口状态栏左下角的,标记，在行为面板中单击按钮添加行为，从弹出列表中选择“拖动,AP,元素”命令，弹出拖动,AP,元素对话框。,项目三 布局技术,任务七,AP Div,知识拓展,“拖动,AP,元素”对话框由“基本”和“高级”两个选项卡组成。在基本选项卡中，可以设置是否限制拖动,AP,元素时可移动范围（若选择限制则需给出有效范围的上、下、左、右坐标）、拖动,AP,元素的“放下目标”位置以及“靠齐距离”属性，该属性与“放下目标”配合使用，当,AP,元素被拖动到“放下目标”位置的距离小于“靠齐距离”时，将自动靠齐以实现,AP,元素的精确移动。,如果还要定义图,AP,元素的拖动柄等动作，可以单击“高级”标签，弹出高级选项卡。,在高级选项卡，可设置,“拖动控制点”（用于设置,AP,元素区域内用户执行该动作的范围，如果选择“整个元素”则无需设置范围坐标，控制点为整个元素范围）、拖动时是否使该层在文档的最前方，以及拖动整个元素时和放下整个元素后需要的,JavaScript,脚本程序。,项目三 布局技术,任务七,AP Div,知识拓展,显示,-,隐藏元素行为,利用显示,-,隐藏元素动作可以显示、隐藏或恢复一个或多个图,AP,元素默认的可见性。此动作用于在用户与页面进行交互时显示信息。“显示,-,隐藏元素”行为其实是由“显示元素”和“隐藏”元素两上行为组成，由于这两个元素通常搭配使用，因此,Dreamweaver CS3,将其归为一个行为。还可用于创建预先载入,AP,元素，即一个最初挡住页的内容的较大的,AP,元素，在所有页组件都完成载入后该,AP,元素即消失。,项目三 布局技术,任务七,AP Div,知识拓展,调用该动作的方法如下,：,在页面中插入一张图片，在图片旁边插入一个,AP,元素，设置为隐藏属性。选中图片，在行为面板中单击按钮添加行为，从弹出菜单中选择“显示,-,隐藏元素”命令，弹出显示,-,隐藏元素对话框。,选择显示，行为面板就增加了一个行为，修改事件为“,onMouseOver,”,，再次选择图片，同样增加行为，事件选择“,onMouseOut,”,，在对话框中选择隐藏,。,按下,F12,键预览，可以看到鼠标经过图片,AP,元素就显示，鼠标离开图片,AP,元素就隐藏。,。,项目三 布局技术,