（中职）中文Dreamweaver CS3案例教程（第二版）第二章教学课件.ppt

《（中职）中文Dreamweaver CS3案例教程（第二版）第二章教学课件.ppt》由会员分享，可在线阅读，更多相关《（中职）中文Dreamweaver CS3案例教程（第二版）第二章教学课件.ppt（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）中文Dreamweaver CS3案例教程（第二版）第二章ppt课件中文中文Dreamweaver CS3案例教程案例教程（第二版）（第二版）2.1 【案例1】“中文Dreamweaver CS3学习天地”网页中文Dreamweaver CS3学习天地网页”是一组网页，用来介绍学习中文Dreamweaver CS3的一系列使用问题，各网页的制作方法基本一样。操作步骤操作步骤1将Word文档生成的网页进行优化2网页页面属性设置相关知识相关知识1新建和打开网页文档（1）新建网页文档（2）打开网页文档2保存文档和关闭文档3页面属性设置4建立本地站点第第2章章 网页中插入文字和图像网页中插入文

2、字和图像2.2 【案例案例2】“世界名花世界名花杜鹃花杜鹃花”网页网页案例效果案例效果“世界名花杜鹃花”网页是“世界名花”网站中的一个网页.，“世界名花杜鹃花”网页的显示效果。操作步骤操作步骤1输入文字在Dreamweaver CS3文档的“设计”视图窗口内，选中窗口内部，输入“世界名花杜鹃花”文字。2插入图像相关知识相关知识1创建网页文字的其他方法（1）键盘输入和复制粘贴文字（2）使用“插入”（文本）面板2文本属性的设置（1）文字标题格式的设置（2）创建字体组合（3）文字其他属性的设置3文字的列表设置（1）设置列表选中要排列的文字段，再单击文字“属性”栏。（2）修改列表属性将光标移到列表文字

3、中，再单击“文本”“列表”“属性”菜单命令。4文字的复制与移动、拼写检查（1）文字的复制与移动按【Ctrl】键的同时拖动选中的文字，可以复制文字；直接拖动选中的文字，可以移动文字；还可以采用剪贴板进行复制与移动。（2）文字的拼写检查单击“文本”“检查拼写”菜单命令。5文字的查找与替换单击“编辑”“查找和替换”菜单命令。6图文混排调整图像与文字混排的布局需要使用图像“属性”栏。2.3【案例案例3】“世界名花世界名花荷花荷花”网页网页案例效果案例效果“世界名花荷花”网页是“世界名花”网站中的一个网页，该网页内有大量的荷花图像和相应的文字说明。“世界名花荷花”网页的显示效果如图。操作步骤操作步骤（1

4、）导入背景图像，命名为“世界名花荷花.htm”。（2）输入文字“世界名花荷花”标题文字和段落文字。（3）将荷花的图像加入到页面的光标处。（4）调整图像的高度，大小等。（5）在每幅图像之间插入一些空，使每幅图像之间显示有一定的间隔。（6）在4幅图像的下边，输入文字“荷花hehua”。（7）选中第1幅图像，在其“属性”栏内的“链接”文本框中输入“荷花简介.htm”，在“替换”文本框中输入“这是一幅荷花图像”文字。（8）制作一个“荷花简介.htm”网页。相关知识相关知识1在网页中插入图像的方法（1）拖动图像（2）利用“插入图像”按钮插入图像单击“插入”（常用）栏的“插入图像”按钮。2图像的移动、复制

5、、删除和调整大小3利用图像“属性”栏编辑图像在选中图像后，设置图像“属性”栏。（1）图像命名（2）调整图像的位置（3）精确调整图像的大小（4）图像的路径（5）链接（6）给图像添加文字提示说明2.4 【案例案例4】修改修改“世界名花世界名花荷花荷花”网页网页案例效果案例效果当鼠标移到中间图像时，中间的图像会翻转为另外一幅荷花图像，同时显示“这是一幅荷花图像”文字，单击该图像，可弹出“荷花介绍.html”网页。操作步骤操作步骤（1）利用“插入鼠标经过图像”对话框选择一幅图像文件“荷花1.jpg”，即加载原始图像。（2）加载了翻转图像，图像文件“荷花5.jpg”。（3）在“插入鼠标经过图像”对话框的

6、“替换文本”文本框中输入“这是一幅荷花图像”文字。（4）利用“按下时，前往的URL”对话框选择“荷花简介.htm”网页文件，设置该网页为与翻转图像链接的网页。（5）删除原来网页中的第3幅图像。再选中新创建的翻转图像，设置属性。相关知识相关知识1鼠标经过图像鼠标经过图像即翻转图，是一最简单、有趣的动态网页效果。2拼图显示图像用图像处理软件将一幅较大的图像切割成几部分，每部分图像分别以不同的名字保存成文件。在网页中再将它们分别打开，并“无缝”地拼接在一起，形成一个完整的图像。（1）将图像打开，单击“工具”栏内的“裁切工具”按钮，将虚线框内的1/5图像裁切出来。（2）单击“文件”“存储为”菜单命令，

7、将切割出的图像以另其他名字存储到磁盘中。（3）单击“窗口”“历史记录”菜单命令，单击面板内的“打开”选项，画布窗口还原，依次从上到下切割出另外4幅图像。（4）光标移到Dreamweaver CS3页面编辑窗口内新一行的左边。然后在光标处插入第1幅切割的图像，例如PC1.jpg图像。（5）在第一行的图像末尾插入一个行中断标记，即回车符。将光标移到下一行，然后插入第2幅。同理插入所有图片。2.5 【案例案例5】“世界名花欣赏世界名花欣赏”网页网页案例效果案例效果“世界名花欣赏”网页是一个以图像为主的网页。页面最上端显示相册标题和副标题文字，标题下边是原图的缩略图。单击缩略图可以浏览原图，单击网页中

8、的“前一个”文字链接，可以浏览前一个原图。单击“下一个”文字链接，可以浏览下一幅图片；单击“首页”文字链接，可以回到主页。操作步骤操作步骤（1）创建一个空白网页文档，单击“命令”“创建网站相册”菜单命令，生成相册。（2）设置网站相册的相关设置。（3）设置“世界名花欣赏”和“世界名花图像浏览”文字属性。（4）将缩略图下边的文字中的“.jpg”删除。（5）单击“查看”“表格模式”“标准模式”菜单命令，将网页模式改为标准模式。设置网页的背景色、标题、副标题和其他说明文字。相关知识相关知识1设置附属图像处理软件（1）单击Dreamweaver CS3“编辑”“首选参数”菜单命令，“分类”列表框内的“文件类型/编辑器”选项，选择“扩展名”列表框和“编辑器”列表框内选项，完成外部图像处理软件编辑器的设置2编辑网页图像设置外部图像处理软件编辑器后，网页中的图像可以使用图像“属性”栏内的图像编辑工具对图像进行编辑。另外，右击网页中要编辑的图像，弹出快捷菜单，利用该子菜单中的一些菜单命令可以编辑选中的图像；单击“编辑以”菜单命令，弹出子菜单，利用该子菜单可以选择外部图像处理软件，利用外部图像处理软件可以加工处理选中的网页图像。