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

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 设置网页文档属性打打开开的的网网页页文文档档在【标题栏】中输入标题之后并进行确认，设置完成后按快捷键键对页面进行预览。输入网页标题预览效果本节介绍修

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

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

8、的切换：按键盘中的键。u强制换行：按键盘中的+键。在一些网页文档中常常列举一些事务。利用项目列表，就可以将这些类似属性的事务规类到一起管理。这样，就可以设计出较为简明、整齐的网页文档了。2-2-4 利用项目列表整理复杂内容2-3 链接的应用网页的最大特点和优点就在于它可以通过超链接功能，在多个网页文档内自由的来回穿梭。2-3-1链接前的准备u修改页面属性，选择菜单栏中的【修改】/【页面属性】命令，打开【页面属性】对话框。u在【分类】栏中选择【链接】，在右侧的链接设置中设置自己喜欢的链接样式。u设置完成后单击 按钮，完成链接前的准备工作。2-3-2 创建文字链接u在页面中输入要链接的文字。u选择

9、文字，打开【属性】面板，单击【浏览文件】按钮，在站点中选择“return.html”页，创建一个相对的地址。u保存页面并预览网页下面我们来制作一个内部的链接。2-3-3 创建图像链接在设置图像超链接时，既可以对整幅图像设置一个链接，也可以选择图像的一部分设置链接。2-3-3-1 设置整幅图像链接选择页面中的图片，直接拖拽【属性】面板中，【链接】处的 【锚点】，链接到网页文件“xianshi.html”。将文件保存，敲击键盘中的键预览页面，单击页面中的图片，会打开一个新的页面“xianshi.html”，说明链接成功。2-3-3-2创建局部图像链接选择图像，在【属性】面板中随便选择一个热区。将鼠

10、标移动到图片上，在文字“学我所需”上绘制一个矩形。在【属性】面板中将热区链接到文件“xianshi.html”上，如右图所示。将文件保存，预览页面，会发现现在单击图片没有任何的反应，将鼠标移动到文字“学我所需”上，链接出现了，单击鼠标便可链接到新的页面中。2-3-4-1创建电子邮件连接新建一个页面，在页面中输入文字“我的邮箱”，选择文字，在【链接】对话框中输入“mailto:”。保存页面，预览页面。在浏览器中单击已创建电子邮件链接的文字，将启动Outlook Express，供访问者发送邮件，如右图所示。2-3-4 其他的链接2-3-4-2 创建下载连接输入文字并将其选择，单击【属性】面板【链

11、接】栏右侧的 文件夹，在弹出的【选择文件】对话框中，选择一个以.zip或.exe为扩展名的文件，如左图所示。单击“确定”按钮，便可完成文件的下载链接。2-3-4-3 锚点连接制作锚点：将光标设置到文字“人物一 卡卡”的左侧，单击【常用】工具栏下面的【命名锚记】按钮，打开【命名锚记】对话框。如左下图所示。在【命名锚记】输入框中输入英文或者是数字，但不能输入中文。单击 按钮。此时在文字“人物一 卡卡”左侧就出现了一个锚点，设置锚点链接：回到最上方选择第一个名字，在【属性】面板的【链接】对话框中输入“#1”。保存页面，预览网页。当单击一个名字时，页面就跳转到其相应的简介上了。2-4 图像和多媒体一个

12、网站的精彩程度有一半是取决于图像的运用，如果图片处理合理，网站会显的个性十足、精彩纷呈。下面将讲解网页中的形象元素图像和多媒体。2-4-1图像的插入单击【常用】工具栏中【插入图像】按钮，便可很轻松的插入图像。2-4-2 图像的编辑2-4-3 插入鼠标经过图像在页面中插入一副图片，输入图片的名称。选择图片，将“宽”和“高”两个输入框中的数值删除，然后“宽”输入框中输入数值“200”，此时图片等比例的缩小。在【边框】输入框输入相应数值，可以设置图片的边框。在Dreamweaver中可以直接插入鼠标经过图像，它实际上就是一个按钮，这个按钮包含一个链接，当鼠标移到图像的时候会变为另外的一张图片。2-4

