全套课件·《网页制作三剑客案例教程》1

1、第1章 Dreamweaver基础知识 学习目标 了解Dreamweaver软件的作用，基本界面布局，以及各功能区的应用范围。了解控制软件界面和文档的基本方法。uDreamweaver基础知识u界面的布局u如何使用色彩给网站定位u HTML基础知识u网络基础知识 学习内容1-1 起始页的使用以及相关设置1-1-1 起始页的使用 启动Dreamweaver后，可以看到如下图所示的起始页。起始页分为左、中、右三栏。Dreamweaver的起始页1-2 界面的布局利用【插入工具栏】可以插入表格、层、文本等几乎所有的对象,共有8个快捷栏构成。1-2-1 插入工具栏 以按钮方式汇集了它的常用工具，在制作

2、网页过程中经常会使用到的。1-2-2文档工具栏【标签选择器】在状态栏的左侧，他的作用是快速选择网页中的元素。1-2-3标签选择器在Firework中这些工具一般是用来选择，移动和缩放图片的。1-2-4选取手形和缩放工具【属性】面板相当于一个神奇的化妆师，它的作用很大，只要是在编辑区上的东西，都可以通过【属性】面板来改变它的大小、形状、颜色等属性。1-2-5 【属性】面板1-3 如何使用色彩给网站定位每个人都有自己喜欢的颜色，因此在选用网站配色的时候，难免会受到个人偏好的影响。但是在选用色彩的时候也要注意，因为不同的颜色给人的感觉是不同的。本节将通过对各种颜色的分析，帮助读者掌握使用色彩定位网站

3、的技巧。Dreamweaver 8中有很多的浮动面板组，也正是它们的产生使Dreamweaver 8界面发生了显著的变化。1-2-6 浮动面板组的基本操作1-4 HTML基础知识HTML是HyperText Marked Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是因为它可以加入图片、声音、动画、视频等多媒体内容，并且可以从一个文档跳转到另一个文档，以及与世界各地主机文件相连接。对于刚入门网络的新手，掌握一些网络基础知识必不可少。本节将从一些网络基本的概念学起，掌握一些网络基本常识。1-5 网络基础知识本章所讲的内容主要让读者打好基础，便于以

4、后的学习。对于一些面板属性的讲解，只要大体了解就可以，因为在后面的章节中，我们会对他们的使用方法进行更为详细的阐述。1-6 本章小结网络的形式第2章 定义站点和网页的基本元素 学习目标掌握“创建站点的方法、如何编辑文本、如何制作超链接、如何在网页中插入图像和多媒体”等知识点。u 制作网站前必做的一步定义网站u 文本和项目列表u 链接的应用u 图像和多媒体 学习内容2-1 制作网站前必做的一步定义网站2-1-1 定义网站所谓的定义网站，就是在自己的计算机中创建一个文件夹，用来放置所有的文件，然后再将这个文件夹定义为站点。 2-1-2 在站点中编辑文件网站站点建立完成后，就可以在站点中创建网页和存

5、储文件夹了，我们可以通过下拉菜单中【编辑】下面的命令对对象进行复制、删除、命名等操作。创建新文件对文件名进行修改2-2 文本和项目列表文本和样式一样，统治着Web世界。在网页上输入、编辑、格式化文本是网络开发者的重要工作之一，Dreamweaver提供了必要的工具使用户能够尽可能干净利落地完成这些任务，本部分主要介绍了文本的使用方法。我们首先进行网页标题的设置，网页标题就是在IE中网页左上角所显示的标题。2-2-1 设置网页文档属性打开的网页文档在【标题栏】中输入标题之后并进行确认，设置完成后按快捷键键对页面进行预览。输入网页标题预览效果本节介绍修改文字字号、文字颜色等基本属性的方法。2-2-

6、2 文字大小颜色和对齐更改字号单击【属性】展开按钮，显示【属性】面板，如右图所示。在【属性】面板中单击【大小】下拉列从中选择所需字体。修改文字颜色选择文本之后，单击【属性】面板中的颜色块按钮，如下图所示。然后，从调色板中选择所需颜色即可。在Dreamweaver中添加新字体在【属性】面板的【字体】下拉列表中选择【编辑字体列表】项。如下图所示。在出现的【编辑字体列表】对话框中，选择【可用字体】框中的某一字体，然后再单击 “登录按钮”，选择的字体就会被添加到【字体列表】选项中，如右图所示。单击 “添加字体列表按钮”，在【字体列表】选框中会出现所添加的字体，选择要添加的字体，单击 “登录按钮”，如左

7、图所示。字体全部添加后，单击【确定】按钮即可。在Dreamweaver中有几种换行的方法，比如：段落的切换以及强制换行等。2-2-3 段落的换行 光标放置于两个文字之间，单击键盘中的空格键，输入空格。 选择【插入工具栏】中的【文本】，找到这里面的最后一个列表，并选择其中的【不换行空格】命令。 通过快捷键+输入空格。 通过输入法中的全角模式，输入空格。 选择菜单栏中的【编辑】/【首选参数】命令，打开【首选参数】对话框。勾选【常规】选项中的“允许多个连续的空格”。在文本中输入空格段落的切换：按键盘中的键。强制换行：按键盘中的+键。在一些网页文档中常常列举一些事务。利用项目列表，就可以将这些类似属性

