6框架与APDIV-2.ppt

1、1,项目六 框架与APDiv,教学任务要点： 学会框架的创建和属性设置。 能够用框架规划网页 ，掌握框架的基本操作。 掌握AP Div的创建与属性设置 。 能够用AP Div编排网页。 教学重点与难点： 用框架规划网页。 用AP Div编排网页。,2,框架与AP Div是网页制作时用来给网页布局的两个不同的Dreamweaver工具，使用框架规划网页可以统一网页风格，加快网页的下载效率，增加网站内容的可读性。使用AP Div编排网页灵活性强，提供弹性的画面设计功能，在其中可以放入任何的网页元素，且可以任意的移动位置与相互重叠。,3,6.2 任务2 AP Div的使用,AP Div（绝对定位元素

2、）是分配有绝对位置的一种页面元素。在网页制作过程中，AP Div让页面元素向三维空间扩展，层与层之间可相互叠加，可放在网页的任一位置，在层内可放置各种网页元素。AP Div对于初学者来说可能有些陌生，其实它在Dreamweaver CS4中等同于早期版本的层，仍然是用div来做标识符。AP Div又称为AP元素，以下简称AP层。 在Dreamweaver CS4中，AP层可以用来设计网页的布局，可以进行隐藏和显示的控制，也可以在文档设计视图中移动AP层，也可以在利用两个AP层中设置层的背景图像。利用AP层可以让位置更加灵活和机动，同时AP层也可以实现和表格的相互转换。,4,6.2.1 情境1

3、创建AP Div和创建嵌套AP层,AP Div可以手工绘制，根据需要创建AP层，位置更加灵活。 1.创建AP Div 用此功能可以在网页的任意位置绘制AP Div层，在代码中也是以开始，结束。具体步骤如下： (1)打开【文件】面板，双击文件名，打开文件6-21-2.htm。 (2)打开【插入】面板，选择【布局】模式，并切换至【标准】类别，单击【绘制AP Div】图标按钮，此时鼠标变成十字形，在文档中按住鼠标并拖动，即可以绘制出一个透明的矩形区。 或者在菜单栏中选择【插入】【布局对象】【AP Div】命令，即可插入AP层。,5,(3)松开鼠标，AP层即创建完成。 提示：在菜单栏中选择【编辑】【首

4、选参数】命令，打开【首选参数】对话框。切换到“不可见元素”面板，选中“AP元素的锚点”复选框，即能在页面编辑状态显示AP锚点。,6,AP层可以像表格一样嵌套，并且根据嵌套关系互为影响。嵌套AP层是指创建在已有AP层之内的AP层，嵌套的子AP层可以与父AP层一起移动、隐藏、可见，即可完全继承父AP的可见性。 2.创建嵌套AP层 (1)打开【文件】面板，双击文件名，打开文件6-21-3.htm。 (2)将光标定位于要插入AP层的位置，单击【插入】面板的【常用】模式中的【插入Div标签】按钮。 (3)弹出【插入Div标签】对话框，在“插入”下拉列表中选择“在开始标签之后”选项，默认选择，如下图所示。

5、,7,8,(4)单击【确定】按钮，将光标定位于这个新建AP层的左上角。 (5)在菜单栏中选择【插入】【布局】【AP Div】命令，插入一个默认大小的AP层，如下图所示。,9,10,用同样的方法，在id=AP2的AP层再创建一个AP层 切换到代码视图，可以看到嵌套AP层的源码如下： 此处显示 id“AP1“的内容 此处显示 id“AP2“的内容 此处显示 id“AP3“的内容 ,11,6.2.2 情境2 AP层的属性,AP层除了可以用【AP元素】面板来进行一些设置，更多的属性仍然要借助于【属性】面板。 选中层（单击层的外边框，即可选中层），可以在层的【属性】面板中设置层的属性，如图所示。,12,

