网页制作技术教程 第2章 网页制作.ppt

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

1、第第第第2 2 2 2章章章章 网页制作网页制作网页制作网页制作 第二章第二章 网页制作网页制作本 章 教 学 目 的掌握页面的整体控制和头部内容设置的方法。熟练掌握在网页中输入、设置标题和正文文字的方法。掌握在网页中嵌入图像、声音、多媒体信息的方法。掌握建立各种形式超级链接的方法。熟练掌握网页页面布局的各种方法。掌握制作表单的方法。掌握在网页中添加CSS的方法。掌握网页特效的制作方法。掌握模板和库的使用方法。掌握行为的使用方法。第二章第二章 网页制作网页制作目 录第一讲 文档及文本操作 第二讲 图像及超级链接 第三讲 媒体及表格第四讲 框架及图层第五讲 表单、模板和库第六讲 CSS样式第七讲

2、 行为第二章第二章 网页制作网页制作第一讲第一讲 文档及文本操作文档及文本操作教学内容教学内容 1 新建空白文档网页 2 设置页面属性 3 保存文档 4 文本的输入及格式 5 列表、水平线等其他元素 6 在网页中插入文件头部内容教学重点和难点教学重点和难点网页文件的建立、页面属性的设置、网页中文本等元素的输入以及文件头部内容的设置第二章第二章 网页制作网页制作文档及文本操作文档及文本操作2.1 文档操作2.1.1 新建空白文档网页2.1.2 设置页面属性2.1.3 保存文档2.2 文本操作2.2.1 在网页中输入文本2.2.2 设置文本属性2.2.3 文本换行2.2.4 插入特殊字符和在字符之

3、间添加空格2.2.5 使用列表2.2.6 在网页中插入文件头部内容2.2.7 插入水平线和时间第二章第二章 网页制作网页制作2.1.1 新建空白文档网页 新建一个网页文档有两种方法：（1）如果您的Dreamweaver运行后显示起始页，则在起始页中直接选择“创建新项目”下的HTML选项。（2）如果您的Dreamweaver运行后不显示起始页，则选择“文件”“新建”命令，弹出“新建文档”对话框，通过该对话框完成新建。第二章第二章 网页制作网页制作【任务2-1-1】新建空白文档网页【操作要求】在站点根目录（D:root）下建立一个名为index.html的网页【操作步骤】（1）启动Dreamwea

4、ver后，在文件面板中选择“站点我的站点”，如图1所示。单击文件面板中的 按钮，在“文件”的级联菜单中选择“新建文件”选项，如图2所示。第二章第二章 网页制作网页制作【任务2-1-1】新建空白文档网页图1图2第二章第二章 网页制作网页制作【任务2-1-1】新建空白文档网页（2）在文件面板的“站点我的站点（D:root）”文件夹中出现了一个新文件，名称为untitled.html，如图3所示。将其重命名为index.html，如图4所示。（3）在文件面板中，双击index.html即可在Dreamweaver的文档窗口中打开该网页，对其进行编辑修改。第二章第二章 网页制作网页制作【任务2-1-1

5、】新建空白文档网页图3图4第二章第二章 网页制作网页制作2.1.2 设置页面属性 在制作网页时，还需要对影响整个页面的参数进行必要的设置。选择“修改”“页面属性”命令，弹出“页面属性”对话框，如图5所示。1设置外观2设置链接3设置标题4设置标题和编码5设置跟踪图像第二章第二章 网页制作网页制作图5第二章第二章 网页制作网页制作【任务2-1-2】页面属性设置【操作要求】在文档窗口中打开D:rootindex.html网页，将网页标题设为“我的主页”，文本字体为“仿宋”，大小为12像素，颜色为#00FF00。【操作步骤】（1）在文档窗口中打开D:rootindex.html网页，右击窗口空白处，弹

6、出一个快捷菜单如图6所示，从中选择“页面属性”命令，弹出“页面属性”对话框，如图7所示。第二章第二章 网页制作网页制作图6图7第二章第二章 网页制作网页制作（2）在“分类”列表框中选择“外观”选项，单击“页面字体”下拉列表框查找所需字体，在字体列表中无所需字体则选择“编辑字体列表”，弹出“编辑字体列表”对话框。（3）在该对话框中的“可用字体”列表框中找到“仿宋”，单击 按钮，则“仿宋”字体添加到了“选择的字体”列表框中。（4）在“外观”选项中，在“大小”下拉列表框中选择12，在“文本颜色”文本框中输入#00FF00，如图8所示。（）在“分类”列表框中选择“标题和编码”选项，在标题对话框中输入“