8、的事务规类到一起管理。这样，就可以设计出较为简明、整齐的网页文档了。2-2-4 利用项目列表整理复杂内容2-3 链接的应用网页的最大特点和优点就在于它可以通过超链接功能，在多个网页文档内自由的来回穿梭。2-3-1链接前的准备修改页面属性，选择菜单栏中的【修改】/【页面属性】命令，打开【页面属性】对话框。在【分类】栏中选择【链接】，在右侧的链接设置中设置自己喜欢的链接样式。设置完成后单击 按钮，完成链接前的准备工作。 2-3-2 创建文字链接在页面中输入要链接的文字。选择文字，打开【属性】面板，单击【浏览文件】按钮，在站点中选择“return.html”页，创建一个相对的地址。保存页面并预览网页

9、下面我们来制作一个内部的链接。2-3-3 创建图像链接在设置图像超链接时，既可以对整幅图像设置一个链接，也可以选择图像的一部分设置链接。2-3-3-1 设置整幅图像链接选择页面中的图片，直接拖拽【属性】面板中，【链接】处的 【锚点】，链接到网页文件“xianshi.html”。将文件保存，敲击键盘中的键预览页面，单击页面中的图片，会打开一个新的页面“xianshi.html”，说明链接成功。2-3-3-2创建局部图像链接选择图像，在【属性】面板中随便选择一个热区。将鼠标移动到图片上，在文字“学我所需”上绘制一个矩形。在【属性】面板中将热区链接到文件“xianshi.html”上，如右图所示。将

10、文件保存，预览页面，会发现现在单击图片没有任何的反应，将鼠标移动到文字“学我所需”上，链接出现了，单击鼠标便可链接到新的页面中。2-3-4-1创建电子邮件连接新建一个页面，在页面中输入文字“我的邮箱”，选择文字，在【链接】对话框中输入“mailto:”。保存页面，预览页面。在浏览器中单击已创建电子邮件链接的文字，将启动Outlook Express，供访问者发送邮件，如右图所示。2-3-4 其他的链接2-3-4-2 创建下载连接输入文字并将其选择，单击【属性】面板【链接】栏右侧的 文件夹，在弹出的【选择文件】对话框中，选择一个以.zip或.exe为扩展名的文件，如左图所示。单击“确定”按钮，便

11、可完成文件的下载链接。2-3-4-3 锚点连接制作锚点：将光标设置到文字“人物一 卡卡”的左侧，单击【常用】工具栏下面的【命名锚记】按钮，打开【命名锚记】对话框。如左下图所示。在【命名锚记】输入框中输入英文或者是数字，但不能输入中文。单击 按钮。此时在文字“人物一 卡卡”左侧就出现了一个锚点，设置锚点链接：回到最上方选择第一个名字，在【属性】面板的【链接】对话框中输入“#1”。保存页面，预览网页。当单击一个名字时，页面就跳转到其相应的简介上了。2-4 图像和多媒体一个网站的精彩程度有一半是取决于图像的运用，如果图片处理合理，网站会显的个性十足、精彩纷呈。下面将讲解网页中的形象元素图像和多媒体。

12、2-4-1图像的插入单击【常用】工具栏中【插入图像】按钮，便可很轻松的插入图像。2-4-2 图像的编辑2-4-3 插入鼠标经过图像在页面中插入一副图片，输入图片的名称。选择图片，将“宽”和“高”两个输入框中的数值删除，然后“宽” 输入框中输入数值“200”，此时图片等比例的缩小。在【边框】输入框输入相应数值，可以设置图片的边框。在Dreamweaver中可以直接插入鼠标经过图像，它实际上就是一个按钮，这个按钮包含一个链接，当鼠标移到图像的时候会变为另外的一张图片。2-4-4 插入透明Flash打开“index.htm”文件，将光标置于单元格中，选择【常用】工具栏中的【媒体】/【Flash】选项

13、。将“cloud.swf”插入到单元格中，单击【属性】面板中的 按钮播放动画。停止播放动画，选择插入的Flash，单击 按钮打开代码视窗，在标记中输入。保存文件并预览页面，背景图像显露出来，如右图所示。2-6 本章小结至此本章内容讲解完毕，以上讲的内容比较简单，但是这又是制作网页最基础的知识，读者一定要熟练掌握这些知识点，这样才能更好地进行下面的学习。第3章 表格和层 学习目标熟悉插入表格和设置表格参数的方法。学习选择、添加、删除、拆分、合并表格行列、单元格的方法，能够正确设置表格内容的格式。学会用HTML代码设置表格的各种细节，从而更自由地控制表格的外观，了解层的用法，以及层和表格之间转换的

14、方法。u 创建表格及表格的属性设置u 表格在HTML代码中的显示u HTML代码u 层 学习内容3-1创建表格及表格的属性设置3-1-1插入表格单击【常用】工具栏中的 【插入表格】按钮，可在页面中插入表格。 表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。表格宽度有两种设置方法：设置为“像素”，这种设置方法是将表格设置为固定的尺寸；设置为“百分比”，这种设置方法是相对的尺寸，也就是相对于网页的宽度而决定的。调整表格的大小：向外侧拖动左下边角的调节点可放大表格。向内侧拖动边角的调节点可缩小表格放大表

15、格缩小表格3-1-2 设置表格属性选择表格设置表格属性3-1-3 设置单元格属性表格中的一个个小方块即为单元格。下面来学习如何设置单元格的属性。将鼠标移至表格的边框线上，鼠标将变为水平或者垂直的双向向外的箭头时，单击鼠标左键就可以将表格选中。 选择单元格：按住键同时，单击单元格，可以选中单元格。 选择多个单元格：按住键，然后逐个单击欲选择的单元格。 选择表格的行或列：将鼠标移至表格外边框处，当鼠标变为水平或者垂直方向的箭头时，单击鼠标左键可以选中一行或者一列表格。 合并单元格：将要合并的单元格选择，单击【属性】面板中的 【合并单元格】按钮，便可将单元格合并。 拆分单元格：选择单元格，单击【属性