13、-4 插入透明Flash打开“index.htm”文件，将光标置于单元格中，选择【常用】工具栏中的【媒体】/【Flash】选项。将“cloud.swf”插入到单元格中，单击【属性】面板中的 按钮播放动画。停止播放动画，选择插入的Flash，单击 按钮打开代码视窗，在标记中输入。保存文件并预览页面，背景图像显露出来，如右图所示。2-6 本章小结至此本章内容讲解完毕，以上讲的内容比较简单，但是这又是制作网页最基础的知识，读者一定要熟练掌握这些知识点，这样才能更好地进行下面的学习。第3章 表格和层 学习目标熟悉插入表格和设置表格参数的方法。学习选择、添加、删除、拆分、合并表格行列、单元格的方法，能够

14、正确设置表格内容的格式。学会用HTML代码设置表格的各种细节，从而更自由地控制表格的外观，了解层的用法，以及层和表格之间转换的方法。u 创建表格及表格的属性设置u 表格在HTML代码中的显示u HTML代码u 层 学习内容3-1创建表格及表格的属性设置3-1-1插入表格单击【常用】工具栏中的 【插入表格】按钮，可在页面中插入表格。表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。表格宽度有两种设置方法：设置为“像素”，这种设置方法是将表格设置为固定的尺寸；设置为“百分比”，这种设置方法是相对的尺寸，

15、也就是相对于网页的宽度而决定的。调整表格的大小：向外侧拖动左下边角的调节点可放大表格。向内侧拖动边角的调节点可缩小表格放大表格放大表格缩小表格缩小表格3-1-2 设置表格属性在此可以修改表格的行数和列数在此可以设置表格的边框颜色表格中各个单元格之间的间距单元格中的元素距离单元格边框的距离选择表格选择表格设设置置表表格格属属性性3-1-3 设置单元格属性表格中的一个个小方块即为单元格。下面来学习如何设置单元格的属性。将鼠标移至表格的边框线上，鼠标将变为水平或者垂直的双向向外的箭头时，单击鼠标左键就可以将表格选中。选择单元格：按住键同时，单击单元格，可以选中单元格。选择多个单元格：按住键，然后逐个

16、单击欲选择的单元格。选择表格的行或列：将鼠标移至表格外边框处，当鼠标变为水平或者垂直方向的箭头时，单击鼠标左键可以选中一行或者一列表格。合并单元格：将要合并的单元格选择，单击【属性】面板中的 【合并单元格】按钮，便可将单元格合并。拆分单元格：选择单元格，单击【属性】面板中的 【拆分单元格】按钮，便可将单元格拆分。拆分单元格按钮设置单元格是被拆分为几行还是几列行数或列数值拆拆分分单单元元格格此处可以设置单元格的背景图像设置单元格的内容在水平和垂直方向的属性背景颜色 设置单元格的其它属性：将光标置于单元格中，在【属性】面板中就可以设置此单元格的属性。设设置置单单元元格格属属性性3-2 表格在HTM

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

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

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

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

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

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

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

24、1 初识样式表下图所示的对话框是决定样式表种类的【新建CSS样式】对话框，其【选择器类型】选项组中选择要操作的样式表形式，【定义在】中选择应用样式表的范围。表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。样式表的名称用户可以自定义样式类型，并将其运用到特定的部分一次性修改网页文件中特定标记的属性根据需要来设置建立链接的文字样式建立其他网页文件也可以运用的外部样式表文件建立只运用于当前网页文件上的样式表4-1-2 在哪里创建样式表4-1-3 修饰文章段落在前面各章的实例中，我们是通过【属性】面板来设

25、置文字大小，颜色等属性。其实通过CSS样式不仅能实现改变文字的大小和颜色属性，还能修改文字的行间距等其他属性，本節我们將通过实例进行具体的讲解。Dreamweaver中把简单运用样式表的相关功能都汇集到了CSS 样式面板中。执行菜单栏中的【窗口】/【CSS样式】命令，便可打开【CSS样式】面板，在该面板中进行相应的操作，即可创建一个CSS样式。4-1-4 用CSS设置文本与表格边框之间的距离通过插入表格的方式可以随意设置文本与表格边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果。4-1-5 用CSS为表格添加边框和背景色通过插入表格的方式可以随意设置文本与表格

