《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第2章 网页中的文字、图像和导航条》由会员分享，可在线阅读，更多相关《中文Dreamweaver MX案例教程 教学课件 ppt 作者 杜金 等 第2章 网页中的文字、图像和导航条（56页珍藏版）》请在金锄头文库上搜索。
1、第 2 章,网页中的文字、图像和导航条,第2页,主要内容,【实例】 “跟我学HTML”网页格式化文字 【实例】 导入Word编辑的HTML文档的网页 【实例】 文字查找和替换 【实例】 图文混排网页 【实例】 插入翻转图像后的网页 【实例】 利用跟踪图像制作网页 【实例】 拼合图像网页 【实例】 插入导航条的网页,第3页,【实例】 “跟我学HTML”网页格式化文字,实例效果 技术分析 操作步骤,第4页,一、实例效果,“跟我学HTML”网页采用了格式化文字技术，文字格式化前的效果如图所示，对网页中的文字进行格式化后，网页的效果如图所示。,第5页,文字格式化前的效果,第6页,文字格式化后的效果,第
2、7页,二、技术分析,在网页中，将标题“跟我学HTML”设置成蓝色、黑体字体，将正文设置成楷体和隶书字体。另外，“调整图像的大小”、“给图像加边框”等热字使用了“项目列表”设置，达到格式化网页中文字的效果。,第8页,三、操作步骤,打开前面制作好的“index.htm”网页文档，选中“跟我学HTML”标题，在文字属性栏中单击“字体颜色”按钮，将标题设置成蓝色。 单击文字属性栏中的“字体列表”下拉列表框旁的箭头按钮，调出“字体”列表，选择“编辑字体列表”，调出“编辑字体列表”对话框。 在“编辑字体列表”中的“可用字体”列表框中单击选中“黑体”，单击“添加”按钮，将“黑体”添加到“选择的字体”列表框中
3、。用同样的方法，将“华文楷体”和“华文隶书”也添加到“选择的字体”列表框中。单击“确定”按钮完成添加。,第9页,选中“跟我学HTML”标题，单击“字体列表”下拉列表框旁的箭头按钮，选择“黑体”，将标题设置成“黑体”字体。 选中正文的第一行，单击“字体列表”下拉列表框旁的箭头按钮，选择“华文楷体”，将其设置成“华文楷体”字体。选中正文第二行，用同样方法将字体设置成“华文隶书”。 将“调整图像的大小”、“给图像加边框”、“调整图像的相对位置”、“为图像添加文字说明”、“设置背景的平铺图像”和“在网页内插入FLASH动画”热字选中，单击文字属性栏中的“项目列表”按钮，将热字设置成项目列表。 单击“文
4、件”“保存”菜单命令，按【F12】键，在浏览器中查看格式化文字后网页在浏览器中的显示效果。,第10页,【实例】 导入Word编辑的HTML文档的网页,实例效果 技术分析 操作步骤,第11页,一、实例效果,这个实例的目的是将Word生成的HTML文档导入到Dreamweaver MX中，成为可以被Dreamweaver MX编辑的网页。网页在Word中的显示效果如图所示，导入到Dreamweaver MX后网页的显示效果如图所示。,第12页,用Word创建网页的效果,第13页,导入到Dreamweaver MX后的效果,第14页,二、技术分析,一直以来，Word给人的印象都是一个出色的文字处理软
5、件。其实，它也是一款非常优秀的网页制作软件。只不过Word所使用的HTML语言与一般的HTML语言有所不同，所以导致除Word以外的软件很难编辑Word生成的网页。在Dreamweaver MX里面，增加了对Word生成HTML文件的支持，很轻松就能够将Word生成的HTML文件导入。,第15页,三、操作步骤,打开Dreamweaver MX，单击“文件”“打开”菜单命令，将事先用Word制作好的“WORD.HTM”网页文档打开，单击“命令”“清理Word生成的HTML”菜单命令，调出“清理Word生成的HTML”对话框。 将所有的选项都选中，然后单击“确定”按钮，系统会自动对Word编辑的H
6、TML网页进行修改，保存为Dreamweaver MX可以识别的标准网页文档。 保存文档后按【F12】键，在浏览器中查看网页的显示效果。,第16页,【实例】 文字查找和替换,实例效果 技术分析 操作步骤,第17页,一、实例效果,在制作好的“跟我学HTML”网页的一个子页（名称为：2-3.HTM）网页文档中，用查找和替换的方法编辑网页中的文字。网页编辑前的显示效果如图2-11所示，编辑后的网页显示效果如图所示，将网页中的“图像”文字全部替换为“图像”。,第18页,使用“查找和替换”更改前的网页文档,第19页,使用“查找和替换”更改后的网页文档,第20页,二、技术分析,使用Dreamweaver
7、MX中的“查找和替换”功能对网页文档中的文字进行修改，即减少了工作量，又增加了修改的准确性，是网页制作中经常使用的一项功能。 “查找和替换”功能不但能对网页内的文本进行修改还能对整个站点内的网页文档或者是整个文件夹进行修改，也可对源代码和指定标签进行修改。另外，“查找和替换”功能还可以将“查找和替换”设置保存为单独的文件，下次再使用相同的替换设置时，可以调用文件来实现修改设置。,第21页,三、操作步骤,用我们已经学过的方法，创建一个网页文档，完成后保存在WEBSD文件夹下，文件名为“2-3.HTM”。 打开已经制作好的“2-3.HTM”网页文档，将光标移到页面的左上角。单击“编辑”“查找和替换
8、”菜单命令，调出“查找和替换”对话框。 在“查找在”下拉列表框中选择“当前文档”，在“查找内容”下拉列表框中选择“文本”，在后面的文本框中输入“图像”，在“替换以”文本框中输入“图像”。完成后单击“替换全部”按钮。此时，网页文档中的“图像”文本全部替换成“图像”。 单击“文件”“保存”菜单命令，按【F12】键，在浏览器中查看网页的效果。,第22页,【实例】 图文混排网页,实例效果 技术分析 操作步骤,第23页,一、实例效果,图文混排网页在浏览器中的显示效果如图所示。,第24页,图文混排网页在浏览器中的显示效果,第25页,二、技术分析,制作图文混排网页的关键是设置图片与文字的对齐方式。图像与文字
9、的对齐方式主要有“默认值”、“基线”、“顶端”、“中间”、“底部”、“文本上方”、“绝对中间”、“绝对底部”、“左对齐”和“右对齐”。 图文混排是网页制作的基本操作，实用性非常强。掌握此技术后，只要简单的几步，就能制作出效果非常好的网页。,第26页,三、操作步骤,新建一个网页文档，将背景颜色设置成“黄色”后输入文字并分段。将“调整图像和文本的相对位置”设置成“标题3”和“红色”。 将光标移到第一段前，单击“插入栏”中的“插入图像”按钮，弹出“选择图像源”对话框。 选中“PICTURE/1-4-1.JPG”的图像后单击“确认”按钮，图像1-4-1.JPG被插入到网页中，选中图像后，拖动图像边缘的
10、黑点，将图像调整到合适的大小。,第27页,选中图像，单击“图像属性栏”中的“对齐”下拉列表框，选择“左对齐”。在“ALIGN=left：”文字左边插入“PICTURE/1-4-2.JPG”图像文件，用同样方法将对齐方式设置成“右对齐”。 在网页的后面插入“PICTURE/001.GIF”图像文件，在图像后面输入“文字与图片绝对中间对齐方式的显示效果”，选中图像，将对齐方式设置成“绝对中间”。 单击“文件”“保存”菜单命令，将文件保存为“2-4.HTM”，按【F12】键，在浏览器中查看图文混排网页的效果。,第28页,【实例】 插入翻转图像后的网页,实例效果 技术分析 操作步骤,第29页,一、实例
11、效果,翻转图像是一种简单有趣的动态网页效果。当浏览器调入有翻转图像的网页页面时，页面显示的是翻转图像的初始状态，鼠标指针经过该图像时，图像会迅速变成另一幅图像，当鼠标移开时，又会恢复为初始图像。,第30页,翻转前的图像,翻转后的图像,第31页,二、技术分析,翻转图像效果可以通过“行为”面板实现，但是这种方法比较繁琐。在Dreamweaver MX中将翻转图像变为一个对象，只要在适当的位置插入就可以实现。 使用翻转图像，可以很轻松的制作出导航按钮、栏目链接等，实现简单的网页交互效果,第32页,三、操作步骤,单击“常用”面板中的 （鼠标经过图像）按钮，调出“插入鼠标经过图像”对话框。 在“图像名称
12、”文本框中输入“鼠标经过图像”，单击“原始图像”文本框后面的“浏览”按钮，调出“原始图像”对话框，选择“PICTURE/194.GIF”文件后单击“确认”按钮，在“原始图像”文本框中显示出图像路径和文件名。 单击“鼠标经过图像”文本框后面的 按钮，调出“鼠标经过图像”对话框，如图2-34所示。选择“PICTURE/197.GIF”文件后单击“确认”按钮，完成“鼠标经过图像”设置。 单击“文件”“保存”菜单命令，将网页保存为“2-5.HTM”，按【F12】键，在浏览器中查看插入鼠标经过图像网页的效果。,第33页,【实例】 利用跟踪图像制作网页,实例效果 技术分析 操作步骤,第34页,一、实例效果
13、,在Dreamweaver MX中插入跟踪图像后的显示效果如图所示。在网页内容的下面出现插入的跟踪图像的目的是用来帮助建立网页结构。在浏览器中显示网页时，跟踪图像不会显示出来。,第35页,在Dreamweaver MX中插入跟踪图像后的显示效果,第36页,二、技术分析,在制作网页时，常常希望网页页面精美漂亮、布局合理、内容紧凑。为此，可先在绘图软件中绘制一个网页外观图，也可以复制一份别人做好的网页图像并按照自己的要求进行修改，然后将图像存成JPG、GIF或PNG图像格式文件。以后，就可以在Dreamweaver MX下，将设计的网页外观图像按跟踪图像插入，再按照跟踪图像的结构样子进行网页的设计
14、。 插入“跟踪图像”，只会在Dreamweaver MX编辑状态看到，而在浏览器中则不能显示。,第37页,三、操作步骤,新建一个页面，单击“查看”“跟踪图像”“载入”菜单命令，弹出“选择图像源”对话框，利用它选择作为跟踪图像的图像。 选择“PICTURE/BEI.JPG”图像后，单击“选择图像源”对话框内的“确认”按钮，即可加载图像，同时调出“页面属性”对话框。这时，“页面属性”对话框内的“跟踪图像”文本框中已经填入了加载图像的路径与文件名。 在页面编辑过程中，用鼠标拖曳“图像透明度”滑块，来调整跟踪图像的透明度。通常透明度调成为50%左右，有利于区分跟踪图像和网页的图像，如图所示。,第38页
15、,“页面属性”对话框,第39页,单击“文件”“保存”菜单命令，将网页保存为“2-6.HTM”，按【F12】键，在浏览器中查看网页的效果。在浏览器中将不会显示跟踪图像。,第40页,【实例】 拼合图像网页,实例效果 技术分析 操作步骤,第41页,一、实例效果,利用拼合图像制作的图像网页的显示效果如图所示。,第42页,图像网页的显示效果,第43页,二、技术分析,如果网页中有较大的图像，则浏览器通常是在将图像文件的内容全部下载完后，才在网页中显示该图像。这样，会使网页的浏览者等待较长的时间，造成不愉快。为此，可采用拼接图像的方法，来解决长时间等待的问题，减少等待中的枯燥。 拼接图像的方法就是用图像处理
16、软件（例如：Photoshop、照片编辑器、Fireworks和Flash等）将一幅较大的图像切割成几部分，每部分图像分别以不同的名字存成文件。在网页中再将它们分别调出，并“无缝”拼接在一起，形成一个完整的图像。采用这种方法，并不能使整幅图像的下载时间减少，但它可以让浏览者看到图像部分的下载过程。,第44页,三、操作步骤,切割图像 在微软中文Office的照片编辑器软件中对图像进行切割操作，步骤如下： 运行照片编辑器软件后，单击“文件”“打开”菜单命令，弹出“打开”对话框。选中“PICTURE/HEHUA.JPG”图像文件，单击“打开”按钮，即可将图像打开。为了切割准确，可单击“视图”“标尺”菜单命令，调出图形左边与上边的标尺。 单击“常用工具”栏内的 按钮，再在图像左上角单击鼠标并向右边拖曳，拖曳出一个占图像1/3大小的虚线矩形，表示选中了虚线矩形内的图像。,第45页,占图像1/3大小的虚线矩形,第46页,然后单击“编辑”“剪切”菜单命令，将选中的图像剪切到剪贴板中，原来选中虚线矩形区域中的图像已经消失。 单击“编辑
