使用APdiv和框架.ppt

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属性的方法。掌握创建、编辑和保存框架的方法。掌握设置框架和框架集属性的方法。掌握创建嵌入式框架的方法。,返回目录,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定位一些特殊的网页内容。页面中所有的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 Div，也可以直接绘制自定义大小的AP Div。插入默认大小的AP Div。绘制自定义大小的AP Div。,返回目录,（1）插入默认大小的AP Div,将光标置于文档窗口中，选择【插入】/【布局对象】/【AP Div】命令将插入一个默认大小的AP Div，也可以将【插入】/【布局】面板上的 按钮拖曳到文档窗口，此时也将插入一个默认大小的AP Div。当向网页中插入AP Div时，AP Div属性是默认的，如AP Div的大小和背景颜色等。如果希望按照自己预先定义的大小插入AP Div，可以选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，在【分类】列表中选择【AP元素】分类，根据需要对其中的参数进行设置即可，如图所示。,返回目录,（2）绘制自定义大小的AP Div,在【插入】/【布局】面板上单击 按钮，然后将鼠标指针移至文档窗口中，当指针变为形状时，按住鼠标左键并拖曳，到适合位置释放鼠标左键，将绘制一个自定义大小的AP Div，如图所示。如果想一次绘制多个AP Div，在单击 按钮后，按住Ctrl键不放，连续进行绘制即可。,返回目录,三、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 Div。,返回目录,（1）绘制嵌套AP Div,选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，选择【分类】列表中的【AP元素】分类，勾选右侧面板中的【在AP Div中创建以后嵌套】复选框，如图所示，然后在【插入】/【布局】面板中单击 按钮，在现有AP Div中拖曳，则绘制的AP Div就嵌套在现有AP Div中了。,返回目录,（2）插入嵌套AP 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、移动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 Div,缩放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 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可以不受限制地被移动。移动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选定，然后选择【修改】/【排列顺序】中的相应命令（如【对齐下缘】），将使所有被选中的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为不可见，这时【属性】面板中的【可见性】选项为“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 元素】面板，用鼠标指针指向需要改变序号的AP Div，按住左键向上或向下拖曳鼠标，当拖曳到将要插入的两个AP Div之间时，会出现一条横线，此时释放鼠标左键，各个AP Div的z轴顺序会发生相应的改变。,返回目录,六、AP Div和 Div标签,在HTML代码中，AP Div和 Div标签使用共同的标记，那么二者有何不同，又有何联系呢？这可以从AP元素的定位方式的角度来说明。AP元素的定位方式有两种类型：绝对定位和相对定位。绝对定位是指定AP Div元素以最近上级包含块的左上角点为参考点进行定位，相对定位就是指AP Div元素以相对于自身位置的左上角为参考点进行定位。通过更改的定位方式，可以实现AP Div和Div标签的相互转换。方法是，在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，然后在其中插入图像，具体操作步骤参考教材。,返回目录,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 功能讲解,框架也是网页布局的工具之一，它能够将网页分割成几个独立的区域，每个区域显示独立的内容。框架的边框还可以隐藏，从而使其看起来与普通网页没有任何不同。具体内容如下。创建框架网页。保存框架。在框架中打开网页。选择框架和框架集。拆分和删除框架。设置框架属性。编辑无框架内容。创建浮动框架。,返回目录,一、创建框架网页,创建预定义框架集的方法如下。选择【文件】/【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项，如图所示。,返回目录,在当前网页中，单击【插入】/【布局】工具栏中 按钮的（向下箭头），在弹出的下拉按钮组中单击相应的按钮，如图所示。在当前网页中，选择菜单栏中的【插入】/【HTML】/【框架】命令，其子菜单命令如图所示。,返回目录,二、保存框架,由于一个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，而要将所有的框架网页文档都保存下来。可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集页面。选择【文件】/【保存全部】命令将依次保存框架集内的所有文件，包括框架集文件和框架文件，如图所示；在需要保存的框架内单击，然后选择【文件】/【保存框架】命令可以对单个框架文件进行保存；选择【文件】/【框架另存为】命令可以给框架文件改名；如果要将框架保存为模板，可以选择【文件】/【框架另存为模板】命令；在【框架】面板或【设计】视图窗口中选择框架集，然后选择【文件】/【保存框架】命令或【文件】/【框架集另存为】命令可以保存框架集文件。,返回目录,三、在框架中打开网页,在创建了框架网页后，既可以在各个框架中直接输入内容并保存，也可以在框架中打开已经创建好的网页，方法是，将光标置于框架中，选择【文件】/【在框架中打开网页】命令，打开需要打开的网页即可。,返回目录,四、选择框架和框架集,对框架或框架集进行操作前，通常需要对其进行选择。选择框架和框架集通常有两种方法：在【框架】面板中进行选择和在编辑窗口中进行选择。在【框架】面板中选择框架和框架集。在编辑窗口中选择框架和框架集。,返回目录,（1）在【框架】面板中选择框架和框架集,选择【窗口】/【框架】命令，打开【框架】面板。【框架】面板以缩略图的形式列出了框架集及内部的框架，每个框架中间的文字就是框架的名称。在【框架】面板中，直接单击相应的框架即可选择该框架，单击框架集的边框即可选择该框架集。被选择的框架和框架集，其周围出现黑色细线框，如图所示。,返回目录,（2）在编辑窗口中选择框架和框架集,按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框架集，被选择的框架集边框也将显示为虚线，如图所示。,返回目录,五、拆分和删除框架,虽然Dreamweaver CS4预先提供了许多框架集，但并不一定满足实际需要，这时就需要在预定义框架集的基础上拆分框架或直接手动自定义框架集的结构，删除不需要的框架。使用菜单命令拆分框架。手动自定义框架集。删除框架。,返回目录,（1）使用菜单命令拆分框架,在菜单栏中选择【修改】/【框架集】菜单中的【拆分左框架】、【拆分右框架】、【拆分上框架】或【拆分下框架】命令可以拆分框架，如图所示。也可以在【插入】/【布局】面板中单击相应的【框架】按钮来拆分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。,返回目录,（2）手动自定义框架集,在菜单栏中选择【查看】/【可视化助理】/【框架边框】命令，显示出当前网页的边框，然后将鼠标光标置于框架最外层边框线上，当鼠标光标变为时，单击并拖动鼠标到合适的位置即可创建新的框架，如图所示。,返回目录,如果将鼠标光标置于最外层框架的边角上，当鼠标光标变为 时，单击并拖动鼠标到合适的位置，可以一次创建垂直和水平的两条边框，将框架分隔为4个框架，如图所示。,返回目录,如果拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架。如要创建新的框架，可以先按住Alt键，然后拖动鼠标光标，可以对框架进行垂直和水平的分隔，如图所示。,返回目录,（3）删除框架,如果要删除框架集内多余的框架，可以将其边框拖动到父框架边框上或直接拖离页面，如图所示。,返回目录,六、设置框架属性,框架及框架集是一些独立的HTML文档。可以通过设置框架或框架集的属性来对框架或框架集进行修改，如框架的大小、边框宽度、是否有滚动条等。设置框架集属性。设置框架属性。,返回目录,（1）设置框架集属性,框架集【属性】面板如图所示。,返回目录,（2）设置框架属性,框架【属性】面板如图所示。,返回目录,七、编辑无框架内容,有些浏览器不支持框架技术，Dreamweaver CS4提供了解决这种问题的方法，即编辑“无框架内容”，以使不支持框架的浏览器也可以显示无框架内容。方法是，选择【修改】/【框架集】/【编辑无框架内容】命令，进入如图所示文档窗口，在其中输入相应内容，内容输入完毕后，再次选择【修改】/【框架集】/【编辑无框架内容】命令返回到普通视图即可。,返回目录,八、创建浮动框架,浮动框架是一种较为特殊的框架形式，可以包含在许多元素当中。创建浮动框架的方法是，选择【插入】/【标签】命令，打开【标签选择器】对话框，然后展开【HTML标签】分类，在右侧列表中找到“iframe”，如图所示。,返回目录,单击 按钮打开【标签编辑器iframe】对话框进行设置，单击 按钮返回到【标签编辑器】对话框，然后单击 按钮关闭【标签编辑器】对话框即可，如图所示。,返回目录,7.2.2 范例解析插入和设置框架,首先将“范例解析素材第7讲7-2-2”文件夹下的所有内容复制到站点根文件夹下，然后创建框架网页。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再在框架中打开预先制作好的网页，并设置框架集和框架属性，具体操作步骤参考教材。,返回目录,返回目录,7.2.3 课堂实训使用框架布局“技术论坛”网页,首先将“课堂实训素材第7讲7-2-3”文件夹下的内容复制到站点根文件夹下，然后使用框架制作“技术论坛”网页，最终效果如图所示。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再插入一个右侧框架，然后在各个框架中打开网页。,返回目录,返回目录,7.3 综合案例使用框架布局“网络管理系统”网页,首先将“范例解析素材第7讲”文件夹下的所有内容复制到站点根文件夹下，然后创建框架网页，最终效果如图所示。这是创建和编辑框架网页的一个例子，可以先插入预定义框架集，接着再插入一个右侧框架，然后在各个框架中打开网页，最后插入浮动框架。,返回目录,返回目录,