电子商务网页制作06课件.ppt

1、主编：谢嵘通过前面的学习我们了解到网页中基本要素包括文本和图像等，下面将详细讲解第三个基本要素：超链接。什么是超链接？它在网页中是如何体现呢？网站中包括一张张的网页，而将这些网页连接起来的纽带就是超链接，它可以是文本也可以是图像等。当我们用鼠标点击链接后会进入另一页面或是打开另一窗口。超链接由源端点和目标端点构成，源端点是创建了超链接的文件，目标端点是通过链接打开的目标网页，通过超链接实现了源端点到目标端点的跳转。项目项目6 6 创建超链接创建超链接 项目导学项目导学 体验活动一：体验活动一：规规划规规划“首页首页”页面超级链接页面超级链接活动任务：了解网站首页中各种类别的超链接。活动指导：登

2、录“淘宝网”、“新浪网”等网站，看看这些网站的首页中是如何规划超链接的，并仔细观察有哪些类别的超链接。项目项目6 6 创建超链接创建超链接 体验活动一：体验活动一：规划规划“首页首页”页面超级链接页面超级链接活动步骤：1.登录“淘宝网”。仔细观察会发现首页中图文形式展现了该网站包括的所有栏目，最新公告信息以及商品类别等，首页中的每个区域的关键字都像书的目录一样清晰简明。项目项目6 6 创建超链接创建超链接 体验活动一：体验活动一：规划规划“首页首页”页面超级链接页面超级链接活动步骤：2.我们再来看看“新浪网”的首页，同样首页列出了所有包含的类别。3.前面我们观察了两个首页的上半部分，我们再来看

3、看网页的底部。“淘宝网”首页底部有进入其它网站的链接，比如“支付宝”等。项目项目6 6 创建超链接创建超链接 体验活动一：体验活动一：规划规划“首页首页”页面超级链接页面超级链接活动步骤：4.点击首页底部的“联系我们”会进入这张页面中，该网页中有电子邮件地址。5.超链接像一本书的目录，在规划首页的超链接时，也应尽量将网站的主要内容以关键字链接的方式在首页中体现出来。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动一后，填写下表 项目项目6 6 创建超链接创建超链接 网页中超链网页中超链接的类别：接的类别：1文本文本2图像图像体验活动二：体验活动二：创建内部超级链接创建内部超级

4、链接活动任务：用“浏览文件”按钮创建内部链接；用“指向文件”按钮创建内部链接。活动指导：内部链接就是它指向的目标端为本站点内的文件。创建链接的操作并不算难，但一定要仔细，不能把链接的路径弄错了，否则进入的目标端点就是错误的。也可以用“指向文件”按钮创建内部链接，这样会更方便快捷。项目项目6 6 创建超链接创建超链接 体验活动二：体验活动二：创建内部超级链接创建内部超级链接活动步骤：1.选中要创建链接的文本。在页面中选择文本“热门书评”。2.在“属性”面板中点击“浏览文件”按钮。项目项目6 6 创建超链接创建超链接 体验活动二：体验活动二：创建内部超级链接创建内部超级链接活动步骤：3.从“选择文

5、件”对话框中找到要链接的目标网页“book.html”，单击“确定”按钮即可。4.选中要创建链接的文本“热门书评”。项目项目6 6 创建超链接创建超链接 体验活动二：体验活动二：创建内部超级链接创建内部超级链接活动步骤：5.在“属性”面板中将鼠标定位在“指向文件”按钮上。6.按住鼠标不放进行拖动，会出现一个箭头，将箭头指向右侧文件窗口中要链接的目标网页“book.html”即可。项目项目6 6 创建超链接创建超链接 体验活动二：体验活动二：创建内部超级链接创建内部超级链接活动步骤：7.链接创建后可以在浏览器中查看效果。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动一后，填写

6、下表 项目项目6 6 创建超链接创建超链接 操作步骤操作步骤创建内部链接的方法1选中要创建链接的文本或图像23体验活动三：体验活动三：创建外部链接创建外部链接活动任务：创建外部链接。活动指导：外部链接所创建的目标端点是外部网站，它是网站与网站间的跳转，在输入URL时一定要完整无误。这里我们用图像来创建一个外部链接。项目项目6 6 创建超链接创建超链接 体验活动三：体验活动三：创建外部链接创建外部链接活动步骤：1.用图像来创建一个外部链接，首先要选中创建链接的图像，比如选中“搜狐网”的图标。2.在“属性”面板上的“链接”文本框中输入URL，例如：http:/即可。项目项目6 6 创建超链接创建超

7、链接 体验活动三：体验活动三：创建外部链接创建外部链接活动步骤：3.创建后可以在浏览器中预览，点击刚创建链接的图像后可进入“搜狐网”主页面。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动三后，填写下表 项目项目6 6 创建超链接创建超链接 操作步骤操作步骤创建外部链接的方法1 选中要链接的文本或是图像23体验活动四：体验活动四：创建电子邮件超链接创建电子邮件超链接活动任务：直接输入地址来创建电子邮件超链接；通过“电子邮件链接”按钮创建电子邮件超链接。活动指导：在“体验活动一”中我们了解到什么是电子邮件超链接，在网页中创建电子邮件超链接可方便用户和我们联系。项目项目6 6 创

