项目4添加网页基本元素.doc.doc

《 网页设计与制作 》课程教案 一、教案头 教学单元标题：添加网页基本元素6学时 上课地点 北区实D602，D603，D304 授课班级 15软件1班 15软件2班 15软件3班 上课时间 周三5-8节 周四5-6节，周五1-2节 周四7-8节，周五3-4节 教 学 目 标 能力（技能）目标 知识目标 1. 文本处理 2. 添加图像 3. 添加多媒体元素 4. 添加超链接 1、输入空格、换行符及特殊字符 2、设置文本样式 3、滚动字幕 4、创建项目列表及编号列表 5、插入水平线与日期 6、添加图像及设置图像属性 7、插入鼠标经过图像 8、插入SWF动画 9、插入FLV视频 10、添加网页背景音乐 11、内部链接与外部链接 12、添加电子邮件链接 13、锚点链接 14、热点链接 教 学 重 难 点 教学难点 教学重点及解决方式 设置文本样式：字号、字体、颜色与对齐方式 经过图像 链接与外部链接 设置文本样式 插入SWF动画 插入FLV视频 添加超链接 1. 杨颖，杨秀萍，胡国生. Dreamweaver CS6网页设计与制作项目驱动教程[M].重庆：西南师范大学出版社，2014 2. 钟阳晶，赖小平，马国勤.网页设计与制作[M].北京：北京师范大学出版社，2011 二、参考网站： 1. 《网页设计与制作》精品资源共享课程8:8080/skills/solver/classView.do?classKey=9109747 2. W3School 3. 素材资源库 4. 设计资源站 5. 网页制作大宝库 6. 站酷 7. 圆点视线 8. 站长素材 9. 千图网 / 10. 太平洋学院 /pcedu/sj/wz 11. 蓝色理想 12. 天极网 13. 网页设计师联盟 14. 七色鸟设计空间 二、教学设计 教学步骤 教学内容 教学方法 教学手段 学生活动 时间分配 知识基础 一、输入文本也可以使用快捷键、和 鼠标经过图像是一种动态图像，表示在浏览过程中当鼠标光标经过图像时图像会发生变化。鼠标经过的图像由原始图像（首次载入页面时显示的图像）和鼠标经过图像（当鼠标光标经过原始图像时显示的图像）组成，当鼠标光标移动到原始图像上时，将会显示鼠标经过图像，鼠标光标移出图像范围时则显示原始图像。选择菜单【插入】→【图像对象】→【鼠标经过图像】，弹出插入鼠标经过图像对话框，按需要选择原始图像和鼠标经过图像，可完成此项操作。、SWF”，或者将“插入”面板切换到“常用”类别，点击“媒体：SWF”按钮 ，打开“选择文件”对话框，选择要插入的.swf文件即可。 在编辑窗口中插入Flash动画后，并不能马上看到动画效果，只有点击属性面板上的“播放”按钮时才能播放动画。在浏览器中浏览网页时，Flash动画也可以播放出来。 我们可以通过属性面板修改Flash动画的大小、品质、参数等属性。 除了Flash动画外，网页中还可以加入音乐、视频等其他多媒体文件，使用菜单“插入→媒体→插件”，或使用“插入”面板中的“媒体：插件”按钮 ，在打开的“文件选择”对话框中，选择要加入的多媒体文件即可。能够加入网页中的多媒体文件格式主要包括：.mp3、.mid、.rm、.asf、.wmv、.mov等，但要注意文件尺寸不要过大，而且客户端必须事先安装这些多媒体文件的播放程序，否则会影响网页浏览效果。 四、插入超链接 3）绝对路径 在链接中使用完整的URL地址,包括协议部分。如/it/index.html，链接外部服务器上的文件时，必须使用绝对路径。 4）文件相对路径 以当前文件所在位置为起点到被链接文件所经由的路径，省略掉对于当前文件和所链接文件都相同的部分。如../it/index.html，只要站点结构和文件位置不发生改变，链接就不会发生错误。 5）站点根目录相对路径 从当前站点的根目录开始到被链接文件所经由的路径，总是以/开头，表示站点根文件夹。如/eclass/intro.html。 6）链接的类型： 1. 文件链接：链接到其他文件，如图片、word文档、影片等。 对某些格式的文件如*.zip *.rar *.exe和一些音频视频文件等，浏览器默认的链接方式都是下载文件。 2. Email邮件链接 格式：mailto:username@163.com 3. 空链接 # 4. 锚记链接 命名锚记可以使我们快速找到文档中的指定位置，尤其在一些内容很长的网页中，链接到命名锚记的情况比较常见。 5. 热点链接 教学多媒体课件及图片展示 明确问题、准备资料 45分钟 案例示范 例4-1 在Dreamweaver CS6中打开素材网页4-1.html，在文档中单击鼠标左键，将光标置于