26、边框之间的距离，但是这种方法比较麻烦，通过创建CSS样式可以轻松地完成你想要的效果，本节我们通过实例进行具体的讲解。4-1-6 改变鼠标指针的形态通过CSS还可以在特定区域内改变鼠标指针形态。创建一个样式，名称为“.cursor”，如右图所示。【新建【新建CSS规则】对话框规则】对话框单击”确定“按钮，出现定义“.cursor”样式属性的对话框之后，在【分类】栏中选择【扩展】，然后在其右侧进行设置，如右图所示。扩展选项组中的“光标”下拉列表中有沙漏、十字、手形等各种形态的指针，根据不同的状况显示不同的指针，可以制作出更具特色的网页。4-1-7固定背景图像前面章节中常常通过【属性】面板设置表格的

27、背景，用这种方法设置背景图像，在做复杂的效果时往往是不足的，通过CSS样式能够完美地制作出各种背景效果，下面我们来具体讲解用CSS样式设置背景的方法。l新建一个文件，创建样式“.bg1”，在【.bg1的CSS规则定义】对话框中进行设置，如下图所示。设置完毕对表格套用“.bg1”样式。对表格套用对表格套用“.bg1”样式样式l创建样式“.bg2”，在【.bg2的CSS规则定义】对话框中进行设置。设置完毕对表格套用“.bg2”样式。对表格套用对表格套用“.bg2”样式样式样样式式定定义义对对话话框框样样式式定定义义对对话话框框l在右侧的单元格中插入“bg_003.gif”图片。将光标置于左侧的单元

28、格中，插入一个3行1列的表格。将光标置于第1个单元格中，插入“bg_004.gif”图片，将光标置于第3个单元格中，插入“bg_005.gif”图片。l创建样式“.bg3”，对中间的单元格套用“.bg3”样式。对表格套用对表格套用“.bg3”样式样式插入图片插入图片样样式式定定义义对对话话框框l创建名称为“.padding1”的样式。出现定义“.padding1”样式属性的对话框之后，在【分类】选项组中选择【方框】，然后在【方框】编辑框中的【上】输入框中输入数值“10px”。如右图所示。l在单元格中输入文字，完成实例制作。预预览览后后的的页页面面样样式式定定义义对对话话框框4-1-8 创建并应

29、用外部样式样式的定义范围有两种，一种是仅对当前文档应用；另一种则是定义为外部样式，外部样式不仅可以对当前文档应用，还可以对其他页面应用。对于一个大的网站，如果许多页面都需要运用同一种样式，那么定义为外部样式则会更方便。4-2 表单表单文档是很多网站必须建立的体制，他的特点就是让网络中的人们交流信息、交换产品等。在电子商务的领域中，愈来愈多的厂商投入到销售网络或在网络上提供客户服务。因此，表单文档会几乎已经成为每个网站必备的功能之一。4-2-1 表单介绍【表单】项【表单】项各各按按钮钮的的功功能能作作用用4-2-2 表单的用法在制作表单页面时，首先应该向页面中插入一个表单，创建表单的方法很简单，

30、只要单击【插入栏】/【表单】中的 【插入表单】按钮，即可在当前文档中插入一个表单。单击 【文本字段】按钮插入文本域，如下图所示。插插入入文文本本域域单击 【插入下拉列表/菜单】按钮插入下拉列表，如下图所示。插插入入下下拉拉列列表表/菜菜单单单击 【复选框】按钮插入3个复选框并输入相应的文字，如下图所示。插插入入复复选选框框单击 【单选】按钮插入2个单选按钮并输入相应的文字，如下图所示。插入单选按钮插入单选按钮分别在表格的下两行中输入文字；并在其相应的右侧单元格中插入【文本域】，如下图所示。插插入入文文本本域域在表格的最后一行单击【文本域】按钮插入多行文本字段，并在【属性】面板中设置文本域的【字

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

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

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

34、乐设置状态栏文本在状态栏中显示指定的内容隐藏弹出式菜单隐藏在Dreamweaver上制作的弹出窗口显示弹出式菜单在Dreamweaver中可以制作需要的弹出菜单跳转菜单制作一次可以建立若干个链接的跳转菜单显示隐藏层根据设置的事件，显示或隐藏特定的层跳转菜单开始在跳出菜单中选定要移动到链接的站点上调用JavaScript函数事件发生时，呼出特定JavaScript函数预先载入图像为了在浏览器中快速显示图片，事先下载图片之后显示出来检查表单检查表单文档有效性的时候使用5-1-3 认识事件l窗口事件l键盘和鼠标的事件OnFocus鼠标指针移动到窗口或帧上,即激活之后发生的事件OnMouseDown单

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

