2016网页设计与制作DreamWeaver教案：第六讲 图像操作.docVIP

第六讲　图像操作 授课日期 班级名称 授课地点 教学课题 第六讲图像操作 课时 2学时 教学目的 灵活地运用图像来为网页添加各种效果 知识目标 （1）掌握图像的插入方法。 （2）掌握图像属性的设置方法。 （3）掌握图像与文本混合编排的方法。 （4）掌握插入鼠标经过图像的方法，了解插入图像占位符的方法。 能力目标 （1）图像的插入。 （2）图像属性的设置。 （3）图像与文本混合编排。 （4）插入鼠标经过图像。 素质目标 培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力 重点 图像属性的设置、图像与文本混合编排 难点 插入鼠标经过图像的方法、插入图像占位符 课型 讲授型 教学方法 采用启发示的教学方式循序渐进的讲解新课内容 教学手段 多媒体教学 教参 《网页设计与制作》教程人民邮电出版社 教学环节 时间安排 复习提问： 在半角输入状态，怎么样才能连续输入多个空格？ 5 2.新课引入 通过上次实验，可看出文本、图片对页面的润色起着主要作用 5 知识技能目标说明：介绍本次课要掌握的知识目标 8 讲解各知识点：具体讲述本次课新课内容 40 课堂实践： 15 问题探讨：当我们浏览网页时，常常可以见到网页题头有不断变换的图像，是怎么实现的呢？ 5 疑难解析 5 8．归纳总结： 本次课主要学习了在页面上插入普通图像、插入鼠标经过图像的方法；学会设置图像的属性；熟练调整图像的位置及大小，尤其是在图文混排时，要能够很好地将它们对齐。在今后的网页制作过程中，要能够灵活地运用图像来为自己的网页增添各种效果。 4 作业布置 3 总计 90 新授内容 1.图像概述 2．图像操作 （1）插入图像 （2）设置图像属性 （3）编辑图像 3．插入相关图像元素 （1）插入“鼠标经过图像” （2）插入导航条 （3）插入图像占位符 案例2：我与足球（me.htm） 操作步骤： 新建或打开网页 打开D:\myfootball\me.html。 把素材ch2中的图片素材拷到image文件夹中。 设置页面属性 修改/页面属性：左、右、上、下边距都设为0 背景图像：bg.jpg 设置头部信息 标题输入：我与足球 插入“作者”信息，插入记录/HTML/文件头标签/META/值：author，在“内容”中输入“李小东”，即自己的名字。 插入“关键字”，插入记录/HTML/文件头标签/关键字，输入“设计开发，教育培训，图书出版，关于我们”关键字，并以逗号隔开。 插入“说明”：“这里是“我与足球”网站”。 插入“刷新” 查看“代码” 添加页面元素 插入文本：将素材里me.txt文件中的内容全部拷贝到me.html。将“我与足球”水平居中，字体设置“华文彩云”，大小24，颜色为#999900，粗体，斜体。 插入横幅图像：替代文本为“我的足球网” 图文混排：在左边插入图像girl.jpg，左对齐，垂直与水平边距均为10， 图像的编辑：右击可以借助计算机里有的图像编辑器来编辑图像。 插入“鼠标经过图像”效果：插入/图像对象/鼠标经过图像，原始图像：mtd5，鼠标经过图像：mtd5_2 插入水平线：插入/HTML/水平线 插入/日期 插入特殊字符：插入/ HTML/特殊字符 版权：最后更新日期：2011年9月2日星期五 Copyright ? 个人网站设计 设置超链接 将光标放到网页横幅图像的下一行，水平居中。 输入“主页”、“明星照片”、“足球新闻”，将中文输入法切换到全角方式，按空格键，输入几个连续的空格用来间隔文字。 选中“主页”链接index.htm，同样设置其它链接。 课堂实践 案例：再别康桥 1、合理安排图像与文字的位置。 2、利用图像编辑软件，完成对图片的艺术处理。 3、右下方的图片具有鼠标经过后翻转成另外一幅图像的特点。 疑难解析 问题1：网页中的图文混排时，如何调整图像与文字之间的间距？ 问题2：网页中图文混排时，如何创建文字环绕图像的效果？ 课外拓展 在“我的足球网”站点文件夹“news”中创建一个网页文档“03.html”,内容是关于足球新闻，然后插入图片和文字，实现图文混排效果。 课后评析