中文DreamweaverCS3案例教程（第二版）课件作者沈大林等第二章节.pptVIP

尚辅网 / 中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 2.1 【案例1】“中文Dreamweaver CS3学习天地”网页 ‘中文Dreamweaver CS3学习天地’网页”是一组网页，用来介绍学习中文Dreamweaver CS3的一系列使用问题，各网页的制作方法基本一样。 操作步骤 1．将Word文档生成的网页进行优化 2．网页页面属性设置 相关知识 1．新建和打开网页文档 （1）新建网页文档 （2）打开网页文档 2．保存文档和关闭文档 3．页面属性设置 4．建立本地站点 第2章 网页中插入文字和图像 2.2 【案例2】“世界名花—杜鹃花”网页 案例效果 “世界名花—杜鹃花”网页是“世界名花”网站中的一个网页.，“世界名花—杜鹃花”网页的显示效果。 操作步骤 1．输入文字 在Dreamweaver CS3文档的“设计”视图窗口内，选中窗口内部，输入“世界名花—杜鹃花”文字。 2．插入图像 相关知识 1．创建网页文字的其他方法 （1）键盘输入和复制粘贴文字 （2）使用“插入”（文本）面板 2．文本属性的设置 （1）文字标题格式的设置 （2）创建字体组合 （3）文字其他属性的设置 3．文字的列表设置 （1）设置列表 选中要排列的文字段，再单击文字“属性”栏。 （2）修改列表属性 将光标移到列表文字中，再单击“文本”→“列表”→“属性”菜单命令。 4．文字的复制与移动、拼写检查 （1）文字的复制与移动 按【Ctrl】键的同时拖动选中的文字，可以复制文字；直接拖动选中的文字，可以移动文字；还可以采用剪贴板进行复制与移动。 （2）文字的拼写检查 单击“文本”→“检查拼写”菜单命令。 5．文字的查找与替换 单击“编辑”→“查找和替换”菜单命令。 6．图文混排 调整图像与文字混排的布局需要使用图像“属性”栏。 2.3 【案例3】“世界名花—荷花”网页 案例效果 “世界名花—荷花”网页是“世界名花”网站中的一个网页，该网页内有大量的荷花图像和相应的文字说明。“世界名花—荷花”网页的显示效果如图。 操作步骤 （1）导入背景图像，命名为“世界名花—荷花.htm”。 （2）输入文字“世界名花—荷花”标题文字和段落文字。 （3）将荷花的图像加入到页面的光标处。 （4）调整图像的高度，大小等。 （5）在每幅图像之间插入一些空，使每幅图像之间显示有一定的间隔。 （6）在4幅图像的下边，输入文字“荷花hehua”。 （7）选中第1幅图像，在其“属性”栏内的“链接”文本框中输入“荷花简介.htm”，在“替换”文本框中输入“这是一幅荷花图像”文字。 （8）制作一个“荷花简介.htm”网页。 相关知识 1．在网页中插入图像的方法 （1）拖动图像 （2）利用“插入图像”按钮插入图像 单击“插入”（常用）栏的“插入图像”按钮。 2．图像的移动、复制、删除和调整大小 3．利用图像“属性”栏编辑图像 在选中图像后，设置图像“属性”栏。 （1）图像命名 （2）调整图像的位置 （3）精确调整图像的大小 （4）图像的路径 （5）链接 （6）给图像添加文字提示说明 2.4 【案例4】修改“世界名花—荷花”网页 案例效果 当鼠标移到中间图像时，中间的图像会翻转为另外一幅荷花图像，同时显示“这是一幅荷花图像”文字，单击该图像，可弹出“荷花介绍.html”网页。 操作步骤 （1）利用“插入鼠标经过图像”对话框选择一幅图像文件“荷花1.jpg”，即加载原始图像。 （2）加载了翻转图像，图像文件“荷花5.jpg” 。 （3）在“插入鼠标经过图像”对话框的“替换文本”文本框中输入“这是一幅荷花图像”文字。 （4）利用“按下时，前往的URL”对话框选择“荷花简介.htm”网页文件，设置该网页为与翻转图像链接的网页。 （5）删除原来网页中的第3幅图像。再选中新创建的翻转图像，设置属性。 相关知识 1．鼠标经过图像 鼠标经过图像即翻转图，是一最简单、有趣的动态网页效果。 2．拼图显示图像 用图像处理软件将一幅较大的图像切割成几部分，每部分图像分别以不同的名字保存成文件。在网页中再将它们分别打开，并“无缝”地拼接在一起，形成一个完整的图像。 （1）将图像打开，单击“工具”栏内的“裁切工具”按钮，将虚线框内的1/5图像裁切出来。 （2）单击“文件”→“存储为”菜单命令，将切割出的图像以另其他名字存储到磁盘中。 （3）单击“窗口”→“历史记录”菜单命令，单击面板内的“打开”选项，画布窗口还原，依次从上到下切割出另外4幅图像。 （4）光标移到Dreamweaver CS3页面编辑窗口内新一行的左边。然后在光标处插入第1幅切割的图像，例如PC1. jpg图像。 （5）在第一行的图像末尾插入一