Dreamweaver MX网页设计与制作 (3)
网页设计与制作教程(第3版)
2014年清华大学出版社出版的图书
01 成书过程
03 教材目录 05 教材特色
目录
02 内容简介 04 教学资源 06 作者简介
《网页设计与制作教程（第3版）》是由杨选辉编著，2014年清华大学出版社出版的普通高等教育“十一五” 国家级规划教材、高等学校计算机基础教育精选教材。该教材可作为高等院校“网页设计与制作”课程的教材和 网页制作培训班的教材，也可作为网页设计与制作爱好者的自学参考书。
感谢观看
2014年9月1日，该教材由清华大学出版社出版。
内容简介
该教材是介绍网页设计与制作技术的教程，以网页设计软件作为技术支持，介绍了网页的构思、规划、制作 和网站建设的全过程。全书分为两篇共8章，并包括三个附录。第1篇（第1～5章）是基础篇，介绍了网页制作基 础知识、HTML简介、CSS基础知识、网站建设概论和当时主流的网页制作工具DreamweaverCS5；第2篇（第6～8 章）是提高篇，介绍了网页布局方法CSS+Div、网页制作辅助工具PhotoshopCS5和FlashCS5；附录中提供了网页 特效源代码和辅助设计小软件及每章课后习题的参考答案。
该教材是介绍网页设计与制作技术的教材，分为两篇共8章，并包括三个附录，以网页设计软件作为技术支持， 介绍了网页的构思、规划、制作和网站建设的全过程。
成书过程
修订情况
出版工作
该次改版主要对Dreamweaver部分的内容进行了优化，删除了FrontPage和Fireworks的内容，增加了CSS方 面的内容，以适应网页设计技术发展的趋势。
该教材各章内容主要由杨选辉编写完成，其中谷艳红参与编写了该教材第5、6、8章的部分内容，曾群、郭 路生、李晚照、龚花萍、方玉凤、葛伟、屈文建分别参与编写了该教材的第1、2、3、4、6、7章和附录的部分内 容，孙斌、赵珑、郭晓虹、饶志华、敖建华、张婕钰参与了该教材第2、3、5、6、7、8章部分案例的设计和编写 工作。全书由杨选辉拟定大纲和统稿。该教材得到了南昌大学教材出版项目的资助。
Dreamweaver CS4.doc网页设计与制作习题答案-3
Dreamweaver CS4网页设计与制作习题答案第一章判断题1. 网站主题就是用户建立的网站所包含的主要内容 (1)2. 网站的链接结构不是指页面之间相互连接的拓扑结构 (0)3. 自然界中的颜色可以分为非颜色和颜色两大类 (1)4. 表单是用来收集浏览者的网页 (0)5. 服务器上有关数据库的一切操作只能由服务器管理人员进行 (1)选择题1. 下列文件属于静态网页的是(C)A.Index.aspB.index.jspC.index.htmlD.index.php2. 下列属于网页制作工具的是（C）A.PhotoshopB.FlashC.DreamweaverD.CuteFTP3. 在网页中常用的图像格式是（D）A..bmp和.jpgB..gif和.bmpC. .png和.bmpD. .gif和.jpg4. 下列说法中，正确的是（D）A. 动态网页使用应用程序解释器，但不使用后台数据库B．动态网页不使用应用程序解释器，但使用后台数据库C．动态网页不使用应用程序解释器，也不使用后台数据库D．动态网页使用应用程序解释器，也使用后台数据库5.以下哪个是“文件”面板中视图列表中的视图类型(A )A．本地视图 B 地图视图 C 编辑视图 D 大纲视图多项选择题1、网站的整体形象包括以下哪些要素？（ABC）A.标志B.标准色C.标准字体D.页面背景2、以下那些是常用的网页动画制作工具？（ABCD）A.flashB.Cool3DC.UleadGIFAnimatorD.硕思闪客精灵3. 以下哪些既是网页之间联系的纽带，又是网页的重要特色？（BCD）A．导航条B．表格C．框架D．超链接4.下面关于网站制作的说法哪些是正确的？（ACD）A.首先要定义站点B.素材和网页文件要放在同一个文件夹下C.首页的文件名必须是index.htmlD.一般在制作时，站点一般定义为本地站点5. 在网页中常用的图像格式有哪些？（ACD）A..jpgB..bmpC. .tifD. .gif填空题1.网页一般分为静态网页和(动态)网页2.网页主要由文本图像动画表格和超链接等基本(元素)组成3.网站开发的3个阶段分别是规划与准备,网页设计与(制作),网站发布推广与维护4.网站的链接结构有树状和(网状)5.色彩的3个属性是指色相.饱和度和(明度)第二章判断题1．Dreamweaver CS4一个最大的特点就是实现功能扩展(1)2．文档窗口不是代码窗口(0)3．面板可以有菜单式和面板式两种显示方式(1)4．察看页面设计的整体效果时，可直接按<F3>键隐藏全部面板，再次按<F3>键重新显示全部面板(0) 5．使用“资源”面板可以有效地管理和组织网站中的资源(1)选择题1．在“资源”面板中没有列出的资源是（A）A．文本 B 图像 C 颜色 D 脚本2．保存网页文档，可以按（B）组合键A . Ctrl+AB . Ctrl+S C. Ctrl+W D.Ctrl+N3. (BD )不属于“文件”面板中试图列表中的视图类型A．本地视图 B 地图视图 C 远程视图 D 大纲视图4．定义站点时，存放网页的默认文件夹为（D）A C 盘根目录B D盘根目录C 我的文档D 用户指定5察看页面设计的整体效果时，可以直接按哪一个键隐藏全部面板。
新编Dreamweaver CS3动态网页设计与制作教程第3章
图3.3 代码输入区域
第3章 HTML基础
(6) 点击【CSS】面板→【刷新】按钮，如图3.4所示；
或点击设计视图下方的【属性】面板→【刷新】按钮，如图 3.5所示。 (7) HTML代码编辑的效果出现在设计视图中，如图3.6 所示。
第3章 HTML基础
图3.4 【CSS】面板
第3章 HTML基础
第3章 HTML基础
图3.2 【拆分】视图
第3章 HTML基础
(5) 在代码区域中输入如下代码，如图3.3所示。
<HTML> <HEAD> <TITLE>第一个HTML网页</TITLE> </HEAD>
<BODY text="red">
HTML很简单。 </BODY>
</HTML>
第3章 HTML基础
第3章 HTML基础
1. HTML标记符
标记符是HTML语言中一些定义网页内容格式和显示方 式的指令，HTML标记中可以放置各种属性，标记符的属性 用于控制网页内容的显示效果。HTML所有的标记符都用尖 括号“<>”括起来，如<head>。
HTML中绝大多数的标记符都是成对出现的，其间的内
容就是该标记符作用的区域。每个起始标记会对应一个结束 标记，两者的区别是结束标记符多了一个斜杠，如<b>和
所谓标记符属性，就是用来描述对象特征的某种特性， HTML对于页面内容的详细控制实际上是通过设置标记符的 相关属性来实现的。在HTML语言中，每个标记符都可以根 据需要增加若干个属性。标记符所有的属性都包含在起始标
记符的尖括号中，用“属性值”的形式表示，属性值通常用
网页制作实验实训指导工作记录表
实验实训器材
计算机,Dreamweaver MX
实验实训组织
上机实验
实验实训内容、步骤
7、启动DW，新建一个HTML文件，切换至代码视图；
8、在代码页面中根据不同内容的位置，分别编写实验内容中的标识；
9、<head>与</head>之间，填写的是网页头部分，<body>与</body>之间填写的是网页的正文部分。
课程名称网页设计与制作，教师姓名林世鑫
实验实训项目
网站建设课程设计
实验实训时间、地点
2007年11月2日
实验实训目的
掌握完整网站规划，开发的步骤及技能，具备独立开发完整网站的能力
实验实训器材
计算机，网页设计三剑客
实验实训组织
上机实验
实验实训内容、步骤
根据自己的所选择的课程设计主题，规划、设计、开发一个完整的主题网站
3.在文档中插入两张图片，选择其中的一张，在“属性”面板中的“链接”栏中加入超级链接的地址，选择另一张图片，在属性面板中选择“热点”工具，在图片上描画热点区域，并在“属性”面板的链接栏中填写链接地址，保存预览。
实验实训小结
通过实验,学生基本掌握在DM中进行网页设计与制作
惠州旅游学校
教师实验实训指导工作记录表(四)
实验实训小结
通过实验,学生基本全部顺利完成课程设计
惠州旅游学校
教师实验实训指导工作记录表(一)
课程名称网页设计与制作，教师姓名林世鑫
实验实训
项目名称
站点的建立与管理
实验实训时间、地点
2007年9月12日
实验实训目的
网页设计与制作实用教程(第3版) 第1章-网站开发基础
1.1.2 网站的类型及定位
2．电子商务网站 电子商务网站是目前最具发展潜力的网站类型。电 子商务网站提供网上交易和管理等全过程的服务， 因为它具有广告宣传、咨询洽谈、网上订购、网上 支付、电子账户、服务传递、意见征询、交易管理 等各种功能。
1.1.2 网站的类型及定位
3．视频分享网站 视频分享网站为用户提供视频播客、视频分享、视 频搜索及所有数字视频内容的存储和传输服务。可 供用户在线观看最新、最热的电视、电影和视频资 讯等。
1.1.3 认识网页
表单：访问者要查找一些信息或申请一些服务时需 要向网页提交一些信息，这些信息就是通过表单的 方式输入到Web服务器，并根据所设置的表单处 理程序进行加工处理的。表单中包括输入文本、单 选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行 跳转的元素。 动态元素：动态元素包括GIF动画、Flash动画、 滚动字幕、悬停按钮、广告横幅、网站计数器等。
网页设计与制作实用教程（Dreamweaver+Flash+Photoshop（第3版））
第1章 网站开发基础
本章主要内容：
网站开发概述 网站开发流程 常用网页设计软件 HTML入门
1.1 网站开发概述
网站开发就是使用网页设计软件， 经过平面设计、网络动画设计、网页排 版等步骤，设计出多个页面。这些网页 通过一定逻辑关系的超链接，构成一个 网站。
1.1.2 网站的类型及定位
网站是一种新型媒体，在日常生活、商业活动、娱 乐游戏、新闻资讯等方面有着广泛的应用。在网站 开发之前，需要认识各种网站的主要功能和特点， 对网站进行定位。下面介绍几种常见的网站类型。
1.1.2 网站的类型及定位
1．综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信 息容量大等特点，包含时尚生活、时事新闻、运动娱 乐等众多栏目。综合门户网站定位明确，以文字链接 为主要内容、版式和色彩较为直观、简洁。
Dreamweaver CC网页设计与制作(3版)(课件) 模块6 综合应用
Dreamweaver CC网页设计CC网页设计与制作（33版）与制作（模块66课件模块01模块模块11网页基础知识03模块模块33网页布局05模块模块55网站的测试与发布02模块模块22初级应用04模块模块44高级应用06 模块模块66综合应用任务描述通过“完美新娘”网站的创建与设计，巩固使用表格布局网页、模板创建和更新网页的方法和技巧。
任务16完美新娘——网站设计综合应用任务解析在本任务中，需要完成以下操作：熟悉使用表格布局网页的方法和技巧；熟悉模板的创建和应用；熟悉使用模板快速更新网站。
ztyp.html 效果图zxkp.html效果图ztyp.html效果图qqhp.html效果图jchp.html效果图任务描述通过布局“环保科技网站”网页，巩固使用CSS+Div 布局和美化网页的方法和技巧。
任务16环保科技网站——网站设计综合应用任务解析熟悉Div 的创建和属性设置；熟悉CSS 设计器的使用方法；巩固使用CSS+Div 布局和美化网页的方法。
ztyp.html效果图根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
根据提供的lx文件夹中的素材，制作以下网站，网页效果如图6-33~图6-36所示。
要求：1．布局方法自定。
2．使用模板制作如图所示统一风格的页面。
3．网页实现灵活跳转。
4．网页文本内容格式统一。
5．设置超链接颜色变化，并实现滑动鼠标颜色变换效果。
6．shyf.html页面实现交换图像。
7．配置IIS，在本机IP地址中可以打开lxwm.html页面。
任务描述通过布局“环保科技网站”网页，巩固使用CSS+Div 布局和美化网页的方法和技巧。
任务16环保科技网站——网站设计综合应用任务解析熟悉Div 的创建和属性设置；熟悉CSS 设计器的使用方法；巩固使用CSS+Div 布局和美化网页的方法。
实验10用Dreamweaver_MX制作个人网页实验报告终极版
用Dreamweaver MX制作个人网页实验目的（1）了解网站的制作过程，会收集、制作网页素材。
（2）熟悉Dreamweaver MX的基本功能。
（3）掌握网站设计工具Dreamweaver MX的使用。
（4）掌握简单网页制作的步骤与方法。
二、实验总结：网站制作过程包括：策划、设计图纸、切割网页、DMX制作网页，而DMX设计过程大概可以分为整体规划、网站栏目功能规划、根目录策划、数据库规划、编写网站后台、测试修改和发布。
Dreamweaver的功能有包括（1）可视化的编辑器与HTML检视器同步（2）简便易行的对象插入功能(3)跨浏览器的支持功能（4）可制定工作环境（5）强大的网站管理功能。
Dreamweaver MX的工作窗口有菜单栏插入栏文具工具栏等，分别对不同对象进行编辑。
制作网页首先要定义好站点，新建页面后，对于学生来说由于对网站设计代码还不熟悉，我们会选用显示设计视图，让我们这些以图形化操作设计网页。
其他操作包括新建页面，插入层，在层里输入文字，插入图片，插入Flash效果，增加周边装饰，添加邮件链接和添加背景音乐。
完成后要把网页和网页所需用到的各种素材材料放在同一个文件夹中，不然的话打开网页不能显示出素材。
Dreamweaver MX是我操作的第一款制作网页的软件，它操作相对简单，方便上手，也可以进阶操作，实用性强。
通过操作Dreamweaver MX我学会了简单的网页设计，并且了解了“网页三剑客”的用途和它们之间的联系，我从中收获良多。
简答题：（1）图层在网页设计中的作用是什么？答：层如同含有文字、图片、表格、插件等元素的胶片，一张张按顺序叠放在一起，组合起来最终形成页面的最终效果。
层除了可以像表格一样设置背景、位置、自由移动、响应事件、控制显示外，还可以使网页中的对象通过层在垂直方向互相重叠，还可以利用层的可隐藏属性配合时间轴的使用，轻松地制作出动感效果的层。
（2）哪些工具可以用来布局网页。
(2021)网页设计与制作第三章完美版PPT
➢插入特殊符号
❖ 插入换行符 ▪ 使用[Shift]+[Enter]组合键
2021/6/8
4
➢插入特殊符号
❖ 插入空格 ▪ ctrl＋shift＋空格 ▪ 插入特殊符号，不换行空格
❖ 插入转义符
2021/6/8
5
➢设置文字属性
❖ 进行设置时使用组合键[Ctrl]+F3或菜单“窗 口”“属性”打开属性面板。
单击该水平线，可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等。 使用[Shift]+[Enter]组合键 将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮 将插入工具切换到“文本”工具组； 制作播电影、声音的页面 5、链接文字颜色的设置 单击工具栏上的复选框按钮
2021/6/8
3
2021/6/8
17
设置图像的基本属性
❖ 改变图像大小 ❖ 图文混排 ❖ 垂直边距和水平边距 ❖ 图像替代 ❖ 图像边框
2021/6/8
18
图片超级链接和图像地图
1.图片超级链接
2.图像地图
如果想在一个图像的不同位置上点击，就跳转到相应的 目标网页，就需要使用图象地图。
（1）设置矩形热区
（2）设置圆形热区
（3）设置多边形热区
2021/6/8
19
图像占位符和轮换图像
1. ห้องสมุดไป่ตู้象占位符
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择 图像占位符按钮
2.插入鼠标经过图像
单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠 标经过图像按钮
2021/6/8
20
设置网页图片属性最终效果图
2021/6/8
网页设计与制作实用教程(第3版)第2章-Dreamweaver网页制作基础
本章主要内容：
Dreamweaver CS6的工作环境 建立本地站点 在Dreamweaver中制作第一个网页
2.1 Dreamweaver CS6的工作环境
与Dreamweaver前面版本相比， Dreamweaver CS6包含一个崭新、 高效的工作环境，且功能也得到了较大 的改进。
2.2.1 创建站点目录
在建立站点目录时，应该注意以下几点： 不要将所有的文件都存放在根目录下，否则容 易混淆，不利于管理和上传 按照文件的类型建立不同的子目录 目录的层次不能太深 目录命令要得当，不能使用中文或者过长的目 录名
2.2.1 创建站点目录
例如建立G:\samples，存放所有站点文件。在 samples目录下新建一个名字为images的子目 录，存放站点所需要的图片。接着在samples目 录下新建一个名字为part2的子目录，用于存放制 作好的页面文件，如图2-19所示。
在Dreamweaver CS6工作窗口的下端是“属 性”面板，使用“属性”面板可以很容易地设置页 面中的元素的最常用属性，从而提高了网页制作的 效率，如图2-8所示。
图2-8 “属性”面板
2.1.2 Dreamweaver软件界面
“属性”面板上面是标签选择器，这里显示环绕 当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。
图2-2 Adobe Dreamweaver CS6窗口
2.1.2 Dreamweaver软件界面
Dreamweaver CS6工作窗口,如图2-3所示。
菜单栏
插入工具栏
工作区切换器
文档工具栏
标签选择器
文档编辑区 属性面板
Dreamweaver CS4.doc网页设计与制作习题答案-3
Dreamweaver CS4网页设计与制作习题答案第一章判断题1. 网站主题就是用户建立的网站所包含的主要内容 (1)2. 网站的链接结构不是指页面之间相互连接的拓扑结构 (0)3. 自然界中的颜色可以分为非颜色和颜色两大类 (1)4. 表单是用来收集浏览者的网页 (0)5. 服务器上有关数据库的一切操作只能由服务器管理人员进行 (1)选择题1. 下列文件属于静态网页的是(C)A.Index.aspB.index.jspC.index.htmlD.index.php2. 下列属于网页制作工具的是（C）A.PhotoshopB.FlashC.DreamweaverD.CuteFTP3. 在网页中常用的图像格式是（D）A..bmp和.jpgB..gif和.bmpC. .png和.bmpD. .gif和.jpg4. 下列说法中，正确的是（D）A. 动态网页使用应用程序解释器，但不使用后台数据库B．动态网页不使用应用程序解释器，但使用后台数据库C．动态网页不使用应用程序解释器，也不使用后台数据库D．动态网页使用应用程序解释器，也使用后台数据库5.以下哪个是“文件”面板中视图列表中的视图类型(A )A．本地视图 B 地图视图 C 编辑视图 D 大纲视图多项选择题1、网站的整体形象包括以下哪些要素？（ABC）A.标志B.标准色C.标准字体D.页面背景2、以下那些是常用的网页动画制作工具？（ABCD）A.flashB.Cool3DC.UleadGIFAnimatorD.硕思闪客精灵3. 以下哪些既是网页之间联系的纽带，又是网页的重要特色？（BCD）A．导航条B．表格C．框架D．超链接4.下面关于网站制作的说法哪些是正确的？（ACD）A.首先要定义站点B.素材和网页文件要放在同一个文件夹下C.首页的文件名必须是index.htmlD.一般在制作时，站点一般定义为本地站点5. 在网页中常用的图像格式有哪些？（ACD）A..jpgB..bmpC. .tifD. .gif填空题1.网页一般分为静态网页和(动态)网页2.网页主要由文本图像动画表格和超链接等基本(元素)组成3.网站开发的3个阶段分别是规划与准备,网页设计与(制作),网站发布推广与维护4.网站的链接结构有树状和(网状)5.色彩的3个属性是指色相.饱和度和(明度)第二章判断题1．Dreamweaver CS4一个最大的特点就是实现功能扩展(1)2．文档窗口不是代码窗口(0)3．面板可以有菜单式和面板式两种显示方式(1)4．察看页面设计的整体效果时，可直接按<F3>键隐藏全部面板，再次按<F3>键重新显示全部面板(0) 5．使用“资源”面板可以有效地管理和组织网站中的资源(1)选择题1．在“资源”面板中没有列出的资源是（A）A．文本 B 图像 C 颜色 D 脚本2．保存网页文档，可以按（B）组合键A . Ctrl+AB . Ctrl+S C. Ctrl+W D.Ctrl+N3. (BD )不属于“文件”面板中试图列表中的视图类型A．本地视图 B 地图视图 C 远程视图 D 大纲视图4．定义站点时，存放网页的默认文件夹为（D）A C 盘根目录B D盘根目录C 我的文档D 用户指定5察看页面设计的整体效果时，可以直接按哪一个键隐藏全部面板。
南财-网页设计与制作练习3(附答案)
南京财经大学成人高等教育网络课程网页设计与制作单元练习3 ------------------------------------------------------------------------------------------------------------------------一、选择题1、在Dreamweaver中，查看HTML的代码，下面哪种方法是正确的？（）。
A、在HTML纯文本编辑模式下可以查看HTML代码B、在HTML纯文本编辑模式下不能查看HTML代码C、在页面模式下可以查看HTML代码D、在HTML纯文本+页面模式下不能查看HTML代码2、在编辑网页时，按CTRL+Shift+空格键插入的HTML源代码为（）。
A、 B、 C、&sbnpD、&sbnp;3、在页面属性对话框中，我们不能设置（）。
A、网页的背景色B、网页文本的颜色C、网页文本的大小D、网页的边界4、DreamweaverMX通过（）面板管理站点。
A、站点B、文件C、资源D、结果5、以下不能编辑网页的软件是（）。
A、WordB、DreamweaverC、FrontPageD、IE6、在Dreamweaver MX 中下面可以用来做代码编辑器的是：（）。
A、记事本程序（Notepad）B、PhotoshopC、flashD、以上都不可以7、要在文章首行插入两个空格，正确的操作方法是（）。
A、直接输入两个全角空格B、直接输入四个半角空格C、在代码视图中的段首文字前输入四个 代码D、按组合键Ctrl+pace8、在设置表格属性时，“100%的宽度”的意思是表格宽度为( )。
A、100像素B、100厘米C、始终占满浏览器窗口D、固定值9、插入表格对话框中的“间距”表示（）。
A、表格的外框精细B、表格在页面中所占用的空间C、单元格之间的距离D、单元格大小10、网页设计中，设置表格框线和背景颜色时，在（）属性面板中单击“边框颜色”和“背景颜色”拾色器，然后选择所需的颜色即可。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3章
设置子层,添加文本。并且将子层添加到时间轴上。打开【时间轴】 面板，按鼠标左键拖动子层，也就是Layer2，拖动到时间轴的合适 位置后，松开左键后则添加完毕
添加多个时间轴，并且重复以 上的步骤
第3章
3.9 时间轴与行为的结合：滑出式正文区
3.9.1 基本概念
时间轴和行为配合使用，可以制作互动性强，表现形式也 更为丰富的网页。现在制作“滑出正文区”来把这Dreamweaver 两大核心技术用到一起。
第3章
本章内容目录
3.9 时间轴与行为的结合：滑出式正文区 3.10 本章小结 3.11 本章习题
第3章
3.1 检查浏览器：自动链接主页
3.1.1 基本概念
Dreamweaver的行为是运行在网页浏览器中的Javascript代码，设计 者可以将这些行为放置在网页文档中。行为由事件和该事件所触发 的动作所组成，通过行为的设置可以方便浏览者与网页之间进行交 互。
第3章
插入JavaScript脚本。将光标重新置于右上角插入三个层的单元格内， 选择【插入】快捷栏中的【脚本】按钮。弹出如图3.17所示的对话框， 在【语言】下拉菜单中选择【JavaScript】，并且在【内容】文本框中 定义变量。 代码内容为“v_Layer2 = false ; v_Layer3 = false ; v_Layer4 = false;”。
第3章
3.11 本章习题
（1）一个行为是由________和________两部分组成的。
（2）行为可以绑定到连接、图像、表单元素或者多种其它HTML元素 中的任何一种，但是不能将行为绑定到________。
（3）动作是一段预先编写好的________源程序。
（4）使用________动作在打开当前网页的同时，还可以再打开一个 新的窗口。
第3章
3.10 总结提高
本章通过讲述“行为”和“时间轴”的应用实例，介绍给了读者大部 分的“行为”操作。但是这里要提醒读者使用“行为”的时候要注意确保 合理和恰当，建议读者在同一个网页中不要使用过多的“行为”。
这里主要是因为“行为”其本质是代码，当同时使用多个行为时，难 免会出现个别变量在不同的行为中重复使用造成冲突，结果造成网页无法 正常显示。而时间轴动画主要是通过设置随时间变化的层的位置、大小、 可见性和叠放顺序来创建动画。
第3章
第3章 行为与时间轴
本章学习知识点
● 了解行为的含义 ● 掌握添加行为的方法 ● 了解行为的类型 ● 掌握网页动画的基本制作
上返下
一回一
张
张
第3章
本章内容目录
3.1 检查浏览器：自动链接主页 3.2 跳转菜单：网络导航 3.3 播放音乐：在线音乐点播 3.4 拖动层：拼图游戏 3.5 显示－隐藏层：情人节礼物 3.6 时间轴的应用：飞翔 3.7 时间轴的应用：倒计时牌 3.8 行为与层技术结合：下拉式导航栏
调整时间轴
添加【播放时间轴】行为，单击事件栏内的按钮，打开下拉菜 单，并且选择【onLoad】事件
第3章
3.7 时间轴的应用：倒计时牌
3.7.1 基本概念
与尝试使用一个时间轴控制页面上的所有操作相比， 使用单独的事件轴分别用来控制页面中不同的离散的部 分会更容易一些。比如一个页面中有很多的活动元素， 每个元素的触发条件都是不同的 。
当网页浏览者单击此按钮后，触发焰火的效果，就可以的到一份 意外的惊喜。
第3章
3.6 时间轴的应用：飞翔
3.6.1 基本概念
时间轴的作用非常重要，在静态的网页中，虽然没有ASP代码为 网页提供数据库的支持，也不象JavaApplet通过程序来实现动态图景 的变换。时间轴只是简单地把网页中的内容记录先来，把内容的位置， 大小记录到时间轴面板中，这样在网页生成后，就按照播放动画片的 形式，以每秒固定的播放帧数来进行图像放映，达到动态的效果。
第3章
3.5.2 上机操作
通过设置[页面属性]来修改网页背景 结合第一章制作“焰火晚会” 的方法，添加JavaApplet到网页 中
之后添加一个表单按钮，作为 焰火的触发器。但鼠标单击按 钮后，JavaApplet开始工作，显 示焰火效果
第3章 继续添加【显示－隐藏层】动作。鼠标左键单击【按钮】按钮，打 开【行为】浮动面板，添加“显示－隐藏层”动作。设置事件为 “onClick”，发生行为为显示层Layer1
时间轴的作用就是在网页中制作动画，使用时间轴创建的动画要 比ActiveX、扩展插件或者Java Applet等更加有效，脚本代码运行更 稳定。
第3章
3.6.2 上机操作
设置背景图像
插入４个层，并且在层中插入图 像，为这个飞翔网页中添加演员
第3章 在事件轴内插入对象。在【属性】面板下有一个【时间轴】面板，平 时都处于关闭状态，此时左击【时间轴】文字，随机其面板弹起。将 层Layer3和层Layer4拖动到时间轴内。方法是左击各个层左上角的标 签，按住不要松手，拖动至时间轴面板内合适的位置
网页在展示中往往遇到面积有限的问题，如何在一个窗 口大的区域内插入更多的导航呢？使用下拉式菜单是一个 很好的选择。这种菜单平时是折叠收紧的，只有浏览者进 行了某种操作的时候，菜单才打开。
对嵌套层添加行为
使用时间轴对下拉速度进行限制
第3章
3.8.2 上机操作
绘制嵌套层
插入表格和文字。在父层中插入表格， 并设置宽度和高度以及背景，然后在 表格内为文字设置好样式
重复上述步骤，为三个层添加“拖动层”动作
第3章
插入一个按钮。在网页右下角的表格内插入一个表单按钮。由于 这里只是用按钮来触发一段JavaScript脚本，所以不需要用到表单。 在此就不必插入<form>标签，当出现提示询问是否需要添加表单 标签，请选择【否】
为 按 钮 添 加 【 调 用 JavaScript】 行 为，文本框中输入脚本：
第3章
3.4.2 上机操作
给出一幅原始的图像，作为参 照物；绘制一个蓝色的背景区 域，提示读者将拼图图片放置 于目标的蓝色区域位置
使用Fireworks或者其它软件， 将原始的图片切割成不同的部 分。
第3章 绘制层，并且将之前切割出来的每一个小图片插入到层中
移动层，拖动刚插入的三个层到 正确的位置上，在接下来的步骤 要添加行为，所以要尽量地准确 。
第3章
3.3 播放音乐：在线音乐点播
3.3.1 基本概念
第一章介绍过在网页中插入媒体的方法，而这里则介绍如何使用 行为来播放音乐，提供给用户与网页交互的机制。
第3章
3.3.2 上机操作
使用【地图】工具中的【矩形热点工具】 和【圆形热点工具】绘制地图热点
选中绘制好的矩形热点地图， 单击菜单【窗口】|【行为】， 在【行为】浮动面板中单击按 钮，并在下拉菜单中选择第二 项【播放声音】。在弹出的 【播放声音中】，选择扩展名 为“.mid”的音乐文件。这里默 认的驱动动作发生的事件为 【onClick】
第3章
左击时间线的最后一帧。回到编辑窗口内，拖动层至顶端，使Layer2 的最下端在Layer1的最上端以上。有一条直线连接在Layer2的左上角
播放时间轴Timeline1 的行为 添加【停止时间轴】行为，设置 事件为“onMouseOver”。继续添 加【播放事件轴】设置事件为 “onMouseOut”
第3章
3.5 显示－隐藏层：情人节礼物
3.5.1 基本概念
“显示－隐藏层”动作显示、隐藏或恢复一个或多个 层的默认可见性。此动作用于在用户与页进行交互时显示 信息。“显示－隐藏层”还可用于创建预先载入层，即一 个最初挡住页的内容的较大的层，在所有页组件都完成载 入后该层即消失
所有通过层可以设置的效果都可以通过“显示－隐藏层” 设置出突然显示的效果，可以给浏览者一种意想不到的效果。
在编辑窗口中 出现插件图标
第3章
3.4 拖动层：拼图游戏
3.4.1 基本概念
层不仅是在制作网页的过程中能够被设计师拖动，在网页 生成后，层以及层中插入的内容也可以随之被移动。这样，层 就能够被用来完成不同的任务.
在拼图过程中，网页可以根据拼图放置的位置，在50像素 区域内表示有效；而在拼图完成后，网页能通过JavaScript代码 对拼图结果做出正确与否的判断。
（必需）所链接菜单项的列表：用户选择某个选项，则链接的文档 或文件被打开。
第3章
3.2.2 上机操作
在【插入】快捷工具栏中选择【表单】，单击【跳转菜单】按钮。
单击【窗口】|【行为】命令，打开【行为】浮动面板。鼠标左键单击 编辑窗口内的跳转菜单，在行为面板中会出现设置好的行为。双击 【行为】面板中【动作】栏下的【跳转菜单】动作，重新弹出【跳转 菜单】对话框
如果正文慢慢浮现在屏幕上，再结合适合文字的音乐作为 背景，确能提高浏览者对网页的兴趣。
第3章
3.9.2 上机操作
插入嵌套层
插入一幅背景图像
在子层中插入文本，并且设置文本属性。 并且将子层移动到父层的最下方：子层的 顶端与父层的底端平齐。
打开【时间轴】面板。将子层拖入到时 间轴面板中，并且拖动时间线到第400帧
浏览者浏览网页过程中，浏览器对浏览者的行为作出某种回应， 产生了消息，这就是事件。而动作是预先编写好的JavaScipt代码，由 这些代码完成对事件的回应。
Dreamweaver可以制作很多网页特效，但是这些特效在一些低版 本的浏览器中无法正常显示，甚至干扰浏览者用户正常地阅读网页 内容。检查浏览器操作可以自动地对浏览者的浏览器版本进行判断， 这样可以为不同的浏览者订做不同的显示效果，让所有到网页的客 人都感到满意。
第3章
在打开的【检查浏览器】对话框中选对这个动作进行设置。这里 的设置基本上采用了默认设置，即在正常状态下，跳转到默认的 URL地址；而当浏览器版本过低，则跳转备用URL地址。单击 【URL】对应的文本框后的【浏览】按钮，设置默认跳转网页