网页制作第二部分8-框架及其应用
合集下载
第8讲框架的使用
1.6．删除框架
框架集中的框架是不可以直接删除的，要想删除框架怎 么办呢？其实很简单，只需要将要删除框架的边框拖出编 辑区即可 ，将鼠标光标移到需要删除框架的边框上，待光 标变成双箭头 ，按住鼠标左键不放 抓图，拖出编辑区即 可，如下图所示。
2、
1. 选择框架和框架集 2. 设置框架属性 3. 设置框架集属性
1.4．调整框架集
使用预定义插入的框架集并不一定完全符合用户的需要，用户可 以根据自己的需要，进一步设计自己的框架集 ，将鼠标光标置于需 要变动的顶部框架内，执行【修改】/【框架页】/【拆分左框架】 命令，如右图所示。
1.5．命名框架
对于框架集中每个框架的命名，用户自己可以设置新 的名称，也可以采用默认的框架命名，如左边框架就叫 leftFrame、顶部框架就叫topFrame、中间的主要内容框架 叫mainFrame、右边的叫rightFrame、底部的叫 bottomFrame。在绝大多数的情况下，我们都用系统默认 的命名方法，形象好记 。
设置框架属性
2.1．选择框架和框架集
利用框架面板，可以很方便的选种框架和框架集。框架面板上直 接单击选中“topFrame”框架，则编辑区中被选中的框架边框呈虚线 状态，如左图所示 ，在框架面板中单击框架集的边框，可以选中整个 框架集，此时编辑区的框架集边框呈虚线状态，如右图所示 。
2.2．设置框架属性
1.2．应用框架
• 框架用的最多的场合就是导航，一组框架用来显示导航栏，另一组框 架用来显示具体内容，如图所示，这是一个左右结构的框架页面，左 侧显示的是导航栏，右侧是主框架，用来显示左侧每个栏目的具体信 息。
请注意，框架不是文件。用户很可能会以为当前显示在框架中的文档是构成框架的一部分， 但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示 任意一个文档。
网页设计-框架(详解)
11.3 嵌入式框架Iframe
• 嵌入式框架（标签为<iframe>）也是框架的一种形式。它与普通框 架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格 中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。 本节将结合具体实例，学习如何创建嵌入式框架，以及设置嵌入式 框架的属性。
框架
• 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显 示多个不同的文件。最Байду номын сангаас见的用法是将窗口的左侧或上侧的区域设 置为目录区，用于显示文件的目录或导航条。而将右边一块面积较 大的区域设置为页面的主体区域。通过在文件目录和文件内容之间 建立的超级链接，用户单击目录区中的文件目录，文件内容将在主 体区域内显示，用这种方法便于用户继续浏览其他的网页文件。
• 应用嵌入式框架的网页效果如图11.27所示，单击左边的导航文字， 右边的内容会发生改变，这实际上是由两个页面组成。下面就以该 网页为例来学习嵌入式框架的使用。具体操作步骤如下：
11.4 框架布局实例
• 框架结构是网络课程中经常用到的布局方式。本节就来介绍框架结 构网络课程的页面布局。完成后的网页效果如图11.38所示。
• 本章将介绍关于框架的基本知识，并结合具体实例讲解在 Dreamweaver CS3中如何创建、使用框架，设置框架属性，利用框架 进行布局。
11.1 关于框架
• 下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三 个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点 的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架 占据了页面的大部分，其中包含主要内容。这些框架中的每一个都 显示单独的 HTML 文档。
网页制作之框架
.html
8.2.2
嵌套的框架集
在另一个框架集之内的框架集称作嵌套的框架集。
topFrame mainFrame
topFrame
leftFrame
leftFrame mainFrame
8.2.3
创建框架和框架集
1、
插入
框架 可以使用菜单 可以使用工具栏
2、
文件
新建
框架集
8.2.4
选择框架和框架集
实战dreamweaver 8 网页制作教程
第8章 使用框架技术
第8章 使用框架技术
学习目标
章节内容
1 能够理解框架和框架集。 2 能够运用预设方式和自 定义方式创建框架。 3 能够设置框架和框架集 的属性。 4 能够删除和存储框架和 框架集文件。
8.1 案例欣赏 8.2 新知解析 8.3 实战演练
1、单击框架边线。 2、按住Alt键，单击框架空白处。 3、在任务栏中，单击框架名称。
8.2.5
保存框架和框架集文件
在浏览器中预览框架集前，必须保存框架集文件以及 要在框架中显示的所有文档。 保存方法： Ctrl + S 文件菜单
保存前必须先选择 要保存的对象。
架及框架集属性
8.4 课后作业
我（姓名）的个人主页
兴趣爱好 成长掠影 个人名言 对应内容
……
8.1 案例赏析
8.1 案例赏析
框架的作用
框架是网页中经常使用的页面设计方式， 框架的作用就是把网页在一个浏览器窗口下分 割成几个不同的区域，实现在一个浏览器窗口 中显示第一个HTML页面。使用框架可以使浏览 者不需要每次都从服务器完全下载，可以非常
中职《网页制作》课程教案8章
《网页制作》课程教案
授课教师：
课题章节/名称
应用框架制作电子书
课时
2
主要教学方法
四步教学法
教
学
目
标
知识目标
（1）理解框架集和框架的关系。
（2）掌握创建框架集的方法。
（3）掌握制作各框架中的页面的方法。
（4）掌握创建超链接、保存框架集的方法。
能力目标
（1）能够使用Dreamweaver CS6制作“HTML教程”网页。
11.对本次课进行归纳总结，
1.教师演示详细步骤。
2.教师指导学生操作。
3.学生提问，教师回答。
4.教师提问，学生回答。
5.教师反馈学生学习情况。
5分钟
8分钟
8分钟
8分钟
8分钟
10分钟
5分钟
5分钟
5分钟
8分钟
3分钟
作业布置
制作“HTML教程”网页
教学反思
亮点：对于一些容易出错或者不太理解有什么区别的知识点都进行强调和演示异同。如框架集和框架的关系、制作超链接时“目标”的选择、保存框架集和框架的方法等，这是很容易混淆和不易理解的内容，将其放在一起比较和分析。首先用通俗易懂的语言向学生讲解其含义，再与容易混淆的内容进行对比和注意事项的强调，通过演示使学生加深理解。
3.④选择“文件”|“保存全部”。首先保存的是框架集文件，命名为index.html随后保存main.html。④在各框架内单击，选择“文件”|“保存框架”分别保存为top.html和left.html。
4.2.制作各框架中的页面（1）制作顶部页面。步骤：①在顶部框架内插入1*1表格，边框、边距和间距都为0，单击“确定”。单元格和表格都设置为居中对齐。②在单元格中插入图片，调整框架边框高度。
授课教师：
课题章节/名称
应用框架制作电子书
课时
2
主要教学方法
四步教学法
教
学
目
标
知识目标
（1）理解框架集和框架的关系。
（2）掌握创建框架集的方法。
（3）掌握制作各框架中的页面的方法。
（4）掌握创建超链接、保存框架集的方法。
能力目标
（1）能够使用Dreamweaver CS6制作“HTML教程”网页。
11.对本次课进行归纳总结，
1.教师演示详细步骤。
2.教师指导学生操作。
3.学生提问，教师回答。
4.教师提问，学生回答。
5.教师反馈学生学习情况。
5分钟
8分钟
8分钟
8分钟
8分钟
10分钟
5分钟
5分钟
5分钟
8分钟
3分钟
作业布置
制作“HTML教程”网页
教学反思
亮点：对于一些容易出错或者不太理解有什么区别的知识点都进行强调和演示异同。如框架集和框架的关系、制作超链接时“目标”的选择、保存框架集和框架的方法等，这是很容易混淆和不易理解的内容，将其放在一起比较和分析。首先用通俗易懂的语言向学生讲解其含义，再与容易混淆的内容进行对比和注意事项的强调，通过演示使学生加深理解。
3.④选择“文件”|“保存全部”。首先保存的是框架集文件，命名为index.html随后保存main.html。④在各框架内单击，选择“文件”|“保存框架”分别保存为top.html和left.html。
4.2.制作各框架中的页面（1）制作顶部页面。步骤：①在顶部框架内插入1*1表格，边框、边距和间距都为0，单击“确定”。单元格和表格都设置为居中对齐。②在单元格中插入图片，调整框架边框高度。
网页设计与制作——框架技术
框架集的属性设置
边框：设置是否显示边框，对整个框架集有效。有三个值 （是－显示；否－不显示；默认－与其他框架一样）。 边框颜色：设置边框的颜色。 边框宽度：设置边框线的宽度，默认为6像素，若不想要边 框，则设为0。 行或列：设置框架的高度或宽度。
单位：设置距离的单位。
框架尺寸的调整
框架的基本概念
框架是浏览器窗口的一个区域 ，在这个 区域中可以显示一个单独的文档而不影 响另一个区域中显示的内容。 在一个页面上可以分出多个区域设置多 个框架，把这些框架看成一个整体，就 称为框架集。框架集定义了窗口的布局 结构。
使用框架结构的好处
版面布局美观 通过目录、索引来引导阅读内容的导航 用于导航时链接内容显示，不破坏版面 的结构，不破坏目录或导航条的作用， 使浏览者一直清楚自己处在什么位置。 加快网页的下载速度。
选择框架或框架集
1.选取框架 方法一：欲选取某个框架集，只需 在框架面版相应的框架单击即可。
方法二：在文档窗口中，按住ALT 键，在欲选的框架里点击，便选取 了相应的框架。
选择框架或框架集
2.选取框架集 方法一：在框架面版中，单击立体边框。 方法二：在文档窗口中将鼠标移动到框 架与框架集只见的分隔线上，单击鼠标 左键即可选中相应的框架集。
利用框架技术进行网页制作
信息技术学院 郑义
问题引入
没有使用框架技术的网页的通病
为什么要使用框架 框架的基本概念 框架集和框架
问题引入
在浏览同学们完成的第二次网页作品时，当我们 单击页面上的某个超级链接时，就会打开一个新 的浏览器窗口，而原来的浏览器窗口不是被关闭 了，就是被新的浏览器窗口给遮挡住了。迷航现 象的产生是由于网页设计者的考虑不周造成的。
网页设计与制作：使用层和框架布局页面
4. 创建嵌套层 单击对象面板上的层图标，直接拖动到父层中。 ●单击对象面板上的层图标，直接拖动到父层中。 ●层控制面板里ctrl+拖动 层控制面板里ctrl+层和框架布局页面
5. 对齐层（shift选定） 对齐层（ 选定） 选定 修改/ ●修改/对齐 6. 用标尺和栅格来对齐层 ①找到标尺 查看/标尺 标尺/显示 ● 查看 标尺 显示 ②修改标尺单位 ●右击标尺 ③弹出栅格 查看/网格 网格/显示网格 ●查看 网格 显示网格 ④栅格设置 查看/网格 网格/网格设置 ●查看 网格 网格设置
网页设计与制作
第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 第十章 HTML语言基础 语言基础 初识Dreamweaver 初识 创建与应用表格 使用层和框架布局页面 CSS样式与模板的使用 样式与模板的使用 行为、 行为、库和资源管理 建立动态网站 Flash动画基础知识 动画基础知识 创建动画 使用Fireworks编辑网页图像 使用 编辑网页图像 2 4 3 3 3 3 3 3 3 3
1
第四章 使用层和框架布局页面
一、分层 1. 层的概念 ●层是可将网页分割成“一个个能包含任何元 层是可将网页分割成“ 素的逻辑块” 素的逻辑块”。 层的内容可重叠，位置可移动， ●层的内容可重叠，位置可移动，在不同浏览 器中由不同的标识符产生分层的特点。 器中由不同的标识符产生分层的特点。 2. 建立一个新层 对象面板/ ●对象面板/布局 3. 修改层 ①选择一个层
第四章 使用层和框架布局页面
4. 典型案例 用时间轴在网页中制作幻灯片（ ①用时间轴在网页中制作幻灯片（P112） ） ②制作框架网页（P114） 制作框架网页（ ）
第四章 使用层和框架布局页面
网页设计与制作设计框架网页
第8章 设 计 框 架 网
16
页
8.1 框架网页
■ 框架实例
■ 创建链接。
■ 如果希望链接地对象（文本或者图片）在 一个框架内部,而链接地页面则在另外地框
架内打开,那么就需要通过设置目的打开方
式来控制框架地显示内容。在设置好链接
之 后 , 使用属性面板里地Target（目的）弹
出菜单,可以指定在哪个框架打开被链接地
■ 创建各种框架 ■ 方法1:选择"修改"→"框架集"→"拆分左,右,
上 , 下框架"命令。
2023-02-15
第8章 设 计 框 架 网
6
页
8.1 框架网页
■ 创建各种框架 ■ 方法2:按住Alt键 , 然后拖曳任一条框架边框,
这样可以垂直或水平分割文档（或已有地 框架） ; 按住Alt键 , 然后从一个角上拖曳框 架边框,这样也可以把文档（或已有地框架） 划分为4个框架。
■ 接下来分别在"框架"面板选择相应地框架, 然后在框架属性面板里插入相应地网页就 可以完成了。
2023-02-15
第8章 设 计 框 架 网
28
页
8.1 框架网页
■ 保存框架集 ■ 框架集地实质就是把浏览器窗口划分为几
个可相同可不同地小区（即框架） , 然后可 以在每个小区独立显示一个网页文件 （html文件） , 而最后这些独立小区地组合 就是所谓地框架集。
2023-02-15
第8章 设 计 框 架 网
7
页
8.1 框架网页
■ 插入预定义框架集 ■ Dreamweaver通常预定义了多种框架集,
通过使用预定义框架集,我们就可以轻易创 建想要地框架集。选择"插入"→"HTML" →"框架"命令然后选择一种框架,框架集生 成时可以对每一个框架命名。
网页制作CH8—框架技术
3．选择框架 ．
（1）选择整个框架 ） 要选择整个框架可执行以下操作之一： 要选择整个框架可执行以下操作之一： ① 将鼠标指针移到整个边框位置的同时，按住Alt键， 将鼠标指针移到整个边框位置的同时， 按住Alt键 Alt 当鼠标指针变为垂直箭头（或水平箭头） 当鼠标指针变为垂直箭头（ 或水平箭头） 时， 单击边 框即可选中整个框架。 框即可选中整个框架。 如果当前选择的是一个子框架， ② 如果当前选择的是一个子框架 ， 需要重新选择整个 框架， 框架 ，可以将鼠标指针移到第一次分割框架的边框位 当鼠标指针变为垂直箭头（或水平箭头） 置， 当鼠标指针变为垂直箭头（ 或水平箭头） 时，单 击边框即可选中整个框架组。 击边框即可选中整个框架组。 除了上述方法之外，选择框架还可以通过“框架” ③ 除了上述方法之外，选择框架还可以通过“框架” 面板来完成。 面板来完成。
第8章 利用框架技术制作网页
通过本章学习，应该掌握以下内容： 通过本章学习，应该掌握以下内容： 1. 2. 3. 4. 认识框架网页 创建框架网页的方法 编辑框架网页的方法 设置框架属性的方法
8.1 认识框架网页
框架网页是—种特殊的 网页， 框架网页是 种特殊的HTML网页 ， 它可将浏 种特殊的 网页 览器窗口分成不同的区域，称为框架区域。 览器窗口分成不同的区域，称为框架区域。每个区域 都可以显示不同的网页。 都可以显示不同的网页。 在框架网页中，用来分隔网页的窗格称为框架。 在框架网页中，用来分隔网页的窗格称为框架。 每个框架包括框架高度、框架宽度、 每个框架包括框架高度、框架宽度、滚动条和框架边 此外还可指定框架的内边距（ 框，此外还可指定框架的内边距（框架与网页正文之 间的距离） 间的距离）。
3．设置框架的大小 ．
第二章Dreamweaver网页设计技术
用布局单元格在布局表格中进行详细设计，产生组成网格的行和列。 布局单元格可以占据数行数列，但不能相互重叠。如果两个布局单元格离 的太近，系统会自动将两个单元格靠齐以维持不重叠的结构。如图所示。
用布局表格设计页面举例，如图所示。
2.6 层的使用
层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。 层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。
2.保存文档
“文件”菜单→“保存”→选择与逻辑站点相关联的本地站点（如： e:\weblx）→为文件起名→单击“保存”→在Dreavweaver站点面板中单 击刷新按钮。可以看到新建的文件被显示在站点面板中。
3.页面属性
“修改”菜单→“页面属性”，打开“页面属性”对话框，如图所示.
4.使用CSS样式格式化文本
4. 用布局模式布局页面
布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互 转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的 划分。 如图所示。
（1）绘制布局表格和嵌套的布局表格
最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。 如图所示。
（2）绘制布局单元格
(4) 拆分单元格
单击一个单元格→“修改”菜单→“表格”→“拆分单元格”→在对话 框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作，能保留单元格
的格式设置。
3. 设置表格属性 选定表格后，在表格的属性面板中设置表格属性。如图所示。
2.文档位置和路径 超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关， 称这种链接路径为绝对路径，例如，一个使用http协议的绝对路径可以写 为：/index.htm。 (2)如果超链接路径描述源点与锚点相对位置，也就是由当前文件所在位 置引起的路径，称这种连接路径为相对路径。使用相对路径的站点结构 和文档相对位置不变，整个本地站点上传到服务器时文档之间的链接关 系不变。所以，提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径，提供从站点文件 夹到文档的路径，与起始端点的位置无关，用斜线“/”表示站点根目录。 例如：/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变， 也被提倡使用。
用布局表格设计页面举例，如图所示。
2.6 层的使用
层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。 层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。
2.保存文档
“文件”菜单→“保存”→选择与逻辑站点相关联的本地站点（如： e:\weblx）→为文件起名→单击“保存”→在Dreavweaver站点面板中单 击刷新按钮。可以看到新建的文件被显示在站点面板中。
3.页面属性
“修改”菜单→“页面属性”，打开“页面属性”对话框，如图所示.
4.使用CSS样式格式化文本
4. 用布局模式布局页面
布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互 转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的 划分。 如图所示。
（1）绘制布局表格和嵌套的布局表格
最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。 如图所示。
（2）绘制布局单元格
(4) 拆分单元格
单击一个单元格→“修改”菜单→“表格”→“拆分单元格”→在对话 框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作，能保留单元格
的格式设置。
3. 设置表格属性 选定表格后，在表格的属性面板中设置表格属性。如图所示。
2.文档位置和路径 超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关， 称这种链接路径为绝对路径，例如，一个使用http协议的绝对路径可以写 为：/index.htm。 (2)如果超链接路径描述源点与锚点相对位置，也就是由当前文件所在位 置引起的路径，称这种连接路径为相对路径。使用相对路径的站点结构 和文档相对位置不变，整个本地站点上传到服务器时文档之间的链接关 系不变。所以，提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径，提供从站点文件 夹到文档的路径，与起始端点的位置无关，用斜线“/”表示站点根目录。 例如：/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变， 也被提倡使用。
使用FrontPage 2003制作网页.ppt
二、FrontPage 2003的工作窗口 选择 “开始”→“所有程序”→“Microsoft office”→“Microsoft office FrontPage 2003”命令，即可打开 FrontPage 2003的工作窗口，如图8.1.1所示。该窗口与 Office 2003的其他组件的工作窗口基本相同，用户可以在 工作区中制作和编辑网页。
（3）自定义站点。如果用户已对该软件非常熟悉，也 可以自定义创建站点，具体操作如下：
1）选择“文件”→“新建”命令，弹出“新建”任务 窗格。
2）在该任务窗格中的“新建网站”选项区中选择“由 一个网页组成的网站”选项，弹出“网站模板”对话框。
3）在该对话框中选择“空白网站”选项，并在右侧的 网站位置下拉列表框中输入网站的位置后，单击“确定” 按钮，即可创建一个只包含两个空白文件夹private和 image的站点，用户可自行创建主页及其他网页文件。
（5）超链接视图。该视图将网站中所有的内部和外 部超链接的状态显示在一个列表中，并用图标表示超链接 已通过验证或已中断。选择“视图”→“超链接”命令， 即可切换到该视图。
（6）任务视图。该视图以列表的形式显示网站中的 所有已完成或尚未完成的任务，并在各个列标题下提供有 关各项任务的当前信息。选择“视图”→“任务”命令， 即可切换到该视图。
图8.1.1 FrontPage 2003的工作窗口
三、FrontPage 2003的基本视图 FrontPage 2003为用户在创建站点和编辑网页时提供 了多种视图，其中网站的视图模式有网页设计视图、文件 夹视图、报表视图、导航视图、超链接视图、任务视图和 远程网站视图；网页的视图模式有设计视图、代码视图、 拆分视图和预览视图。
二、打开站点 如果要对某个网站进行编辑修改，可先将其打开，然 后再进行其他编辑操作。用户可以使用以下两种方法打开 站点： （1）选择“文件”→“打开网站”命令，弹出“打开 网站”对话框。在该对话框中选择要打开的站点，单击“打 开”按钮 即可。 （2）单击常用工具栏中“打开”按钮 右侧的下拉 按钮 ，在其下拉菜单中选择“打开网站”命令，在弹出的 “打开网站”对话框中选择要打开的站点，单击“打开”按 钮即可。
网页设计与制作教学大纲
《网页设计与制作》教学大纲第一部分大纲说明一、课程的性质和任务：《网页设计与制作》是一门操作性和实践性很强的课程,为网络专业和计算机相关专业的必修课。
本课程的主要内容包括了网页编辑与制作软件Dreamweaver MX建站的全过程。
教材体现网页制作技术的的特点，注重实用性和操作性,综合讲述了网页制作中的网页编辑、Web图像制作以及网页中动画设计的基本概念和基本操作技能。
书中文字叙述简单明了、通俗易懂。
按照Macromidia公司出品的网页制作系列软件的系统内容，由浅入深、循序渐进，符合学习者的认知规律。
书中列举了部分实例，各章都编排了适量的习题、思考题，以使学生更好地理解和掌握书中所讲述的内容。
二、培养目标：结业后能独立完成公司或个人主页的制作、维护、站点管理、设计制作精美的网页，能够更好地把企业通过互联网推向全球，并通过考试可获得网页设计师相关证书。
三、授课对象：高职高专类网络专业和计算机相关专业四、课程的特点和教学基本要求课程在重点介绍网页设计软件Dreamweaver MX的操作与应用的基础上，通过大量实例和光盘教学素材，详细地阐述了网页设计软件的应用技巧，使学生在学习过程中得以融会贯通，掌握网页设计软件的高级应用。
同时，授课过程中将始终遵循“用户界面感受第一”的基本原则，教导学生在策划、设计过程中设身处地为用户着想，让创意为用户服务，培养学生独立思考、独立创作的良好学习习惯，为学生成为一名优秀的网页设计师打下坚实的基础。
课程设置的根本思路是为使学生能够最大程度满足企业对于网页设计人员的需求，达到学以致用的目的，从而为企业培养优秀的网页设计实用人才。
五、课程教学要求的层次1、掌握：在网页文档中添加文本和文本的格式化方法、插入日期和时间、插入水平线、设置网页的属性等操作方法。
在Dreamweaver MX中使用的图像格式、在网页文档中插入图像、为页面背景添加图像、图像属性的设置、图像与文本的混合排版、设置图像的位置和边框、设置图像的缩略图的操作方法，会使用图像编辑器，会在网页中插入翻转图像和导航条的操作、表格的组成和基本操作方法及创建表格、表格操作、表格编辑的方法、表格和单元格的属性设置，会用表格组织网页的总体布局，掌握使用布局视图布局页面的总体布局。
信息发布与网页设计-Dreamweaver 8 框架
2020/12/13
9
8.4 删框架
• 删除框架
– 拖动框架的分界线
• 编辑框架
– 设置框架集、框架的属性 – 设置框架中的初始网页 – 定义框架的名称
2020/12/13
10
8.5 为框架页建立链接
• 为框架页创建超级链接
– 创建导航网页中栏目的超级链接 – 设置栏目中被链接内容的显示位置“目标
滚动条（显示、需要时显示、不显示） • 框架集网页：有别于一般网页
用<frameset>替代<body>
2020/12/13
3
工具栏及菜单命令介绍
• 框架插入
– 在插入面板中， 点击“插入框架 ”（右侧）按钮 ，出现下拉菜单 ，如图。共有13 种框架模板可以 选择。
2020/12/13
4
工具栏及菜单命令介绍
信息发布与网页设计-Dreamweaver 8 框架
8 框架和布局
• 表格用于单个网页的布局 • 框架用于中小网站的结构设计2
2020/12/13
2
8 框架和布局
• 在浏览器中设定几个窗口，每个窗口内独 立的显示1个WEB页。
• N个窗口至少需要N+1个WEB页 • 功能：显示固定、变化、导航三部分信息 • 设定：边框（粗细、颜色）
• 框架集属性设置面板
2020/12/13
5
工具栏及菜单命令介绍
• 框架属性设置面板
2020/12/13
6
8.1 创建框架
• 创建框架集、框架的方法
– 新建网页文件，在“常规”标签中选择“ 框架集”，在右框选择一种类型
– 在已打开的普通网页中，选择插入面板中 的“布局”面板，点击“框架”按钮
网页制作-框架及其应用
8.1 框架的基本操作
1. 拆分框架 拆分框架的操作步骤如下。 拆分框架的操作步骤如下。 2. 调整框架 调整框架——拖曳鼠标调整框架的步骤如下： 拖曳鼠标调整框架的步骤如下： 拖曳鼠标调整框架的步骤如下 定位在该框架中 （1） 单击要拆分的框架内部，使光标定位在该框架中。 ） 单击要拆分的框架内部，使光标定位在该框架中。 （1） 将鼠标指针放在两个框架的边框上，鼠标指针变成双 ） 将鼠标指针放在两个框架的边框上，鼠标指针变成双 3. 2） 选择【修改】|【框架页】命令，然后选择【拆分左框 删除框架 修改】 【框架页】命令，然后选择【 （ ） 选择【 箭头。 箭头。 删除框架是创建框架的逆向操作 其操作方法如下： 逆向操作， 删除框架是创建框架的逆向操作，其操作方法如下： 拆分右框架】 拆分上框架】 拆分下框架】 架】、【拆分右框架】、【拆分上框架】、【拆分下框架】4 拖曳边框到合适的位置 （2） 用鼠标拖曳边框到合适的位置当光标变成双向箭头时， ） 用鼠标拖曳边框到合适的位置，然后释放鼠标， 将鼠标指向要删除的框架边框，当光标变成双向箭头时 将鼠标指向要删除的框架边框， ， 。 个命令中的一个命令来完成框架的拆分。 个命令中的一个命令来完成框架的拆分然后释放鼠标，可以， 调整框架的大小。 调整框架的大小 不放，再用鼠标拖曳边框线，也可以拆分框 拖动鼠标到上一级框架的上下或左右边框线处， 拖动鼠标到上一级框架的上下或左右边框线处 ） 按住 键不放 （3） 按住Alt键。 ，再用鼠标拖曳边框线，，松开鼠标即 （3） 如需要精确地定义框架的尺寸时，在框架集的【属性】 ） 可删除框架。当框架面板中的信息显示为【没有名称】 可删除框架。当框架面板中的信息显示为【没有名称】时， 架。 如需要精确地定义框架的尺寸时，在框架集的【属性】 面板中设置参数可精确地调整框架 中设置参数可精确地调整框架。 面板中设置参数可精确地调整框架。 表明当前无框架。 表明当前无框架。
第八讲：框架——网页制作
9
图8.4
10
注意： 从图8.4看到 创建下框架时， 看到， 注意： 从图8.4看到，创建下框架时，原来框架中的内 容被分割在了上边。实际上， 容被分割在了上边。实际上，如果要创建框架的页 面或使框架中有内容，则需内容被分割在Main 面或使框架中有内容，则需内容被分割在Main Frame(主框架 Frame(主框架)中，就是对象按钮图标中的蓝色区域。 主框架) 就是对象按钮图标中的蓝色区域。 创建框架集后，执行Window|Frames（框架集） ⑤ 创建框架集后，执行Window|Frames（框架集） 命令，打开Frames可停靠浮动面板 可停靠浮动面板， 命令，打开Frames可停靠浮动面板，可以清晰地看 到框架的结构，单击其中的区域， 到框架的结构，单击其中的区域，可以选定框架 见图8.5）。 （见图8.5）。 提示： 创建框架集还可以使用Insert|Frames(插入 插入| 提示： 创建框架集还可以使用Insert|Frames(插入|框 架集)命令。 架集)命令。 技巧： 技巧： 页面中的框架用灰线分割，用鼠标拖动分割线， 页面中的框架用灰线分割，用鼠标拖动分割线，可以 调整框架区域的大小。 调整框架区域的大小。
11
图8.5
12
在页面中建立框架后，文档页面四周显示框架边框， 在页面中建立框架后，文档页面四周显示框架边框， 在边框上按下鼠标向窗口内拖动， 在边框上按下鼠标向窗口内拖动，可以继续分割框 见图8.6)。 架(见图8.6)。 使用Modify|Frameset命令 见图8.7)， 命令( 使用Modify|Frameset命令(见图8.7)，可以将一个框 架左（left） right)或上 up） down)拆分为 或上（ 架左（left）右(right)或上（up）下(down)拆分为 两个框架，多次使用， 两个框架，多次使用，可以将一个框架拆分为多个 框架。 框架。 8.2.2 在框架中添加内容 框架集定义了一种页面分割结构， 框架集定义了一种页面分割结构，每一个框架可以显 示一个单独的网页，也即每个框架就是一个网页。 示一个单独的网页，也即每个框架就是一个网页。 将插入点定位在某框架中， 将插入点定位在某框架中，就可以像编辑普通网页 一样编辑框架网页，插入文本、表格、图像、 一样编辑框架网页，插入文本、表格、图像、格式 化等（见图8.8）。如果框架中的内容超出框架范围， ）。如果框架中的内容超出框架范围 化等（见图8.8）。如果框架中的内容超出框架范围， 会自动显示滚动条，拖动滚动滑块，可以显示窗口 会自动显示滚动条，拖动滚动滑块， 外的内容。 外的内容。 13
图8.4
10
注意： 从图8.4看到 创建下框架时， 看到， 注意： 从图8.4看到，创建下框架时，原来框架中的内 容被分割在了上边。实际上， 容被分割在了上边。实际上，如果要创建框架的页 面或使框架中有内容，则需内容被分割在Main 面或使框架中有内容，则需内容被分割在Main Frame(主框架 Frame(主框架)中，就是对象按钮图标中的蓝色区域。 主框架) 就是对象按钮图标中的蓝色区域。 创建框架集后，执行Window|Frames（框架集） ⑤ 创建框架集后，执行Window|Frames（框架集） 命令，打开Frames可停靠浮动面板 可停靠浮动面板， 命令，打开Frames可停靠浮动面板，可以清晰地看 到框架的结构，单击其中的区域， 到框架的结构，单击其中的区域，可以选定框架 见图8.5）。 （见图8.5）。 提示： 创建框架集还可以使用Insert|Frames(插入 插入| 提示： 创建框架集还可以使用Insert|Frames(插入|框 架集)命令。 架集)命令。 技巧： 技巧： 页面中的框架用灰线分割，用鼠标拖动分割线， 页面中的框架用灰线分割，用鼠标拖动分割线，可以 调整框架区域的大小。 调整框架区域的大小。
11
图8.5
12
在页面中建立框架后，文档页面四周显示框架边框， 在页面中建立框架后，文档页面四周显示框架边框， 在边框上按下鼠标向窗口内拖动， 在边框上按下鼠标向窗口内拖动，可以继续分割框 见图8.6)。 架(见图8.6)。 使用Modify|Frameset命令 见图8.7)， 命令( 使用Modify|Frameset命令(见图8.7)，可以将一个框 架左（left） right)或上 up） down)拆分为 或上（ 架左（left）右(right)或上（up）下(down)拆分为 两个框架，多次使用， 两个框架，多次使用，可以将一个框架拆分为多个 框架。 框架。 8.2.2 在框架中添加内容 框架集定义了一种页面分割结构， 框架集定义了一种页面分割结构，每一个框架可以显 示一个单独的网页，也即每个框架就是一个网页。 示一个单独的网页，也即每个框架就是一个网页。 将插入点定位在某框架中， 将插入点定位在某框架中，就可以像编辑普通网页 一样编辑框架网页，插入文本、表格、图像、 一样编辑框架网页，插入文本、表格、图像、格式 化等（见图8.8）。如果框架中的内容超出框架范围， ）。如果框架中的内容超出框架范围 化等（见图8.8）。如果框架中的内容超出框架范围， 会自动显示滚动条，拖动滚动滑块，可以显示窗口 会自动显示滚动条，拖动滚动滑块， 外的内容。 外的内容。 13
应用框架制作网页操作步骤
应用框架制作网页操作步骤：一、套用框架1、新建一个Dreamweaver 文档，然后在“布局”类的插入工具栏中单击“框架”按钮右边的下向箭头，在调出的列表中选取“左侧和嵌套的顶部框架”项，并在文档工具栏的“标题”框中输入“巴黎三日游”。
若见不到框架框线，则可选择“查看→可视化助理”命令，然后选取“框架边框”项。
2、设置框架的宽度与高度按Shift+F2键，或者选择“窗口→框架”命令，在面板组中显示出框架面板。
1）设置左侧单元格的宽度为150像素在框架面板中单击框架集的最外端边框，以选取框架集，此时的属性面板如下图所示。
在属性面板中单击左侧框架，输入列值为150，单位为像素；再单击右侧框架，以让系统自动将单位设置为“相对”。
2）设置右侧之顶部框架的高度为45像素在框架面板中单击右侧框架的外框，以选取右侧框架，然后在属性面板中单击顶部框架，并输入行值为45像素；再单击下方框架，以让系统自动将单位设置为“相对”。
二、指定各框架的显示内容1、指定左侧框架的显示内容在框架面板中单击左框架（leftFrame ），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise 文件夹中的parisdiaryleftmenu.htm ，并单击“确定”按钮。
2、指定右侧顶部框架的显示内容左侧框架右侧框架顶部框架下方框架在框架面板中单击右侧顶部框架（topFrame），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise文件夹中的parisdiarytopmenu.htm，并单击“确定”按钮。
3、指定主框架（右侧下方框架）的显示内容在框架面板中单击右侧下方框架（主框架，mainFrame），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise文件夹中的parisdiarymain.htm，并单击“确定”按钮。
三、指定链接框架并保存之框架集网页是由框架所组成的。
网页制作之框架
• 设置导航条
• 在左侧框架中插入一个7 行1列边框为0的表格 • 在表格中设置导航条，单 击菜单栏中“插 入”|“图像对象”|命令， 在子菜单中单击“导航条” 如图。 • 然后在其余的表格中插入 准备好的图像，分别创建 超链接（个人理解）。
5.3 框架布局
5.3.6 框架中的超链接
如图中的网页为“上方及左侧嵌套”框架，左侧设置为导航条， 右侧为链接打开的目标窗口。
5.3 框架布局
5.3.6 框架中的超链接
• “目标”选项
目标：指你要链接的文档打开的地方
• • • •
-blank：在新的浏览器窗口打开链接文档 mainFram：在主框架打开链接文档 leftFram：在左侧框架打开链接文档 topFram：在顶部框架打开链接文档
5.3 框架布局
5.3.6 框架中的超链接 导航条
5.3 框架布局
5.3.3 框架面板
（—）打开框架面板 单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中 标识了每个框的名称。 （二）框架面板的基本操作： 1．选择框架集：在“框架”面板中单击最外层的边框，使其出现 粗黑边显示，则选中了框架集。 2．选择框架：在“框架”面板中单击要选择的框架，使其出现细 黑边显示，则选中了框架。
5.3 框架布局
5.3.4 设置框架的属性
（一）设置框架集属性：选中框架集，打开框集属性
1．边框选项设置（是、否、默认） 2．框架集中框架大小设置（像素、百分比、相对） （二）设置框架属性 选择框架后（如选择左侧框架），打开框架属性
5.3 框架布局
5.3.5 保存框架
（一）保存框架集的操作： 1．在框架面板中，选择中要保存的框架集。 2．单击菜单栏中“文件”|“保存框架页”命令。 3．打开“另存为”对话框，设置保存位置和文件名，单击“保存” 按钮，保存了框架集网页。 （二）保存框架的操作： 1．定位光标在要保存的框架内，或在框架面板中选择要保存的框 架。 2．单击菜单栏中“文件”|“保存框架”命令，打开另存为对话 框。 3．打开“另存为”对话框，设置保存位置和文件名，单击“保存” 按钮，保存了框架。