使用APdiv和框架.ppt

《使用APdiv和框架.ppt》由会员分享，可在线阅读，更多相关《使用APdiv和框架.ppt（54页珍藏版）》请在三一办公上搜索。

1、Dreamweaver CS4中文版基础培训教程,主讲：XXX老师,从零开始,人民邮电出版社,第7讲 使用AP Div和框架,教学目标7.1 使用AP Div7.1.1 功能讲解7.1.2 范例解析插入和设置AP Div7.1.3 课堂实训使用AP Div制作特殊效果7.2 使用框架7.2.1 功能讲解7.2.2 范例解析插入和设置框架7.2.3 课堂实训使用框架布局“技术论坛”网页7.3 综合案例使用框架布局“网络管理系统”网页,教学目标,掌握创建和编辑AP Div的方法。掌握设置AP Div属性的方法。掌握创建、编辑和保存框架的方法。掌握设置框架和框架集属性的方法。掌握创建嵌入式框架的方法

2、。,返回目录,7.1使用AP Div,7.1.1 功能讲解7.1.2 范例解析插入和设置AP Div7.1.3 课堂实训使用AP Div制作特殊效果,返回目录,7.1.1 功能讲解,认识AP Div和【AP元素】面板。创建AP Div。AP Div属性。创建嵌套AP Div。编辑AP Div。AP Div和 Div标签。,返回目录,一、认识AP Div和【AP元素】面板,AP Div是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将AP Div放置在页面的任何位置。由于AP Div中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用AP Div定位一些特殊的网页内

3、容。页面中所有的AP Div都会显示在【AP元素】面板中。选择【窗口】/【AP元素】命令，可以打开【AP元素】面板。如图所示是一个包含多个AP Div的【AP元素】面板。,返回目录,在【AP元素】面板中可以实现以下功能。可以对AP Div进行重命名。可以修改AP Div的z轴顺序。可以禁止AP Div重叠。可以显示或隐藏AP Div。可以选定AP Div，如果按住Shift键不放，依次单击可以选中多个AP Div。按住Ctrl键不放，将某一个AP Div拖动到另一个AP Div上，形成嵌套的AP Div。,返回目录,二、创建AP Div,在创建AP Div时，可以直接插入一个默认大小的AP D

4、iv，也可以直接绘制自定义大小的AP Div。插入默认大小的AP Div。绘制自定义大小的AP Div。,返回目录,（1）插入默认大小的AP Div,将光标置于文档窗口中，选择【插入】/【布局对象】/【AP Div】命令将插入一个默认大小的AP Div，也可以将【插入】/【布局】面板上的 按钮拖曳到文档窗口，此时也将插入一个默认大小的AP Div。当向网页中插入AP Div时，AP Div属性是默认的，如AP Div的大小和背景颜色等。如果希望按照自己预先定义的大小插入AP Div，可以选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，在【分类】列表中选择【AP元素】分类，根据需要对其中

5、的参数进行设置即可，如图所示。,返回目录,（2）绘制自定义大小的AP Div,在【插入】/【布局】面板上单击 按钮，然后将鼠标指针移至文档窗口中，当指针变为形状时，按住鼠标左键并拖曳，到适合位置释放鼠标左键，将绘制一个自定义大小的AP Div，如图所示。如果想一次绘制多个AP Div，在单击 按钮后，按住Ctrl键不放，连续进行绘制即可。,返回目录,三、AP Div属性,插入AP Div以后，在【属性】面板中可以查看和编辑AP Div的属性，如图所示。,返回目录,四、创建嵌套AP Div,AP Div的嵌套就是指在一个AP Div中创建另一个AP Div，且包含另一个AP Div。制作嵌套的A

6、P Div通常有两种方式：一种是在AP Div内部新建嵌套AP Div；另一种是将已经存在的AP Div添加到另外一个AP Div内，从而使其成为嵌套的AP Div。绘制嵌套AP Div。插入嵌套AP Div。使用【AP元素】面板制作嵌套AP Div。,返回目录,（1）绘制嵌套AP Div,选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，选择【分类】列表中的【AP元素】分类，勾选右侧面板中的【在AP Div中创建以后嵌套】复选框，如图所示，然后在【插入】/【布局】面板中单击 按钮，在现有AP Div中拖曳，则绘制的AP Div就嵌套在现有AP Div中了。,返回目录,（2）插入嵌套AP