16、】面板中的 【拆分单元格】按钮，便可将单元格拆分。拆分单元格 设置单元格的其它属性：将光标置于单元格中，在【属性】面板中就可以设置此单元格的属性。设置单元格属性3-2 表格在HTML代码中的显示3-2-1 添加表格通过HTML代码的方式插入表格，可以使读者更加清晰的了解表格的结构。3-2-2 在单元格中添加内容在代码中将光标置于代码“”之间，输入文字姓名”。复制代码“姓名”，往下继续粘贴代码，再生成二个单元格。最后将后面两个单元格中的文字分别改为“年龄”和”性别”。在表格中输入内容生成两个单元格更改后两个单元格中的文字3-2-3 添加一行将要添加的代码全部选中并进行复制，这代表了表格中的一行。

17、将光标置于的后面输入回车，将代码粘贴到下面。选中一行的代码添加一行后的表格3-2-4 为表格添加边框并为表格设定宽度和背景色为表格添加边框：将光标置于table的后面，输入空格，此时会出现Dreamweaver的代码提示，在代码提示中可以找到“border”。如右图所示。出现代码提示框找到 “border”双击这个代码提示，它就出现在了代码中，设置一个数值“1”，此时的表格如右图所示。表格框在代码中的显示返回到代码中，在如左图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“width”，双击插入并设置表格的宽度为“200”。设定光标的位置设定表格的宽度设置表格的背景：在如

18、右图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#FFFFCC”，效果如右图所示。设定光标的位置设定表格的背景色3-2-5 设置行的颜色上面的实例我们设置了整个表格的颜色，下面通过代码改变行的颜色：返回到代码中，将光标置于tr的后面并输入空格。在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#33CCFF”即可改变行的颜色。3-3 HTML代码上节中讲到了通过HTML代码制作表格并改变表格的属性的方法，这一节中我们重点地再将HTML语法讲解一下，读者通过这些HTML知识会对表格的各个属

19、性有更加深刻的了解。 表格HTML的基本语法 表格标记的常用属性表格Frame属性的值表格Rules属性的值3-4 层用表格定位网页中的元素，不能相互叠加在一起。但是使用层功能，无论将其放置到网页文档的任何一个位置，都可以随意移动，并且页面元素放入图层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。之所以在网页文档中使用层，是为了自由地安排图像等网页构成元素表现特殊效果。大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档窗口中进行操作一样，在层中可以输入文字，也可以插入图像、动画、表格、多媒体等，对其进行编辑。插入图像插入表格插入Flas

20、h动画插入插件3-4-1 创建层并插入图像 创建一个新文件，在【布局】工具栏中单击 【绘制层】按钮，然后在文档窗口中拖动鼠标，在适当位置释放鼠标，便可创建层。 图层绘制好后就可以在层内插入内容了。在层内定位光标，单击 【插入图像】按钮，出现对话框之后，选择一张图片插入即可。下面介绍的是在网页文档中创建层之后，再插入图像的方法。3-4-2 调整层的大小和位置选择层，当光标指向上、下（左、右）边框的控制点时，光标变为上、下（左、右）双向箭头，按下左键拖拽鼠标，可修改图层的高度（宽度）；当光标指向四个角端的控制点时，光标变为斜向双向箭头，按下左键拖拽鼠标，可修改整个图层的大小。调整层的大小调整层的大

21、小为了移动层，在单击层控制手柄的状态下，将其移动到指定位置，释放鼠标，层便移动到指定位置向右拖动层的控制手柄3-4-3 选择层 单击层上方的四边形控制手柄或层的框架，就可以选择相应层。 执行菜单栏中的【窗口】/【层】命令，可以打开【层】面板。在【层】面板中单击所要选择的层名称，就能选择相应的层。3-4-4 层与表格的相互转换 层和表格是可以相互转换的。层和表格的相互转换，便于网页版面的安排。3-4-4-1将层转换为表格选择图层，移动鼠标到菜单栏选择【修改】/【转换】/【层到表格】命令，在弹出的【转换层为表格】对话框中选择相应的选项即可。3-4-4-2将表格转换为层执行菜单栏中的【修改】/【转换

22、】/【表格到层】命令，在弹出的【将表格转换为层】对话框中选择相应的选项即可。3-6 本章小结本章内容讲解完毕，本章讲解了如何插入表格、单元格。表格是网站中最基本也是最重要的元素，读者一定要多多练习，熟练掌握这些知识点。第4章 CSS样式和表单 学习目标学会使用CSS进行页面布局。了解CSS面板各功能区的使用方法，掌握新建CSS样式，套用的方法以及用表单制作反馈页面的方法。u CSS样式表的强大威力u 表单 学习内容4-1 CSS样式表的强大威力4-1-1 初识样式表下图所示的对话框是决定样式表种类的【新建CSS样式】对话框，其【选择器类型】选项组中选择要操作的样式表形式，【定义在】中选择应用样

23、式表的范围。表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。4-1-2 在哪里创建样式表4-1-3 修饰文章段落在前面各章的实例中，我们是通过【属性】面板来设置文字大小，颜色等属性。其实通过CSS样式不仅能实现改变文字的大小和颜色属性，还能修改文字的行间距等其他属性，本節我们將通过实例进行具体的讲解。Dreamweaver中把简单运用样式表的相关功能都汇集到了CSS 样式面板中。执行菜单栏中的【窗口】/【CSS样式】命令，便可打开【CSS样式】面板，在该面板中进行相应的操作，即可创建一个CSS样式

