Web编程实用技术教程(第二版)第2章静态网页的制作.ppt

《Web编程实用技术教程(第二版)第2章静态网页的制作.ppt》由会员分享，可在线阅读，更多相关《Web编程实用技术教程(第二版)第2章静态网页的制作.ppt（98页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第2章章 静态网页的制作静态网页的制作 WebWeb编程实用技术教程编程实用技术教程学习目标了解网页制作工具（Dreamweaver、Flash）的简单使用方法，用之制作静态网页；学会将Dreamweaver作为开发Web程序的平台；掌握超级链接的创建；学会利用表格和框架进行网页布局；学会使用HTML和XML语言编制网页。目 录 2.1 2.1 常用的网页制作工具常用的网页制作工具 2.2 2.2 制作第一个简单网页制作第一个简单网页 2.3 2.3 超文本和超图像链接超文本和超图像链接 2.4 2.4 网页制作中的网页制作中的FlashFlash动画动画 2.5 2.5 利用表格和框架制作

2、网页利用表格和框架制作网页 2.6 2.6 HTMLHTML与与XMLXML标识语言标识语言 Dreamweaver Dreamweaver是一套专业化的网页创作工具，它采用是一套专业化的网页创作工具，它采用“所见所见即所得即所得”的可视化编辑方式，能够快速高效地创建各种具有的可视化编辑方式，能够快速高效地创建各种具有专业水平的网页，不需要编写任何代码。如果需要在代码界专业水平的网页，不需要编写任何代码。如果需要在代码界面进行工作，只需进入面进行工作，只需进入HTMLHTML代码窗口或源代码检视器中，就代码窗口或源代码检视器中，就能同步看到能同步看到DreamweaverDreamweaver

3、生成的源代码。它支持最新的生成的源代码。它支持最新的DHTMLDHTML、CSSCSS标准及分层技术，具有极好的兼容性，适用于标准及分层技术，具有极好的兼容性，适用于各种平台和各种浏览器。各种平台和各种浏览器。2.1 2.1 常用的网页制作工具常用的网页制作工具 Dreamweaver Dreamweaver 1.1.启动启动DreamweaverDreamweaver程序程序 2.在“开始”菜单的“所有程序”中找到“Adobe Dreamweaver CS3”，并单击该命令。Dreamweaver将立即启动，在“文档”窗口内将打开一个空白文档，如下图所示。2.2.DreamweaverDre

4、amweaver的用户界面的用户界面 Dreamweaver由页面编辑器和站点管理器两大部分组成。下图所示的是Dreamweaver的页面编辑器，包括页面编辑窗口和各种浮动面板。(1)页面编辑窗口：页面编辑窗口由标题栏、菜单栏、工具栏、文档编辑区和状态栏等基本部分组成，各部分的功能如下：标题栏：显示当前页面的标题，括号中显示对应文档的路径和文件名。菜单栏：包含所有的操作命令。Dreamweaver共有10个系统菜单，分别为文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助。单击系统菜单，打开对应的下拉菜单，可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上都有菜单操作命令与之相

5、对应。工具栏：放置常用工具。如：左边第一个按钮用于切换到HTML代码窗口，第二个按钮切换到HTML代码视图和页面设计视图双状态同步窗口，第三个按钮则切换到页面编辑窗口。文档编辑区：编辑网页的区域。Dreamweaver启动后，自动创建一个空白的网页文档等待编辑。状态栏：显示当前网页的有关信息。在状态栏中从左到右依次为标签选择器、基本工具、窗口设置框和下载指示器。标签选择器：编辑网页时，利用标签选择器可以显示和修改HTML标签，单击标签按钮可以选择网页中相应的编辑对象。基本工具：包括选取工具、手形工具、缩放工具和选择缩放比例列表框。窗口设置框：设置显示窗口的大小，单击设置区右侧的小按钮，在打开的

