网页设计与制作教学资料 项目5 超链接的创建.docVIP

项目5 超链接的创建——理论部分 回顾 查看HTML文档源代码方式有哪几种？ HTML文档的结构主要包括哪几部分？ 解释常见的文本相关标记的含义。 解释图像标记常用属性的含义。 解释移动标记主要属性的含义。 目标 会创建内部链接 会创建外部链接 会修改页面中的相对/绝对路径 相关理论—链接介绍 讲解 链接的作用和意义 绝对路径和相对路径 链接类型 内部链接 浏览内部文件 电子邮件链接 指向文件链接 创建命名锚记 外部连接 为外部文件键入或粘贴 URL 理论案例1—首页到商品展示页的链接 需求描述 页面之间链接 涉及的知识点 文本链接 相关理论1—创建文本链接的方法及其属性 讲解 创建文本链接的方法 链接常用属性介绍 相关理论2—文本链接对应的HTML代码 讲解 文本链接对应的HTML代码 a href=commoditys_show.html target=_blank手机充值/a 操作步骤（演示并讲解） 选中文本 （2）输入要链接到的HTML文档 设置目标打开方式 （4）保存完成案例1 理论案例2—展示页到详细信息页的链接 （讲解实现思路） 需求描述 页面之间链接 涉及的知识点 图像链接 完成效果 小结 举例说明绝对路径与相对路径区别。 简述创建文本链接的方法。 简述图像链接与文本链接的异同。 相关理论1—创建图像链接的方法 讲解 创建图像链接的方法 选中图像，在属性检查器中“链接”文本框中输入要链接的页面 右击要创建链接的图像à选择“创建链接” 相关理论2—图像链接对应的HTML代码 讲解 图像链接对应的HTML代码 a href=commoditys_detailInfo.html target=_blank img src=img/commodity_huaping.jpg width=74 height=74 border=0/ /a 操作步骤 选中文本 （2）输入要链接到的HTML文档 设置目标打开方式 （4）保存完成案例1 理论案例3—锚链接和电子邮件链接 需求描述 客服页的锚链接和电子邮件链接 涉及的知识点 锚记链接 电子邮件链接 相关理论1—锚记链接 讲解 创建锚链接的方法 锚记链接对应的HTML代码 A href=#free IMG src=img/reg1.jpg width=95 height=47“ border=0 /A…… A name=free/A如何免费注册为会员？ 操作步骤（演示并讲解相关知识） （1）插入命名锚记 （2）创建锚链接 （3）给文本“返回”添加锚记链接 相关理论2—电子邮件链接 讲解 创建电子邮件链接的方法 选择菜单“插入记录”à“电子邮件链接” 选择“插入”栏的“常用”类别中的“电子邮件链接”图标 在属性检查器中“链接”文本框中输入电子邮件地址 电子邮件链接对应的HTML代码 A href=mailto:webmaster@联系我们/A 操作步骤 （1）选中文本 （2）输入E-mail地址 （3）保存完成案例3 总结并布置作业 绝对路径与相对路径的区别与联系。 简述创建文本链接的三种方法。 简述创建图像链接的两种方法。 简述创建电子邮件链接的三种方法。 解释锚记链接适用的场合。 项目5 超链接的创建 ——上机部分 相关理论回顾 什么是文本链接？ 什么是图像链接？ 创建锚记链接的过程。 创建电子邮件链接有哪三种方法？ 上机目标 拍拍网部分链接的制作 拍拍网商品购买页布局搭建 拍拍网客服页的制作 实练案例1—拍拍网部分链接的制作 需求描述 给页面??的文本和图像创建链接 实现思路 选中文本或图像 创建文本链接 创建图像链接 实练案例2—拍拍网商品购买页布局搭建 需求描述 搭建购买页面布局，并创建图像链接 实现思路 对购买页面进行布局 打开商品详细信息页 为图像创建链接 实练案例3—拍拍网客服页的制作 需求描述 制作拍拍网客服页面，并添加文本链接、电子邮件链接和锚记链接 实现思路 使用表格对客服页进行布局 创建文本链接 创建电子邮件链接 创建锚记链接 共性问题集中讲解 总结并布置作业