24、。4-1-4 用CSS设置文本与表格边框之间的距离通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果。4-1-5 用CSS为表格添加边框和背景色通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果，本节我们通过实例进行具体的讲解。4-1-6 改变鼠标指针的形态通过CSS还可以在特定区域内改变鼠标指针形态。创建一个样式，名称为“.cursor”， 如右图所示。【新建CSS规则】对话框单击”确定“按钮，出现定义“.cursor”样式属性的对话框之后，在【分类

25、】栏中选择【扩展】，然后在其右侧进行设置，如右图所示。扩展选项组中的“光标”下拉列表中有沙漏、十字、手形等各种形态的指针，根据不同的状况显示不同的指针，可以制作出更具特色的网页。4-1-7固定背景图像前面章节中常常通过【属性】面板设置表格的背景，用这种方法设置背景图像，在做复杂的效果时往往是不足的，通过CSS样式能够完美地制作出各种背景效果，下面我们来具体讲解用CSS样式设置背景的方法。新建一个文件，创建样式“.bg1”，在【.bg1的CSS规则定义】对话框中进行设置，如下图所示。设置完毕对表格套用“.bg1”样式。对表格套用“.bg1”样式创建样式“.bg2”，在【.bg2的CSS规则定义】

26、对话框中进行设置。设置完毕对表格套用“.bg2”样式。对表格套用“.bg2”样式样式定义对话框样式定义对话框在右侧的单元格中插入 “bg_003.gif”图片。将光标置于左侧的单元格中，插入一个3行1列的表格。将光标置于第1个单元格中，插入 “bg_004.gif”图片，将光标置于第3个单元格中，插入 “bg_005.gif”图片。创建样式“.bg3”，对中间的单元格套用“.bg3”样式。对表格套用“.bg3”样式插入图片样式定义对话框创建名称为“.padding1”的样式。出现定义“.padding1”样式属性的对话框之后，在【分类】选项组中选择【方框】，然后在【方框】编辑框中的【上】输入框

27、中输入数值“10px”。如右图所示。在单元格中输入文字，完成实例制作。预览后的页面样式定义对话框4-1-8 创建并应用外部样式样式的定义范围有两种，一种是仅对当前文档应用；另一种则是定义为外部样式，外部样式不仅可以对当前文档应用，还可以对其他页面应用。对于一个大的网站，如果许多页面都需要运用同一种样式，那么定义为外部样式则会更方便。4-2 表单表单文档是很多网站必须建立的体制，他的特点就是让网络中的人们交流信息、交换产品等。在电子商务的领域中，愈来愈多的厂商投入到销售网络或在网络上提供客户服务。因此，表单文档会几乎已经成为每个网站必备的功能之一。4-2-1 表单介绍【表单】项各按钮的功能作用4

28、-2-2 表单的用法在制作表单页面时，首先应该向页面中插入一个表单，创建表单的方法很简单，只要单击【插入栏】/【表单】中的 【插入表单】按钮，即可在当前文档中插入一个表单。单击 【文本字段】按钮插入文本域，如下图所示。插入文本域单击 【插入下拉列表/菜单】按钮插入下拉列表，如下图所示。插入下拉列表/菜单单击 【复选框】按钮插入3个复选框并输入相应的文字，如下图所示。插入复选框单击 【单选】按钮插入2个单选按钮并输入相应的文字，如下图所示。插入单选按钮分别在表格的下两行中输入文字；并在其相应的右侧单元格中插入【文本域】，如下图所示。插入文本域在表格的最后一行单击【文本域】按钮插入多行文本字段，并

29、在【属性】面板中设置文本域的【字符宽度】为“40”，行数为“9”，如左图所示。插入多行文本字段这样一个表单便基本制作完成了，我们发现排版的效果比较差，下面我们创建一个CSS样式，来调整一下版面。套用样式后的页面如右图所示。单击 【按钮】按钮插入两个按钮，如左图所示。插入按钮后的效果套用样式后的页面效果4-4 本章小结本章内容讲解完毕，本章讲解了如何创建CSS、套用CSS的方法以及表单的制作。通过实例我们可以看到利用CSS可以制作很多漂亮的效果，读者可以通过多加练习，掌握更多的CSS知识。第5章 行为和网页特效 学习目标了解各种行为的功能，对几种常用的行为要熟练地掌握。了解网页特效地制作方法，清

30、楚js代码中各个属性的作用，能根据自己网站的情况进行更改。u 利用行为增加网页的生动性u 网页特效 学习内容5-1 利用行为增加网页的生动性5-1-1 掌握行为基础知行为可以让你不用书写一行javascript代码即可实现多种动态网页效果。在这一节中我们要掌握行为的概念和应用原理，并为了全面运用行为而巩固基础知识。Dreamweaver 8中提供了很多动作，每个动作可以完成特定的任务。这些行为其实就是标准的javascript程序，这样，如果你所需要的功能在这些动作中，那么就不要自己编写javascript程序了。认识【行为】面板【行为】面板5-1-2 Dreamweaver中提供的动作类型动

31、作类型动作的功能动作类型动作的功能交换图像发生设置的事件之后，用其他图片来取代选定的图片改变属性改变选定客体的属性弹出信息设置的事件发生之后，显示警告信息检查浏览器根据访问者浏览器版本，显示适当的页面恢复交换图像在运用Swap Image动作之后，显示原来的图片设置导航栏图像制作由图片组成菜单的导航条打开浏览器窗口在新窗口中打开URL设置框架文本在选定的框架上显示指定的内容拖动层允许用户在浏览器中自由拖动层设置层文本在选定的层上显示指定的内容控制Shockwave或Flash控制Flash影片的指定帧设置文本域文字在文本字段区域显示指定的内容播放声音设置的事件发生之后，播放链接的音乐设置状态栏

