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

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

1、（中职）中文Dreamweaver CS3案例教程（第二版）第三章ppt课件中文中文Dreamweaver CS3案例教程案例教程（第二版）（第二版）3.1 【案例6】“花展值班表”网页案例效果案例效果“花展值班表”网页中，标题文字“花展值班表”图像两边各有一个卡通小孩图像（GIF格式），它们与标题之间有花纹图案。“花展值班表”标题图像的下边是一个值班表格。第第3章章 创建表格和插入其他对象创建表格和插入其他对象操作步骤（1）将选定的小孩图像添加到页面的光标处并适当调整图像的大小。（2）在GIF格式动画“儿童1.gif”的右边插入一个“【案例6】花展值班表”文件夹内的“小花1.GIF”GIF格

2、式动画，再插入一幅“世界名花花展值班表.jpg”标题文字图像，一个GIF格式动画“小花2.GIF”。（3）按【Ctrl】键，同时拖动GIF格式动画“小花1.GIF”3次到其右边，复制3个GIF格式动画“小花1.GIF”。按【Ctrl】键，同时拖动GIF格式动画“小花2.GIF”到其右边，复制3个GIF格式动画“小花2.GIF”。按【Ctrl】键，同时拖动GIF格式动画“儿童1.gif”到最右边，复制一个GIF格式动画“儿童1.gif”。（4）制作出一个13行、8列、边框粗细为8个像素、表格宽度200像素的表格。（5）合并单元格，设置背景颜色。（6）在表格的各单元格中输入不同颜色的文字。相关知识

3、相关知识1“表格”对话框各选项的作用2表格和单元格标签利用“表格”快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。利用该菜单中的菜单命令，可以对表格的单元格进行选择、清除和插入操作。3选择和调整表格4设置整个表格的属性5设置表格单元格的属性6表格基本操作（1）插入一行或一列（2）插入多行或多列（3）利用表格的快捷菜单删除表格中的行与列（4）利用清除命令删除表格中的行与列（5）复制和移动表格的单元格3.2 【案例案例7】“世界名花世界名花梅花梅花”网页网页案例效果案例效果“世界名花梅花”网页是利用表格编排的网页，整个网页分为几个单元格，各单元格内分别插入GIF格式

4、动画、标题图像、文字。利用表格来编排网页可使页面更紧凑、丰富和多彩。操作步骤（1）新建一个网页文档，插入一个5行5列的表格，然后进行表格的合并和调整，设置单元格的背景颜色。（2）将选定的GIF动画加入到光标所在的单元格中。（3）在第1行中间的单元格内导入红色立体文字“GIF/世界名花-梅花.gif”图像，同样的方法插入所有的图片。（4）在Word编辑窗口内选中一段文字粘贴到第4行单元格内。（5）取消显示表格线，保存网页文档。相关知识相关知识1在表格中插入对象（1）在表格中插入表格：单击要插入表格的单元格内部。（2）在表格中插入图像或文字：单击要插入对象的单元格内部。2表格数据的排序（1）对表格

5、单元格中数据排序的要求：对表格单元格中的数据排序，要求表格的行列是整齐的，而且没有进行合并和拆分过。单击“命令”“排序表格”菜单命令。（2）“排序表格”对话框选项的含义3.3 【案例案例8】“鲜花图像浏览鲜花图像浏览”网页网页案例效果案例效果页面的背景是一幅风景图像的水印画，第1行中间是红色立体文字“鲜花图像浏览”图像，它是该网页的标题；在标题的两边各有两幅小图像，小图像和标题之间有空间；在标题的下面有一个导航栏，显示5幅文字图像，将鼠标移到这些导航文字图像之上时，文字图像会变为相应的小鲜花图像，单击这些小鲜花图像后可以链接到相应的网页页面，显示相应的高清晰大图像或相应的网页。导航栏的下面是1

6、0幅小图像，单击其中一幅图像后，弹出的一个相应的网页，其中显示该图像的高清晰画面。在页面底部的左边显示一个GIF动画，右边显示网页制作的时间。操作步骤1准备素材2创建图像链接（1）插入一个5行5列的表格，然后进行表格的合并和调整。导入“鲜花图像浏览.gif”的标题图像。（2）在第3行和第4行的10个表格单元格内插入10幅鲜花图像，建立网页中的小图像与高清晰度图像的链接。（3）将最下边一行中左边的单元格中插入动画11.gif，再调整该动画画面的大小。3插入时间 单击网页文档的空白处完成页面属性设置，将光标移到最下边一行中右边的单元格中，单击“插入”（常用）栏中的“日期”按钮，在单元格中插入当前日

7、期、星期和时间。4插入导航条（1）将光标定位到插入导航条的位置，单击“插入”（常规）栏中的“图像”快捷菜单中“导航条”按钮。（2）在“插入导航条”对话框中进行各选项的设置.（3）导入KB.jpg空白图像。（4）增加一个动态图像按钮，导入“【案例8】鲜花图像浏览/鲜花”文件夹内的“长寿花.jpg”图像。（5）增加一个动态图像按钮。在“项目名称”文本框内输入KB2，在“状态图像”栏文本框中输入KB.jpg，在“鼠标经过图像”文本框中输入KB.jpg。（6）增加一个动态图像按钮。导入“东方罂粟文字.jpg”图像；单击“鼠标经过图像”导入“东方罂粟.jpg”图像；单击“按下时，前往的URL”导入“世界

