2016网页设计与制作DreamWeaver教案：第七讲 超级链接与导航栏.docVIP

第七讲　超级链接与导航栏 +授课日期 班级名称 授课地点 教学课题 第八讲超级链接与导航栏 课时 2学时 教学目的 （1）掌握创建外部链接和内部链接的操作方法。 （2）掌握制作图像映射的操作方法。 （3）掌握创建E-mail链接的操作方法。 （4）掌握测试链接的有效性的操作方法。 知识目标 （1）创建外部链接和内部链接。 （2）制作图像映射。 （3）创建E-mail链接。 （4）测试链接的有效性。 能力目标 创建常用超链接、导航栏 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 常用超链接的创建方法 难点 模板 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社 教学环节 及 板书设计 时间安排 1．复习提问 鼠标经过图像与导航条有何区别？ 2 2．新课引入 网页中的链接是怎样建立的呢？常见的链接有哪些？ 3 3．知识技能目标说明 为文字添加字幕效果，创建栏目、脚本、锚点、网站、E-mail、下载链接，更改链接颜色、打开方式，测试链接有效性 5 详细讲解各知识点 45 5．问题探讨 添加滚动字幕、创建链接还有什么方法？ marquee/marquee 5 课堂实践 15 疑难解析 7 提问与讨论 3 课堂小结 3 作业布置 2 总计 90 新授内容 1.超级链接概述 （1）绝对路径 （2）文档目录相对路径 （3）站点根目录相对路径 2.创建超级链接创建站点和主页 （1）新建网页 （2）编辑网页 （3）创建超级链接:创建外部链接、创建文本形式的内部链接、制作图像映射、创建E-mail链接 （4）链接检查： 3．导航栏简介 课堂案例3：编织网站链接——足球新闻（news.htm） 操作步骤： 准备网页内容 将素材ch3\news.htm文档复制到站点的news文件夹下,取代原来所创建的news.htm文档。 将素材ch3\image文件夹下所有文件，复制到站点的image文件夹下。 创建内部超链接 内部链接指网站内部页面之间创建的相互链接关系。 选中news.htm中“首页”，链接index.htm，目标：_blank。 用同样的方法，可创建“我与足球”、“明星照片”的链接。 创建外部链接 以http://开头的，称为绝对地址。 选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如选中“世界杯新闻的条目” 创建E-mail链接 选中“联系我们”，输入链接：mailto:gy123@163.com 创建锚点链接 是指同一个页面中的不同位置链接。 1）创建命名锚记 将光标定位在要设置标记的位置， 插入栏｜命名锚记｜输入锚记名称（注意：区分大小写） 2）创建到命名锚记的链接 选择要创建链接的文本或图像 在属性面板的链接文本框中，键入＃号和锚记名称 或在浏览对话框中，选中要链接的文件后加＃和锚记名称。 依次创建页中标题的命名锚记如下： 链接按钮 锚记 足坛综合新闻 创建跳转菜单 下方友情链接创建 1）插入栏｜表单｜跳转菜单 2）在“插入跳转菜单”对话框中，单击＋号添加菜单项 3）在“选择时。转到URL”文本框中，输入该文件的路径。 国际足球 中文网 华翼网 多来米中文网 迷球网 创建“图像地图” 1）选中“地图”图像 2）在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。 3）为绘制的每一个热区设置不同的链接地址“”和替代文字“ESPNSTAR中文网”。 课堂实践 打开课堂实战文件夹ch3/3-02.html,在页面下方的“小屋”图片上，创建返回首页的超链接； 创建“与我联系”的Email超链接； 创建“关于我”的空链接； 创建页面上方图片中个个小圆的热点链接（图像地图） 疑难解析 问题1：如何链接到网页文档中的特定位置？ 问题2：如何在网页中创建文件下载链接？ 课外拓 展实践 1．在“个人网站设计”站点文件夹“10超级链接”中创建网页文档“10.html”。 2．为该网页的上部导航栏和底部导航栏设置超级链接。 作业 尝试用其他方法实现字幕、超链接 课后评析