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

尚辅网 / 中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 3.1 【案例6】“花展值班表”网页 案例效果 “花展值班表”网页中，标题文字“花展值班表”图像两边各有一个卡通小孩图像（GIF格式），它们与标题之间有花纹图案。“花展值班表”标题图像的下边是一个值班表格。 第3章 创建表格和插入其他对象 操作步骤 （1）将选定的小孩图像添加到页面的光标处并适当调整图像的大小。 （2）在GIF格式动画“儿童1.gif”的右边插入一个“【案例6】花展值班表”文件夹内的“小花1.GIF”GIF格式动画，再插入一幅“世界名花花展值班表.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）在表格的各单元格中输入不同颜色的文字。 相关知识 1．“表格”对话框各选项的作用 2．表格和单元格标签 利用“表格”快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。 利用该菜单中的菜单命令，可以对表格的单元格进行选择、清除和插入操作。 3．选择和调整表格 4．设置整个表格的属性 5．设置表格单元格的属性 6．表格基本操作 （1）插入一行或一列 （2）插入多行或多列 （3）利用表格的快捷菜单删除表格中的行与列 （4）利用清除命令删除表格中的行与列 （5）复制和移动表格的单元格 3.2 【案例7】“世界名花—梅花”网页 案例效果 “世界名花—梅花”网页是利用表格编排的网页，整个网页分为几个单元格，各单元格内分别插入GIF格式动画、标题图像、文字。利用表格来编排网页可使页面更紧凑、丰富和多彩。 操作步骤 （1）新建一个网页文档，插入一个5行5列的表格，然后进行表格的合并和调整，设置单元格的背景颜色。 （2）将选定的GIF动画加入到光标所在的单元格中。 （3）在第1行中间的单元格内导入红色立体文字“GIF/世界名花-梅花.gif”图像，同样的方法插入所有的图片。 （4）在Word编辑窗口内选中一段文字粘贴到第4行单元格内。 （5）取消显示表格线， 保存网页文档。 相关知识 1．在表格中插入对象 （1）在表格中插入表格：单击要插入表格的单元格内部。 （2）在表格中插入图像或文字：单击要插入对象的单元格内部。 2．表格数据的排序 （1）对表格单元格中数据排序的要求：对表格单元格中的数据排序，要求表格的行列是整齐的，而且没有进行合并和拆分过。 单击“命令”→“排序表格”菜单命令。 （2）“排序表格”对话框选项的含义 3.3 【案例8】“鲜花图像浏览”网页 案例效果 页面的背景是一幅风景图像的水印画，第1行中间是红色立体文字“鲜花图像浏览”图像，它是该网页的标题；在标题的两边各有两幅小图像，小图像和标题之间有空间；在标题的下面有一个导航栏，显示5幅文字图像，将鼠标移到这些导航文字图像之上时，文字图像会变为相应的小鲜花图像，单击这些小鲜花图像后可以链接到相应的网页页面，显示相应的高清晰大图像或相应的网页。 导航栏的下面是10幅小图像，单击其中一幅图像后，弹出的一个相应的网页，其中显示该图像的高清晰画面。在页面底部的左边显示一个GIF动画，右边显示网页制作的时间。 操作步骤 1．准备素材 2．创建图像链接 （1）插入一个5行5列的表格，然后进行表格的合并和调整。导入“鲜花图像浏览.gif”的标题图像。 （2）在第3行和第4行的10个表格单元格内插入10幅鲜花图像，建立网页中的小图像与高清晰度图像的链接。 （3）将最下边一行中左边的单元格中插入动画11.gif，再调整该动画画面的大小。 3．插入时间 单击网页文档的空白处完成页面属性设置，将光标移到最下边一行中右边的单元格中，单击“插入”（常用）栏中的“日期”按钮，在单元格中插入当前日期、星期和时间。 4．插入导航条 （1）将光标定位到插入导航条的位置，单击“插入”（常规）栏中的“图像”快捷菜单中“导航条”按钮。 （2）在“插入导航条”对话框中进行各选项的设置. （3）导入KB.jpg空白图像。 （4）增加一个动态图像按钮，导入“【案例8】鲜花图像浏览/鲜花”文件夹内的“长寿花.jpg”图像。 （5）增加一个动态图像按钮。在“项目名称”文本框内输入KB2，在“状态