8、建超链接创建超链接 体验活动四：体验活动四：创建电子邮件超链接创建电子邮件超链接活动步骤：1.在网页中选中要创建链接的文本“Mail:”。2.在“属性”面板上的“链接”文本框中输入“mailto:”和“”。项目项目6 6 创建超链接创建超链接 体验活动四：体验活动四：创建电子邮件超链接创建电子邮件超链接活动步骤：3.在浏览器中预览，点击该超链接系统会自动启动“Outlook”程序。项目项目6 6 创建超链接创建超链接 体验活动四：体验活动四：创建电子邮件超链接创建电子邮件超链接活动步骤：4.将光标定位在“本站简介”和“售后服务”之间。5.点击“插入”面板上的“电子邮件链接”按钮。项目项目6 6

9、 创建超链接创建超链接 体验活动四：体验活动四：创建电子邮件超链接创建电子邮件超链接活动步骤：6.在弹出的“电子邮件链接”对话框中输入相关信息。在“文本”栏输入“联系我们”，“E-Mail”栏输入要链接的邮箱地址，最后单击“确定”按钮。7.在光标定位的位置显示出文本“联系我们”，在“属性”面板上的“链接”文本框也显示出邮箱地址。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动四后，填写下表 项目项目6 6 创建超链接创建超链接 操作步骤操作步骤创建电子邮件链接的方法1 点击“插入”面板上的“电子邮件链接”按钮。234.体验活动五：体验活动五：创建锚链接创建锚链接活动任务：创建

10、锚链接。活动指导：创建锚链接可以使我们点击链接后直接跳转到当前网页中指定的具体位置，或是另一网页中指定的具体位置，使我们浏览起来更加快捷方便。项目项目6 6 创建超链接创建超链接 体验活动五：体验活动五：创建锚链接创建锚链接活动步骤：1.首先将光标定位在要创建锚记的位置。2.在“插入”面板上点击“命名锚记”按钮”。项目项目6 6 创建超链接创建超链接 体验活动五：体验活动五：创建锚链接创建锚链接活动步骤：3.在弹出的“命名锚记”对话框中输入锚名称“tuhe”。4.原光标定位的地方出现了一个锚记符号。项目项目6 6 创建超链接创建超链接 体验活动五：体验活动五：创建锚链接创建锚链接活动步骤：5.

11、在弹出的“命名锚记”对话框中输入锚名称“tuhe”。6.为创建的锚记添加链接，选中对应的章节标题。项目项目6 6 创建超链接创建超链接 体验活动五：体验活动五：创建锚链接创建锚链接活动步骤：6.在“属性”面板中的“链接”文本框中输入“#”，加上锚记的名称如“#tuhe”或者直接用“指向文件”按钮指向对应的锚记。7.在浏览器中预览，点击文本“第一章”便自动跳转到下面的具体内容。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动五后，填写下表 项目项目6 6 创建超链接创建超链接 操作步骤操作步骤创建锚链接的方法1首先将光标定位在要创建锚记的位置。2在“插入”面板上点击“命名锚记”

12、按钮。3在弹出的“命名锚记”对话框中输入锚名称。4567体验活动六：体验活动六：创建下载文件链接创建下载文件链接活动任务：创建下载文件链接。活动指导：我们在浏览网页时，除了可以点击链接跳转到另一网页，还可以在网上下载我们需要的资料，当点击下载时便会弹出“文件下载”对话框，这样的链接是如何创建呢？项目项目6 6 创建超链接创建超链接 体验活动六：体验活动六：创建下载文件链接创建下载文件链接活动步骤：1.选中要创建链接的文本或是图像，比如这里选中文本“下载”。2.点击“属性”面板中的“浏览文件”按钮。项目项目6 6 创建超链接创建超链接 体验活动六：体验活动六：创建下载文件链接创建下载文件链接活动

13、步骤：3.在弹出的的“选择文件”对话框中找到要链接的目标文件，比如这里我们选择一个压缩包，单击“确定”按钮。4.在浏览器中进行预览，点击“下载”会自动弹出“文件下载”对话框，便可以进行打开或是保存的操作。项目项目6 6 创建超链接创建超链接 活动小结活动小结完成体验活动六后，填写下表 项目项目6 6 创建超链接创建超链接 操作步骤操作步骤创建下载文件超链接的步骤：1选中要创建链接的文本。2点击“浏览文件”按钮。3在弹出的“命名锚记”对话框中输入锚名称。4.相关知识相关知识1.相对路径：常用于本网站的内部链接，只要是在站点内的文件，若目标文件与当前网页在同一目录下，则直接输入目标网页名称；若目标

14、网页在站点根目录中则在目录名后加“/”再加上网页名称；若目标网页在当前目录的上层目录中，则输入“./”加上文件名称。2.绝对路径：它链接的目标端点是完整的URL地址，在路径开头都是包括HTTP 和FTP之类的协议。3.根路径：这类链接是基于站点根目录，比如“/好书热评”。项目项目6 6 创建超链接创建超链接 相关知识相关知识1.内部链接：目标端点为本站点中的其它文件的超链接。2.外部链接：它的目标端点不属于本站中，它实现了网站与网站间的跳转。3.局部链接：也可称为锚点链接，实现了链接到当前网页的某一指定位置或是其它网页的某一指定位置。4.电子邮件链接：这类链接会自动打开编辑邮件的程序。项目项目6 6 创建超链接创建超链接 相关知识相关知识在“页面属性”对话框中即可对文本的字体、大小、颜色进行设置。“链接颜色”是指已经创建了链接的文本颜色，“变换图像链接”是指当鼠标指向链接文本时显示的颜色，“已访问链接”是指已经点击进入过的链接，“活动链接”鼠标在链接文本上点击时显示的颜色。项目项目6 6 创建超链接创建超链接