32、文本在状态栏中显示指定的内容隐藏弹出式菜单隐藏在Dreamweaver上制作的弹出窗口显示弹出式菜单在Dreamweaver中可以制作需要的弹出菜单跳转菜单制作一次可以建立若干个链接的跳转菜单显示隐藏层根据设置的事件，显示或隐藏特定的层跳转菜单开始在跳出菜单中选定要移动到链接的站点上调用JavaScript函数事件发生时，呼出特定JavaScript函数检查插件确认是否设有运行网页的插件预先载入图像为了在浏览器中快速显示图片，事先下载图片之后显示出来转到URL选定的事件发生时，可以移动到特定的站点或者网页文档上检查表单检查表单文档有效性的时候使用5-1-3 认识事件窗口事件onAbort在浏览

33、器中停止了加载网页文档的操作时发生的事件onMove移动窗口或者帧时发生的事件onLoad选定的对象出现在浏览器上时发生的事件onResize访问者改变窗口或帧的大小时发生的事件onUnload访问者退出网页文档时发生的事件键盘和鼠标的事件onClick用鼠标单击选定元素的一瞬间发生的事件OnBlur鼠标指针移动到窗口或帧外部,即在这种非激活状态下发生的事件OnDragDrop拖动并放置选定元素的那一瞬间发生的事件OnDragStart拖动选定元素的那一瞬间发生的事件OnFocus鼠标指针移动到窗口或帧上,即激活之后发生的事件OnMouseDown单击鼠标右键的一瞬间发生的事件OnMouseM

34、ove鼠标指针经过选定元素上方时发生的事件OnMouseOut鼠标指针经过选定元素之外时发生的事件OnMouseOver鼠标指针位于选定元素上方时发生的事件OnMouseUp单击鼠标右键,然后释放时发生的事件OnScroll访问者在浏览器上移动滚动条的时候发生的事件OnKeyDown在键盘上按住特定键时发生的事件OnKeyPress在键盘上按特定键时发生的事件onKeyUp在键盘上按下特定键并释放时发生的事件表单事件OnAfterUpdate更新表单文档的内容时发生的事件OnBeforeUpdate改变表单文档的项目时发生的事件OnChange访问者修改表单文档的初始值时发生的事件OnRese

35、t将表单文档重设置为初始值时发生的事件OnSubmit访问者传送表单文档时发生的事件onSelect访问者选定文本字段中的内容时发生的事件其他事件OnError在加载文档的过程中,发生错误时发生的事件OnFilterChange运用于选定元素的字段发生变化时发生的事件Onfinish Marquee用功能来显示的内容结束时发生的事件Onsart Marquee开始应用功能时发生的事件5-1-4 常用行为之动态按钮的制作选择第一个按钮图像，在【行为】面板中单击 【添加】按钮，在下拉菜单中选择【交换图像】命令。在打开的【交换图像】对话框中的【设定原始档为】中选择“images”文件夹中的 “men

36、u_001_d.gif”文件，如左下图所示。此时【行为】面板中便添加了指定的动作，如右下图所示。保存页面，当鼠标移动到第一个按钮上时，按钮图像将变为设置的图像。【行为】面板中添加了动作设定图像文件5-1-5 常用行为之弹出窗口页面的制作这一节我们要讲解的弹出窗口页面不仅可以实现打开页面的同时弹出，也可以单击按钮时弹出，这个效果是通过【行为】菜单中的【打开浏览器窗口】动作来实现的。在Dreamweaver中可以通过此行为来设定打开的浏览器窗口的大小，以及是否显示导航条、地址工具栏、状态栏和菜单条等项内容。5-1-6 常用行为之下拉菜单的制作打开文件“index.html”文件。选择一个栏目图片，

37、在【属性】面板中的【链接】项中输入“#”，创建空链接。（必须创建了超链接的项才能用来制作下拉菜单）在【行为】面板中单击 【添加】按钮，在下拉菜单中选择【显示弹出式菜单】命令。出现【显示弹出式菜单】对话框后，在【文本】框中输入子栏目项，链接设置为“#”，如右图所示。设置下拉菜单项目单击 按钮添加项目，输入其他菜单名称，如右图所示。单击【外观】标签之后，根据网页的情况设置子菜单的字体、大小、颜色、背景颜色等等。单击【外观】标签之后，根据网页的情况设置子菜单的字体、大小、颜色、背景颜色等等，选择【位置】标签，将X值设置为“20”，将Y值设置为“35”，并单击 按钮。输入其他菜单项在【行为】面板上增加

38、了“隐藏弹出式菜单”和“显示弹出式菜单”两个动作，如左下图所示。将文件保存，预览页面。将鼠标放在第一个菜单上，就会出现相关的下拉菜单。如右下图所示。【行为】面板预览后的页面5-1-7 常用行为之为网页添加背景音乐打开一个文件，或重新创建一个文件。执行菜单栏中的【窗口】/【行为】命令，打开【行为】面板。单击 按钮，在弹出菜单中选择【播放声音】命令。在弹出的【播放声音】窗口中，单击 按钮选择音乐文件（要选择浏览器支持的音乐文件格式如：mid、wav、AIFF、AU）。单击 按钮即可将所选文件插入到页面中。此时，执行菜单栏中的【文件】/【保存】命令，将文件保存。预览页面可以听到我们插入的音乐文件。5