7、我的主页”，单击“确定”按钮，操作完成。第二章第二章 网页制作网页制作图8第二章第二章 网页制作网页制作2.1.3 保存文档新建一个文件后，选择“文件”“保存”命令，弹出“另存为”对话框，在 “另存为”对话框选中保存路径，给文件命名，选择保存类型，然后单击“保存”按钮即可完成文件保存。第二章第二章 网页制作网页制作2.2 文本操作文本是网页中不可或缺的元素，网页中的文本用来传达网页包含的各种信息与提示。文本的信息量大且生成的文件小，容易被浏览器下载，不会让浏览者用过多的时间等待，因此，不论网页内容如何丰富，文本始终都是网页中的基本元素。同时掌握好文本的使用也是网页制作的基本功。第二章第二章 网

8、页制作网页制作2.2.1 在网页中输入文本在网页中输入文本的方法很简单，单击网页中要插入文本的空白区域，窗口随即出现闪动的光标，选择输入法，输入文字即可。也可以用复制方法将其他文本内容粘贴过来。第二章第二章 网页制作网页制作2.2.2 设置文本属性文本的属性主要通过文本的“属性”面板来完成，如图9所示。图9第二章第二章 网页制作网页制作2.2.3 文本换行（1）按Enter键可以换行，同时也就结束了一个段落，且可以使两段之间多出一空行。（2）按Shift+Enter键，文档在同一个段落中换行，两行之间不产生空行。第二章第二章 网页制作网页制作2.2.4 插入特殊字符和在字符之间添加空格 1插入

9、特殊字符在Dreamweaver中可以插入的特殊字符包括版权符号、注册商标符号、商标符号、英镑符号、日元符号、左引号、右引号、破折号等。插入特殊字符可以通过“插入”菜单或“插入”面板来完成。2在字符之间添加空格在Dreamweaver中只允许字符之间包含一个空格，若要在文档中添加连续多个空格时，可执行如下操作之一：（1）在“插入”面板中选择“文本”子面板，在其中单击按钮，打开特殊字符面板，选择“插入不换行空格”选项。（2）选择“插入”HTML“特殊字符”“不换行空格”命令。（3）按Ctrl+Shift+空格键输入。（4）将输入法切换到全角状态再按空格键。第二章第二章 网页制作网页制作2.2.5

10、 使用列表在Dreamweaver中常用的列表分为有序列表（编号列表）、无序列表（项目列表）和自定义列表3种形式。插入项目、编号列表的方法：将现有文本设置成项目列表：（1）选择要定义列表的文本，选择“文本”“列表”“项目编号列表”命令。（2）选择要定义列表的文本，在“属性”面板中单击列表按钮。将新文本设置成项目列表，则在输入文本之前，先选择项目列表。第二章第二章 网页制作网页制作2.2.6 在网页中插入文件头部内容一个网页文档由头部和正文两个部分组成。文档的标题信息就存储在头部位置，在浏览网页时，它会显示在浏览器的标题栏中，当该网页被放入到浏览器的收藏夹时，文档的标题又会作为收藏夹中项目的名称

11、。头部内容是网页中必须添加的信息,它帮助网页实现功能。1插入Meta属性Meta标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的Head元素。第二章第二章 网页制作网页制作2插入关键字许多搜索引擎装置（自动浏览Web页为搜索引擎收集信息以编入索引的程序）读取关键字Meta标签的内容，并使用该信息在它们的数据库中将你的页面编入索引。3插入说明文字许多搜索引擎装置读取说明Meta标签的内容。4设置网页的刷新使用刷新元素可以指定浏览器在一定的时间后应该自动刷新页面，方法是重新载入当前页面或转到不同的页面。该元素通常用于在显示了说明URL已改变的文本消息后，将用户从一个URL重定向

12、到另一个URL。5设置基础属性使用Base元素可以设置页面中所有文档相对路径相对的基础URL。6设置链接标签的属性使用“链接”标签可以定义当前文档与其他文件之间的关系。第二章第二章 网页制作网页制作2.2.7 插入水平线和时间1插入水平线水平线对于信息的组织很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。2插入时间Dreamweaver提供了一个方便的日期对象，该对象使可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），并在每次保存文件时都自动更新该日期。第二章第二章 网页制作网页制作【任务2-2-1】插入日期【操作要求】将当前日期插入到文档中【操作步骤】（1）在“

