Dreamweaver CS3网页设计与制作教程 第2版 申莉莉教案 第7章新.pptVIP

第7章 框 架 7.1 案例1：利用框架创建网页 7.2 选择框架和框架集 7.3 编辑框架 7.4 设置框架和框架集属性 7.5 案例2：嵌套“奥运小知识”框架 7.6 上机实训 7.7 习题 7.1 案例1：利用框架创建网页 【案例目的】利用框架，创建网页，点击框架左侧的“英语读物”，出现网页如图7-1所示。 【核心知识】框架的创建、选择、编辑链接，以及正确保存框架。 7.1.1 框架和框架集 框架是指网页在一个浏览器窗口下面分隔成几个不同区域的形式。单个框架是指在网页上定义的一个区域。框架由两个主要部分—框架集和框架。框架集是一个定义了框架结构和属性的HTML网页，包括框架数量、框架尺寸、载入的框架网页等属性。框架集不会显示在浏览器中，它只是用于容纳和组织保存框架网页的一个容器。 7.1.2 创建框架和框架集 1. 运行Dreamweaver CS3，选择“文件”－“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”－“框架集”－“上方固定，左侧嵌套”选项，如图7-3所示。 2. 单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如图7-4所示，在此可设置可以为每一个框架指定一个标题。 3. 单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如图7-5所示。 7.1.3 保存框架 每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。例如保存图7-5所示的框架集，操作步骤如下： 1. 选择“文件”?“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为index.html，表示整个框架集的名称，如图7-6所示。 2. 单击【保存】按钮，弹出第2个“另存为”对话框，右边框架内侧出现阴影，命名为main.html，表示右边框架即主框架的文件名，如图7-7所示。 3. 单击【保存】按钮，分别为依次弹出的第2个和第3个“另存为”对话框命名为left.html和top.html，表示左边框架和上方框架的文件名。 案例分解1：创建和保存框架集 （1）在Dreamweaver CS3中选择“文件”?“新建”?“示例中的页”?“框架集”?“上方固定，左侧嵌套”选项，如图7-8所示。 （2）选择“文件”?“保存全部”命令，保存所创建的文件。将整个框架集保存为index.html，右边框架保存为main.html，左边框架保存为left.html，上方框架保存为top.html。 7.2 选择框架和框架集 在Dreamweaver中，选择“窗口”?“框架”命令，可以打开框架面板，如图7-9所示。 在面板中单击要选择的框架，即可选中。所选中的框架边框内侧会出现虚线，如图7-10所示。或者按Alt键，在要选择的框架内单击鼠标左键也可选中。 在文档窗口中，当鼠标指针靠近框架集的边框并且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集，如图7-13所示。 7.3.1 拆分框架 制作框架网页可以根据Dreamweaver 自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符号设计要求。 1. 将光标放置在图7-13的右侧框架中，在“布局”插入栏的“框架”下拉菜单中选择“底部框架”按钮，如图7-14所示，将其拆分为如图7-15所示框架。 2. 按Alt键选择图7-13所示的左侧框架，用鼠标向右拖动框架的右边框，将其拆分成如图7-16所示框架。 3. 将光标放在上方框架中，直接执行“修改”?“框架集”?“拆分上框架”命令进行拆分，如图7-17所示。还可以选择“拆分左框架”、“拆分右框架”、“拆分下框架”命令进行拆分。 4. 将光标放在框架的四个角，当光标变成时，拖动到框架的中间，可以将框架拆分成4个，如图7-18所示。 案例分解2：拆分框架 （1）按Alt键选择图7-8所示的框架下边框，用鼠标向上拖动框架的上边框，将其拆分成如图7-19所示框架。 （2）在上框架中插入图片，左框架中插入7行1列的表格，如图7-20所示。并在表格中输入内容。 7.3.2 删除框架 用鼠标将框架边框脱离编辑窗口即可删除框架，如果框架中有未保存的内容，Dreamweaver会提示保存该文档。 通过关闭显示框架集的文档窗口，可以删除框架集，如果该文件已经保存，可以删除该文件。 如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。 7.3.3 链接框架 要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标，链接的目标属性指定在其中打开链接的内容框架或窗口。如果导航条位于左框架，而希望链接的材料显示在右侧的主要内容框架中，则必须将主要内容框架的名称指定为每个导航条链接的