《中文版Dreamweaver CS3网页制作实用教程》课件第6章
合集下载
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
Dreamweaver网页设计培训教程06
PPT文档演模板
Dreamweaver网页设计培训教程06
6.3 上机练习
6.3.1 网上购物页面的制作 6.3.2 在网页中插入Shockwave影片
PPT文档演模板
Dreamweaver网页设计培训教程06
6.3.1 网上购物页面的制作
本次练习将制作一个网上购物的网页，主要 练习插入Flash动画和Flash按钮。制作出 的效果如图6.31所示。 素材位置：【\第6课\素材\6.3.1\】 效果图位置：【\第6课\源文件 \6.3.1\shipinwangye1.html】
5.插入FlashPaper
FlashPaper是一种特殊的Flash动画文件，可 以通过FlashPaper软件制作。制作网页时，可 以利用插入FlashPaper功能在网页中插入 Macromedia FlashPaper文档。这样在浏览器 中打开包含FlashPaper文档的网页时，用户就 可浏览FlashPaper文档中的所有页面，而无须 加载新的网页。用户也可以搜索、打印和缩放 该文档。
PPT文档演模板
Dreamweaver网页设计培训教程06
6.2.2 典型案例——在“天府美 食”网页插入插件
w案例小结
本案例在“天府美食”网页中插入一个插 件，使网页的内容更具观赏性，在制作过 程中主要练习了插入插件以及设置插件的 属性等操作。制作本案例主要是为了让读 者灵活掌握插入插件的方法，从而巩固在 网页制作过程中插入其他媒体元素的方法 。
PPT文档演模板
Dreamweaver网页设计培训教程06
2.插入Flash动画
具体操作如下：
（1）将光标插入点定位到需插入Flash动画文件 的位置。
（2）选择【插入】→【媒体】→【Flash】命令 ，打开【选择文件】对话框。
网页设计Dreamweaver CS3教程1-6章(基础篇)
网页效果
活动三：打造自己的个性化站点
活动小结：
在这次活动中我们完完整整的制作了一个个人的网站，
是不是比想象中的容易啊！在本次制作中使用了“高级”
选项卡来建立网站，这比使用向导建立更快捷。 在制作中，网页间的链接是很重要的，作为一个设计者
值得注意的是，你的设计要让使用者能方便的在你的站点
中的任何网页之中进行跳转。
件的特点。
活动一：初识网页
活动小结：
网页中使用的最多的元素是文字和图片。图 片的一般格式为jpg或gif文件。flash的使用能使网 页增加动感。 动态网页能对用户提交的信息作出及时的反 馈，使网页更具人性化。 Dreamweave有着可视化的操作界面，特别在 与flash和fireworks的相互配合，成为网页创意组 件中最重要的一员。
活动三：制作 “我的第一张网页”
制作完成后的 效果图
活动三：制作 “我的第一张网页”
活动小结：
制作网页的基本流程可以分为：建立
站点->创建网页->插入网页元素->编辑网
页元素->保存网页->预览效果。
第一章实验：制作“我的个人介 绍”
实验要求：
一、建立站点目录mysitelx，并将站点指定至站点目录。 二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、 水平线、图片和超级链接。 三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。
活动四：编辑我的站点
教学目标：
掌握编辑站点的方法。
知识要点：
网站地图，管理网站文件、链接检查、添加和 删除站点。
活动四理功能 （2）站点视觉地图 （3）添加和删除站点
视图工具栏
“管理站点”对话框
Dreamweaver网页制作实训教程(CS3版)教学课件
Fireworks：主要用于制作网页图像、网站标志、GIF 动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告条、网站片 头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而强大的图形 图像处理软件，起初它的应用领域主要是平面设计而 不是网页设计，但是它所具有的强大功能完全涵盖了 网页设计的需要（除了多媒体）。
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
网页制作教程-第6章ppt课件
p
:
/
/
w
w w
在【设计】视图中用鼠标将框架边框向四周拖拽，直到页
. 面边框或上一级框架边框为止，即可删除被拖拽的框架。如果
c需要删除整个框架集，直接删除框架集页面即可。
i
p
.
c
o
m
.
c
n
h
t
t 6.2.4
调整框架大小
p
:
/
/
w
w w
在【设计】视图中拖动框架边框可调整框架的大小比例；
. 在【属性】面板中可指定某一框架的准确大小(另一框架必须设
t
t 6.2.2
手动创建框架集
p
:
/ /
(2) 打开【框架】面板，选择其中的某一框架，如图6-11所示。
w 在【属性】面板的【框架名称】文本框中输入自己需要的框架
w 名，如图6-12所示。
w
.
c
i
p
.
c
o
m
.
c
n 图6-11 【框架】面板
图6-12 【属性】面板
h
t
t 6.2.2
手动创建框架集
p
:
p
:
/
/
w 下面以创建预定义的框架集为例，说明创建框架集的操作步 ww.c骤建。 一个(1网) 页在文【件文，件并】命面名板为的““mcahi6n”.h文tm件l”夹。中利用右键快捷菜单创
i (2) 打开“main.html”文档，在【设计】视图网页中输入 p“main(主题内容页面)”文字内容以示区别。 .com.【【出布 框 【局架框(3集】架) 选】标将项下签插卡拉辅入中菜助点单单功定击中能位选【属在择框性页架【】面】左对任按侧话意钮框框位右架，置侧如】，的图命在下令6【-拉，4插所箭如入示头图】。，6工-在3具所弹栏示出的，的弹
中文版_Dreamweaver_CS6网页设计教程_第6章
6
6.1.3 选择表格
1. 选择整个表格 2. 选择行或列
(1) 选择单行。 (2) 选择单列。
(3) 选择行/列。 3. 选择单元格
(1) 选择单个单元格 (2) 选择多个单元格
7
6.1.4 编辑表格
1. 调整表格大小
2. 设置表格属性
1)
设置表格属性
2)
设置单元格属性
3. 增加/删除行或列
件。图6-23所示为以制表符相隔的文本文件。 (3) 在Dreamweaver CS6中，选择“文件”|“导入
表格式数据”命令，打开“导入表格式数据”对话框， 如图6-24所示。
11
6.1.6 导入/导出数据
(4)设置完成后，单击“确定” 按钮，将外部数据导入，如图 6-25所示。
12
6.1.6 导入/导出数据
表格包含以下 3 个基本元素。
行。 列。 单元格。
3
6.1.1 插入表格
插入表格的基本步骤如下。
(1) 将插入点置于页面中要插入表格的位置。 (2) 在插入栏的“常用”选项卡中单击按钮。也可
以选择“插入”|“表格”命令；或使用快捷键 Ctrl+Alt+T 快速插入表格。 (3) 在弹出的“表格”对话框中设置表格的参数值， 如图6-1所示。单击“确定”按钮。
1)
增加行或列
2)
删除行或列
3) 设置“属性”面板
4. 复制/粘贴单元格
5. 拆分/合并单元格
1)
拆分单元格
2)
合并单元格
8
6.1.5 数据排序
和其他数据处理软件一样，Dreamweaver CS6 也可以将表格中的数据按照一定的规则排列， 其操作方法如下。
6.1.3 选择表格
1. 选择整个表格 2. 选择行或列
(1) 选择单行。 (2) 选择单列。
(3) 选择行/列。 3. 选择单元格
(1) 选择单个单元格 (2) 选择多个单元格
7
6.1.4 编辑表格
1. 调整表格大小
2. 设置表格属性
1)
设置表格属性
2)
设置单元格属性
3. 增加/删除行或列
件。图6-23所示为以制表符相隔的文本文件。 (3) 在Dreamweaver CS6中，选择“文件”|“导入
表格式数据”命令，打开“导入表格式数据”对话框， 如图6-24所示。
11
6.1.6 导入/导出数据
(4)设置完成后，单击“确定” 按钮，将外部数据导入，如图 6-25所示。
12
6.1.6 导入/导出数据
表格包含以下 3 个基本元素。
行。 列。 单元格。
3
6.1.1 插入表格
插入表格的基本步骤如下。
(1) 将插入点置于页面中要插入表格的位置。 (2) 在插入栏的“常用”选项卡中单击按钮。也可
以选择“插入”|“表格”命令；或使用快捷键 Ctrl+Alt+T 快速插入表格。 (3) 在弹出的“表格”对话框中设置表格的参数值， 如图6-1所示。单击“确定”按钮。
1)
增加行或列
2)
删除行或列
3) 设置“属性”面板
4. 复制/粘贴单元格
5. 拆分/合并单元格
1)
拆分单元格
2)
合并单元格
8
6.1.5 数据排序
和其他数据处理软件一样，Dreamweaver CS6 也可以将表格中的数据按照一定的规则排列， 其操作方法如下。
电子课件-《Dreamweaver 网页设计与制作(第二版)》-A06- 项目二 创建度假村网站——Dreamweaver CS3 入门
2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。
零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第6课
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
2. 添加文本域
文本域用于创建一个包含单行或多行文本 的区域。 的区域。用户可以创建一个隐藏用户输入 文本的密码文本域。 文本的密码文本域。 添加文本域的具体操作如下： 添加文本域的具体操作如下： （1）将鼠标光标定位在表单中要添加文本 ） 域的位置。 域的位置。 （2）在插入栏的【表单】选项卡中单击 ）在插入栏的【表单】 按钮，即可在指定位置添加文本域。 或 按钮，即可在指定位置添加文本域。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
6.2 使用行为
6.2.1 知识讲解 6.2.2 典型案例——检测报名表 典型案例 检测报名表
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
6.2.1 知识讲解
（1）将鼠标光标定位在要添加跳转菜单的位置。 ）将鼠标光标定位在要添加跳转菜单的位置。 按钮， （2）在插入栏的【表单】选项卡中单击 按钮， ）在插入栏的【表单】 打开【插入跳转菜单】对话框。 打开【插入跳转菜单】对话框。 （3）设置完成后单击【确定】按钮。 ）设置完成后单击【确定】按钮。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
8. 添加按钮
按钮有两种：一种是图像域，另一种是普通按钮。 按钮有两种：一种是图像域，另一种是普通按钮。 图像域是用图像作为按钮图标，用于提交或重置 图像域是用图像作为按钮图标， 表单信息等，与普通按钮的功能相同。 表单信息等，与普通按钮的功能相同。 在插入栏的【表单】 按钮， 在插入栏的【表单】选项卡中单击 按钮，打开 选择图像源文件】对话框， 【选择图像源文件】对话框，从计算机中找出要 作为按钮图标的图像，单击【确定】按钮， 作为按钮图标的图像，单击【确定】按钮，插入 的图像即为图像域。 的图像即为图像域。 在插入栏的【表单】 按钮， 在插入栏的【表单】选项卡中单击 按钮，在鼠 标光标处可插入普通按钮。 标光标处可插入普通按钮。
2. 添加文本域
文本域用于创建一个包含单行或多行文本 的区域。 的区域。用户可以创建一个隐藏用户输入 文本的密码文本域。 文本的密码文本域。 添加文本域的具体操作如下： 添加文本域的具体操作如下： （1）将鼠标光标定位在表单中要添加文本 ） 域的位置。 域的位置。 （2）在插入栏的【表单】选项卡中单击 ）在插入栏的【表单】 按钮，即可在指定位置添加文本域。 或 按钮，即可在指定位置添加文本域。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
6.2 使用行为
6.2.1 知识讲解 6.2.2 典型案例——检测报名表 典型案例 检测报名表
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
6.2.1 知识讲解
（1）将鼠标光标定位在要添加跳转菜单的位置。 ）将鼠标光标定位在要添加跳转菜单的位置。 按钮， （2）在插入栏的【表单】选项卡中单击 按钮， ）在插入栏的【表单】 打开【插入跳转菜单】对话框。 打开【插入跳转菜单】对话框。 （3）设置完成后单击【确定】按钮。 ）设置完成后单击【确定】按钮。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
8. 添加按钮
按钮有两种：一种是图像域，另一种是普通按钮。 按钮有两种：一种是图像域，另一种是普通按钮。 图像域是用图像作为按钮图标，用于提交或重置 图像域是用图像作为按钮图标， 表单信息等，与普通按钮的功能相同。 表单信息等，与普通按钮的功能相同。 在插入栏的【表单】 按钮， 在插入栏的【表单】选项卡中单击 按钮，打开 选择图像源文件】对话框， 【选择图像源文件】对话框，从计算机中找出要 作为按钮图标的图像，单击【确定】按钮， 作为按钮图标的图像，单击【确定】按钮，插入 的图像即为图像域。 的图像即为图像域。 在插入栏的【表单】 按钮， 在插入栏的【表单】选项卡中单击 按钮，在鼠 标光标处可插入普通按钮。 标光标处可插入普通按钮。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
中文版Dreamweaver CS3实用教程
6.4.4 转换表格和层
要改变网页中各元素的布局，最方便的方法就时将元素置于层内，然后通过 移动层来改变网页的布局。要使用这种方法改变网页布局，首先要将表格转换 为层。Dreamweaver CS3允许使用层来创建布局，然后将层转换为表格，以 使网页能够在浏览器中正确浏览；也可以将网页中的表格转换为层。
中文版Dreamweaver CS3实用教程
6.4.1 层的概念
层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的 最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、 表格、插件等元素，还可以嵌套层。 在Dreamweaver中运用成，为设计者提供了强大的网页控制能力。层不但 可以作为一种网页定位技术，也可以作为一种特效形式出现。熟练掌握层的使 用方法，是网页制作中最重要关节之一。
中文版Dreamweaver CS3实用教程 第6章 使用框架、层和时间轴
在制作网页时，可以使用框架进行定位。使用框架可以把网页分成几个部分， 每个部分都是一个独立的HTML页，将这些HTML页聚集在一起，就形成了框 架集。而使用层可以定位在页面上的任意位置，可以并存、重叠层，可以在层 上插入文本、图像、表单等对象。与层密切相关的另一项功能是时间轴功能， 使用时间轴可以创建动画效果。
中文版Dreamweaver CS3实用教程
6.4.5 设置层参数
在Dreamweaver CS3的“首选参数”对话框可以设置层参数。选择“编 辑”|“首选参数”命令，打开“首选参数”对话框，在“分类”列表框中选择 “AP元素”选项，打开该选项对话框，如图所示，在该对话框中，各参数选 项具体作用如下。
中文版Dreamweaver CS3实用教程
6.4 使用时间轴
在Dreamweaver CS3中，可以不使用ActiveX控件、插件或Java程序，而在 “时间轴”面板中创建一系列帧，然后改变每帧中层的位置、尺寸、可见性及 重叠顺序等属性，从而创建出动画效果，或者利用时间轴在特定的时间改变层 中的对象或执行特定行为。 “时间轴”面板 创建时间轴动画 编辑时间轴
中文版Dreamweaver CS3实用教程
6.3 使用Iframe
Iframe是Inline Frame的缩写，也是框架的一种形式。但它与框架不同的是， Iframe可以嵌在网页的任意部分，因而也被称作内联框架或者浮动框架。 插入Iframe 编辑Iframe
中文版Dreamweaver CS3实用教程
中文版Dreamweaver CS3实用教程
6.4 使用层
层在Dreamweaver CS3中指的是带有CSS样式的Div或Span代码，用于网页 元素的精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互 重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来 实现许多特效。例如新浪、163等许多网站都采用层来定位广告和分屏显示。 启用指针输入。 层的概念 创建层 层的基本操作 转换表格和层 设置层参数
中文版Dreamweaver CS3实用教程 6.3.2 编辑Iframe
在Dreamweaver中，编辑Iframe最常用作法是在代码视图中直接编辑Iframe 标签。如果不熟悉HTML环境，可以在“标签编辑器”对话框中对Iframe标签 进行编辑设置。在代码视图中右击需要编辑的标签，在弹出菜单中选择“编辑 标签”命令，或者选择选择“修改”|“编辑标签”命令，打开“标签编辑器” 对话框，如图所示。
中文版Dreamweaver CS3实用教程
6.5.1 “时间轴”面板
帧频率
“时间轴”面板用于显示层和图像随时间变化的属性。，在该面板中，各组成部分具体作 用如下。
时间轴下拉列表 播放头 行为通道
动画条 关键帧
动画通道
中文版Dreamweaver CS3实用教程
6.5.2 创建时间轴动画
使用时间轴创建动画，主要是通过改变对象在文档中的位置、大小、可见 性以及层的重叠顺序等方法来实现的。时间轴动画只能移动层对象，要使图像、 文本等对象产生动画效果就必须将对象放置在层中。
中文版Dreamweaver CS3实用教程
6.5.3 编辑时间轴
编辑时间轴主要包括修改时间轴、复制和粘贴动画等操作。
中文版Dreamweaver CS3实用教程
6.4.2 创建层
要在网页文档中创建层，创建完一个层后，在“代码”视图中会自动插入 HTML标签。层的常用标签有<Div>和<Span>两种，默认是使用<Div>标签来 创建层。
中文版Dreamweaver CS3实用教程
6.4.3 层的基本操作
层的基本操作包括选择层、为层添加滚动条、改变层的可见性、在层中插入 对象、调整层的大小等。
中文版Dreamweaver CS3实用教程 教学重点与难点
使用捕捉、栅格和正交功能定位点的方法 认识框架 使用框架设置网页布局 使用层 使用时间轴
中文版Dreamweaver CS3实用教程
6.1 认识框架
在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页 时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则 可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每 次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容 部分即可，从而能够极大提高网页的下载速度。这样的网页也称为框架页，其 最典型的应用便是当前十分流行的各种论坛(如天涯、搜狐论坛等)。 框架网页的概念 使用框架 设置框架和框架集的属性
中文版Dreamweaver CS3实用教程
6.1.2 使用框架
使用框架可以方便地实际网页的定位，与其他定位方式不同的是，使用框架 可以将一个浏览器窗口划分为多个区域，在每个区域都可以显示不同的HTML 文档。一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档， 这是使用框架的一个极其典型的例子。
6.3.1
插入Iframe
在Dreamweaver CS3环境中插入Iframe，通常可以通过三种方法。 将光标定位在准备插入的目标区域，选择“插入记录”|HTML|“框 架”|IFRAME命令即可。 将光标定位在准备插入的目标区域，选择“插入”栏中的“布局”选项卡， 单击Iframe按钮即可。 进入页面代码视图，在需要插入Iframe的标签中间输入Iframe标记。例如， 如图6-24所示，在一个目标单元格标签内插入Iframe，输入： <td><iframe src="/" name="iframe" width="600" height="30" scrolling="auto"></iframe> </td>
中文版Dreamweaver CS3实用教程
6.1.1 框架网页的概念
框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同 的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可 以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其 是对于页面间的链接，可以使页面的结构变化自如。
中文版Dreamweaver CS3实用教程
6.1.3 设置框架和框架集的属性
在制作网页的过程中，使用框架的属性检查器可以定义框架名称、源文件、页 边距等属性，使用“框架集属性检查器”可以定义框架集边线颜色、宽度等属 性。
中文版Dreamweaver CS3实用教程
6.2 框架的其他操作
创建好框架网页后，可以在框架中创建链接，还可以建立<noframes>和 </noframes>标记之间的提示信息，提示如何访问基于框架的网页。