39、-1-8 常用行为之调用JavaScript函数“调用JavaScript函数”动作可以呼叫特定的JavaScript代码或函数。如果想使用这一动作，首先应该在网页文档上插入调用的JavaScript。复制代码【调用JavaScript】对话框5-2 网页特效5-2-1 制作嵌套页面输入代码预览后的页面5-2-2 制作文字滚动效果文字滚动效果是通过语句实现的。读者只要记住右表中的代码公式即可。另外改变direction项，可以改变文字移动的方向。输入要滚动的文字内容direction=up是设置向上移动；direction=down是设置向下移动；direction=down是设置向下移动；d

40、irection=left是设置向左移动；direction=right是设置向右移动。5-2-3 制作页面前飘动图像的效果在网上我们经常会看到一些飘动的广告图像，只要切换到代码模式下。在标签外插入相应代码，即可达到所想要效果。5-4 本章小结本章内容讲解完毕，通过本章我们可以了解到在网站制作中，行为和特效在网站制作中是经常会使用到的，收集一些js代码也是平时必须的，这样在制作网站中才能使自己的作品更具有特色。第6章 欢迎进入Flash世界 学习目标了解Flash 8的界面、面板和新增功能。熟悉Flash的工作环境，学会创建和保存一个新的Flash文档，学会导入、导出Flash对象，能够区分位

41、图和矢量图。u 启动与退出Flash 8 Flash 8界面初识 Flash 8面板的操作 Flash基础操作 Flash 8新功能简介 Flash相关知识 学习内容6-1 启动与退出Flash 8启动Flash 8有多种方法，最常用的有下面两种。安装了Flash 8之后，桌面上会出现一个启动图标，用鼠标快速双击该快捷图标，即可启动Flash 8程序。从桌面启动单击Windows桌面的 按钮，在打开的程序菜单中选择【程序】/【Flash 8】命令，可以启动该程序。从程序菜单启动Flash 8自从问世以来，实现了新的飞跃。设计者可以使用Flash随心所欲地设计各种动态Logo图片、动画、导航条以

42、及Flash整站，还可以设计带有动感的音乐动画，卡通动漫等，完全具备了多媒体的各项功能。本章首先学习Flash 8基础知识，为更深入地学习Flash打下良好基础。6-2 Flash 8界面初识 Flash 8的界面6-3 Flash 8面板的操作展开面板移动面板关闭面板保存、打开自定义面板运用菜单栏中【窗口】/【保存面板布局】命令，可以保存、打开或者自定义面板。如果面板已经从面板区分离为一个独立面板，则直接单击其标题栏右上角的 按钮，关闭面板。如果在面板区关闭面板，则将光标移动到面板区的面板标题栏中，单击鼠标右键，在弹出的如右图所示的菜单中选择【关闭面板】命令，关闭面板。【保存面板布局】对话框

43、关闭面板【属性】面板【属性】面板在Flash中起着重要的作用，很多操作都可以通过它来完成。当选择一个操作对象或选择一个工具时，【属性】面板将显示相关属性。如下图所示为【文本工具】的相关属性。【文本工具】的相关属性6-4 Flash 基本操作了解了Flash界面布局、Flash各种面板的简单操作后，下面我们来继续学习Flash的其他操作。6-4-1 新建Flash文件 单击计算机任务栏上的“开始”/“程序”/“Macromedia”/“Flash 8”命令，启动Flash 8软件，在Flash工作区域弹出Flash 8向导，单击Flash向导中的“Flash 文档”选项，即可创建出一个空的Fla

44、sh文档。 如果已经打开了Flash文档，可以单击菜单栏中【文件】/【新建】命令，弹出【新建文档】窗口，在【新建文档】窗口【类型】列表中选择合适的文档类型，一般选择【Flash文档】选项，然后单击 按钮，可以新建出一个新的Flash文档。6-4-2 保存、打开、关闭Flash文件 单击菜单栏中【文件】/【保存】命令，打开【另存为】对话框。在【文件名】输入栏中可以输入要保存文件的名称，单击 按钮，则此Flash文件被保存为“*fla”格式文件。 单击菜单栏中【文件】/【打开】命令，弹出【打开】对话框。在【查找范围】下拉列表中选择要打开的文件，单击 按钮，将选择文件打开。 单击菜单栏中【文件】/【

45、关闭】命令，或者单击文件名称栏右侧的 按钮，将当前编辑的Flash文档关闭；.单击菜单栏中【文件】/【全部关闭】命令，或者单击Flash软件右上角的 【关闭】按钮，不管在Flash中有几个编辑的文档，所有Flash文档均会被关闭。6-4-3 选择、移动Flash对象使用 【选择工具】框选对象的方法，可以将选框中的所有对象都选择，包括多个对象，这是最常用的选择对象的方法。除了框选对象的方法之外，还可以通过单击或者双击对象的方法来选择对象。将对象选择后，使用 【选择工具】拖动对象，此时会出现此对象的矩形轮廓，将该矩形轮廓拖到合适位置释放鼠标，则对象就被放置到移动的地方。6-4-4 导入、导出Fla

46、sh对象运用菜单栏中的【文件】/【导入】/【导入到舞台】命令，可以导入外部图像或声音。运用菜单栏中【文件】/【导出】/【导出影片】命令，可以导出Flash动画。6-5-1 界面的改变总体来说，Flash 8的界面没有太大的改变，只是在以前的属性面板右侧增加了两个新的选项【参数】和【滤镜】，另外在【属性】面板中还增加了一个【设备】设置选项。如下图所示。6-5-2 新增滤镜效果滤镜面板，是管理Flash滤镜的主要工具，我们可以在这里增加或删除滤镜，并且可以指定滤镜的某些参数选项。单击滤镜面板中的“加号”可以显示滤镜列表，包括投影、模糊、发光、斜角、渐变发光、渐变斜角和调整颜色等。6-5 Flash

