商务网站设计与制作课程资源2017 HTML基本标记 项目三 制作图文混排网页.ppt

讲解与演示--图像概述 目前因特网上支持的图像格式主要有GIF、JPEG、PNG三种。其中GIF和JPEG两格式的图片文件由于文件较小、适合于网络上的传输，而且能够被大多数的浏览器完全支持，所以是网页制作中最为常用的文本格式。 GIF （Graphics Interchange Format）图像文件的特点是：最多只能包含256种颜色、支持透明的前景色、支持动画格式。GIF格式特定的存储方式使得GIF文件特别擅长于表现那些包含有大面积单色区的图像，以及所含颜色不多、变化不繁杂的图像，例如徽标、文字图片、卡通形象等。 JPEG （Joint Photographic Experts Group）图像采用的是一种有损的压缩算法，支持24位真彩色，支持渐进显示效果，即在网络传输速度较慢时，一张图像可以由模糊到清晰慢慢地显示出来，但不支持透明的背景色，适用于表现色彩丰富、物体形状结构复杂的图像，例如照片等。 讲解与演示—知识拓展 １.插入导航条 “鼠标经过图像”实际上是两幅图像的交互变化，如果需要更多的图像交替变化，可以应用Dreamweaver CS3的“导航条”实现。导航条通常是由一系列的图像按钮组成，每个图像按钮可以设置为一个超级链接，并且一个网页中一般只有一个导航条。导航条中每个图像按钮包含4幅图像：“状态图像”、“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”，这四幅图像可以交替变化。 讲解与演示—知识拓展 ２.插入图像占位符 有时因为布局的需要，要在网页中插入一幅图片。此时可以先不插入图片，而使用占位符来代替图片的位置，布局好网页以后再使用占位符来启动Fireworks 8创建图片。 * * * * * * * * 计算机应用技术专业主干课程 项目三 制作图文混排网页 引入新课 网页上的信息大多都是通过文字来表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代，制作网页时，文本的输入与编辑占了制作工作的很大部分。在Dreamweaver CS3中输入文本与在Word中输入文本很相似，都可以对文本的格式进行设置。 图像也是网页中主要元素之一，图像不但能美化网页，与文本相比能够更直观地表达信息。在页面中恰到好处地使用图像能使网页更加地生动、形象和美观。 教学目标 知识目标 （1）掌握应用高级方式创建站点的方法 （2）掌握图像的插入与编辑方法 （3）掌握图像的属性设置方法 技能目标 （1）通过“管理站点”对话框创建站点 （2）应用“高级”方式创建站点 （3）通过“文件”面板创建网页 （4）设置页面背景图像 （5）在网页中插入图像 教学目标 （6）在网页中插入鼠标经过图像的方法 （7）设置图像属性 （8）制作图文混排网页 态度目标 （1）培养独立思考问题、解决问题的能力 （2）培养一定的语言表达能力 （3）培养学生乐观向上的生活态度，用阳光的心态对待本职工作，热爱网页制作行业 （4）培养学生的创新能力及艺术修养，提高创新能力和艺术欣赏水平 （5）培养学生的观察分析能力，养成认真细致的工作态度 （6）培养学生在项目制作中遵守6S管理要求的习惯 课前准备 将“sucai”文件夹复制到本地硬盘 启动Dreamweaver CS3 项目展示 任务：制作图文混排网页 网页主题：瀑布泉 任务描述： （1）应用【站点定义】对话框的“高级”方式创建站点“瀑泉游” （2）应用“文件”面板新建网页“index0301.html” （3）设置网页的背景图像 （4）将Word文档“瀑布之美.doc”导入到网页“index0301.html”中 （5）设置网页中文本的格式 （6）在网页中插入多幅图像 （7）在网页中插入鼠标经过图像 （8）设置图像属性 项目制作任务 任务实现流程： 创建站点→新建网页→设置页面背景图像→导入Word文档→插入图像、设置图像属性→插入鼠标经过图像且设置其属性→预览网页效果 配盘素材导引： 原始文件位置：sucai\task03-1 最终文件位置：xiaoguo\task03-1 项目制作任务 １．应用“高级”方式创建站点“瀑泉游” 【操作要求】 　　应用【站点定义】对话框的“高级”方式创建站点“瀑泉游”。 ２．应用“文件”面板新建网页“index0301.html” 【操作要求】 　　应用“文件”面板在站点“瀑泉游”的“task03-1”目录中新建一个网页文档“index0301.html”。 ３．设置页面的背景图像 【操作要求】 　　设置网页“index0301.html”的背景图像为“bg01.gif”。 讲解与演示 ４．从外部导入文本并设置文本格式 【操作要求】 （1）将W