13、文档”窗口中将插入点放在要插入日期的位置。（2）执行下列操作之一：选择“插入”“日期”命令，打开“插入日期”对话框。在“插入”面板中选择“常用”子面板，单击 按钮，也会打开“插入日期”对话框。（3）在该对话框中选择星期格式、日期格式和时间格式。（4）单击“确定”按钮即可插入日期。第二章第二章 网页制作网页制作本讲小结本讲主要介绍网页文件的建立、页面属性的设置、网页中文本等元素的输入以及文件头部内容的设置第二章第二章 网页制作网页制作上机作业【上机要求】在网页中输入文本与编辑文本、掌握输入空格和实现文本换行的方法；学会在网页中插入水平线和日期；掌握网页文本格式化操作 第二章第二章 网页制作网页制

14、作第二讲 图像及超级链接 教学内容教学内容1 插入图像和设置图像属性 2插入占位符 3鼠标经过图像设置 4导航条的创建 5关于链接路径 6创建外部链接 7创建内部链接8创建其他链接 教学重点和难点教学重点和难点 在网页中插入图像、图像对象以及插入超级链接第二章第二章 网页制作网页制作图像及超级链接2.3 图像操作2.3.1 插入图像2.3.2 设置图像的一般属性 2.3.3 插入占位符2.3.4 鼠标经过图像设置 2.3.5 导航条的创建 2.4 超级链接2.4.1 关于链接路径2.4.2 创建外部链接2.4.3 创建内部链接 2.4.4 创建E-mail链接2.4.5 创建锚点链接 2.4.

15、6 创建脚本链接2.4.7 创建空链接 2.4.8 图像热点链接 第二章第二章 网页制作网页制作2.3 图像操作 由于受网络速度等方面的影响，因此在网页制作中图像的格式有一定的要求，一般用于网页的图像要求是GIF、JPEG或PNG三种格式中的一种。第二章第二章 网页制作网页制作2.3.1 插入图像插入图像的具体方法：1.选择“插入”“图像”菜单；2.单击“插入”面板“常用”子面板中的 按钮；3.按Ctrl+Alt+I键 第二章第二章 网页制作网页制作2.3.2 设置图像的一般属性设置图像属性具体操作如下。能选取要编辑的图像，展开“图像”属性面板，如图10所示。其左上角显示了选取图像的缩略图，“

16、源文件”文本框中显示了插入图像的源位置。属性具体含义如下：图10第二章第二章 网页制作网页制作【宽】【高】是图片的尺寸，默认单位是象素。【源文件】是图片的路径，点击后面的文件夹图标也能选择其他图片。【链接】是链接的目标页面或者定位点的URL。【目标】链接时的目标窗口或框架。【替代】是图片的文字注释，当图片不能正常显示的时候，图片的位置就会显示文字注释。【编辑】启动图像编辑软件对图像编辑。【地图】用于制作图像映射（热点）【垂直边距】【水平边距】图像在垂直或水平方向与网页中其他元素之间的距离。【边框】图像边框的宽度。选择空白或零时没有边框。【对齐】下拉列表用于指定图片相对于文本的排列方式。【低解析

17、度源】当前图片的低分辨率副本的路径。如果图片很大，则先让浏览器下载显示一个文件较小的图片副本，浏览器装载完其他内容后再回头来下载较大的图像，这样做既能保持网页的完整性，又能减少用户等待时间。第二章第二章 网页制作网页制作2.3.3 插入占位符如果目前还不确定该插入哪幅图像，但可以确定图像的大小，则可以使用占位符的方式插入图像，当确定好要插入的图像时再进行插入即可。（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行以下方法之一：选择“插入”“图像对象”“图像占位符”命令。选择“插入”面板的“常用”子面板中的 按钮后的下拉按钮，在打开的列表中选择“图像占位符”选项。第二章第二章 网

