网页设计与制作 教学课件 作者 王君学 第08章 使用框架和AP Div布局页面.pptVIP

本章将介绍框架和AP Div的基本知识以及使用它们布局页面的基本方法。 创建AP Div后，在【属性】面板中会显示所创建AP Div的基本属性设置，如左边界、上边界、宽度、高度、z轴顺序、可见性、背景图像、背景颜色等，此时可以进一步修改这些属性设置，使AP Div更完美。 缩放单个AP Div有以下几种方法。 同时调整多个AP Div的宽度。 按住Shift键，将3个AP Div逐一选定，然后选择【窗口】/【属性】命令，打开它们的【属性】面板，在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有AP Div的宽度全部变成了所设置的数值。 移动AP Div的方法主要有以下几种。 对齐功能可以使两个或两个以上的AP Div按照某一边界对齐。对齐AP Div的方法是，首先将所有AP Div选定，然后选择【修改】/【排列顺序】中的相应命令，如选择【对齐下缘】命令，将使所有被选中的AP Div的底边按照最后选定的AP Div的底边对齐，即所有AP Div的底边都排列在一条水平线上。 在【修改】/【排列顺序】菜单中，共有以下4种对齐方式。 单击【AP元素】面板的 图标列，可以改变可见性。 AP Div与Div标签使用的是同一个标签──“div”，只是AP Div被赋予了CSS样式，而Div标签只有一个【ID】属性参数。在源代码中，它们使用的都是“div”标签。AP Div在绘制时，同时被赋予了CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制。实际上，AP Div与Div标签是同一个网页元素的不同表现形态，通过CSS样式可使两者间相互转换。例如，在CSS规则定义对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示AP Div，否则即为Div标签，这是AP Div与Div标签相互转换的关键因素。 在【插入】/【布局】面板中单击 （插入Div标签）按钮，在弹出的对话框中进行设置。 8.5 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 设