中文DreamweaverMX案例教程作者杜金等第2章网页中的文字、图像和导航条课案.pptVIP

第 2 章 网页中的文字、图像和导航条 主要内容 【实例】 “跟我学HTML”网页——格式化文字 【实例】 导入Word编辑的HTML文档的网页 【实例】 文字查找和替换 【实例】 图文混排网页 【实例】 插入翻转图像后的网页 【实例】 利用跟踪图像制作网页 【实例】 拼合图像网页 【实例】 插入导航条的网页 【实例】 “跟我学HTML”网页——格式化文字 实例效果 技术分析 操作步骤 一、实例效果 “跟我学HTML”网页采用了格式化文字技术，文字格式化前的效果如图所示，对网页中的文字进行格式化后，网页的效果如图所示。 文字格式化前的效果 文字格式化后的效果 二、技术分析 在网页中，将标题“跟我学HTML”设置成蓝色、黑体字体，将正文设置成楷体和隶书字体。另外，“调整图像的大小”、“给图像加边框”等热字使用了“项目列表”设置，达到格式化网页中文字的效果。 三、操作步骤 打开前面制作好的“index.htm”网页文档，选中“跟我学HTML”标题，在文字属性栏中单击“字体颜色”按钮，将标题设置成蓝色。 单击文字属性栏中的“字体列表”下拉列表框旁的箭头按钮，调出“字体”列表，选择“编辑字体列表”，调出“编辑字体列表”对话框。 在“编辑字体列表”中的“可用字体”列表框中单击选中“黑体”，单击“添加”按钮，将“黑体”添加到“选择的字体”列表框中。用同样的方法，将“华文楷体”和“华文隶书”也添加到“选择的字体”列表框中。单击“确定”按钮完成添加。 选中“跟我学HTML”标题，单击“字体列表”下拉列表框旁的箭头按钮，选择“黑体”，将标题设置成“黑体”字体。 选中正文的第一行，单击“字体列表”下拉列表框旁的箭头按钮，选择“华文楷体”，将其设置成“华文楷体”字体。选中正文第二行，用同样方法将字体设置成“华文隶书”。 将“调整图像的大小”、“给图像加边框”、“调整图像的相对位置”、“为图像添加文字说明”、“设置背景的平铺图像”和“在网页内插入FLASH动画”热字选中，单击文字属性栏中的“项目列表”按钮，将热字设置成项目列表。 单击“文件”→“保存”菜单命令，按【F12】键，在浏览器中查看格式化文字后网页在浏览器中的显示效果。 【实例】 导入Word编辑的HTML文档的网页 实例效果 技术分析 操作步骤 一、实例效果 这个实例的目的是将Word生成的HTML文档导入到Dreamweaver MX中，成为可以被Dreamweaver MX编辑的网页。网页在Word中的显示效果如图所示，导入到Dreamweaver MX后网页的显示效果如图所示。 用Word创建网页的效果 导入到Dreamweaver MX后的效果 二、技术分析 一直以来，Word给人的印象都是一个出色的文字处理软件。其实，它也是一款非常优秀的网页制作软件。只不过Word所使用的HTML语言与一般的HTML语言有所不同，所以导致除Word以外的软件很难编辑Word生成的网页。在Dreamweaver MX里面，增加了对Word生成HTML文件的支持，很轻松就能够将Word生成的HTML文件导入。 三、操作步骤 打开Dreamweaver MX，单击“文件”→“打开”菜单命令，将事先用Word制作好的“WORD.HTM”网页文档打开，单击“命令”→“清理Word生成的HTML”菜单命令，调出“清理Word生成的HTML”对话框。 将所有的选项都选中，然后单击“确定”按钮，系统会自动对Word编辑的HTML网页进行修改，保存为Dreamweaver MX可以识别的标准网页文档。 保存文档后按【F12】键，在浏览器中查看网页的显示效果。 【实例】 文字查找和替换 实例效果 技术分析 操作步骤 一、实例效果 在制作好的“跟我学HTML”网页的一个子页（名称为：2-3.HTM）网页文档中，用查找和替换的方法编辑网页中的文字。网页编辑前的显示效果如图2-11所示，编辑后的网页显示效果如图所示，将网页中的“图像”文字全部替换为“图像”。 使用“查找和替换”更改前的网页文档 使用“查找和替换”更改后的网页文档 二、技术分析 使用Dreamweaver MX中的“查找和替换”功能对网页文档中的文字进行修改，即减少了工作量，又增加了修改的准确性，是网页制作中经常使用的一项功能。 “查找和替换”功能不但能对网页内的文本进行修改还能对整个站点内的网页文档或者是整个文件夹进行修改，也可对源代码和指定标签进行修改。另外，“查找和替换”功能还可以将“查找和替换”设置保存为单独的文件，下次再使用相同的替换设置时，可以调用文件来实现修改设置。 三、操作步骤 用我们已经学过的方法，创建一个网页文档，完成后保存在WEBSD文件夹下，文件名为“2-3.HTM”。 打开已经制作好的“2-3