18、页制作网页制作2.3.4 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成：主图像和次图像。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小。插入鼠标经过图像的具体操作如下。（1）在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。（2）使用以下方法之一插入鼠标经过图像。单击“插入”面板的“常用”子面板中的按钮后的下拉按钮，单击“鼠标经过图像”按钮；选择“插入”“图像对象”“鼠标经过图像”命令，如图11所示。第二章第二章 网页制作网页制作图1

19、1第二章第二章 网页制作网页制作2.3.5 导航条的创建导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同，一个网页中只允许有一个导航条，导航条项目有如下4种状态：一般：尚未单击或尚未与此项目交互时所显示的图像。滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化（例如变得更亮），以便让知道可与这个项目进行交互。按下：指项目被单击后所显示的图像。按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。第二章第二章 网页制作网页制作插入导航条的具体操作如下：（1）将光标定位到要插入导航条的位置。（2）执行下列操作之一打开“插入导航条”对话框：选择“插入

20、”面板的“常用”子面板中 按钮后的下拉按钮，并单击“插入导航条”按钮。选择“插入”“图像对象”“导航条”命令。第二章第二章 网页制作网页制作【任务2-3】建立网站相册【操作要求】在Dreamweaver中内置了创建网站相册的命令，但此命令实际是调用了Fireworks的图片处理功能，因此，如果要创建网站相册，必须先安装Fireworks软件。另外，为了创建网站相册，还需要收集建立相册的图片。在开始创建相册之前，将相册的所有图像放置在一个文件夹中。另外，制作相册的原始图像文件类型是以gif、jpg、jpeg、png、psd、tif或tiff为扩展名。第二章第二章 网页制作网页制作【操作步骤】首先

21、创建一个名为“电子相册”的站点，设置本地文件夹为F:photo，并在该文件夹下新建两个文件夹，分别取名为Source和Object，然后在Source文件夹中放入收藏的图片。做好上述的准备工作之后，接下来开始创建网站相册，具体操作如下：（1）选择“命令”“创建网站相册”命令，弹出“创建网站相册”对话框。（2）在“创建网站相册”对话框中对各种参数进行设置。（3）单击“确定”按钮，Fireworks自动启动并创建缩略图和大尺寸图像。当处理完成后，Dreamweaver将再次处于活动状态并创建包含缩略图的Web页。（4）当出现提示“相册已经建立”的对话框时，单击“确定”按钮。（5）等待几秒钟，相册页

22、即可出现，各缩略图根据文件名按字母顺序显示。（6）按F12键在浏览器中预览效果。第二章第二章 网页制作网页制作2.4 超级链接 链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。超级链接由两部分组成：链接点和链接目标。第二章第二章 网页制作网页制作2.4.1 关于链接路径（1）绝对路径（2）相对路径（3）根路径 第二章第二章 网页制作网页制作2.4.2 创建外部链接不论是文字还是图像，都可以创建链接到绝对地址的外部链接。创建链

23、接的方法有两个：一个是直接输入地址，另一个是使用“超级链接”对话框。第二章第二章 网页制作网页制作【任务2-4-1】外部链接【操作要求】在Root网站的主页（index.html）中创建链接到“怀化职业技术学院”网站，且在原浏览器窗口中打开的链接。【操作步骤】方法1：直接输入地址（1）打开主页index.html，在文本窗口中输入并选中文字“怀化职业技术学院”。在“属性”面板中，“链接”组合框用来设置图像或文字的超链接，“目标”下拉列表框用来设置打开方式。（2）在“链接”组合框中直接输入外部绝对地址http:/，在“目标”下拉列表框中选择_self，第二章第二章 网页制作网页制作方法2：使用“

24、超级链接”对话框（1）在主页index.html的文档窗口中，单击“常用”子面板中的“超级链接”按钮，弹出“超级链接”对话框，如图13所示。图13第二章第二章 网页制作网页制作（2）进行以下各项设置：“文本”文本框输入设置超级链接显示的文本“怀化职业技术学院”；“链接”组合框用来输入超链接连接到的路径http:/；“目标”下拉列表框用来设置超链接的打开方式，有4个选项，选择_self；“标题”文本框用来设置超链接的标题。（3）设置好后，单击“确定”按钮，即向网页中插入了“怀化职业技术学院”超链接。第二章第二章 网页制作网页制作2.4.3 创建内部链接 1.在文档窗口中选中文字或图像，单击“属性