47、 8新功能简介Flash 8的【属性】面板6-5-3 Flash 8 混合模式当两个图像的颜色通道以某种数学计算方法混合叠加到一起的时候，两个图像会产生某种特殊的变化效果。在Flash 8中提供了图层、变暗、色彩增殖、变亮、荧幕、叠加、强光、增加、减去、差异、反转、Alpha、擦除等混合模式。6-5-4 Flash 8 绘图工具的改进对象的绘制：在Flash 8中，增加了【对象绘制】功能，当选中绘图工具时，工具栏下方会显示如右图所示的按钮。按下此按钮，然后分别绘制两个不同颜色和形状的对象，可以看到两个对象是独立存在于一个图层中的，并且不互相干扰。新增的“对象绘制”选项线条的变化：在以前版本的F

48、lash中，线条的端点默认都为圆角，在Flash 8中新增了端点、接合和尖角等类型。其中端点类型包括“无”“圆角”“方形”三种。另外，在以前的版本中，需要我们将线条转换为可填充的轮廓以后才可以对线条进行颜色填充，现在，可以直接在属性面板中改变线条的填充颜色，还可以使用纯色，渐变或位图填充。6-5-5 增强的text工具增强了text工具，读者可以自由的从左边或者从右边来回的调整文本框的大小。6-5-6 增强的library库当现在的库重新启动程序，它已经可以停在读者之前所放的位置上了，并且可保存读者对库面板的设置，如果打开多个源文件，可以通过下拉菜单在一个库面上进行切换，同时可以锁定某一个库。

49、6-5-7 Tabbed 面板现在FLASH 8 的面板可以自由的将它们成组放在一个面板上，并且可以把常用的工具放在一个面板上，读者可以为他们重新命名。如右图所示。Tabbed 面板6-5-8 运行时位图缓存Flash 8还新增了一种功能，为【位图缓存】，如下图所示。读者可以将任何影片剪辑符号指定为一个位图，这样一来，使用Flash player运行时就会获得缓冲，从而达到提高影片播放速度的目的。6-5-9 FlashType字体呈现方法在以前版本的Flash中，对字体呈现的控制能力显得比较薄弱，当显示比较小的字体时，文字会变得模糊不清。在Flash 8中新增了字体的渲染引擎功能，读者可以根据

50、自己的需要选择不同的字体呈现方法，来改善文字的显示状态。【属性】面板6-5-10 自定义渐进/渐出功能新增的自定义渐进和渐出功能，也是Flash 8的重大改进。现在读者不只是可以控制补间动画的“简易”属性了，而是可以更进一步精确控制补间的位置、旋转、缩放、颜色和滤镜的渐进渐出属性。利用图中所示的曲线图，可以对补间属性的参数独立控制，精确控制动画对象的速率。6-5-11 全新的视频编码技术在Flash 8中采用了一种新的视频编码，并且扩展了面向Web的视频解码选项，我们可以选择使用Sorenson Spark编码或新的On2 VP6编码。在导入视频的时候，Flash 8还提供了提供了优化视频内容

51、质量和文件大小的高级选项。6-5-12 脚本助手标准模式2.0重写的原有Flash mx 版时的标准模式，现在为标准模式2.0，并增加一些功能，Flash mx 2004时是没有标准模式，现在Flash 8 里又增添了标准模式，主要针对不原手动输入代码的开发人员或是设计师。6-6-1 位图与适量图电脑图像分为“点阵图”（Bitmap images）和“矢量图”（Vector graphics）。“点阵图”（Bitmap images）也叫位图。一般情况下，位图都是经由扫描仪或数码相机所取得的图像，如果将位图放大到一定比例，用户就可以看到一个个像素，如左下图所示。矢量图是由点、线或是文字等物件组

52、合而成，其中每一个物件都是独立的个体，这些物件都有各自的色彩、形状、尺寸、位置坐标等属性。这种图形主要由矢量绘图软件（如Flash、Illustrator、 Freehand 、CorelDRAW、AutoCAD等）绘制产生。无论是在何种显示模式下，矢量图都不会模糊，如右下图所示。6-6 Flash 相关知识放大的位图放大的矢量图6-6-2 颜色模式在日常生活中，人们的肉眼能接触到许许多多的色彩，然而要正确记录这些色彩之间的差异，还需要将这些色彩做数值化的处理后，才能记录、编辑与印刷它们。但由于记录色彩的角度不同，同时使用着许多不同的色彩系统，因此就形成了不同的色彩属性，这就是我们所谓的“色彩

53、模式”。常见的色彩模式有以下几种： RGB模式、CMYK模式、Lab模式、 HSB模式。6-7 本章小结本章主要讲解了Flash界面与Flash的基础操作等知识，通过本章的学习能够使读者对Flash有个初步的了解。对于初学者来说这些都是必须要掌握的内容，但是对Flash仅仅有初步了解，对于应用Flash制作动漫或网页动画还远远不够，还需要读者耐心学习下面章节的内容。第7章 神奇的工具箱 学习目标了解Flash工具箱中各个工具，熟练掌握矢量绘图工具、颜色填充工具和文本工具使用方法。u 图形绘制工具 图形编辑工具 文本工具 学习内容7-1 图形绘制工具Flash工具箱中有非常好用的矢量动画创作工具