6、菜单中，可以根据显示器屏幕的分辨率选择不同的显示尺寸。下载指示器：显示当前网页的文件量大小，以及网页被下载所需要的时间，单位是*k/*秒。(2)浮动面板：页面编辑器中有2个常用的浮动面板：插入面板、属性面板，以及放置其他面板的浮动面板集。浮动面板是Dreamweaver的一大特色。利用浮动面板对网页进行属性设计，在页面编辑窗口中可以直接看到操作结果，真正实现了“所见即所得”的编辑功能。浮动面板集也是Dreamweaver的一大特色。设计者可以按自已的需要任意组合或拆分浮动面板集中的各种面板，也可以用鼠标拖拽浮动面板的标题栏来移动浮动面板，用鼠标拖拽浮动面板的边框来改变浮动面板的大小。(3)站点

7、管理器：站点管理器主要用于管理站点内的文件和目录，可对站点内的文件进行改名、编辑和删除等基本操作，并可检验对象的链接情况，自动修改其他页面指向这个对象的链接。利用模板和库，可以使站点内的部分页面应用相同的模板和库，从而使多个页面具有相同的风格，并且可以快速进行统一更新。管理器还自带FTP功能，能完成站点内文件的上传和下载，进行站点的发布和远程管理。制作一个浏览效果如下图所示的简单网页。2.2 2.2 制作第一个简单网页制作第一个简单网页 实现步骤如下：首先启动Dreamweaver，打开前面所建立的本地站点，接着在页面中插入各种基本的网页元素。一、基本网页元素（文字、图像、水平线、日期和时间）

8、的插入一、基本网页元素（文字、图像、水平线、日期和时间）的插入1.1.在页面中添加和处理文字在页面中添加和处理文字(1(1)在页面中输入文字，操作步骤如下：在页面编辑区中，按照页面的设计内容输入文字，各段文本的末尾按回车键，如下图所示；按Ctrl+S键保存网页。第一次创建的网页可以作为首页index.htmindex.htm文件保存，随后该首页将得到进一步的扩充和完善。注意：书中所提到的“保存网页”都是指将网页保存到本地站点下。(2)将第一行“计算机工程系”作为网页的标题文字，操作步骤如下：选中“计算机工程系”，打开属性面板，如下图所示；在“格式”下拉选项中选择最大标题“标题1”以设置标题样式

9、；单击 按钮将字体变粗，单击按钮将文字居中显示。(3)接着，设置中文字体。在属性面板上单击字体按钮 ，打开字体下拉列表，选择想设置的字体。如果字体下拉列表中没有想设置的字体，如何添加中文字体呢？操作如下：打开“编辑字体列表”对话框，执行下列操作之一：在属性面板上单击字体按钮 ，打开字体下拉列表，选择“编辑字体列表”选项，如下图所示；在菜单栏中选择“文本”“字体”“编辑字体列表”命令。在“编辑字体列表”对话框（如下图所示）中进行如下操作：在“编辑字体列表”对话框中进行如下操作：先在“字体列表”框中选定“在以下列表中添加字体”项；在“可用字体”框中选择一种字体（如隶书）；单击方向按钮 ，选中的字体

10、添加到“选择的字体”框中，同时也出现在“字体列表”框中。如果还要加入第二种字体，则单击按钮 ，再重复上面的3步即可。如果要删除某种字体，则在“字体列表”框中选定该字体，单击按钮 。还可以单击按钮 ，将刚添加的字体上移，便于以后的使用。单击“确定”按钮。此时，属性面板上的字体下拉列表中已经添加了“隶书”等字体。(4)将第一段文本的颜色设置为红色，将第三段文本的颜色设置为十六进制代码#3333CC蓝色，将后面文本的颜色设置为十六进制代码#FF00FF的淡紫色。操作步骤如下：首先选中第一段文本；单击属性面板上的字体颜色按钮，在“颜色”调色板中用吸管吸取红色即可，如下图所示。在网页中，每种颜色都可用一

11、个十六进制代码表示。如果知道颜色的代码，可直接在“颜色”文本框中输入该颜色的十六进制代码。用相同的方法设置下面文本的颜色。(5)将最后的5行文本组成一个项目列表，操作步骤如下：首先选中最后5行文本；打开属性面板，单击按钮 ，则最后5行文字前便增加了圆点式的项目符号“”，如下图所示。(6)如果要为选中的段落前加上1、2、3式的项目编号，则单击 按钮即可。同样，项目符号的样式是可以更改的，单击属性面板上的“列表项目”按钮进行相应的设置。(7)同时，还可以让“Welcome”文本从左到右动起来，操作步骤如下：首先选中“Welcome”文本；在属性面板上单击按钮 ，打开快速标签编辑器；在光标处直接输入

12、“marquee”，或稍等一会，在出现的下拉列表中选择“marquee”选项，然后按回车键。此时，状态栏上已多了一项加粗显示的。按F12键预览网页效果。2.2.在页面中插入和处理图像在页面中插入和处理图像(1)将图像插入到页面中。操作步骤如下：在“学生专区”项目符号“”前按回车键，以确定插入图像的位置在第三段和第四段之间；单击插入面板中的 按钮的子菜单“图像”（或者在菜单栏中选择“插入记录”“图像”命令），弹出“选择图像源文件”对话框，如下图所示；在查找范围框中选定图像文件所在的文件夹及文件，单击“确定”按钮。弹出“图像标签辅助功能属性”对话框，填写该图像的“替换文本”及“详细说明”内容，单击

13、“确定”按钮。经过上面的操作，图像便插入到了当前的页面中。按F12预览网页，可以看到当鼠标停留在图像上时就会出现提示文字。这样做的好处就是当浏览网页时，即使图像不能完全显示出来，提示文字也能让浏览者了解图像的内容或主题。但是，此时的图像并没有按照页面设计的要求放置，因此需要调整图像的对齐方式、周边间距及图像的大小等。(2)调整图像的对齐方式。关于图像，在属性面板上有两种对齐方式：图像在页面中的对齐方式及图像和周围元素的对齐方式。调整图像在页面中的对齐方式分别单击 3个按钮，可以看到图像分别位于页面的左边、中间和右边。再次单击相应对齐按钮，图像回到原来的位置上。此时单击左对齐按钮。调整图像和周围

14、元素的对齐方式单击属性面板上的“对齐”按钮，在下拉列表选项中选择“左对齐”。(3)调整图像的周边间距。操作步骤如下：选中图像，打开属性面板；在“垂直边距”文本框中输入10，设置垂直间距为10像素；在“水平边距”文本框中输入60，设置水平间距为60像素，按回车键。可以看到图像与上、下、左、右方的文字间隔都拉大了，如下图所示。如果删除输入框中的数值，则图像又回到原来的位置。(4)调整图像的大小。方法有两种：直接拖拽图像上的控点；在属性面板的“高度”和“宽度”文本框中输入相应数值（单位是像素）。如果不满意调整图像的大小，则可以单击属性面板上的“高度”和“宽度”标志，使图像还原为原始大小。3.3.插入

15、水平线插入水平线(1)在页面中插入水平线。操作步骤如下：在“Welcome”文本后单击鼠标，以确定插入水平线的位置；在菜单栏中选择“插入记录”|“HTML”“水平线”命令，则Dreamweaver默认的水平线便插入到“Welcome”和第三段文字之间，如下图所示。(2)修改水平线，将水平线居中对齐，且其宽度为浏览器窗口的80%，操作步骤如下：选中上面所插入的水平线；在水平线属性面板的“宽度”文本框中输入“80”，并选择其单位为“%”，如下图所示；在“对齐”下拉列表中选择“居中”对齐方式。注意：在水平线的属性面板上，其宽度的单位分为两种：像素和%（百分比）。80%和80像素的区别在于：无论浏览器

16、窗口怎么缩放，宽度设置为80像素的水平线都是80个像素点长；而宽度设置为80%的水平线将会自动调整长度，其宽度总是占浏览器窗口宽度的80%。要插入垂直线，则选中水平线，将其高度设置为垂直线的高度（如：80像素），将宽度设置为垂直线的宽度（如：2像素）即可。(3)Dreamweaver默认的水平线颜色为灰色，要将水平线的颜色设置为黄色，操作步骤如下：选中上面所插入的水平线；单击水平线属性面板的 按钮，打开快速标签编辑器；在标签中插入属性color=“#FFFF00”或color=“yellow”；按F12预览，便可看到水平线是黄色。.插入日期和时间在页面中插入日期和时间，操作步骤如下：(1)确定

17、所插入的日期和时间的位置；(2)单击插入面板的日期按钮 ，者在菜单栏中选择“插入记录”“日期”命令，打开“插入日期”对话框，如下图所示；(3)(3)在在“插插入入日日期期”对对话话框框中中选选择择星星期期、日日期期和和时时间间格格式式，选选中中“储储存存时时自自动动更更新新”项项，然然后后单单击击“确确定定”按按钮钮。在在日日期期的的属性面板上单击属性面板上单击“编辑日期格式编辑日期格式”按钮可以重新修改日期格式。按钮可以重新修改日期格式。二、网页属性（标题、背景、页边距等）的设置二、网页属性（标题、背景、页边距等）的设置执行下列操作之一，打开“页面属性”对话框：在菜单栏中选择“修改”“页面属

18、性”命令；在“属性”面板中单击“页面属性”按钮；在网页空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”命令。1.在标题栏中增添网页标题在标题栏中增添网页标题，操作步骤如下：(1)在“页面属性”对话框的“分类”选项中选择“标题/编码”，在其选项卡的“标题”文本框中输入“计算机工程系”；(2)点击“确定”按钮。网页标题“计算机工程系”便显示在浏览器的标题栏上，如下图所示。此时，在浏览器窗口、历史记录和书签列表中标识了页面。2.增添网页背景网页背景分为网页背景颜色和背景图像，其操作步骤如下：在“页面属性”对话框的“分类”选项中选择“外观”，在其选项卡中单击“背景颜色”按钮，在“颜色”调色板中用

19、吸管吸取想要的背景颜色即可。在“外观”选项卡中，单击“背景图像”文本框右边的“浏览”按钮，在“选择图像源文件”对话框中选择喜欢的背景图像，然后单击“确定”按钮即可。3.调整网页的边距 在“页面属性”对话框中，“左边界”和“顶部边界”项用于设置IE浏览器的左边距和上边距；“边界宽度”和“边界高度”项用于设置Netscape浏览器的左边距和上边距。如果要去掉网页的边距，则在“外观”选项卡的“左边距”、“右边距”、“上边距”和“下边距”文本框中都输入“0”，如下图所示。一、创建超级链接一、创建超级链接1.创建内部超级链接创建内部超级链接就是在同一个站点内的不同页面之间建立一定的相互关系。被链接的对象

20、不仅可以是网页，还可以是其他文档（如：Microsoft Office 文档）或文件（如图像、声音、视频文件等）。创建内部超级链接，执行下列操作之一：(1)选中“学生专区”，在属性面板中单击“链接”右边的“浏览文件”按钮 （如下图所示），选中相应的文件“exa2-2.htm”即可；2.3 2.3 超文本和超图像链接超文本和超图像链接 (2)选中“教师专区”，在属性面板中单击“指向文件”按钮，并直接拖拽鼠标，此时屏幕上会出现一条跟踪直线（如下图所示），移动鼠标到站点管理器中所要链接的目标文件“exa2-3.htm”上，当该文件被一个虚线框包围时松开鼠标；(3)选中“系部专区”，在属性面板上的“链

21、接”文本框中直接输入被链接的文件相对路径及文件名（exa2-5.htm）；(4)选中“办公自动化”，单击右键，从快捷菜单中选择“创建链接”，然后选择一个要链接的文件（exa2-6.htm）。注意：设置过的文本具有超级链接的特征：文字变蓝，并带有下划线。并且在浏览器中当鼠标移到超级链接的地方将会变成手形，还在浏览器下方的状态栏中显示链接路径。2.创建外部超级链接(1)在页面中输入“友情链接”文本，选中其文本，在文本属性面板上的“链接”文本框中直接输入完整的网址（如：http:/）即可。如果想在新的浏览器窗口中打开链接文件，只需在设置了超级链接之后，在属性面板上的“目标”项中进行设置，选择“_bl

22、ank”即可。(2)要在页面中创建E-mail链接，有两种方法：选中“与我联系”文本，然后在插入面板中单击 按钮或在菜单栏中选择“插入记录”“电子邮件链接”命令，打开“电子邮件链接”对话框，在该对话框的“文本”文本框中已自动填写了被选中的文本“与我联系”，只需在“E-mail”文本框中输入电子邮件地址即可。选中“与我联系”文本，然后在文本属性面板上的“链接”文本框中直接输入“mailto:”后加上电子邮件地址（如：mailto:liF）即可；二、热区和图像二、热区和图像1.热区 图像映射图是指在一张图像上实现多个局部区域指向不同的网页链接，而图像上可点击的区域被称为热区。(1)制作热区：(2)

23、新建一个网页，在网页中插入一个图像；(3)单击图像，此时属性面板上显示的是有关图像的属性。在该面板上有“地图”一项，用它来制作热区，在其文本框中可填写热区的名称，如果不填，则Dreamweaver自动加上一个名字“Map”。绘制热区的工具有：矩形工具、圆形工具和多边形工具三种，根据想要制作的热区形状来选择使用的工具，如下图所示。(2)为热区添加文字说明及制作超级链接热区制作完后，接下来就是为每一个热区添加文字说明及制作超级链接，操作步骤如下：用鼠标选中某一个热区；在热区属性面板上，除了“地图”外，还有“链接”、“替代”及“目标”3项，其用法与普通链接一样。同时，如果不满意所制作的热区，则可以进

24、行修改，主要通过使用 来实现。若要删除热区，先选中热区，然后直接按Del键即可。2.图像(1)制作翻转图像：当鼠标移到“图像”上时，图像就变成另一幅图像；当单击时，便链接到其他的网页文件。操作步骤如下：打开“exa2-1.htm”文件，将其另存为“exa2-3-1.htm”文件；在网页中，删除“学生专区”等所有的栏目文本；要想打开“插入鼠标经过图像”对话框，执行下列操作之一：在菜单栏中选择“插入记录”“图像对象”“鼠标经过图像”命令；在插入面板上的“图像”列表中选择“鼠标经过图像”选项，打开“插入鼠标经过图像”对话框，如图2-33所示；在对话框中，单击“原始图像”右边的“浏览”按钮，选取第一次

25、加载该页面时要显示的图像；然后，点击“鼠标经过图像”右边的“浏览”按钮，选取当鼠标经过原始图像时要显示的图像；点击“在按下时，前往的URL”右边的“浏览”按钮，选取点击鼠标经过图像时将打开的网页文件。保存网页，并且预览网页效果。(2)制作导航条导航条由一排纵向或横向连接在一起的元件组成，每个元件由一组最多有四种状态的图像构成，在不同的情况下元件显现出不同的图像。并且一个网页里只能有一个导航条。其操作步骤如下：执行下列方法之一，打开“插入导航条”对话框：在菜单中选择“插入记录”“图像对象”“导航条”命令；在插入面板上的“图像”列表中选择“导航条”选项 。从“插入导航条”对话框中看到一个元件最多有

26、下列4种状态的图像：状态图像：又称为初始图像，指鼠标未移到元件上时所显示的图像。鼠标经过图像：鼠标移到元件上时所显示的图像。按下图像：单击元件后所显示的图像，表明所链接的网页文件已访问过。按下时鼠标经过图像：鼠标移到被点击过的元件上时所显示的图像。插入导航条对话框 设置第一个元件的各个选项；单击 按钮，添加其他元件，再重复、步骤进行相应的设置。单击“确定”按钮，完成导航条的制作。Flash是一种用于制作和编辑动画和电影的软件，用它可以制作出一种扩展名为.swf的动画文件，这种文件可以插入HTML，也可以单独生成网页。一、一、FlashFlash的几个重要概念的几个重要概念 1Flash动画的格

27、式在掌握使用Flash动画之前，有必要先来了解一下Flash动画的几种格式。2.4 2.4 网页制作中的网页制作中的FlashFlash动画动画 (1)Flash源文件格式：Flash源文件格式的扩展名为.fla，这种类型的文件只能在Flash应用程序中被打开，在Dreamweaver或浏览器中都是无法打开的。用户可以在Flash应用程序中打开该文件，然后导出扩展名为.swf或.swt的文件，以便在浏览器中使用。(2)Flash电影文件格式：Flash电影文件格式的扩展名为.swf。它是Flash源文件的压缩版本，已经为通过网络查看而进行了优化。因此，这种类型的文件可以在浏览器中播放，也可以在

28、Dreamweaver中预览，但是却无法在Flash应用程序中进行编辑。在Dreamweaver中允许用户直接插入Flash动画对象，该对象的扩展名就是.swf。2矢量图和位图矢量图是以一组指令的形式存在的，这些指令用来描述一幅图像中所包含颜色和位置属性的直线或曲线公式，因而矢量图形的文件体积十分小。对于矢量图形来说，其形状是由曲线通过的点来描述的，而它的颜色则由曲线的颜色和曲线所包围区域的颜色确定，与曲线内单独的点无关。位图的显示方式是用像素来表示图像的形状和色彩，有多大的图像就要用多大的像素来填充。因此，位图的文件所占的体积比较大。常用的位图文件格式为bmp、gif、jpg等。3舞台和工作

29、区舞台（Stage）是绘制图形、编辑图形、图像的矩形区域，也是创建电影动画的区域。用户在制作动画的过程中，放置在舞台中的内容将体现在最终的动画效果中。其默认颜色是白色。工作区（Work Area）则环绕于舞台的四周，其默认颜色为灰色。它在实际动画制作过程中非常有用，制作者可以先将暂不参与动画内容放置在工作区内，这并不影响舞台内动画内容的播放。当需要播放工作区内的动画时，只要将其移动到舞台中即可。4帧和时间线“帧”是组成动画的最基本单位，即图像在某一时间点上的定格。帧又分为关键帧（Keyframe）和普通帧（Frame）两种。(1)关键帧：在Flash中，一般的动画都是依靠关键帧来实现的。用户只

30、需给出一个对象的几个关键动作，生成关键帧，系统就会根据需要在各个关键帧之间自动生成中间帧，来实现关键帧之间变化的动画。(2)普通帧：除了关键帧外，所有出现在时间轴中的帧都是普通帧。在Flash中，普通帧一般用来代表中间的画面，也就是在两个关键帧之间的帧。这些帧用来表示渐变的过程，并且由于是程序自动生成，所以无法编辑。时间线（Timeline）是Flash中最重要的工具之一。用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。5符号和实例 符号（Symbol）是指一种可以重复使用的图形、动画、按钮或声音资源，存放在符号库中。使用的时候将符号从

31、符号库中拖拽到舞台工作区中，就得到了符号的一个实例（Instance）。可以把符号想象成一个源文件，它的实例是它在不同地方的复制。二、运动和形状渐变动画二、运动和形状渐变动画 1 1运动渐变动画运动渐变动画 运动渐变动画（Motion Tweening）可以使对象产生移动、旋转、缩放、变化速度等动画效果。它的作用对象是实例、群组对象、文字对象、位图对象等，不能作用于矢量图形对象，但可以将矢量图形转换成符号的实例。下面，制作内部填充部分播放电影效果的文字，使文字的填充部分产生不断的效果。实现步骤如下：(1)选择菜单“文件”|“新建”，创建一个新文档。Flash文档的属性面板(2)在属性面板（如上

32、图所示）上选择“大小”按钮，弹出文档属性设置对话框，设置工作区宽度为320px，高度为90px，设置完毕，点击OK按钮。文档属性对话框(3)点击工具栏中“文本工具”按钮 ，将文本属性面板中字体类型设置成“隶书”，字体大小为30，粗体显示，如下图所示。然后在工作区域中单击鼠标，在出现的黑框中输入文字“计算机工程系”。文本属性面板(4)选择工具栏中的 箭头工具，将文字选中并把它移动到工作区中间，如下图所示。文本已移动到工作区中间(5)单击等时线窗口下方的 按钮，增加一个新图层Layer2，如下图所示。增加图像图层(6)选择菜单“文件”|“导入”|“导入到舞台”，弹出导入文件对话框，从对话框中选择用

33、于填充文字的图片名称，然后单击打开按钮，在工作区中即调入所选图片。(7)选择菜单“修改”|“转换为元件”，在弹出的对话框（下图）中输入名称“计算机工程系”，点击确定。这时，将发现这张图已经转化成一个元件计算机工程系了。(8)用鼠标左键按住图层1并把它拖到图层2上方放开，这时将看到图层1已经位于图层2上方了。(9)选中图层1的第30帧，点击鼠标右键，在弹出的菜单中选择“插入帧”项。将“exa2-1.jpg”转换为图形 (10)选择工具栏中的箭头工具 ，把元件“计算机工程系”拖动到元件的左端，如左下图所示。然后选中该层的第30帧，用鼠标右键单击该帧，在弹出的菜单中选择“插入关键帧”，即在第30帧处

34、插入一个关键帧，把该帧的图像拖动到元件的右端，如图右下所示。在第1帧时设置图像的位置 在第30帧时设置图像的位置(11)选中图层2的第一帧，点击鼠标右键，在弹出的菜单中选择“创建补空动画”。这表示元件“计算机工程系”将从第1帧的位置移动到第30帧的位置。(12)用鼠标右键单击Layer1层，在弹出的菜单中选择“遮罩层”项，这时图层1将变成蒙板层，并对图层2产生蒙板作用，如下图所示。时间帧及图层的设置(13)选择菜单“控制”|“播放”，打开播放器窗口，可以看到文字“计算机工程系”产生循环播放电影的效果。2 2形状渐变动画（略）形状渐变动画（略）形状渐变动画就是由一种对象逐渐变为另外一种对象，可以

35、使对象完成变形、移动、缩放及色彩变化等动画效果。它的作用对象只能是矢量图形。除非把其他对象打碎成矢量图形。利用形状渐变动画实现从一个图形到另一个图形之间从色彩到形状的过渡变化。三、制作层动画（略）三、制作层动画（略）图层的作用不仅只是在绘制图形时可以不影响其他对象，而且通过图层，可以创建出一些令人惊奇的动画效果。例如：可以使用遮罩图层来创建如电影文字、图像文字、探照灯、淡入淡出或颜色转变的效果，也可以能过在运动导向图层中创建一些不规则曲线，使符号沿此曲线而产生运动。一、一、表格表格 在Dreamweaver中对表格的操作方法与Word中非常类似，只是在Dreamweaver中，表格还有更重要的

36、作用页面布局。使用表格可以进行页面的设计和排版，控制文本和图像在页面上的位置，另外使用表格能使页面看起来更加直观和有条理。2.5 2.5 利用表格和框架制作网页利用表格和框架制作网页 设计一个页面布局简单示意图:Web 页可用两个表格精确地确定文本和图象的位置。一个表格嵌套在另一个表格中一个表格嵌套在另一个表格中外部表格：定义页面的整体结构和布局。内部表格：描述正文文本与其他内容的 排列方式。创建基于表格的网页可以依次按照下述步骤进行：1在页面中创建表格操作步骤如下：(1)把光标定位在页面的左上角（起始处）。(2)执行以下操作之一，打开“插入表格”对话框，如下图所示。在菜单栏中选择“插入记录”

37、|“表格”命令。在属性面板上单击 按钮。2在表格中插入页面元素 利用前面所学知识，直接在相应的表格中输入内容；单元格中的页面元素可以文本、图像甚至表格，还可以给文本和图像添加超级链接。在单元格中插入表格称为表格嵌套。3设置表格属性 无论对表格操作还是对单元格操作，都必须先选中再操作才可生效。这里先来认识单元格属性面板。当光标定位在单元格中或是选中单元格时，属性面板即为单元格的属性面板，如图2-48所示。单元格属性面板的上半部是文本的属性面板，可以用来设置单元格中文本的字体、字号、颜色等属性。单元格属性面板的下半部是高级属性设置选项:（1）合并单元格：当在表格中选择了个以上的单元格时，该按钮才起

38、作用。（2）拆分单元格：当在表格中选择了个以上的单元格时，该按钮才起作用。单位格属性面板单位格属性面板:（3）水平：在该下拉列表中选择单元格内容的水平对齐方式，如左下图所示。（4）垂直：在该下拉列表中选择单元格内容的垂直对齐方式，如右下图所示。（5）高：单元格的高度。（6）宽：单元格的宽度。（7）不换行：不勾选，文本将自动换行；勾选，则当文本的长度超过单元格的 宽度时，文本将继续向前，单元格的 宽度会随之调整。（8）标题：单元格中的文本会变粗并向中间移动。（9）背景（上）：单元格的背景图像。（10）背景（下）：单元格的背景颜色。（11）边框：单元格的边框线颜色。表格属性面板上各选项的含义：当选

39、中表格时，属性面板为表格的属性面板 表格属性面板的上半部是最基本的表格属性，大部分与插入表格时的设置内容相同，只是多了设置表格的命名、高度和表格的对齐方式。（1）表格Id：给表格命名。（2）行：设置表格的行数。（3）列：设置表格的列数。（4）宽：设置表格的宽度。（5）高：设置表格的高度。（6）填充：设置单元格空白。（7）间距：设置单元格间距。（8）对齐：设置对齐方式。（9）边框：设置表格的边框线。表格属性的下半部是高级属性：（10）清除各行的高度。（11）清除各列的宽度。（12）将当前表格的宽度尺寸从百分比转换到相应的像素值。（13）将当前表格的宽度尺寸从像素值转换到相应的百分比。（14）背景

40、颜色：背景颜色（15）背景图像：背景图像（16）边框颜色：表格边框的颜色 二、框架二、框架 框架结构也称为多窗口页面(Frames)，窗口也可以称为帧（Frame），是设计网页时非常有用的工具。它可以把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，从而使用户能够一次浏览更多的内容。一个典型的框架结构页面 浏览网页时，单击左边的某个链接，则对应的链接内容便显示在右边，而上边的网站标志和左边的导航栏目内容仍然留在屏幕上；当单击“搜狐”时，将打开一个新的窗口显示该网站的主页。该实例实质上是一个应用了顶部和左侧嵌套的框架结构的网页。这种框架结构的页面被分成了3个区域，每一个区域都是一个框

41、架，而这些框架的集合称为框框架架集集（Frameset）。同时，每个框架都包含一个网页，但却用到了4个网页，即3个Frame网页（分别为topFrametopFrame、leftFrameleftFrame、mainFramemainFrame）和1个包含框架数、框架的大小、载入框架等信息的FramesetFrameset网页网页。创建基于框架的网页可以依次按照下述步骤进行：1在页面中创建框架集和框架，并对页面布局进行适当的调整插入一个“顶部和嵌套的左侧框架”的框架集，操作步骤如下：（1）在菜单栏中选择“插入记录”|“HTML”|“框架”|“顶部和嵌套的左侧框架”命令。（2）在插入面板上的“布

42、局”选项卡中选择“框架”下拉列表，单击按钮 。2输入框架页面内容 利用前面所学知识，直接在相应的框架中输入内容；或将框架中的网页文件事先编辑好，然后在框架中导入。3保存框架集文件和框架文件保存的方法通常有两种：同时保存框架集中的所有网页文件。在菜单栏中选择“文件”|“保存全部”命令。分别保存框架集中的网页和各个框架中的网页文件。（1）保存框架集网页文件，操作步骤如下：选中整个框架集；在菜单栏中选择“文件”|“保存框架页”命令。单独保存框架集网页文件单独保存框架集网页文件 （2）保存单个框架网页文件的操作步骤如下：将光标定位在要保存网页文件的框架内，或在框架面板上单击网页所在的框架；在菜单栏中选

43、择“文件”|“保存框架”命令。保存框架网页文件 4设置框架中的链接目标接下来，为左边框架中的各个导航栏建立一个可链接到右边框架中的超级链接。例如：当单击“学生专区”时，在窗口的右边（即在mainFrame框架中）显示对应的链接内容，操作步骤如下：（1）选中文本“学生专区”，打开文本的属性面板。（2）在属性面板上单击 按钮，以选取要链接的文件exa2-3.htm。（3）在属性面板上单击“目标”的下拉列表，点选“mainFrame”这个框架名称，以便告诉浏览器在mainFrame框架中打开被链接的网页文件。选择不同的框架名称，链接文件将在不同的框架中打开：选择“mainFrame”，在窗口的右边，

44、mainFrame框架中显示所链接的文件内容；选择“leftFrame”，在窗口的左边，leftFrame框架中显示所链接的文件内容；选择“topFrame”，在窗口的上边，topFrame框架中显示所链接的文件内容。（4）保存框架网页，浏览页面。（5）重复以上步骤为其他导航栏指定相应的超级链接目标。Dreamweaver中提供了4个默认的框架名称。利用这些选项可以将链接的网页在新的窗口或其他的框架中打开。“目标”下拉列表中的“_blank”、“_parent”、“_self”、“_top”选项是保留关键字，已被定义。其含义如下：(1)_blank（空白窗口）：在另一个新的窗口中显示链接内容，这样可以保留现有的窗口文档内容；(2)_parent（父窗口）：在上一层的框架集中显示链接内容（该选项只有在框架集中还包含另一个框架集的情况下，才能产生效果）；(3)_self（当前窗口）：在本身所在的框架中显示链接内容，这样会覆盖当前框架中的所有内容。该目标是默认值；(4)_top（最高）：在整个浏览器窗口中显示链接内容，这样会覆盖当前框架中所有内容。