25、”面板“链接”组合框后的按钮 ，弹出“选择文件”对话框，选择要链接到的网页文件，即可链接到这个网页 2.拖动“链接”组合框后的按钮到站点面板上的相应网页文件，则链接将指向这个网页文件。3.直接将相对地址输入到“链接”组合框中来链接一个页面 第二章第二章 网页制作网页制作2.4.4 创建E-mail链接 创建邮件链接后，当浏览者单击邮件链接时，系统会自动启动浏览器默认的邮件处理程序，且其中程序的收件人地址会自动更新为链接邮件的地址。下面通过任务讲解如何创建E-mail链接。第二章第二章 网页制作网页制作【任务2-4-2】E-mail链接【操作要求】在Root网站的主页（index.html）中创

26、建以文本“与我联系”为链接点的邮件链接（邮箱地址为），且在新窗口中打开链接。【操作步骤】方法1：（1）打开主页index.html，单击“常用”子面板中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，如图14所示。第二章第二章 网页制作网页制作（2）在“文本”文本框中输入要链接的文本“与我联系”，然后在E-Mail文本框中输入邮箱地址，单击“确定”按钮，然后在“属性”面板的“目标”下拉列表框中选择_Blank选项。方法2：（1）选择“插入”“电子邮件链接”命令，弹出“电子邮件链接”对话框。（2）在“文本”文本框中输入“与我联系”，在E-Mail文本框中输入，单击“确定”按钮，然后在“属性”

27、面板的“目标”下拉列表框中选择_Blank选项。方法3：（1）选择要创建邮件链接的文本，在“属性”面板中的“链接”组合框中输入mailto:（2）在“目标”下拉列表框选择_Blank选项。图14第二章第二章 网页制作网页制作2.4.5 创建锚点链接 所谓锚点链接，是指在同一个页面中的不同位置的链接或链接到另一页面的某一具体位置。常用的建立方法有两种：（1）面板操作（2）菜单操作第二章第二章 网页制作网页制作2.4.6 创建脚本链接所谓脚本链接是指选择JavaScript代码或调用JavaScript函数，能够在不离开当前网页的情况下，了解关于某个项目的一些附加信息，此外该方式用于计算、表单验证

28、或其他任务。利用脚本链接创建关闭网页效果，操作步骤如下：（1）在文档编辑窗口中输入文字“关闭窗口”。（2）选中文本“关闭窗口”，在“属性”面板的“链接”组合框中输入javascript:window.close(),该脚本链接可以关闭窗口。第二章第二章 网页制作网页制作2.4.7 创建空链接所谓空链接实际上是一个未设计的链接，利用该链接可激活页面上的文本和对象。例如有些JavaScript事件需要链接，但并不是链接到文本、图像或其他对象，这时就需要用无地址来实现。创建空链接的方法是：在文档编辑窗口中，选中要创建空链接的文本，在“属性”面板的“链接”组合框中输入“#”。第二章第二章 网页制作网页

29、制作2.4.8 图像热点链接一个对象只能创建一个链接，但在网页设计时有可能要在一个图像上添加多个链接，若使用前面所讲的链接方法则只能链接到一个目标。为了解决这一矛盾，在Dreamweaver中巧妙地使用了热点进行链接。利用热点工具可以将一个图像划分为多个热区作为链接点，再单独对每个热区添加相应的图像热点链接。第二章第二章 网页制作网页制作上机作业【上机要求】掌握图像的插入方法；掌握图像属性的设置方法；掌握图像与文本混合编排的方法；掌握插入鼠标经过图像的方法，了解插入图像占位符的方法创建外部链接和内部链接的操作方法；掌握制作图像映射的操作方法；掌握创建E-mail链接的操作方法第二章第二章 网页

30、制作网页制作第三讲 媒体及表格教学内容教学内容1.在网页中插入Flash对象 2.插入其他动态元素3.为网页加入背景音乐 4.插入并编辑表格 5.嵌套表格 6.表格的格式化 7.布局表格 教学重点和难点教学重点和难点在网页中插入多媒体对象、不同媒体相关参数的具体设置，系统集成Flash按钮和文本的插入，加入音乐的技巧。表格或单元格的选定、新行或新列的插入操作、单元格合并与拆分操作、表格及单元格属性设置方法以及运用表格布局网页。第二章第二章 网页制作网页制作媒体及表格2.5 媒体2.5.1 在网页中插入Flash对象2.5.2 插入其他动态元素2.5.3 为网页加入背景音乐 2.6 表格2.6.