54、，其自带的工具简单实用，具有自己的特点，本节中将对Flash的绘图工具进行着重讲解，让读者领略使用Flash进行绘画的乐趣。7-1-1 线条工具 【线条工具】主要用于绘制直线条，可以对绘制好的直线条进行颜色、属性、笔触高度及笔触样式等设置。7-1-2 铅笔工具 【铅笔工具】就和我们平时使用的铅笔一样，可以随意绘制出各种形状的线段，使用起来非常方便。Flash中预置了三种铅笔模式，分别为【伸直模式】、【平滑模式】与【墨水模式】。7-1-3 矩形与椭圆工具使用 【椭圆工具】、 【矩形工具】可以绘制出椭圆与矩形图形，绘制出的图形分为外部“线段“与内部“填充颜色”两部分，如下图所示。7-1-4 钢笔工

55、具使用 【钢笔工具】可以绘制出连续的直线或者贝塞尔曲线。通过调整贝塞尔曲线的调节杆，可以绘制复杂的线段与图形。在 【矩形工具】下还包含 【多角星形工具】，单击【工具箱】中的 【矩形工具】按钮，选择 【多角星形工具】按钮，切换到【多角星形工具】，使用 【多角星形工具】可以绘制多边形、星形图形。 绘制的圆形与矩形7-1-5 刷子工具 【刷子工具】用于绘制图形或为图形填充颜色。其使用方法与【铅笔工具】相同，不同的是其使用的颜色是填充色，而不是线段的笔触颜色。7-1-6 墨水瓶工具 【墨水瓶工具】用于填充线段的颜色，但不能填充图形的颜色，例如绘制一个带边框的椭圆形，使用【墨水瓶工具】只能改变椭圆形边框

56、线段的颜色，而不能改变内部填充图形的颜色。如右图所示。使用不同刷子模式绘制的图形填充线段颜色7-1-7 颜料桶工具 【颜料桶工具】可以为填充图形填充颜色，但不能为线段填充颜色。使用【颜料桶工具】与【混色器】面板相结合，还可以为图形填充线性渐变颜色与放射状渐变颜色。7-1-8 混色器面板【混色器】面板是为图形和线段填充颜色的一个面板，使用此面板可以为图形填充更加复杂的颜色，如线性渐变颜色、放射状渐变颜色、透明颜色等。如右图所示。使用【混色器】面板可以改变图形的线段颜色或者填充图形的颜色。填充图形颜色【混色器】面板7-1-9 填充变形工具 当一个图形填充上渐变颜色后，还可以使用【填充变形工具】对图

57、形中的渐变色进行编辑，改变渐变颜色的方向、中心点与渐变颜色的范围大小等。对于“线性”渐变颜色与【放射状】渐变颜色，【填充变形工具】有着不同的调整方式。7-2 图形编辑工具Flash中经常需要使用图形编辑工具对其进行适当的修改与编辑，使其满足动画中的需求。对图形的编辑包括变形对象、移动对象等。7-2-1 选择工具 【选择工具】除了可以选择、移动对象以外，【选择工具】还有一个重要的功能，就是改变图形的形状。使用 【选择工具】改变图形的形状包括“改变图形的端点位置”与“改变线段的弧度”。7-2-2 部分选择工具 【部分选取工具】通常与 【钢笔工具】来结合使用，主要用于调整图形的路径、编辑图形等。在使

58、用 【部分选取工具】编辑图形之前首先了解一下图形路径中的各种编辑点。在Flash中绘制的图形路径通常可以由“角点”、“平滑点”与“拐点”所构成，通过调整这些点可以完成对图形的调整。7-2-3 任意变形工具在Flash中使用 【任意变形工具】可以改变选择对象的大小、旋转角度与倾斜角度等。当使用 【任意变形工具】变形对象时，在【工具箱】的【选项】中出现四个模式按钮，分别为： 【旋转与倾斜】、 【缩放】、 【扭曲】、 【封套】。 【缩放】工具用于缩放对象的大小； 【旋转与倾斜】工具用于设置对象的旋转与倾斜； 【扭曲】工具可使图形产生扭曲变形。 【封套】工具，可以任意改变图形的形状。7-2-4 变形面

59、板使用【变形】面板可以对选择的对象进行精确的缩放、旋转、倾斜等操作，获得变形效果，并且可以在变形的同时进行复制对象的操作。【变形】面板，如右图所示。7-3 文本工具无论那一个软件都少不了有输入文字的功能，Flash中也有文本工具，也可以输入文字。Flash中有三种文本：静态文本、动态文本和输入文本。文本工具的属性面板，如下图所示：7-3-1 静态文本、动态文本和输入文本静态文本选择静态文本类型后，在舞台单击可以直接输入文字，文字是静态的。使用静态文本类型，可以对文字进行各种文本格式的操作。动态文本选择动态文本类型，输入的文字相当于变量，可以随时调用和修改，例如网站上的天气预报的发布，股票信息等

60、。其内容从服务器支持的数据库读出，或者从其他的影片中载入。输入文本选择输入文本类型，使用文本工具可以在舞台中绘制表单。用户可以在表单中直接输入用户信息。7-3-2 文本工具的使用文本的输入和修改在输入文本时，文本框有两种状态：无宽度限制和有宽度限制。无宽度限制的输入框：该框会随文字输入的增长而加长。有宽度限制的输入框：在该框中输入的文字会根据输入框的宽度自动换行。设置文字的属性设置文字属性工具可以用来设置文字的字体、字号、颜色、字间距、字符位置、文字的粗体和斜体以及文字的方向等。设置文本格式对齐方式决定了段落中每行文本相对于文本块边缘的位置。横排文本相对于文本的左右边缘对齐，竖排文本相对于文本