7、 Div,将光标置于所要嵌套的AP Div中，然后选择【插入】/【布局对象】/【AP Div】命令，插入一个嵌套的AP Div，如图所示。,返回目录,（3）使用【AP元素】面板制作嵌套AP Div,在【AP元素】面板中选中一个AP Div，按住Ctrl键，将其拖曳到另一个AP Div上面，形成嵌套AP Div。AP Div的嵌套和重叠不一样。嵌套的AP Div与父AP Div是有一定关系的，而重叠的AP Div除视觉上会有一些联系外，其他根本没有什么关系。,返回目录,五、编辑AP Div,在创建了AP Div以后，许多时候要根据实际需要对其进行编辑，包括选择AP Div、缩放AP Div、移动

8、AP Div、对齐AP Div、AP Div的可见性和AP Div的Z轴顺序等。,返回目录,（1）选择AP Div,单击文档中的 图标来选定AP Div，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【AP 元素的锚点】复选框。将光标置于AP Div内，然后在文档窗口底边的标签条中选择相应的HTML标签，如图所示。,返回目录,单击AP Div的边框线。在【AP元素】面板中单击AP Div的名称，如图所示。如果要选定两个以上的AP Div，只要按住Shift键，在文档窗口中逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可。,返回目录,（2）缩放AP D

9、iv,缩放AP Div仅改变AP Div的宽度和高度，不改变AP Div中的内容。在文档窗口中可以缩放一个AP Div，也可同时缩放多个AP Div，使它们具有相同的尺寸。缩放单个AP Div有以下几种方法。选定AP Div，然后拖曳缩放手柄（AP Div周围出现的小方块）来改变AP Div的尺寸。拖曳上或下手柄改变AP Div的高度，拖曳左或右手柄改变AP Div的宽度，拖曳4个角的任意一个缩放点同时改变AP Div的宽度和高度。选定AP Div，然后按住Ctrl键，每按一次方向键，AP Div就被改变一个像素值。选定AP Div，然后同时按住ShiftCtrl组合键，每按一次方向键，AP

10、Div就被改变10个像素值。如果同时对多个AP Div的大小进行统一调整，方法是，按住Shift键，将所有的AP Div逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有AP Div的宽度全部变成了指定的宽度。还可以选择【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的AP Div的宽度为标准。,返回目录,（3）移动AP Div,要想精确定位AP Div，许多时候要根据需要移动AP Div。移动AP Div时，首先要确定AP Div是可以重叠的，也就是不勾选【AP元素】面板中的【防止重叠】复选框，这样AP Div可以不受

11、限制地被移动。移动AP Div的方法主要有以下几种。选定AP Div后，当鼠标指针靠近缩放手柄，变为 形状时，按住鼠标左键并拖曳，AP Div将跟着鼠标的移动而发生位移。选定AP Div，然后按4个方向键，向4个方向移动AP Div。每按一次方向键，将使AP Div移动1个像素值的距离。选定AP Div，按住Shift键，然后按4个方向键，向4个方向移动AP Div。每按一次方向键，将使AP Div移动10个像素值的距离。,返回目录,（4）对齐AP Div,对齐功能可以使两个或两个以上的AP Div按照某一边界对齐。对齐AP Div的方法是，首先将所有AP Div选定，然后选择【修改】/【排列

12、顺序】中的相应命令（如【对齐下缘】），将使所有被选中的AP Div的底边按照最后选定AP Div的底边对齐，即所有AP Div的底边都排列在一条水平线上。,返回目录,（5）AP Div的可见性,AP Div内可以包含所有的网页元素，通过改变AP Div的可见性，可以控制AP Div内元素的显示与隐藏。改变AP Div的可见性可以通过【AP 元素】面板或AP Div【属性】面板进行。AP Div名称左边为 状态时，表示AP Div为可见，这时【属性】面板中的【可见性】选项为“visible”（可见)。AP Div名称左边为 状态时，表示AP Div为不可见，这时【属性】面板中的【可见性】选项为“