31、1 插入并编辑表格2.6.2 嵌套表格2.6.3 表格的格式化2.6.4 布局表格第二章第二章 网页制作网页制作2.5 媒体一个优秀的网站应该不仅仅是由文字和图片组成的，而应该在网页中加入声音、动画、影片等内容。为了增强网页的表现力，丰富文档的显示效果，我们可以向其插入Flash动画、Java小程序、音频播放插件等多媒体内容。第二章第二章 网页制作网页制作2.5.1 在网页中插入Flash对象1插入Flash影片Flash动画是一种高品质的矢量动画，它由Macromedia公司的Flash动画制作软件创建，目前已经成为Internet上矢量动画的标准，是制作网上矢量图形和动画的首选软件。Fla

32、sh、Dreamweaver和Fireworks并称为Macromedia公司的网络三剑客。第二章第二章 网页制作网页制作 插入Flash影片的具体操作如下。（1）将光标定位到页面中要插入Flash影片的位置。（2）在插入栏的“常用”选项卡中单击媒体右侧的按钮 ，在弹出的列表框中选择“Flash”选项，或选择插入 媒体 Flash菜单命令打开“选择文件”对话框。（3）在“查找范围”下拉列表框中查找要插入的Flash播放文件（格式为：*.swf）。单击“确定”按钮后，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示。只有在保存文档之后，在浏览器中才能正常显示Fl

33、ash。第二章第二章 网页制作网页制作2插入Flash按钮插入Flash按钮是指Dreamweaver 集成的动态按钮。除此之外，在Dreamweaver中也可以插入自已制作的Flash按钮（Flash文件），方法与插入Flash影片类似。插入Flash按钮的具体操作如下：（1）将光标定位到页面中要插入Flash按钮的位置上。（2）选择“插入”“媒体”“Flash按钮”命令，打开“插入Flash按钮”对话框，如图15所示。（3）在“样式”列表框中选择需要的按钮样式，在“范例”栏中将显示出所选样式的效果。（4）在“按钮文本”文本框中输入要在按钮上显示的文本。（5）在“字体”下拉列表框中选择按钮文

34、本的字体，在“大小”数值框中输入字号。（6）在“链接”文本框中指定按钮所要链接文档的URL地址。（7）在“目标”下拉列表框中选择所链接文件的打开方式。（8）在“背景色”文本框中设置Flash按钮的背景色。（9）在“另存为”文本框中输入保存的路径，最好保存到当前页面站点的图像文件夹中。至此设置就完成了。（10）单击“确定”按钮将设置的Flash按钮插入到当前位置。第二章第二章 网页制作网页制作（11）单击插入的Flash按钮，在其属性面板中编辑相关的属性。如果要修改Flash按钮的名称、外观等参数时，可双击插入的Flash按钮或单击其属性面板中的“编辑”按钮打开“插入Flash按钮”对话框，更改

35、其设置即可。（12）如果在页面中调整了Flash按钮的大小，又想恢复原大小时，可单击属性面板中的“重设大小”按钮。（13）单击“播放”按钮播放，当鼠标移到按钮上时就会看到按钮的动态效果。图15第二章第二章 网页制作网页制作3插入Flash文本插入Flash文本与插入Flash按钮一样，是指Dreamweaver 中集成的文本动画。插入Flash文本的具体操作如下：（1）将光标定位到页面中要插入Flash文本的位置上。（2）选择“插入”“媒体”“Flash文本”命令，打开如图16所示的“插入Flash文本”对话框。（3）在“文本”文本框中输入要显示的文本。（4）选中“显示字体”复选项，在文本框中

36、将显示所设置文本字体的效果。（5）在“字体”下拉列表框中选择文本的字体，在“大小”文本框中输入文本的大小，并完成参数的设置。（6）单击“确定”按钮将设置的Flash文本插入到页面中。第二章第二章 网页制作网页制作图16第二章第二章 网页制作网页制作2.5.2 插入其他动态元素 Dreamweaver不仅支持Flash动画，还支持如Shockwave影片、Applet等媒体。1插入Shockwave影片Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。在Dreamweaver 中插入Shockwave影