36、者修改表单文档的初始值时发生的事件OnReset将表单文档重设置为初始值时发生的事件OnSubmit访问者传送表单文档时发生的事件onSelect访问者选定文本字段中的内容时发生的事件l其他事件其他事件5-1-4 常用行为之动态按钮的制作选择第一个按钮图像，在【行为】面板中单击【添加】按钮，在下拉菜单中选择【交换图像】命令。在打开的【交换图像】对话框中的【设定原始档为】中选择“images”文件夹中的“menu_001_d.gif”文件，如左下图所示。此时【行为】面板中便添加了指定的动作，如右下图所示。保存页面，当鼠标移动到第一个按钮上时，按钮图像将变为设置的图像。【行为】面板中添加了动作【行

37、为】面板中添加了动作设定图像文件设定图像文件5-1-5 常用行为之弹出窗口页面的制作这一节我们要讲解的弹出窗口页面不仅可以实现打开页面的同时弹出，也可以单击按钮时弹出，这个效果是通过【行为】菜单中的【打开浏览器窗口】动作来实现的。在Dreamweaver中可以通过此行为来设定打开的浏览器窗口的大小，以及是否显示导航条、地址工具栏、状态栏和菜单条等项内容。5-1-6 常用行为之下拉菜单的制作l打开文件“index.html”文件。选择一个栏目图片，在【属性】面板中的【链接】项中输入“#”，创建空链接。（必须创建了超链接的项才能用来制作下拉菜单）l在【行为】面板中单击【添加】按钮，在下拉菜单中选择

38、【显示弹出式菜单】命令。l出现【显示弹出式菜单】对话框后，在【文本】框中输入子栏目项，链接设置为“#”，如右图所示。设置下拉菜单项目设置下拉菜单项目l单击 按钮添加项目，输入其他菜单名称，如右图所示。l单击【外观】标签之后，根据网页的情况设置子菜单的字体、大小、颜色、背景颜色等等。l单击【外观】标签之后，根据网页的情况设置子菜单的字体、大小、颜色、背景颜色等等，l选择【位置】标签，将X值设置为“20”，将Y值设置为“35”，并单击 按钮。输入其他菜单项输入其他菜单项l在【行为】面板上增加了“隐藏弹出式菜单”和“显示弹出式菜单”两个动作，如左下图所示。l将文件保存，预览页面。将鼠标放在第一个菜单

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

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

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

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

43、条以及Flash整站，还可以设计带有动感的音乐动画，卡通动漫等，完全具备了多媒体的各项功能。本章首先学习Flash 8基础知识，为更深入地学习Flash打下良好基础。6-2 Flash 8界面初识Flash 舞台工作面板菜单栏标题栏【属性】面板工具箱文件名时间轴 Flash 8的界面的界面6-3 Flash 8面板的操作l展开面板展开面板l移动面板移动面板将光标移动到该位置拖曳鼠标将面板拖出面板组将光标移动到该箭头位置单击鼠标展开面板l关闭面板关闭面板l保存、打开自定义面板保存、打开自定义面板运用菜单栏中【窗口】/【保存面板布局】命令，可以保存、打开或者自定义面板。如果面板已经从面板区分离为一

44、个独立面板，则直接单击其标题栏右上角的 按钮，关闭面板。如果在面板区关闭面板，则将光标移动到面板区的面板标题栏中，单击鼠标右键，在弹出的如右图所示的菜单中选择【关闭面板】命令，关闭面板。【保存面板布局】对话框【保存面板布局】对话框关闭面板关闭面板l【属性】面板【属性】面板【属性】面板在Flash中起着重要的作用，很多操作都可以通过它来完成。当选择一个操作对象或选择一个工具时，【属性】面板将显示相关属性。如下图所示为【文本工具】的相关属性。【文本工具】的相关属性【文本工具】的相关属性6-4 Flash 基本操作了解了Flash界面布局、Flash各种面板的简单操作后，下面我们来继续学习Flash

