HTML静态网页的制作--.ppt

第第2章章 静态网页的制作静态网页的制作 Web编程实用技术教程编程实用技术教程学习目标学习目标了解网页制作工具（了解网页制作工具（Dreamweaver、Flash）的）的简单使用方法，用之制作静态网页；简单使用方法，用之制作静态网页；学会将学会将Dreamweaver作为开发作为开发Web程序的平台；程序的平台；掌握超级链接的创建；掌握超级链接的创建；学会利用表格和框架进行网页布局；学会利用表格和框架进行网页布局；学会使用学会使用HTML和和XML语言编制网页。语言编制网页。目目 录录 2.1 常用的网页制作常用的网页制作工具工具 2.2 制作第一个简单网页制作第一个简单网页 2.3 超文本和超图像链接超文本和超图像链接 2.4 网页制作中的网页制作中的Flash动画动画 2.5 利用表格和框架制作网页利用表格和框架制作网页 2.6 HTML与与XML标识语言标识语言 Dreamweaver Dreamweaver是一套专业化的网页创作工具，它采用是一套专业化的网页创作工具，它采用“所见所见即所得即所得”的可视化编辑方式，能够快速高效地创建各种具有的可视化编辑方式，能够快速高效地创建各种具有专业水平的网页，不需要编写任何代码。如果需要在代码界专业水平的网页，不需要编写任何代码。如果需要在代码界面进行工作，只需进入面进行工作，只需进入HTMLHTML代码窗口或源代码检视器中，就代码窗口或源代码检视器中，就能同步看到能同步看到DreamweaverDreamweaver生成的源代码。它支持最新的生成的源代码。它支持最新的DHTMLDHTML、CSSCSS标准及分层技术，具有极好的兼容性，适用于标准及分层技术，具有极好的兼容性，适用于各种平台和各种浏览器。各种平台和各种浏览器。2.1 常用的网页制作工具常用的网页制作工具 Dreamweaver 1.1.启动启动DreamweaverDreamweaver程序程序 在在“开始开始”菜单的菜单的“所有程序所有程序”中找到中找到“Adobe Adobe Dreamweaver CS3Dreamweaver CS3”，并单击该命令。，并单击该命令。DreamweaverDreamweaver将立即启动，将立即启动，在在“文档文档”窗口内将打开一个空白文档，如下图所示。窗口内将打开一个空白文档，如下图所示。2.2.DreamweaverDreamweaver的用户界面的用户界面 DreamweaverDreamweaver由由页面编辑器页面编辑器和和站点管理器站点管理器两大部分组成。两大部分组成。下图所示的是下图所示的是DreamweaverDreamweaver的页面编辑器，包括页面编辑窗口的页面编辑器，包括页面编辑窗口和各种浮动面板。和各种浮动面板。(1)(1)页面编辑窗口：页面编辑窗口：页页面面编编辑辑窗窗口口由由标标题题栏栏、菜菜单单栏栏、工工具具栏栏、文文档档编编辑辑区区和和状态栏等基本部分组成，各部分的功能如下：状态栏等基本部分组成，各部分的功能如下：标标题题栏栏：显显示示当当前前页页面面的的标标题题，括括号号中中显显示示对对应应文文档档的的路路径径和文件名。和文件名。菜单栏：包含所有的操作命令。菜单栏：包含所有的操作命令。DreamweaverDreamweaver共有共有1010个系统个系统菜单，分别为文件、编辑、查看、插入记录、修改、文本、命菜单，分别为文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助。单击系统菜单，打开对应的下拉菜单，令、站点、窗口、帮助。单击系统菜单，打开对应的下拉菜单，可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上都有菜单操作命令与之相对应。都有菜单操作命令与之相对应。工工具具栏栏：放放置置常常用用工工具具。如如：左左边边第第一一个个按按钮钮用用于于切切换换到到HTMLHTML代代码码窗窗口口，第第二二个个按按钮钮切切换换到到HTMLHTML代代码码视视图图和和页页面面设设计计视视图图双双状状态态同同步步窗窗口口，第第三三个个按按钮则切换到页面编辑窗口。钮则切换到页面编辑窗口。文档编辑区：编辑网页的区域。文档编辑区：编辑网页的区域。DreamweaverDreamweaver启动启动后，自动创建一个空白的网页文档等待编辑。后，自动创建一个空白的网页文档等待编辑。状状态态栏栏：显显示示当当前前网网页页的的有有关关信信息息。在在状状态态栏栏中中从从左左到到右右依依次次为为标签选择器、基本工具、窗口设置框和下载指示器。标签选择器、基本工具、窗口设置框和下载指示器。标标签签选选择择器器：编编辑辑网网页页时时，利利用用标标签签选选择择器器可可以以显显示示和和修修改改HTMLHTML标签，单击标签按钮可以选择网页中相应的编辑对象。标签，单击标签按钮可以选择网页中相应的编辑对象。基基本本工工具具：包包括括选选取取工工具具、手手形形工工具具、缩缩放放工工具具和和选选择择缩缩放放比比例例列表框。列表框。窗窗口口设设置置框框：设设置置显显示示窗窗口口的的大大小小，单单击击设设置置区区右右侧侧的的小小按按钮钮，在在打打开开的的菜菜单单中中，可可以以根根据据显显示示器器屏屏幕幕的的分分辨辨率率选选择择不不同同的的显显示示尺寸。尺寸。下下载载指指示示器器：显显示示当当前前网网页页的的文文件件量量大大小小，以以及及网网页页被被下下载载所所需需要的时间，单位是要的时间，单位是*k/*k/*秒。秒。(2)(2)浮动面板：浮动面板：页页面面编编辑辑器器中中有有2 2个个常常用用的的浮浮动动面面板板：插插入入面面板板、属属性性面面板，以及放置其他面板的浮动面板集。板，以及放置其他面板的浮动面板集。浮浮动动面面板板是是DreamweaverDreamweaver的的一一大大特特色色。利利用用浮浮动动面面板板对对网网页页进进行行属属性性设设计计，在在页页面面编编辑辑窗窗口口中中可可以以直直接接看看到到操操作作结结果果，真正实现了真正实现了“所见即所得所见即所得”的编辑功能。的编辑功能。浮浮动动面面板板集集也也是是DreamweaverDreamweaver的的一一大大特特色色。设设计计者者可可以以按按自自已已的的需需要要任任意意组组合合或或拆拆分分浮浮动动面面板板集集中中的的各各种种面面板板，也也可可以以用用鼠鼠标标拖拖拽拽浮浮动动面面板板的的标标题题栏栏来来移移动动浮浮动动面面板板，用用鼠鼠标标拖拖拽拽浮动面板的边框来改变浮动面板的大小。浮动面板的边框来改变浮动面板的大小。(3)(3)站点管理器：站点管理器：站点管理器主要用于管理站点内的文件和目录，可对站点管理器主要用于管理站点内的文件和目录，可对站点内的文件进行改名、编辑和删除等基本操作，并可检验站点内的文件进行改名、编辑和删除等基本操作，并可检验对象的链接情况，自动修改其他页面指向这个对象的链接。对象的链接情况，自动修改其他页面指向这个对象的链接。利用模板和库，可以使站点内的部分页面应用相同的模板和利用模板和库，可以使站点内的部分页面应用相同的模板和库，从而使多个页面具有相同的风格，并且可以快速进行统库，从而使多个页面具有相同的风格，并且可以快速进行统一更新。管理器还自带一更新。管理器还自带FTPFTP功能，能完成站点内文件的上传和功能，能完成站点内文件的上传和下载，进行站点的发布和远程管理。下载，进行站点的发布和远程管理。制作一个浏览效果如下图所示的简单网页。制作一个浏览效果如下图所示的简单网页。2.2 制作第一个简单网页制作第一个简单网页 实现步骤如下：实现步骤如下：首首先先启启动动DreamweaverDreamweaver，打打开开前前面面所所建建立立的的本本地地站站点点，接接着着在在页面中插入各种基本的网页元素。页面中插入各种基本的网页元素。一一、基基本本网网页页元元素素（文文字字、图图像像、水水平平线线、日日期期和和时时间间）的的插插入入1.1.在页面中添加和处理文字在页面中添加和处理文字(1)(1)在页面中输入文字，操作步骤如下：在页面中输入文字，操作步骤如下：在在页页面面编编辑辑区区中中，按按照照页页面面的的设设计计内内容容输输入入文文字字，各各段段文文本的末尾按回车键，如下图所示；本的末尾按回车键，如下图所示；按按Ctrl+SCtrl+S键键保保存存网网页页。第第一一次次创创建建的的网网页页可可以以作作为为首首页页index.htmindex.htm文件保存，随后该首页将得到进一步的扩充和完善。文件保存，随后该首页将得到进一步的扩充和完善。注注意意：书书中中所所提提到到的的“保保存存网网页页”都都是是指指将将网网页页保保存存到到本本地地站站点下点下。(2)(2)将将第第一一行行“计计算算机机工工程程系系”作作为为网网页页的的标标题题文文字字，操操作作步步骤如下：骤如下：选中选中“计算机工程系计算机工程系”，打开属性面板，如下图所示；，打开属性面板，如下图所示；在在“格格式式”下下拉拉选选项项中中选选择择最最大大标标题题“标标题题1 1”以以设设置置标标题题样式；样式；单击单击 按钮将字体变粗，单击按钮将文字居中显示。按钮将字体变粗，单击按钮将文字居中显示。(3)(3)接着，设置中文字体。接着，设置中文字体。在属性面板上单击字体按钮在属性面板上单击字体按钮 ，打开字体下拉列表，选择想，打开字体下拉列表，选择想设置的字体。如果字体下拉列表中没有想设置的字体，如何添设置的字体。如果字体下拉列表中没有想设置的字体，如何添加中文字体呢？操作如下：加中文字体呢？操作如下：打开打开“编辑字体列表编辑字体列表”对话框，执行下列操作之一：对话框，执行下列操作之一：在属性面板上单击字体按钮在属性面板上单击字体按钮 ，打开字体下拉列表，选，打开字体下拉列表，选择择“编辑字体列表编辑字体列表”选项，如下图所示；选项，如下图所示；在菜单栏中选择“文本”“字体”“编辑字体列表”命令。在在“编辑字体列表编辑字体列表”对话框（如下图所示）中进行如下操对话框（如下图所示）中进行如下操作：作：在在“编辑字体列表编辑字体列表”对话框中进行如下操作：对话框中进行如下操作：先在先在“字体列表字体列表”框中选定框中选定“在以下列表中添加字体在以下列表中添加字体”项；项；在在“可用字体可用字体”框中选择一种字体（如隶书）；框中选择一种字体（如隶书）；单单击击方方向向按按钮钮 ，选选中中的的字字体体添添加加到到“选选择择的的字字体体”框框中中，同时也出现在同时也出现在“字体列表字体列表”框中。框中。如如果果还还要要加加入入第第二二种种字字体体，则则单单击击按按钮钮 ，再再重重复复上上面面的的3 3步步即即可可。如如果果要要删删除除某某种种字字体体，则则在在“字字体体列列表表”框框中中选选定定该该字字体体，单单击击按按钮钮 。还还可可以以单单击击按按钮钮 ，将将刚刚添添加的字体上移，便于以后的使用。加的字体上移，便于以后的使用。单单击击“确确定定”按按钮钮。此此时时，属属性性面面板板上上的的字字体体下下拉拉列列表表中已经添加了中已经添加了“隶书隶书”等字体。等字体。(4)(4)将第一段文本的颜色设置为红色，将第三段文本的颜色设将第一段文本的颜色设置为红色，将第三段文本的颜色设置为十六进制代码置为十六进制代码#3333#3333CCCC蓝色，将后面文本的颜色设置为十六蓝色，将后面文本的颜色设置为十六进制代码进制代码#FF00FFFF00FF的淡紫色。操作步骤如下：的淡紫色。操作步骤如下：首先选中第一段文本；首先选中第一段文本；单击属性面板上的字体颜色按钮，在单击属性面板上的字体颜色按钮，在“颜色颜色”调色板中调色板中用吸管吸取红色即可，如下图所示。用吸管吸取红色即可，如下图所示。在在网网页页中中，每每种种颜颜色色都都可可用用一一个个十十六六进进制制代代码码表表示示。如如果果知知道道颜颜色色的的代代码码，可可直直接接在在“颜颜色色”文文本本框框中中输输入入该该颜颜色色的的十十六进制代码。六进制代码。用相同的方法设置下面文本的颜色。用相同的方法设置下面文本的颜色。(5)(5)将最后的将最后的5 5行文本组成一个项目列表，操作步骤如下：行文本组成一个项目列表，操作步骤如下：首先选中最后首先选中最后5 5行文本；行文本；打开属性面板，单击按钮打开属性面板，单击按钮 ，则最后，则最后5 5行文字前便行文字前便增加了圆点式的项目符号增加了圆点式的项目符号“”，如下图所示。，如下图所示。(6)如果要为选中的段落前加上1、2、3式的项目编号，则单击 按钮即可。同样，项目符号的样式是可以更改的，单击属性面板上的“列表项目”按钮进行相应的设置。(7)(7)同同时时，还还可可以以让让“WelcomeWelcome”文文本本从从左左到到右右动动起起来来，操操作步骤如下：作步骤如下：首先选中首先选中“WelcomeWelcome”文本；文本；在属性面板上单击按钮在属性面板上单击按钮 ，打开快速标签编辑器；，打开快速标签编辑器；在在光光标标处处直直接接输输入入“marqueemarquee”，或或稍稍等等一一会会，在在出出现现的的下下拉拉列列表表中中选选择择“marqueemarquee”选选项项，然然后后按按回回车车键键。此此时时，状状态栏上已多了一项加粗显示的态栏上已多了一项加粗显示的 marquee。按按F12F12键预览网页效果。键预览网页效果。2.2.在页面中插入和处理图像在页面中插入和处理图像(1)(1)将图像插入到页面中。操作步骤如下：将图像插入到页面中。操作步骤如下：在在“学学生生专专区区”项项目目符符号号“”前前按按回回车车键键，以以确确定定插入图像的位置在第三段和第四段之间；插入图像的位置在第三段和第四段之间；单单击击插插入入面面板板中中的的 按按钮钮的的子子菜菜单单“图图像像”（或或者者在在菜菜单单栏栏中中选选择择“插插入入记记录录”“图图像像”命命令令），弹弹出出“选选择择图图像源文件像源文件”对话框，如下图所示；对话框，如下图所示；在在查查找找范范围围框框中中选选定定图图像像文文件件所所在在的的文文件件夹夹及及文文件件，单单击击“确确定定”按钮。按钮。弹弹出出“图图像像标标签签辅辅助助功功能能属属性性”对对话话框框，填填写写该该图图像像的的“替替换换文本文本”及及“详细说明详细说明”内容，单击内容，单击“确定确定”按钮。按钮。经经过过上上面面的的操操作作，图图像像便便插插入入到到了了当当前前的的页页面面中中。按按F12F12预预览览网网页页，可可以以看看到到当当鼠鼠标标停停留留在在图图像像上上时时就就会会出出现现提提示示文文字字。这这样样做做的的好好处处就就是是当当浏浏览览网网页页时时，即即使使图图像像不不能能完完全全显显示示出出来来，提提示示文文字字也也能能让让浏浏览览者者了了解解图图像像的的内内容容或或主主题题。但但是是，此此时时的的图图像像并并没没有有按按照照页页面面设设计计的的要要求求放放置置，因因此此需需要要调调整整图图像像的的对对齐齐方方式式、周周边边间间距距及及图像的大小等。图像的大小等。(2)(2)调调整整图图像像的的对对齐齐方方式式。关关于于图图像像，在在属属性性面面板板上上有有两两种种对对齐齐方式：图像在页面中的对齐方式及图像和周围元素的对齐方式。方式：图像在页面中的对齐方式及图像和周围元素的对齐方式。调整图像在页面中的对齐方式调整图像在页面中的对齐方式分分别别单单击击 3 3个个按按钮钮，可可以以看看到到图图像像分分别别位位于于页页面面的的左左边边、中中间间和和右右边边。再再次次单单击击相相应应对对齐齐按按钮钮，图图像像回回到到原原来来的的位置上。此时单击左对齐按钮。位置上。此时单击左对齐按钮。调整图像和周围元素的对齐方式调整图像和周围元素的对齐方式单单击击属属性性面面板板上上的的“对对齐齐”按按钮钮，在在下下拉拉列列表表选选项项中中选选择择“左对齐左对齐 ”。(3)(3)调整图像的周边间距。操作步骤如下：调整图像的周边间距。操作步骤如下：选中图像，打开属性面板；选中图像，打开属性面板；在在“垂垂直直边边距距”文文本本框框中中输输入入1010，设设置置垂垂直直间间距距为为1010像像素；素；在在“水水平平边边距距”文文本本框框中中输输入入6060，设设置置水水平平间间距距为为6060像像素，按回车键。素，按回车键。可可以以看看到到图图像像与与上上、下下、左左、右右方方的的文文字字间间隔隔都都拉拉大大了了，如如下下图图所所示示。如如果果删删除除输输入入框框中中的的数数值值，则则图图像像又又回回到到原原来来的的位位置。置。(4)(4)调整图像的大小。方法有两种：调整图像的大小。方法有两种：直接拖拽图像上的控点；直接拖拽图像上的控点；在在属属性性面面板板的的“高高度度”和和“宽宽度度”文文本框中输入相应数值（单位是像素）。本框中输入相应数值（单位是像素）。如如果果不不满满意意调调整整图图像像的的大大小小，则则可可以以单单击击属属性性面面板板上上的的“高高度度”和和“宽宽度度”标标志志，使使图图像还原为原始大小。像还原为原始大小。3.3.插入水平线插入水平线(1)(1)在页面中插入水平线。操作步骤如下：在页面中插入水平线。操作步骤如下：在在“WelcomeWelcome”文文本本后后单单击击鼠鼠标标，以以确确定定插插入入水水平平线线的的位位置；置；在在菜菜单单栏栏中中选选择择“插插入入记记录录”|“HTMLHTML”“水水平平线线”命命令令，则则DreamweaverDreamweaver默默认认的的水水平平线线便便插插入入到到“WelcomeWelcome”和和第第三三段文字之间，如下图所示。段文字之间，如下图所示。(2)(2)修修改改水水平平线线，将将水水平平线线居居中中对对齐齐，且且其其宽宽度度为为浏浏览览器器窗窗口的口的80%80%，操作步骤如下：，操作步骤如下：选中上面所插入的水平线；选中上面所插入的水平线；在在水水平平线线属属性性面面板板的的“宽宽度度”文文本本框框中中输输入入“8080”，并并选择其单位为选择其单位为“%”，如下图所示；，如下图所示；在在“对齐对齐”下拉列表中选择下拉列表中选择“居中居中”对齐方式。对齐方式。注意：在水平线的属性面板上，其宽度的单位分为两种：像素和%（百分比）。80%和80像素的区别在于：无论浏览器窗口怎么缩放，宽度设置为80像素的水平线都是80个像素点长；而宽度设置为80%的水平线将会自动调整长度，其宽度总是占浏览器窗口宽度的80%。要插入垂直线，则选中水平线，将其高度设置为垂直线的高度（如：80像素），将宽度设置为垂直线的宽度（如：2像素）即可。(3)Dreamweaver默认的水平线颜色为灰色，要将水平线的颜色设置为黄色，操作步骤如下：选中上面所插入的水平线；单击水平线属性面板的 按钮，打开快速标签编辑器；在标签中插入属性color=“#FFFF00”或color=“yellow”；按F12预览，便可看到水平线是黄色。.插入日期和时间在页面中插入日期和时间，操作步骤如下：(1)确定所插入的日期和时间的位置；(2)单击插入面板的日期按钮 ，者在菜单栏中选择“插入记录”“日期”命令，打开“插入日期”对话框，如下图所示；(3)(3)在在“插插入入日日期期”对对话话框框中中选选择择星星期期、日日期期和和时时间间格格式式，选选中中“储储存存时时自自动动更更新新”项项，然然后后单单击击“确确定定”按按钮钮。在在日日期期的的属性面板上单击属性面板上单击“编辑日期格式编辑日期格式”按钮可以重新修改日期格式。按钮可以重新修改日期格式。二二、网网页页属属性性（标标题题、背背景景、页页边边距距等等）的的设设置置执行下列操作之一，打开“页面属性”对话框：在菜单栏中选择“修改”“页面属性”命令；在“属性”面板中单击“页面属性”按钮；在网页空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”命令。1.在标题栏中增添网页标题在标题栏中增添网页标题，操作步骤如下：(1)在“页面属性”对话框的“分类”选项中选择“标题/编码”，在其选项卡的“标题”文本框中输入“计算机工程系”；(2)点击“确定”按钮。网页标题“计算机工程系”便显示在浏览器的标题栏上，如下图所示。此时，在浏览器窗口、历史记录和书签列表中标识了页面。2.增添网页背景网页背景分为网页背景颜色和背景图像，其操作步骤如下：在“页面属性”对话框的“分类”选项中选择“外观”，在其选项卡中单击“背景颜色”按钮，在“颜色”调色板中用吸管吸取想要的背景颜色即可。在“外观”选项卡中，单击“背景图像”文本框右边的“浏览”按钮，在“选择图像源文件”对话框中选择喜欢的背景图像，然后单击“确定”按钮即可。3.调整网页的边距 在“页面属性”对话框中，“左边界”和“顶部边界”项用于设置IE浏览器的左边距和上边距；“边界宽度”和“边界高度”项用于设置Netscape浏览器的左边距和上边距。如果要去掉网页的边距，则在“外观”选项卡的“左边距”、“右边距”、“上边距”和“下边距”文本框中都输入“0”，如下图所示。一、创建超级链接一、创建超级链接1.创建内部超级链接创建内部超级链接就是在同一个站点内的不同页面之间建立一定的相互关系。被链接的对象不仅可以是网页，还可以是其他文档（如：Microsoft Office 文档）或文件（如图像、声音、视频文件等）。创建内部超级链接，执行下列操作之一：(1)选中“学生专区”，在属性面板中单击“链接”右边的“浏览文件”按钮 （如下图所示），选中相应的文件“exa2-2.htm”即可；2.3 超文本和超图像链接超文本和超图像链接 (2)选中“教师专区”，在属性面板中单击“指向文件”按钮，并直接拖拽鼠标，此时屏幕上会出现一条跟踪直线（如下图所示），移动鼠标到站点管理器中所要链接的目标文件“exa2-3.htm”上，当该文件被一个虚线框包围时松开鼠标；(3)选中“系部专区”，在属性面板上的“链接”文本框中直接输入被链接的文件相对路径及文件名（exa2-5.htm）；(4)选中“办公自动化”，单击右键，从快捷菜单中选择“创建链接”，然后选择一个要链接的文件（exa2-6.htm）。注意：设置过的文本具有超级链接的特征：文字变蓝，并带有下划线。并且在浏览器中当鼠标移到超级链接的地方将会变成手形，还在浏览器下方的状态栏中显示链接路径。2.创建外部超级链接(1)在页面中输入“友情链接”文本，选中其文本，在文本属性面板上的“链接”文本框中直接输入完整的网址（如：http:/）即可。如果想在新的浏览器窗口中打开链接文件，只需在设置了超级链接之后，在属性面板上的“目标”项中进行设置，选择“_blank”即可。(2)要在页面中创建E-mail链接，有两种方法：选中“与我联系”文本，然后在插入面板中单击 按钮或在菜单栏中选择“插入记录”“电子邮件链接”命令，打开“电子邮件链接”对话框，在该对话框的“文本”文本框中已自动填写了被选中的文本“与我联系”，只需在“E-mail”文本框中输入电子邮件地址即可。选中“与我联系”文本，然后在文本属性面板上的“链接”文本框中直接输入“mailto:”后加上电子邮件地址（如：mailto:liF）即可；二、热区和图像二、热区和图像1.热区 图像映射图是指在一张图像上实现多个局部区域指向不同的网页链接，而图像上可点击的区域被称为热区。(1)制作热区：新建一个网页，在网页中插入一个图像；单击图像，此时属性面板上显示的是有关图像的属性。在该面板上有“地图”一项，用它来制作热区，在其文本框中可填写热区的名称，如果不填，则Dreamweaver自动加上一个名字“Map”。绘制热区的工具有：矩形工具、圆形工具和多边形工具三种，根据想要制作的热区形状来选择使用的工具，如下图所示。(2)为热区添加文字说明及制作超级链接热区制作完后，接下来就是为每一个热区添加文字说明及制作超级链接，操作步骤如下：用鼠标选中某一个热区；在热区属性面板上，除了“地图”外，还有“链接”、“替代”及“目标”3项，其用法与普通链接一样。同时，如果不满意所制作的热区，则可以进行修改，主要通过使用 来实现。若要删除热区，先选中热区，然后直接按Del键即可。2.图像(1)制作翻转图像：当鼠标移到“图像”上时，图像就变成另一幅图像；当单击时，便链接到其他的网页文件。操作步骤如下：打开“exa2-1.htm”文件，将其另存为“exa2-3-1.htm”文件；在网页中，删除“学生专区”等所有的栏目文本；要想打开“插入鼠标经过图像”对话框，执行下列操作之一：在菜单栏中选择“插入记录”“图像对象”“鼠标经过图像”命令；在插入面板上的“图像”列表中选择“鼠标经过图像”选项，打开“插入鼠标经过图像”对话框，如图2-33所示；在对话框中，单击“原始图像”右边的“浏览”按钮，选取第一次加载该页面时要显示的图像；然后，点击“鼠标经过图像”右边的“浏览”按钮，选取当鼠标经过原始图像时要显示的图像；点击“在按下时，前往的URL”右边的“浏览”按钮，选取点击鼠标经过图像时将打开的网页文件。保存网页，并且预览网页效果。(2)制作导航条导航条由一排纵向或横向连接在一起的元件组成，每个元件由一组最多有四种状态的图像构成，在不同的情况下元件显现出不同的图像。并且一个网页里只能有一个导航条。其操作步骤如下：执行下列方法之一，打开“插入导航条”对话框：在菜单中选择“插入记录”“图像对象”“导航条”命令；在插入面板上的“图像”列表中选择“导航条”选项 。从“插入导航条”对话框中看到一个元件最多有下列4种状态的图像：状态图像：又称为初始图像，指鼠标未移到元件上时所显示的图像。鼠标经过图像：鼠标移到元件上时所显示的图像。按下图像：单击元件后所显示的图像，表明所链接的网页文件已访问过。按下时鼠标经过图像：鼠标移到被点击过的元件上时所显示的图像。插入导航条对话框 设置第一个元件的各个选项；单击 按钮，添加其他元件，再重复、步骤进行相应的设置。单击“确定”按钮，完成导航条的制作。Flash是一种用于制作和编辑动画和电影的软件，用它可以制作出一种扩展名为.swf的动画文件，这种文件可以插入HTML，也可以单独生成网页。一、一、FlashFlash的几个重要概念的几个重要概念 1Flash动画的格式在掌握使用Flash动画之前，有必要先来了解一下Flash动画的几种格式。2.4 网页制作中的网页制作中的Flash动画动画 (1)Flash源文件格式：Flash源文件格式的扩展名为.fla，这种类型的文件只能在Flash应用程序中被打开，在Dreamweaver或浏览器中都是无法打开的。用户可以在Flash应用程序中打开该文件，然后导出扩展名为.swf或.swt的文件，以便在浏览器中使用。(2)Flash电影文件格式：Flash电影文件格式的扩展名为.swf。它是Flash源文件的压缩版本，已经为通过网络查看而进行了优化。因此，这种类型的文件可以在浏览器中播放，也可以在Dreamweaver中预览，但是却无法在Flash应用程序中进行编辑。在Dreamweaver中允许用户直接插入Flash动画对象，该对象的扩展名就是.swf。2矢量图和位图矢量图是以一组指令的形式存在的，这些指令用来描述一幅图像中所包含颜色和位置属性的直线或曲线公式，因而矢量图形的文件体积十分小。对于矢量图形来说，其形状是由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区域的颜色确定，与曲线内单独的点无关。位图的显示方式是用像素来表示图像的形状和色彩，有多大的图像就要用多大的像素来填充。因此，位图的文件所占的体积比较大。常用的位图文件格式为bmp、gif、jpg等。3舞台和工作区舞台（Stage）是绘制图形、编辑图形、图像的矩形区域，也是创建电影动画的区域。用户在制作动画的过程中，放置在舞台中的内容将体现在最终的动画效果中。其默认颜色是白色。工作区（Work Area）则环绕于舞台的四周，其默认颜色为灰色。它在实际动画制作过程中非常有用，制作者可以先将暂不参与动画内容放置在工作区内，这并不影响舞台内动画内容的播放。当需要播放工作区内的动画时，只要将其移动到舞台中即可。4帧和时间线“帧”是组成动画的最基本单位，即图像在某一时间点上的定格。帧又分为关键帧（Keyframe）和普通帧（Frame）两种。(1)关键帧：在Flash中，一般的动画都是依靠关键帧来实现的。用户只需给出一个对象的几个关键动作，生成关键帧，系统就会根据需要在各个关键帧之间自动生成中间帧，来实现关键帧之间变化的动画。(2)普通帧：除了关键帧外，所有出现在时间轴中的帧都是普通帧。在Flash中，普通帧一般用来代表中间的画面，也就是在两个关键帧之间的帧。这些帧用来表示渐变的过程，并且由于是程序自动生成，所以无法编辑。时间线（Timeline）是Flash中最重要的工具之一。用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。5符号和实例 符号（Symbol）是指一种可以重复使用的图形、动画、按钮或声音资源，存放在符号库中。使用的时候将符号从符号库中拖拽到舞台工作区中，就得到了符号的一个实例（Instance）。可以把符号想象成一个源文件，它的实例是它在不同地方的复制。二、运动和形状渐变动画二、运动和形状渐变动画 1 1运动渐变动画运动渐变动画 运动渐变动画（Motion Tweening）可以使对象产生移动、旋转、缩放、变化速度等动画效果。它的作用对象是实例、群组对象、文字对象、位图对象等，不能作用于矢量图形对象，但可以将矢量图形转换成符号的实例。下面，制作内部填充部分播放电影效果的文字，使文字的填充部分产生不断的效果。实现步骤如下：(1)选择菜单“文件”|“新建”，创建一个新文档。Flash文档的属性面板(2)在属性面板（如上图所示）上选择“大小”按钮，弹出文档属性设置对话框，设置工作区宽度为320px，高度为90px，设置完毕，点击OK按钮。文档属性对话框(3)点击工具栏中“文本工具”按钮 ，将文本属性面板中字体类型设置成“隶书”，字体大小为30，粗体显示，如下图所示。然后在工作区域中单击鼠标，在出现的黑框中输入文字“计算机工程系”。文本属性面板(4)选择工具栏中的 箭头工具，将文字选中并把它移动到工作区中间，如下图所示。文本已移动到工作区中间(5)单击等时线窗口下方的 按钮，增加一个新图层Layer2，如下图所示。增加图像图层(6)选择菜单“文件”|“导入”|“导入到舞台”，弹出导入文件对话框，从对话框中选择用于填充文字的图片名称，然后单击打开按钮，在工作区中即调入所选图片。(7)选择菜单“修改”|“转换为元件”，在弹出的对话框（下图）中输入名称“计算机工程系”，点击确定。这时，将发现这张图已经转化成一个元件计算机工程系了。(8)用鼠标左键按住图层1并把它拖到图层2上方放开，这时将看到图层1已经位于图层2上方了。(9)选中图层1的第30帧，点击鼠标右键，在弹出的菜单中选择“插入帧”项。将“exa2-1.jpg”转换为图形 (10)选择工具栏中的箭头工具 ，把元件“计算机工程系”拖动到元件的左端，如左下图所示。然后选中该层的第30帧，用鼠标右键单击该帧，在弹出的菜单中选择“插入关键帧”，即在第30帧处插入一个关键帧，把该帧的图像拖动到元件的右端，如图右下所示。在第1帧时设置图像的位置 在第30帧时设置图像的位置(11)选中图层2的第一帧，点击鼠标右键，在弹出的菜单中选择“创建补空动画”。这表示元件“计算机工程系”将从第1帧的位置移动到第30帧的位置。(12)用鼠标右键单击Layer1层，在弹出的菜单中选择“遮罩层”项，这时图层1将变成蒙板层，并对图层2产生蒙板作用，如下图所示。时间帧及图层的设置(13)选择菜单“控制”|“播放”，打开播放器窗口，可以看到文字“计算机工程系”产生循环播放电影的效果。2 2形状渐变动画（略）形状渐变动画（略）形状渐变动画就是由一种对象逐渐变为另外一种对象，可以使对象完成变形、移动、缩放及色彩变化等动画效果。它的作用对象只能是矢量图形。除非把其他对象打碎成矢量图形。利用形状渐变动画实现从一个图形到另一个图形之间从色彩到形状的过渡变化。三、制作层动画（略）三、制作层动画（略）图层的作用不仅只是在绘制图形时可以不影响其他对象，而且通过图层，可以创建出一些令人惊奇的动画效果。例如：可以使用遮罩图层来创建如电影文字、图像文字、探照灯、淡入淡出或颜色转变的效果，也可以能过在运动导向图层中创建一些不规则曲线，使符号沿此曲线而产生运动。一、一、表格表格 在Dreamweaver中对表格的操作方法与Word中非常类似，只是在Dreamweaver中，表格还有更重要的作用页面布局。使用表格可以进行页面的设计和排版，控制文本和图像在页面上的位置，另外使用表格能使页面看起来更加直观和有条理。2.5 利用表格和框架制作网页利用表格和框架制作网页 设计一个页面布局简单示意图:Web 页可用两个表格精确地确定文本和图象的位置。一个表格嵌套在另一个表格中一个表格嵌套在另一个表格中外部表格：定义页面的整体结构和布局。内部表格：描述正文文本与其他内容的 排列方式。创建基于表格的网页可以依次按照下述步骤进行：1在页面中创建表格操作步骤如下：(1)把光标定位在页面的左上角（起始处）。(2)执行以下操作之一，打开“插入表格”对话框，如下图所示。在菜单栏中选择“插入记录”|“表格”命令。在属性面板上单击 按钮。2在表格中插入页面元素 利用前面所学知识，直接在相应的表格中输入内容；单元格中的页面元素可以文本、图像甚至表格，还可以给文本和图像添加超级链接。在单元格中插入表格称为表格嵌套。3设置表格属性 无论对表格操作还是对单元格操作，都必须先选中再操作才可生效。这里先来认识单元格属性面板。当光标定位在单元格中或是选中单元格时，属性面板即为单元格的属性面板，如图2-48所示。单元格属性面板的上半部是文本的属性面板，可以用来设置单元格中文本的字体、字号、颜色等属性。单元格属性面板的下半部是高级属性设置选项:（1）合并单元格：当在表格中选择了个以上的单元格时，该按钮才起作用。（2）拆分单元格：当在表格中选择了个以上的单元格时，该按钮才起作用。单位格属性面板单位格属性面板:（3）水平：在该下拉列表中选择单元格内容的水平对齐方式，如左下图所示。（4）垂直：在该下拉列表中选择单元格内容的垂直对齐方式，如右下图所示。（5）高：单元格的高度。（6）宽：单元格的宽度。（7）不换行：不勾选，文本将自动换行；勾选，则当文本的长度超过单元格的 宽度时，文本将继续向前，单元格的 宽度会随之调整。（8）标题：单元格中的文本会变粗并向中间移动。（9）背景（上）：单元格的背景图像。（10）背景（下）：单元格的背景颜色。（11）边框：单元格的边框线颜色。表格属性面板上各选项的含义：当选中表格时，属性面板为表格的属性面板 表格属性面板的上半部是最基本的表格属性，大部分与插入表格时的设置内容相同，只是多了设置表格的命名、高度和表格的对齐方式。（1）表格Id：给表格命名。（2）行：设置表格的行数。（3）列：设置表格的列数。（4）宽：设置表格的宽度。（5）高：设置表格的高度。（6）填充：设置单元格空白。（7）间距：设置单元格间距。（8）对齐：设置对齐方式。（9）边框：设置表格的边框线。表格属性的下半部是高级属性：（10）清除各行的高度。（11）清除各列的宽度。（12）将当前表格的宽度尺寸从百分比转换到相应的像素值。（13）将当前表格的宽度尺寸从像素值转换到相应的百分比。（14）背景颜色：背景颜色（15）背景图像：背景图像（16）边框颜色：表格边框的颜色 二、框架二、框架 框架结构也称为多窗口页面(Frames)，窗口也可以称为帧（Frame），是设计网页时非常有用的工具。它可以把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，从而使用户能够一次浏览更多的内容。一个典型的框架结构页面 浏览网页时，单击左边的某个链接，则对应的链接内容