37、片的具体操作如下：（1）将光标置于页面中要插入Shockwave影片的位置上。（2）选择“插入”“媒体”Shockwave命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的 按钮，在弹出的列表框中选择Shockwave选项，打开“选择文件”对话框。第二章第二章 网页制作网页制作（3）选择要插入的Shockwave影片文件，同时在对话框中可以设置URL的类型。（4）单击“确定”按钮，即可将影片插入到页面中，Shockwave影片插入到页面中将以一个图标的形式显示。（5）单击Shockwave影片的图标，在属性面板中设置其属性。第二章第二章 网页制作网页制作2插入Applet为了使网页

38、更加引入注目，经常需要制作一些特殊效果，用Java语言可以实现这些特殊效果。Applet是Java的小应用程序，它是动态、安全、跨平台的网络应用程序。Java Applet被嵌入到HTML语言中，编写一些Applet放在网页中可以实现较为复杂的控制，也可以实现各种各样的效果。插入Applet的具体操作如下：（1）将光标定位到页面中要插入Applet的位置。（2）选择“插入”“媒体”Applet命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的按钮，在弹出的列表框中选择Applet选项，打开“选择文件”对话框。第二章第二章 网页制作网页制作（3）设置完毕后，单击“确定”按钮即可将Ap

39、plet插入到页面中。插入页面中的Applet以一个图标的形式显示在页面中。（4）单击页面中的Applet图标，可以在如图17所示的属性面板中设置其相应的属性。图17第二章第二章 网页制作网页制作3插入ActiveX控件ActiveX控件是Microsoft公司对浏览器的能力扩展，ActiveX控件的作用和插件是相同的，但两者也存在着差异，载入网页时，如果浏览器不支持ActiveX控件，浏览器会自动安装所需软件，如果是插件，则需要用户找到相关的软件进行安装。插入Active X控件的课体操作如下：（1）将光标定位到页面中要插入ActiveX的位置。（2）选择“插入”“媒体”ActiveX命令，

40、也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的 按钮，在弹出的列表框中选择ActiveX选项，即可将ActiveX插入到页面中。插入页面中的ActiveX以一个图标的形式显示在页面中。（3）单击页面中的ActiveX图标，可以在属性面板中设置其相应的属性。第二章第二章 网页制作网页制作4插入插件如果想在浏览器中访问更多类型的媒体对象，就必须借助于插件，前面所介绍的Shockwave就是插件中的一员。插件的类型主要有对象类、命令类、行为类、组件类4种，这里讲解的是对象类插件。为了叙述方便，在此简称为插件。插入插件的具体操作如下：（1）将光标定位到页面中要插入插件的位置。（2）选择“插入

41、”“媒体”“插件”命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的 按钮，在弹出的列表框中选择“插件”选项，则打开“选择文件”对话框。（3）设置完毕后，单击“确定”按钮即可将插件插入到页面中，插件以一个图标的形式显示在页面中。（4）单击页面中的插件图标，可以在属性面板中设置其相应的属性。第二章第二章 网页制作网页制作2.5.3 为网页加入背景音乐 打开一些网站时，优雅的背景音乐伴随着我们的浏览一直萦绕在耳边。但Dreamweaver中并没有背景音乐的具体设置，要想达到这种效果，可以通过在源代码中手动添加代码或插入插件的方法来实现。1添加背景音乐代码具体操作如下：（1）将要插入背景

42、音乐的网页从设计视图切换至代码视图或拆分视图。（2）在和之间的任何地方加入：其中src指定音乐文件的位置及文件名，hidden=true 表示不显示播放器，loop=true表示循环播放。第二章第二章 网页制作网页制作2通过插入插件来添加背景音乐具体操作如下：（1）将光标定位到要插入背景音乐的网页的空白处。（2）同插入其他插件的方法一样，打开“选择文件”对话框。（3）在打开的对话框中选择音乐文件。（4）设置完毕后，单击“确定”按钮即可将音乐文件插入到页面中，音乐文件同样以一般插件的图标形式显示在页面中。（5）单击音乐文件图标，在属性面板中将高度和宽度都设置为0，这样就不会显示播放器。（6）在插

43、件URL的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则Internet Explorer将从这里提供的URL上下载。第二章第二章 网页制作网页制作【任务2-5】制作水中倒影效果【操作要求】在rootunit2image文件夹中有两个文件：一个是Java Applet小程序文件Lake.class（该文件的作用是产生倒影效果），一个是图像文件Ap49013.jpg。运用这两个文件制作如图18所示的效果。图18第二章第二章 网页制作网页制作2.6 表格 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单等元素有序地显示在页面上，让我们可以