45、的其他操作。6-4-1 新建Flash文件u 单击计算机任务栏上的“开始”/“程序”/“Macromedia”/“Flash 8”命令，启动Flash 8软件，在Flash工作区域弹出Flash 8向导，单击Flash向导中的“Flash 文档”选项，即可创建出一个空的Flash文档。u 如果已经打开了Flash文档，可以单击菜单栏中【文件】/【新建】命令，弹出【新建文档】窗口，在【新建文档】窗口【类型】列表中选择合适的文档类型，一般选择【Flash文档】选项，然后单击 按钮，可以新建出一个新的Flash文档。6-4-2 保存、打开、关闭Flash文件u 单击菜单栏中【文件】/【保存】命令，打

46、开【另存为】对话框。在【文件名】输入栏中可以输入要保存文件的名称，单击 按钮，则此Flash文件被保存为“*fla”格式文件。u 单击菜单栏中【文件】/【打开】命令，弹出【打开】对话框。在【查找范围】下拉列表中选择要打开的文件，单击 按钮，将选择文件打开。u 单击菜单栏中【文件】/【关闭】命令，或者单击文件名称栏右侧的 按钮，将当前编辑的Flash文档关闭；.单击菜单栏中【文件】/【全部关闭】命令，或者单击Flash软件右上角的 【关闭】按钮，不管在Flash中有几个编辑的文档，所有Flash文档均会被关闭。6-4-3 选择、移动Flash对象u使用 【选择工具】框选对象的方法，可以将选框中的

47、所有对象都选择，包括多个对象，这是最常用的选择对象的方法。u除了框选对象的方法之外，还可以通过单击或者双击对象的方法来选择对象。u将对象选择后，使用 【选择工具】拖动对象，此时会出现此对象的矩形轮廓，将该矩形轮廓拖到合适位置释放鼠标，则对象就被放置到移动的地方。6-4-4 导入、导出Flash对象u运用菜单栏中的【文件】/【导入】/【导入到舞台】命令，可以导入外部图像或声音。u运用菜单栏中【文件】/【导出】/【导出影片】命令，可以导出Flash动画。6-5-1 界面的改变总体来说，Flash 8的界面没有太大的改变，只是在以前的属性面板右侧增加了两个新的选项【参数】和【滤镜】，另外在【属性】面

48、板中还增加了一个【设备】设置选项。如下图所示。6-5-2 新增滤镜效果滤镜面板，是管理Flash滤镜的主要工具，我们可以在这里增加或删除滤镜，并且可以指定滤镜的某些参数选项。单击滤镜面板中的“加号”可以显示滤镜列表，包括投影、模糊、发光、斜角、渐变发光、渐变斜角和调整颜色等。6-5 Flash 8新功能简介Flash 8的【属性】面板的【属性】面板6-5-3 Flash 8 混合模式当两个图像的颜色通道以某种数学计算方法混合叠加到一起的时候，两个图像会产生某种特殊的变化效果。在Flash 8中提供了图层、变暗、色彩增殖、变亮、荧幕、叠加、强光、增加、减去、差异、反转、Alpha、擦除等混合模式

49、。6-5-4 Flash 8 绘图工具的改进u对象的绘制：对象的绘制：在Flash 8中，增加了【对象绘制】功能，当选中绘图工具时，工具栏下方会显示如右图所示的按钮。按下此按钮，然后分别绘制两个不同颜色和形状的对象，可以看到两个对象是独立存在于一个图层中的，并且不互相干扰。新新增增的的“对对象象绘绘制制”选选项项u线条的变化：线条的变化：在以前版本的Flash中，线条的端点默认都为圆角，在Flash 8中新增了端点、接合和尖角等类型。其中端点类型包括“无”“圆角”“方形”三种。另外，在以前的版本中，需要我们将线条转换为可填充的轮廓以后才可以对线条进行颜色填充，现在，可以直接在属性面板中改变线条

50、的填充颜色，还可以使用纯色，渐变或位图填充。6-5-5 增强的text工具增强了text工具，读者可以自由的从左边或者从右边来回的调整文本框的大小。6-5-6 增强的library库当现在的库重新启动程序，它已经可以停在读者之前所放的位置上了，并且可保存读者对库面板的设置，如果打开多个源文件，可以通过下拉菜单在一个库面上进行切换，同时可以锁定某一个库。6-5-7 Tabbed 面板现在FLASH 8 的面板可以自由的将它们成组放在一个面板上，并且可以把常用的工具放在一个面板上，读者可以为他们重新命名。如右图所示。Tabbed 面板面板6-5-8 运行时位图缓存Flash 8还新增了一种功能，为