6、【属性】面板中各项参数详细设置如下： 层编号：设置层的名称。在一个页面可以插入多个层，因此要为每一个层命名一个不同的名字，以便进行标识识别，在此命名为“AP2”。 “左”、“上”：用以设置层距离页面左上角的距离，在层中位置的控制均为绝对位置，会随浏览器显示分辨率的不同而位置有所变化，在此设置左“545px”、设置上“59px”。 “宽”、“高”：宽和高指定层的宽度和高度，默认插入层的宽和高为“200px”、“115px”，在此可以先不用设置具体的数值，在插入别的网页元素后根据插入元素的宽和高再来重新定义。 Z轴：用来设置层的Z轴，可以为负值，此设置在一个页面有多个层时，并重叠时，根据Z轴值的大

7、小来决定层的显示顺序，Z轴值最大的最前面显示，将覆盖Z轴值小的层。 可见性：在下拉列表中设置层的可视属性，层的可视属性如下表所示。,13,层的可视属性,14,背景图像：用来设置层的背景图像。 背景颜色：用来设置层的背景颜色。 溢出：当层中插入元素的内容超过层的设置大小时，显示层中的内容的显示方式如下表所示。 剪辑：用来设置层的可见区域，经过剪辑的层，只有指定的区域才可见，左、右、上、下后面的文本框用来设置可见区域的左边界距离层左、右、上、下的距离。,15,6.2.3 情境3 AP元素面板,通过【AP元素】面板可以设置AP层的显示、隐藏属性或是设置层的防重叠性，如图所示。,16,1. 层的可见性

8、 层的可见属性默认是可见的，按【F2】键，或在菜单栏中选择【窗口】【AP元素】命令，调出【AP元素】面板组。 可以单击所在层左侧的眼睛图标 来设置层的可见性。打开【AP元素】面板，单击层前面的眼睛图标，眼睛图标显示为睁开状态时为可见，眼睛图标显示为闭合状态时为隐藏，无眼睛图标是默认状态，为可见可继承父AP层可见属性，单击眼睛图标，可以同时改变所有AP层的可见性。眼睛睁开，AP层可见；眼睛闭上，AP层隐藏。,17,2. 防止层重叠 要防止层重叠，有两种方法： 在菜单栏中选择【修改】【排列顺序】【防止AP元素重叠】命令。 打开【AP元素】面板，选中“防止重叠”复选框。 在文档中创建多个层时设置了防

9、止层重叠，则在层拖动时也只能沿已有层的边界。 如果是在建立了重叠层之后曾选择此选项，则以前发生的层重叠是不能改变的。此时，需要通过选中层来进行移动的方法把重叠的层分开。,18,6.2.4 情境4 AP层的基本操作,1. AP层的激活与选中 2. 在AP层内插入内容 3. 调整AP层的大小 4. 调整AP层的位置 5. AP层的对齐 6. 设置AP层的背景,19,6.2.5 情境5 AP层与表格的相互转换,在上面对AP层的操作过程中，不难发现在浏览器大小有所变化或显示器的分辨率变化时，AP层的位置都有所变动，这些有时不是我们想要的效果，就需要将AP层与表格进行必要的转换。 AP层与表格有着不可分

10、割的联系，AP层可以转换为表格，表格也可以转换为AP层。,20,1. AP层转换为表格 AP层可以通过命令直接转换为表格。 在菜单栏中选择【修改】【转换】【将AP Div转换为表格】命令。 2.表格转换为层 AP层不仅可以转化为表格，同样，表格也能转换为层。 在菜单栏中选择【修改】【转换】【表格到层】命令。,21,6.3 上机项目实训,6.3.1 项目案例一 1.实训题目 “中国名胜”网页 2.实训目的 通过该网页的制作，可以掌握创建框架来规划出风格统一的网页的方法。,22,3.实训案例效果,23,单击左边的“故宫”文字图像后显示的网页,24,6.3.2 项目案例二,1.实训题目 “中国名胜十三陵”网页 2.实训目的 通过该网页的制作，可以掌握创建层的方法，层的基本设计过程。,25,3.实训案例效果,26,6.4 小结,本项目介绍了框架与AP Div的使用。使用框架，可将一个浏览器窗口分成多