44、设计出漂亮的页面。使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。第二章第二章 网页制作网页制作2.6.1 插入并编辑表格1插入表格在文档窗口中，将光标放在需要创建表格的位置，选择下列方法：单击“常用”子面板中的“表格”按钮；选择插入 表格菜单命令；按【Ctrl+Alt+T】键。则弹出“表格”对话框，指定表格的属性后在文档窗口中插入设置的表格。第二章第二章 网页制作网页制作2选择各表格对象对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。（1）选择整个表格的方法是把鼠标放在表格边框的任意

45、处，当出现标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中标签即可；或在单元格任意处单击，点鼠标右键在弹出快捷菜单中选择“表格”“选择表格”选项。（2）要选中某一单元格，按住Ctrl键的同时在需要选中的单元格单击；或者选中状态栏中的标签。（3）要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择的单元格方向拖动。要选中不连续的几个单元格，可以按住Ctrl键，再单击要选择的所有单元格。（4）要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时单击。第二章第二章 网页制作网页制作3设置表格属性 选中一个表格后，可以通过属性面板（如图

46、19所示）更改表格属性。图19第二章第二章 网页制作网页制作4单元格属性 把光标移动到某个单元格内，可以利用单元格属性面板（如图20所示）对这个单元格的属性进行设置。图20第二章第二章 网页制作网页制作5表格的行和列操作（1）插入行或列。选中要插入行或列的单元格，右击，在弹出的快捷菜单中选择“插入行”、“插入列”或“插入行或列”命令。如果选择了“插入行”命令，则在选择行的上方插入了一个空白行；如果选择了“插入列”命令，则在选择列的左侧插入了一个空白列；如果选择了“插入行或列”命令，会弹出“插入行或列”对话框，在其中可以设置插入行还是列、插入的数量，以及是在当前选择的单元格的上方或下方、左侧还是

47、右侧插入行或列。（2）删除行或列。选择要删除的行或列，右击，在弹出的快捷菜单中选择“删除行”或“删除列”命令。第二章第二章 网页制作网页制作6拆分与合并单元格 拆分单元格时，将光标放在待拆分的单元格内，单击属性面板中的“拆分”按钮，在弹出的对话框中按需要设置。合并单元格时，选中要合并的单元格，再单击属性面板中的“合并”按钮。第二章第二章 网页制作网页制作2.6.2 嵌套表格表格之中还有表格即嵌套表格。网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载

48、完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。创建嵌套表格的操作方法是，先插入总表格，然后将光标置于要插入嵌套表格的地方，继续插入表格即可。第二章第二章 网页制作网页制作【任务2-6-1】嵌套表格【操作要求】在Root网站的主页（index.html）中，创建一个表中套表再套表的三层嵌套表格，如图21所示。图21第

49、二章第二章 网页制作网页制作【操作步骤】（1）打开主页（index.html）文档，将光标放置在文档窗口要插入表格的位置，单击“常用”子面板中的“表格”按钮，插入一个1行1列的表格1，宽度为500像素，高度为100，边框为0，单元格间距为0，单元格边距为12像素，背景颜色为#333333。（2）将光标放置在表格1内，插入表格2：1行1列，宽度为100，高度为100，边框为0，单元格间距为0，单元格边距为12像素，背景颜色为#CCCCCC。（3）将光标放置在表格2内，插入表格3：1行1列，宽度为100，高度100，单元格间距和单元格边距都为8像素，边框为10，边框颜色为#FEE4ED，背景颜色为

50、#9966FF。制成的嵌套表格如图21所示。第二章第二章 网页制作网页制作2.6.3 表格的格式化做好的表格可以使用Dreamweaver提供的预设外观样式，这样可以提高制作效率，保持表格外观的统一性，同时样式提供的色彩搭配也比较美观。第二章第二章 网页制作网页制作【任务2-6-2】表格的格式化【操作要求】在Root网站的主页（index.html）中，插入一个5行6列的表格，表格的宽为500像素，高为300像素，边框、单元格间距和边距全为0，表格样式为AltRows Basic Gray。【操作步骤】（1）在主页的文档窗口中，将光标放在需要创建表格的位置，单击“常用”子面板的“表格”按钮，弹