《项目七 超链接元素的应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目七 超链接元素的应用ppt课件.pptx（36页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目七 超链接元素的应用项目七 超链接元素的应用学习目标学习目标会应用内部链接会应用外部链接会应用锚点链接项目七 超链接元素的应用项目项目简介简介通过前面项目的学习，我们能制作出图文并茂、有声音及动画的网页，但每个页面是独立的，页面之间缺发连系。该项目需要掌握超链接的应用，使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。本项目要完成的任务：任务一 内部链接的应用任务二 外部链接的应用任务三 锚点链接的应用任务一 内部链接的应用任务描述任务描述该任务主要实现站点内页面之间的链接，需要掌握内部链接的操作方法。该任务的需求如下所示：1.在“WebTest项目7”文件夹中新
2、建7-1.html文档，并实现如图7-1所示的页面效果；2.在7-1.html文档中实现对“项目六”中的6-1.html、6-2.html、6-3.html、6-4.html各页面的统一访问。页面效果如图4-16所示。图7-1 7-1.html页面浏览效果图任务一 内部链接的应用知识知识储备储备超链接是网页页面中最重要的元素之一，是一个网站的灵魂一个网站是由多个页面组成的，页面之间依靠超链接确定相互的导航关系，即从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序超链接是网页中最重要、最根本的
3、元素之一，它是整个网站的基础，在网页之间起着桥梁作用，能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。任务一 内部链接的应用1.超链接标签超链接标签是，HTML链接语法：Link object其中url为链接地址，Link Object为链接对象。任务一 内部链接的应用2.超链接的类型按照连接路径不同，网页中的超链接可分为3种类型：外部链接、内部链接和锚点链接。（1）外部链接：是一种绝对URL（Uniform Resource Locator即统一资源定位符）的任务一 内部链接的应用（1）外部链接是一种绝对URL（Uniform Resource Locator
4、即统一资源定位符）的（2）内部链接是一种相对URL的超链接，指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面的路径，主要用于站点内的链接；任务一 内部链接的应用（3）锚点链接也叫书签链接，是一种在同一网页中的超链接。主要用于链接在同一页面中的不同位置的链接。任务一 内部链接的应用3. 超链接的链接对象按照网页中使用的对象不同，超链接可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接和空链接等。任务一 内部链接的应用4.链接路径链接路径有三种类型：绝对路径、站点根目录相对路径和文档相对路径任务一 内部链接的应用（1）绝对路径是指链接文件的完整路
5、径例如：“http:/ 内部链接的应用（2）站点根目录相对路径指从站点的根文件夹到文档的路径，站点根目录相对路径以一个正斜杠开始，正斜杠表示站点根文件夹，如：/default.Asp/ WebTest /项目5/5-1.html等。任务一 内部链接的应用（3）文档相对路径是省略掉与当前文档路径中相同的部分，只输入不同的路径部分，如：images/tp.gif、./article/news.asp正斜杠“/”表示在文件夹层次结构中下移一级。“.”表示在文件夹层次结构中上移一级，文档相对路径是站点内最常使用的一种连接路径。任务一 内部链接的应用5.超链接的目标网站设计者可根据用户浏览的便利性和页面
6、的重要程度进行灵活的设置，打开超链接的目标有_blank、new、_parent、_self、_top几种，具体含义如下：任务一 内部链接的应用（1）_blank：在新窗口中打开链接；（2）new：新建子窗口打开链接，跟-blank类似，但不同的浏览器可能效果不一样；（3）_parent：在父窗体中打开链接；（4）_self：在当前窗体打开链接,此为默认值任务一 内部链接的应用（5）_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)，具体讲就是网页在框架内，这个网页上有一个链接target设成_top，点击此链接时，目标网页就会在当前浏览器中打开，而框架会消失。提示：如设置了框架，超
7、链接目标也可以是框架名，表示在指提示：如设置了框架，超链接目标也可以是框架名，表示在指定的框架中打开页面。在定的框架中打开页面。在“框架元素应用框架元素应用”任务中将具体介绍。任务中将具体介绍。任务一 内部链接的应用任务实施任务实施1.新建文档新建文档新建HTML文档，保存到“WebTest/项目7”文件夹中，文件名为7-1.html；任务一 内部链接的应用2.输入文本信息输入文本信息在7-1.html文档的“设计”视图中，把光标定位到页面的第一行位置输入文本“链接Flash页面”按“Enter”键（分段）在第二行输入文本“链接FLV视频页面”按“Enter”键在第三行输入文本“链接WMV视频
8、页面” 按“Enter”键在第四行输入文本“链接背景音乐页面”。任务一 内部链接的应用3.制作文本超制作文本超链接链接在7-1.html页面中选中“链接Flash页面”文本在属性面板如图7-2所示，点击“链接”后的“浏览文件”图标打开“选择文件”对话框，如图7-3所示在“WebTest项目6”文件夹中选择“6-1.html”文件点击“确定”在属性面板中，“目标”选择“_blank”，完成操作。图7-2 文本超链接属性任务一 内部链接的应用图7-3 选择文件对话框任务一 内部链接的应用其它文本的超链接制作方法类似，请读者自行完成。到此，整个页面制作完成。切换到“代码”视图查看生成的HTML代码如
9、图7-4所示。图7-4 生成的代码任务一 内部链接的应用4.保存文档，按F12在浏览器中预览任务二 外部链接的应用任务描述任务描述通过对前一个任务的学习，我们掌握了内部链接的操作，该任务需要掌握外部链接的操作方法以及对超链接的样式进行设置。该任务的需求如下所示：1.在“WebTest项目7”文件夹中新建7-2.html文档，并实现如图7-5所示的“网址导航页”页面效果；图7-5 7-2.html页面浏览效果图任务二 外部链接的应用2.网页设计要求（1）页面中各超链接打开的目标为_blank（2）超链接样式要求1）去掉超链接下的下划线；2）“链接颜色”为黑色（#000000），“活动链接”颜色为
10、橙色（#f47920），“已访问链接”颜色为青蓝色（#102b6a）。任务二 外部链接的应用任务实施任务实施1.新建文档新建 7-2.html文档，并保存到“WebTest/项目7”文件夹中；2.输入文字信息在7-2.html文档的“设计”视图中按图7-5页面效果所示输入文本信息（说明：各网站名之间用一个全角空格分隔或用特殊符号 分隔，每行敲回车键分段）；任务二 外部链接的应用3.制作超链接以制作“百度”的超链接（）为例：选中文本“百度” 在属性面板中如图7-6所示选择“HTML”，在“链接”文本框中输入“百度”网站的完整地址，即，“目标”选择“_blank”图7-6 文本属性其它网
11、站的超链接制作方法类似，请读者自行完成。任务二 外部链接的应用4.制作E-mail链接选中“”点击“插入”菜单选择“电子邮件链接”，弹出如图7-7所示的“电子邮件链接”对话框（可编辑“文本”和“电子邮件”文本框）点击“确定”图7-7 电子邮件链接对话框任务二 外部链接的应用5.设置超链接样式默认时，文本超链接是带下划线的，链接颜色为蓝色,下面按任务需求设置超链接样式：任务二 外部链接的应用点击属性面板的“页面属性”按钮在“页面属性”对话框中选择“链接CSS”选项，如图7-9所示“下划线样式”选择“始终无下划线”，在“链接颜色”文本框中输入“#000000”，在“已访问链接”文本框中输入“#10
12、2b6a”,在“活动链接”文本框中输入“#f47920” 点击“确定”按钮完成设置。图7-9 链接样式设置对话框任务二 外部链接的应用6.保存文档，按F12在浏览器中预览任务三 锚点链接的应用任务描述任务描述通过对前面任务的学习，我们掌握了对站内文件和站外文件的链接方法，该任务需要掌握链接在同一页面中的不同位置的链接。该任务的需求如下所示：1.在“WebTest项目7”文件夹中新建7-3.html文档，并实现如图7-10所示的页面效果； 任务三 锚点链接的应用2.在网上搜索“山城重庆介绍”的相关文本信息，并插入到该页面中（文字要尽量，浏览时要超过一屏效果才明显）。图7-10 页面浏览效果图任务
13、三 锚点链接的应用任务实施1.新建文档新建 7-3.html文档，并保存到“WebTest/项目7”文件夹中；2.插入文本信息在网上搜索“山城重庆介绍”信息，把搜索到的文本信息复制粘贴到7-3.html文档中。任务三 锚点链接的应用3.创建命名锚记将光标置于第一行文字“返回底部”后面 选择“插入”菜单，选择“命名锚记”选项 在打开的“命名锚记“对话框中的“锚记名称”文本框中输入锚记的名称如top（注意：锚记名不能含有空格，而且不应置于层内），确定。将光标置于最后一行文字“返回顶部”后面 选择“插入”菜单，选择“命名锚记”选项 在打开的“命名锚记“对话框中的“锚记名称”文本框中输入锚记的名称如bottom 确定。任务三 锚点链接的应用4.链接到命名锚记选中第一行文字“返回底部”在属性面板“链接”文本框中输入锚记名称“#bottom”。选中最后一行文字“返回顶部”在属性面板“链接”文本框中输入锚记名称“#top”。5.保存网页，按F12在浏览器中浏览效果。提示：提示：创建锚点链接分两步创建锚点链接分两步:：创建创建“命名锚记命名锚记”；链接到；链接到命名锚记。命名锚记。