使用框架和APDiv布局ppt课件.ppt

本章将介绍框架和AP Div的基本知识以及使用它们布局页面的基本方法。,第08章 使用框架和AP Div布局页面,学习目标,掌握创建框架的方法。掌握设置框架的方法。掌握创建AP Div的方法。掌握设置AP Div的方法。掌握Div标签的使用方法。,8.1 创建框架,创建框架保存框架在框架中打开网页文档拆分框架,8.1.1 创建框架,Dreamweaver CS3中预先定义了很多种框架集，创建预定义框架集的方法如下。,选择【文件】/【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项在欢迎屏幕中，选择【从模板创建】/【框架集】命令在当前网页中，单击【插入】/【布局】工具栏中 （框架）按钮的 （向下箭头），在弹出的下拉按钮组中单击相应的按钮在当前网页中，选择菜单栏中的【插入记录】/【HTML】/【框架】中的相应命令,8.1.1 创建框架,8.1.1 创建框架,8.1.2 保存框架,由于一个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，而要将所有的框架网页文档都保存下来。可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集页面。选择【文件】/【保存全部】命令，整个框架边框的内侧会出现一个阴影框，同时弹出【另存为】对话框。,8.1.3 在框架中打开网页文档,新创建的每一个框架都是一个空文档，也可以在该框架内直接打开已经预先制作好的文档。将鼠标光标置于框架内，选择【文件】/【在框架中打开】命令，打开文档即可。,8.2 设置框架,选择框架和框架集设置框架集属性设置框架属性设置框架中的超级链接,8.2.1 选择框架和框架集,一、在【框架】面板中选择框架和框架集 选择【窗口】/【框架】命令，打开【框架】面板。【框架】面板以缩略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框架的名称。在【框架】面板中，直接单击相应的框架即可选择该框架，单击框架集的边框即可选择该框架集。被选择的框架和框架集，其周围出现黑色细线框。,8.2.1 选择框架和框架集,二、在编辑窗口中选择框架和框架集 按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框架集，被选择的框架集边框也将显示为虚线。,8.2.2 设置框架集属性,在【框架】面板中单击框架集边框，将整个框架集选中，然后在【属性】面板中，设置框架集属性。,8.2.3 设置框架属性,在【框架】面板中单击框架将其选中，然后在【属性】面板中设置相关参数。,8.2.4 设置框架中的超级链接,在没有框架的文档中，按照指向的对象窗口不同，链接目标可以分为“_blank”、“_parent”、“_self”、“_top”等4种形式。而在使用框架的文档中，又增加了与框架有关的目标，可以在一个框架内使用链接改变另一个框架的内容。,8.3 创建AP Div,创建AP Div修改AP Div的默认设置,8.3.1 创建AP Div,将鼠标光标置于文档窗口中欲插入AP Div的位置，选择【插入记录】/【布局对象】/【AP Div】命令，插入一个默认的AP Div。将【插入】/【布局】面板上的 （绘制AP Div）按钮拖曳到文档窗口中，插入一个默认的AP Div。,8.3.1 创建AP Div,单击【插入】/【布局】面板上的 （绘制AP Div） 按钮，将鼠标光标移至文档窗口中，当鼠标光标变为+形状时，拖曳鼠标光标，绘制一个自定义大小的AP Div。如果想一次绘制多个AP Div，在单击 （绘制AP Div） 按钮后，按住Ctrl键不放，连续进行绘制即可。,8.3.1 创建AP Div,制作嵌套的AP Div通常有两种方式：一种是在AP Div内部新建嵌套AP Div；另一种是将已经存在的AP Div添加到另外一个AP Div内，从而使其成为嵌套的AP Div。 一、绘制嵌套AP Div 首先选择【编辑】/【首选参数】命令，打开【首选参数】对话框，选择【分类】列表中的【AP元素】分类，勾选右侧面板中的【在AP div中创建以后嵌套】复选框，然后在【插入】/【布局】工具栏上单击 （绘制AP Div ）按钮，在现有AP Div中拖曳，则绘制的AP Div就嵌套在现有AP Div中了。,8.3.1 创建AP Div,二、插入嵌套AP Div 将鼠标光标置于所要嵌套的AP Div中，确定插入点，然后选择【插入记录】/【布局对象】/【AP Div】命令，插入一个嵌套的AP Div。,三、使用【AP元素】面板制作嵌套AP Div 在【AP元素】面板中选择一个AP Div，按住Ctrl键，将其拖曳到另一个AP Div上面，形成嵌套AP Div。,8.3.2 修改AP Div的默认设置,选择【编辑】/【首选参数】命令，打开【首选参数】对话框，在其中的【分类】列表框中选择【AP元素】分类。,8.4 设置AP Div,选择AP Div设置AP Div属性缩放AP Div移动AP Div对齐AP Div,8.4.1选择AP Div,单击文档中的 图标来选定AP Div，如果该图标没有显示，请在【首选参数】/【不可见元素】分类中勾选【AP元素的锚点】复选框。,8.4.1选择AP Div,将鼠标光标置于AP Div内，然后在文档窗口底边的标签条中选择“”标签。,8.4.1选择AP Div,单击AP Div的边框线。在【AP元素】面板中单击AP Div的名称。如果要选定两个以上的AP Div，只要按住Shift键，在文档窗口中逐个单击AP Div手柄，或在【AP元素】面板中逐个单击AP Div的名称，就可将AP Div同时选定。,8.4.2设置AP Div属性,创建AP Div后，在【属性】面板中会显示所创建AP Div的基本属性设置，如左边界、上边界、宽度、高度、z轴顺序、可见性、背景图像、背景颜色等，此时可以进一步修改这些属性设置，使AP Div更完美。,8.4.3缩放AP Div,缩放单个AP Div有以下几种方法。,选定AP Div，然后拖曳缩放手柄（AP Div周围出现的小方块）来改变AP Div的尺寸。拖曳下手柄改变AP Div的高度，拖曳右手柄改变AP Div的宽度，拖曳右下角的缩放点同时改变AP Div的宽度和高度。选定AP Div，然后按住Ctrl键，每按一次方向键，AP Div就被改变一个像素值。选定AP Div，然后同时按住ShiftCtrl键，每按一次方向键，AP Div就被改变10个像素值。,8.4.3缩放AP Div,同时调整多个AP Div的宽度。按住Shift键，将3个AP Div逐一选定，然后选择【窗口】/【属性】命令，打开它们的【属性】面板，在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有AP Div的宽度全部变成了所设置的数值。,8.4.4移动AP Div,移动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个像素值的距离。,8.4.5对齐AP Div,对齐功能可以使两个或两个以上的AP Div按照某一边界对齐。对齐AP Div的方法是，首先将所有AP Div选定，然后选择【修改】/【排列顺序】中的相应命令，如选择【对齐下缘】命令，将使所有被选中的AP Div的底边按照最后选定的AP Div的底边对齐，即所有AP Div的底边都排列在一条水平线上。在【修改】/【排列顺序】菜单中，共有以下4种对齐方式。,【左对齐】：以最后选定的AP Div的左边线为标准，对齐排列AP Div。【右对齐】：以最后选定的AP Div的右边线为标准，对齐排列AP Div。【对齐上缘】：以最后选定的AP Div的顶边为标准，对齐排列AP Div。【对齐下缘】：以最后选定的AP Div的底边为标准，对齐排列AP Div。,8.4.5AP Div的可见性,单击【AP元素】面板的 图标列，可以改变可见性。,8.5 Div标签,AP Div与Div标签使用的是同一个标签“”，只是AP Div被赋予了CSS样式，而Div标签只有一个【ID】属性参数。在源代码中，它们使用的都是“”标签。AP Div在绘制时，同时被赋予了CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制。实际上，AP Div与Div标签是同一个网页元素的不同表现形态，通过CSS样式可使两者间相互转换。例如，在CSS规则定义对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示AP Div，否则即为Div标签，这是AP Div与Div标签相互转换的关键因素。在【插入】/【布局】面板中单击 （插入Div标签）按钮，在弹出的对话框中进行设置。,8.6 实例布局“世界风景图片导航”网页,通过前面各节的学习，读者应该对框架和AP Div的基本知识有了一定的了解。本节将以“天搜”网页为例，介绍使用AP Div和Div标签布局网页的基本方法，让读者进一步巩固所学内容。,