网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第9章 框架 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习主要内容： 1.框架与框架集 2.框架的应用

3 9.1框架与框架集 使用框架是制作网页时常用的页面布局方式。
在利用框架技术将网页划分的若干区域中，每个区 域都是独立的网页，这些区域里的网页既各自独立 又相互有联系。 在同一网站的多个网页中，网页上部的logo和导航 条是完全相同的，可以将这些相同部分各自做成一 个网页，作为框架的一部分，而在框架的其它部分 装载不同内容。

4 9.1框架与框架集 9.1.1概述 9.1.2课堂案例-婴幼儿健康网 9.1.3创建框架 9.1.4保存框架 9.1.5框架选择
9.1.6修改框架 9.1.7拆分框架 9.1.8删除框架

5 9.1.1概述 框架（Frames）技术是由框架集（Frameset）和 框架（Frame）组成。
所谓框架，就是构成框架页面的各个不同组成部分， 网页被拆分成几块区域，就存在几个框架。 所谓框架集，顾名思义就是框架的集合，框架集本 身并不包含可见内容，它只是一个容器，用于指定 要在框架中显示的其他网页及其显示方式。

6 9.1.2课堂案例-婴幼儿健康网 案例学习目标：学习框架的基本操作。
案例知识要点：选择菜单【文件】|【新建】创建框 架，在【框架】面板中指定框架，并利用框架集 【属性】面板进行属性设置。 素材所在位置：光盘/案例素材/ch09/课堂案例- 婴幼儿健康网。 框架布局要求如图9-2所示，案例效果如图9-3所 示。

7

8

9 9.1.3创建框架 选择菜单【插入】|【HTML】|【框架】，在级联 子菜单中选择框架类型后，自动打开【框架标签辅 助功能属性】对话框，如图9-17所示，在该对话 框中可为各个框架命名，通常采用系统缺省的命名。

10 9.1.4保存框架 框架中的内容是网页文档，保存框架实际上就是保 存框架中的网页文档。在框架中完成页面制作后， 需要分别保存每个框架文档，还要保存框架集文档。 1. 保存框架文档 2. 保存框架集文档 3 .保存框架集中所有文档

11 9.1.5框架选择 1．利用【框架】面板选择 2．在【文档】窗口中选择框架集

12 9.1.6修改框架 修改框架大小通常采用以下两种方法。 （1）通过拖曳鼠标调整框架。 （2）在框架集【属性】面板中设置框架大小。

13 9.1.7拆分框架 拆分框架通常采用以下两种方法。 （1）单击要拆分的框架内部，将光标置于 该框架中。选择菜单【修改】|【框架集】， 然后选择【拆分左框架】、【拆分右框架】、 【拆分上框架】、【拆分下框架】四个命令 完成框架的拆分。 （2）按住<Alt>键，利用鼠标拖曳边框线， 拆分框架。

14 9.1.8删除框架 删除框架是创建框架的逆向操作，其操作步骤如下。 将鼠标置于要删除的框架边框上，光标变成双向箭 头。
横向或纵向拖动鼠标到上一级框架的左右或上下边 框线处。 释放鼠标即可删除框架。

15 9.2框架设置 9.2.1课堂案例-名胜度假村 9.2.2框架属性 9.2.3为框架添加内容 9.2.4框架中的链接 9.2.5框架居中

16 9.2.1课堂案例-名胜度假村 案例学习目标：学习框架的应用方法。
案例知识要点：在【框架】面板中选择框架，并利 用框架【属性】面板进行属性设置，为框架页设置 正确的链接目标。 素材所在位置：光盘/案例素材/ch09/课堂案例-名 胜度假村。 网页框架布局要求如图9-21所示，页面效果如图 9-22所示。

17

18

19 9.2.2框架属性 选择菜单【窗口】|【框架】，在【框架】面板中选 择框架后，在框架【属性】面板中设置框架的属性。

20 9.2.3为框架添加内容 通常采用以下两种方法。 1．利用【文件】菜单 2．利用框架【属性】面板

21 9.2.4框架中的链接 利用框架将网页划分若干区域后，还要设置各个区 域中网页之间的链接关系。
在Dreamweaver中，为框架网页内的文本或其他 元素指定一个链接，不仅要指定一个链接文件，还 要设置链接目标以指明链接文件在哪个框架内显示。

22 9.2.5为框架居中 框架集网页的居中显示可以通过“内嵌框架 （iframe）”来实现。
利用内嵌框架将一个网页文档嵌入在另一个网页文 档中显示，嵌入网页文件与原网页文件内容相互融 合，成为一个整体，好像电视中的“画中画”。 框架集网页居中的方法是在网页中插入1行1列的居 中表格，在表格中插入内嵌框架，再在内嵌框架中 插入框架集文件，即可实现所有框架页的居中显示。

23 9.3练习案例 练习案例—美丽境界 练习案例—美容与化妆

24 9.3.1练习案例-美丽境界 案例练习目标：练习框架的基本操作。 案例操作要点：
1．建立“上方及左侧嵌套”框架页面，将框架 topFrame源文件存为top.html，将框架leftFrame源文 件存为left.html，将框架mainFrame源文件存为 main.html，将框架集文件保存为index.html。 2．设置框架topFrame高度为111px，框架leftFrame 的宽度为258px。 3．在框架mainFrame中，插入宽度为842px、2行3列 的表格，并插入相关图像文件和文字，完成main.html 的制作。 素材所在位置：光盘/案例素材/ch09/练习案例-美丽境 界，框架布局要求如图9-46所示，网页效果如图9-47 所示。

25

26

27 9.3.2练习案例-美容与化妆 案例练习目标：练习框架布局结构和框架居中。 案例操作要点：
1. 新建“上方及左侧嵌套”结构并采用缺省框架 名，上方框架为topFrame，左侧框架为 leftFrame，主框架为mainFrame，将框架集文件 保存为index.html。 2. 设置框架topFrame高度为307px，框架 leftFrame的宽度为250px。 3. 为框架topFrame设置源文件itop.html，为框 架leftFrame设置源文件ileft.html，为框架 mainFrame设置源文件caizhuang.html。

28 9.3.2练习案例-美容与化妆 4. 在index.html网页中，为文字“网站首页”设置链接 文件index0.html，目标为_top；为文字“护肤宝典” 设置链接文件为hufu.html，为文字“彩妆攻略”设置链 接文件为caizhuang.html，目标均为为mainFrame。 为文字“美体物语” 设置链接文件为meiti.html，为文 字“明星造型”和“美发达人”设置空链接。 5. 创建icenter.html文件，利用设置内置框架方法，使 框架集文档index.html在浏览窗口中居中对齐。 6. 在网页index0.html中，为文字“欢迎进入美容与化 妆网站……”设置链接文件icenter.html，进入框架集 页面。 素材所在位置：光盘/案例素材/ch09/练习案例-美容与 化妆。 框架布局要求如图9-48所示，框架网页效果如图9-49 所示。

29

30