13、hidden”（隐藏)。AP Div名称左边没有 或 时，表示可见性为默认，这时【属性】面板中的【可见性】选项为“default”（默认）。若需同时改变所有AP Div的可见性，则单击【AP元素】面板中 图标列最顶端的 图标，原来所有的AP Div均变为可见或不可见。,返回目录,返回目录,（6）AP Div的Z轴顺序,AP Div的z轴的含义是，除了屏幕的x、y坐标之外，逻辑上增加了一个垂直于屏幕的z轴，z轴顺序就好像AP Div在z轴上的坐标值。这个坐标值可正可负，也可以是0，数值大的在上层，数值小的在下层。改变AP Div的z轴顺序的方法很简单，只需打开【AP 元素】面板，用鼠标指针指向需

14、要改变序号的AP Div，按住左键向上或向下拖曳鼠标，当拖曳到将要插入的两个AP Div之间时，会出现一条横线，此时释放鼠标左键，各个AP Div的z轴顺序会发生相应的改变。,返回目录,六、AP Div和 Div标签,在HTML代码中，AP Div和 Div标签使用共同的标记，那么二者有何不同，又有何联系呢？这可以从AP元素的定位方式的角度来说明。AP元素的定位方式有两种类型：绝对定位和相对定位。绝对定位是指定AP Div元素以最近上级包含块的左上角点为参考点进行定位，相对定位就是指AP Div元素以相对于自身位置的左上角为参考点进行定位。通过更改的定位方式，可以实现AP Div和Div标签的

15、相互转换。方法是，在CSS规则定位对话框的【Position】下拉列表中选择“absolute”或“relative”，如图所示，“absolute”表示绝对定位方式，“relative”表示相对定位方式。Dreamweaver CS4默认创建的AP Div是绝对定位方式。,返回目录,7.1.2 范例解析插入和设置AP Div,首先将“范例解析素材第7讲7-1-2images”文件夹复制到站点根文件夹下，然后创建文档“7-1-2.htm”，并在文档中插入和设置AP Div，最终效果如图所示。这是插入和设置AP Div的一个例子，可以先插入AP Div，然后在其中插入图像，具体操作步骤参考教材。

16、,返回目录,7.1.3 课堂实训使用AP Div制作特殊效果,使用AP Div制作阴影文本，在浏览器中的浏览效果如图所示。这是使用AP Div重叠功能制作特效的一个例子，需要插入两个AP Div，使其位置稍微有所偏差，并将文本颜色设置有所差异即可。,返回目录,7.2 使用框架,2.2.1 功能讲解2.2.2 范例解析插入和设置框架 2.2.3 课堂实训使用框架布局“技术论坛”网页,返回目录,7.2.1 功能讲解,框架也是网页布局的工具之一，它能够将网页分割成几个独立的区域，每个区域显示独立的内容。框架的边框还可以隐藏，从而使其看起来与普通网页没有任何不同。具体内容如下。创建框架网页。保存框架。

17、在框架中打开网页。选择框架和框架集。拆分和删除框架。设置框架属性。编辑无框架内容。创建浮动框架。,返回目录,一、创建框架网页,创建预定义框架集的方法如下。选择【文件】/【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项，如图所示。,返回目录,在当前网页中，单击【插入】/【布局】工具栏中 按钮的（向下箭头），在弹出的下拉按钮组中单击相应的按钮，如图所示。在当前网页中，选择菜单栏中的【插入】/【HTML】/【框架】命令，其子菜单命令如图所示。,返回目录,二、保存框架,由于一个框架集包含多个框架，每一个框

18、架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，而要将所有的框架网页文档都保存下来。可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集页面。选择【文件】/【保存全部】命令将依次保存框架集内的所有文件，包括框架集文件和框架文件，如图所示；在需要保存的框架内单击，然后选择【文件】/【保存框架】命令可以对单个框架文件进行保存；选择【文件】/【框架另存为】命令可以给框架文件改名；如果要将框架保存为模板，可以选择【文件】/【框架另存为模板】命令；在【框架】面板或【设计】视图窗口中选择框架集，然后选择【文件】/【保存框架】命令或【文件

19、】/【框架集另存为】命令可以保存框架集文件。,返回目录,三、在框架中打开网页,在创建了框架网页后，既可以在各个框架中直接输入内容并保存，也可以在框架中打开已经创建好的网页，方法是，将光标置于框架中，选择【文件】/【在框架中打开网页】命令，打开需要打开的网页即可。,返回目录,四、选择框架和框架集,对框架或框架集进行操作前，通常需要对其进行选择。选择框架和框架集通常有两种方法：在【框架】面板中进行选择和在编辑窗口中进行选择。在【框架】面板中选择框架和框架集。在编辑窗口中选择框架和框架集。,返回目录,（1）在【框架】面板中选择框架和框架集,选择【窗口】/【框架】命令，打开【框架】面板。【框架】面板以