8、名花东方罂粟.html”网页；（7）按照上述方法，继续完成其他3个空白图像和3个动态图像按钮的设置。（8）单击表格的边框，在表格“属性”栏内的“边框”文本框内输入“1”，表格线框粗细为1个像素。单击“文件”“保存”菜单命令，保存网页文档。相关知识相关知识1插入特殊字符和水平条（1）插入特殊字符：单击“插入”（文本）栏内的“字符”按钮（2）插入水平线：单击“插入”（HTML）栏中的“水平线”按钮。2插入Fireworks HTML（1）单击“插入”（常用）栏的“图像”快捷菜单中的Fireworks HTML按钮。（2）在“Fireworks HTML 文件”文本框内输入Fireworks文件目录

9、与文件名或单击“浏览”按钮，弹出“选择Fireworks HTML 文件”对话框，利用该对话框选择Fireworks生成的HTML格式文件名，再单击“确定”按钮，即可插入Fireworks图像或动画。3.4 【案例案例9】“多媒体播放器多媒体播放器”网页网页案例效果案例效果“多媒体播放器”网页给出了4个多媒体播放器，可以分别播放MP3、AVI、WAV和MIDI文件。网页中使用插件，分别导入MP3、AVI、WAV和MIDI文件。利用浏览器内4个多媒体播放器可以控制4个对象的播放状态，音乐和视频可以同时播放。操作步骤操作步骤（1）单击“插入”（常用）栏中的“媒体”快捷菜单中的“插件”按钮，选择一个

10、MP3文件。（2）再插入3个插件，插件内分别导入一个AVI文件、一个WAV文件和一个MIDI文件。相关知识相关知识1插入插件2插入Shockwave影片单击“插入”栏中的“媒体”快捷菜单中的Shockwave按钮。3.5 【案例案例10】“Flash作品展示作品展示”网页网页案例效果案例效果“Flash作品展示”网页第1行是网页的“Flash作品展示”标题文字图像，在标题两边各有一个按钮，在标题下面是6幅图像，这6幅图像是6个Flash动画播放中的一幅画面。单击其中任何一幅图像，即可打开另一个网页窗口，播放相应的Flash动画，单击按钮，可以打开另一个网页窗口，播放相应的Flash动画。操作步

11、骤操作步骤（1）新建一个网页文档，网页标题为“作品展示”。（2）新建一个名称为“动感宝宝照相馆.html”网页文档，插入一个Flash动画“动感宝宝照相馆.swf”。同理将所有网页文档插入相应动画。（3）在“Flash作品展示.html”网页的第1行插入JPG文件夹内的“Flash作品展示.jpg”标题文字图像，在网页的第2行依次插入JPG文件夹内的所有图像。（4）将光标定位在第1行左边空白图像的左边插入第一个Flash按钮。在第1行右边空白图像的右边，插入第2个Flash按钮。（5）选中网页内第2行的第1幅图像建立该图像与“动感宝宝照相馆.html”网页的链接（6）按照上述方法，继续建立第2

12、行内的其他图像分别与“开门式动画切换.html”、“山清水秀新汶川.htm”、“文字围绕自转地球.html”、“我也要救灾.html”和“动画翻页画册.html”网页的链接。相关知识相关知识1插入Flash动画单击“插入”（常用）栏中的“媒体”快捷菜单中的“Flash”按钮。在“选择文件”对话框中选择要导入的SWF文件。2插入Flash按钮单击“插入”栏中的“媒体”快捷菜单中的“Flash按钮”。3插入Flash文本单击“插入”（常用）栏中的“媒体”快捷菜单中的“Flash文本”按钮。3.6 【案例案例11】“居室图像和居室图像和Flash动画浏览动画浏览”网页网页案例效果案例效果网页中插入了

13、两个Java Applet程序对象，可以分别交替显示5幅图像。在两个Java Applet程序对象之间插入一个图像查看器，可以不断自动切换显示10幅图像，单击图像查看器中的按钮，还可以控制图像的显示，单击前5幅图像，可以链接到不同的子页面。网页中下边还有5幅小图像。单击页面底部的小图像，可以链接到相应的子页面。操作步骤操作步骤（1）创建Flash1.htm、Flash2.htm、Flash3.htm、Flash4.htm和Flash5.htm 5个网页，其内分别导入“SWF”文件夹内的5个SWF格式的Flash动画。（2）新建一个网页文档，标题为“居室图像和Flash动画浏览”。（3）在网页的

14、第1行，插入一幅“居室图像和Flash动画浏览”标题文字图像（4）单击“插入”（常用）栏中的“媒体”快捷菜单中的Applet按钮，在页面中插入一个Java Applet对象。（5）单击“属性”栏中的“参数”按钮，输入Applet程序需要使用的参数。（6）保存Flash元素（7）单击“窗口”“标签检查器”菜单命令，设置“编辑imageURLS数组”对话框，设置“编辑imageLinks数组”对话框。（8）在图像查看器对象的右边再插入一个Java Applet对象。图像改为21.jpg、22.jpg、23.jpg、24.jpg和25.jpg。（9）为图像建立链接，链接的网页是Flash1.htm、Flash2.htm、Flash3.htm、Flash4.htm和Flash5.htm。相关知识相关知识1插入Applet单击“插入”（常用）栏中的“媒体”快捷菜单中的Applet按钮，载入扩展名为.class的Java Applet程序文件。2插入“图像查看器”3插入ActiveX