20、缩略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框架的名称。在【框架】面板中，直接单击相应的框架即可选择该框架，单击框架集的边框即可选择该框架集。被选择的框架和框架集，其周围出现黑色细线框，如图所示。,返回目录,（2）在编辑窗口中选择框架和框架集,按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框架集，被选择的框架集边框也将显示为虚线，如图所示。,返回目录,五、拆分和删除框架,虽然Dreamweaver CS4预先提供了许多框架集，但并不一定满足实际需要，这时就需要在预定义框架集的基础上拆分框架或直接手动自定义

21、框架集的结构，删除不需要的框架。使用菜单命令拆分框架。手动自定义框架集。删除框架。,返回目录,（1）使用菜单命令拆分框架,在菜单栏中选择【修改】/【框架集】菜单中的【拆分左框架】、【拆分右框架】、【拆分上框架】或【拆分下框架】命令可以拆分框架，如图所示。也可以在【插入】/【布局】面板中单击相应的【框架】按钮来拆分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。,返回目录,（2）手动自定义框架集,在菜单栏中选择【查看】/【可视化助理】/【框架边框】命令，显示出当前网页的边框，然后将鼠标光标置于框架最外层边框线上，当鼠标光标变为时，单击并拖动鼠标到合适的位置即可创建新的框架，如图所示。,返

22、回目录,如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为 时，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，将框架分隔为4个框架，如图所示。,返回目录,如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。如要创建新的框架，可以先按住Alt键，然后拖动鼠标光标，可以对框架进行垂直和水平的分隔，如图所示。,返回目录,（3）删除框架,如果要删除框架集内多余的框架，可以将其边框拖动到父框架边框上或直接拖离页面，如图所示。,返回目录,六、设置框架属性,框架及框架集是一些独立的HTML文档。可以通过设置框架或框架集的属性来对框架或框架集进行修改，如框架的大小、边

23、框宽度、是否有滚动条等。设置框架集属性。设置框架属性。,返回目录,（1）设置框架集属性,框架集【属性】面板如图所示。,返回目录,（2）设置框架属性,框架【属性】面板如图所示。,返回目录,七、编辑无框架内容,有些浏览器不支持框架技术，Dreamweaver CS4提供了解决这种问题的方法，即编辑“无框架内容”，以使不支持框架的浏览器也可以显示无框架内容。方法是，选择【修改】/【框架集】/【编辑无框架内容】命令，进入如图所示文档窗口，在其中输入相应内容，内容输入完毕后，再次选择【修改】/【框架集】/【编辑无框架内容】命令返回到普通视图即可。,返回目录,八、创建浮动框架,浮动框架是一种较为特殊的框架

24、形式，可以包含在许多元素当中。创建浮动框架的方法是，选择【插入】/【标签】命令，打开【标签选择器】对话框，然后展开【HTML标签】分类，在右侧列表中找到“iframe”，如图所示。,返回目录,单击 按钮打开【标签编辑器iframe】对话框进行设置，单击 按钮返回到【标签编辑器】对话框，然后单击 按钮关闭【标签编辑器】对话框即可，如图所示。,返回目录,7.2.2 范例解析插入和设置框架,首先将“范例解析素材第7讲7-2-2”文件夹下的所有内容复制到站点根文件夹下，然后创建框架网页。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再在框架中打开预先制作好的网页，并设置框架集和框架属性

25、，具体操作步骤参考教材。,返回目录,返回目录,7.2.3 课堂实训使用框架布局“技术论坛”网页,首先将“课堂实训素材第7讲7-2-3”文件夹下的内容复制到站点根文件夹下，然后使用框架制作“技术论坛”网页，最终效果如图所示。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再插入一个右侧框架，然后在各个框架中打开网页。,返回目录,返回目录,7.3 综合案例使用框架布局“网络管理系统”网页,首先将“范例解析素材第7讲”文件夹下的所有内容复制到站点根文件夹下，然后创建框架网页，最终效果如图所示。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再插入一个右侧框架，然后在各个框架中打开网页，最后插入浮动框架。,返回目录,返回目录,