商务网页设计与制作（第2版）课件 第6课 超链接设置方法_第1页
商务网页设计与制作（第2版）课件 第6课 超链接设置方法_第2页
商务网页设计与制作（第2版）课件 第6课 超链接设置方法_第3页
商务网页设计与制作（第2版）课件 第6课 超链接设置方法_第4页
商务网页设计与制作（第2版）课件 第6课 超链接设置方法_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章 HTML网页制作技术3.5超链接设置方法3.5.1超链接的概念及类型3.5.2指向网站内部的超链接3.5.3指向网站外部的超链接3.5.4给文本设置超链接3.5.5给图像设置超链接3.5.6设置超链接的打开窗口3.5.7制作图文超链接网页综合范例3.5超链接设置方法网站是由网页组成的，那么若干网页如何组织起来，形成具有一定功能的网站呢？超链接发挥了基础的、不可替代的作用。网页源文件之间、网页源文件和其他相关文件之间，基本都是通过超链接有机联系在一起的。也可以说，没有超链接，也就没有真正意义上的网站。3.5.1超链接的概念及类型1．超链接的概念超链接简单来讲，就是指从一个网页指向一个目标的链接关系。超链接在本质上属于网页的重要组成部分，它允许网页之间或者网页与站点之间进行内容链接。超链接的链接目标可以是一个网站、一个网页、一段文本、一个图片、一段音频、一段视频、一个邮箱地址，甚至是一个应用程序、一个文件等。当浏览者单击已经设置链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开、运行或保存。超链接的载体：是指承载超链接任务的载体，可以是文字、图片、多媒体资料以及设置的热点。原则上，网页上的任何一个位置均可以设置超链接。属性值描述hrefURL规定链接指向的目标URLdownloadfilename规定被下载的超链接目标target_blank_parent_self_topframename规定在何处打开链接的目标2．超链接的类型超链接总体上可分为内部链接和外部链接。内部链接是指网站内部网页之间、网页与文件（如图片、多媒体文件等）之间、一个网页的内部内容之间的链接，也可以是空链接；外部链接是指指向网站外部的跳转链接，通常指向一个外部网站、外部网页、外部邮箱地址。3．超链接的标签及属性超链接的标签为<a>，其常见属性如下：3.5.2指向网站内部的超链接1．指向站点内部文件的链接站点内部文件（包括网页文件、图片文件等）的链接是指在网页与该网站内部文件之间的链接关系。在建立网站内部文件的链接时，要明确哪个页面是当前页，哪个页面是链接的目标文件。内部链接一般采用相对路径。设置指向站点内部文件的超链接，需要使用超链接标签<a>及其“href”属性，设置方法为<ahref="网页文件名">链接网页文件的实例</a>

<ahref="图像文件名">链接图像文件的实例</a>

<ahref="其他文件名">链接其他文件的实例</a>

<html><head><title>链接内部文件</title></head><body><br><ahref="book/books.html">链接网页文件</a><br><ahref="book/book1.jpg">链接图片文件</a><br><ahref="book/pdf1.pdf">链接PDF文件</a><br><ahref="book/test.apk">链接APK文件</a></body></html>当单击“链接网页文件”的超链接后当单击“链接图片文件”的超链接后当单击“链接PDF/APK文件”的超链接后在单击“链接APK文件”后2．指向本页面中特定部分的链接所谓指向网页的特定部分，就是指链接到文档中一个预先定义好的位置。一般用在网页内容较长、一屏无法全面展示的情景。若实现此功能，需要在文档中给相应位置的标签（如标题标签、文字标签、图片标签等）增加“id”属性并赋值，即增加“锚点”，然后建立超链接指向该id的属性值，即可实现指向该“锚点”的位置。设置指向本页中的锚点，需要使用元素标签（如文本标签、标题标签、图像标签等）的“id”属性，设置锚点的方法为<标签名称id="锚点属性值">文档锚点实例</标签>设置指向锚点的超链接，需要使用超链接标签的<a>的“href”属性，用“href”指向锚点，设置方法为<ahref="#锚点属性值">指向文档锚点的超链接实例</a><html><head><title>云之雷科技</title></head><body><imgsrc="sdlogo.png"width="80"height="80"alt="企业logo"/><fontcolor="blue"face="微软雅黑"size=12id="top">云之雷科技有限公司</font><hr><fontcolor="black"face="黑体"size=4>笔记本电脑系列</font><p><imgsrc="book/book1.jpg"width="260"height="200"alt="计算机——笔记本电脑图片"/><imgsrc="book/book2.jpg"width="260"height="200"alt="计算机——笔记本电脑图片"/><imgsrc="book/book3.jpg"width="260"height="200"alt="计算机——笔记本电脑图片"/><br><fontface="宋体"size="4">笔记本电脑（Laptop）又被称为“便携式电脑，手提电脑、掌上电脑或膝上型电脑”，其最大的特点就是机身小巧，相比PC携带方便，是一种小型、可便于携带的个人电脑，通常重1～3千克。笔记本电脑的发展趋势是体积越来越小，重量越来越轻，而功能却越发强大。为了缩小体积，笔记型电脑当今采用液晶显示器（也称液晶LCD屏）。除了键盘以外有些还装有触控板（Touchpad）或触控点（Pointingstick）作为定位设备（Pointingdevice）。<br><br>笔记本电脑与台式机的主要区别在于其携带方便，对主板、CPU、内存、显卡、硬盘等的能耗比要求较高。虽然笔记本电脑的机身十分轻便，但完全不用怀疑其实用性，在日常操作和基本商务、娱乐、运算操作中，笔记本电脑完全可以胜任。当今的笔记本电脑正在根据用途分化出不同的趋势，上网本趋于日常办公以及电影，商务本趋于稳定低功耗获得更长久的续航时间，家用本拥有不错的性能和很高的性价比，游戏本则是专门为了迎合少数人群外出游戏使用的，具有发烧级配置，娱乐体验效果好，当然价格不低，电池续航时间也不理想。<br><br>目前，在全球市场上有多种品牌的笔记本电脑，排名前列的有联想、华硕、戴尔（DELL）、ThinkPad、惠普（HP）、苹果（Apple）、宏碁（Acer）、索尼、东芝、三星等。</font></p><hr><fontcolor="black"face="黑体"size=4>台式机系列</font><p><imgsrc="computer1.jpg"width="260"height="200"alt="计算机----台式机图片"/><imgsrc="../computer2.jpg"width="260"height="200"alt="计算机----台式机图片"/><imgsrc="../computer3.jpg"width="260"height="200"alt="计算机----台式机图片"/><br><fontface="宋体"size=4>台式计算机，相对于笔记本电脑和上网本来说体积较大，主机、显示器等设备一般都是相对独立的，一般需要放置在电脑桌或者专门的工作台上，因此命名为台式机。<br><br>台式机的优点就是耐用、性能强，以及价格实惠。和笔记本电脑相比相比，在相同价格的前提下台式机配置更高，散热性较好。缺点就是：笨重，耗电量大。电脑（Computer）是一种利用电子学原理根据一系列指令来对数据进行处理的机器。电脑可以分为两部分：软件系统和硬件系统。第一台电脑ENIAC于1946年2月14日宣告诞生。</font></p><ahref="#top">返回顶部</a><br><fontcolor="black"face="宋体"size=3>=============云之雷科技有限公司=============</font></body></html>3．指向空链接空链接是指链接对象为空的链接，可用于向页面中的对象附加一些行为。空链接通常不会单独出现，总是伴随着附加行为（附加行为通常为脚本程序）同时出现。当单击该空链接后，因为是空链接，所以网页没有指向其他的链接目标，但是却启动了关联的脚本程序，以实现脚本程序里的功能。设置空链接需要用到超链接标签<a>的“href”属性，设置方法为<ahref="#">空链接标签实例<a>

或者<ahref="javasrcipt:void(0);">空链接标签实例</a>3.5.3指向网站外部的超链接1．指向其他网站的超链接网站外部的超链接，是指跳转到当前网站之外，指向其他网站中的页面的链接关系。这种链接的URL地址一般采用绝对路径，要有完整的URL地址，包括协议名、主机名、文件所在主机上的存储路径及文件名。设置指向网站外部超链接需要使用超链接标签<a>及其“href”属性，设置方法为<ahref="外部网站域名或者具体网页实例">指向网站外部超链接实例<a>

<html><head><title>链接外部网站</title></head><body><br><ahref="/">指向人民邮电出版社网站的超链接</a><br><ahref="/">指向人邮教育社区网站的超链接</a><br></body></html><html><head><title>链接电子邮箱</title></head><body><ahref="mailto:testmail2018@126.com">联系邮箱</a></body></html>2．指向电子邮箱的超链接设置电子邮箱超链接需要使用超链接标签<a>及其“href”属性，设置方法为<ahref="mailto:电子邮箱名称">指向电子邮箱的超链接实例</a>

3.5.4给文本设置超链接给文本设置超链接，就是把文本当成超链接的载体，形式上是将文本放在超链接的开始标签<a>和结束标签</a>之间。给文本设置超链接需要使用超链接标签<a>及其“href”属性，设置方法如下：<ahref="链接地址">文本超链接实例<a>以前介绍的超链接示例中，均是给文本设置超链接。3.5.5给图像设置超链接给图像设置超链接，就是把图像当成超链接的载体，形式上是将图像放在超链接的开始标签<a>和结束标签</a>之间。给图像设置超链接，需要使用超链接标签<a>及其“href”属性，以及图像标签<img>及其“src”属性。设置方法如下：<ahref="链接目标实例"><imgsrc="图像实例文件名"/></a><html><head><title>给图像设置超链接</title></head><body><br><ahref="/"><imgsrc="ptpress.png"></a></body></html>值描述_blank在新窗口中打开被链接文档_self默认。在相同的框架中打开被链接文档_parent在父框架集中打开被链接文档_top在整个窗口中打开被链接文档framename在指定的框架中打开被链接文档3.5.6设置超链接的打开窗口超链接标签<a>有一个“target”属性，这个属性是控制超链接的打开窗口。target的属性值及其意义如下：<html><head><title>超链接打开窗口</title></head><body><br><ahref="book/books.html"target="_self">在相同窗口打开</a><br><ahref="book/books.html"target="_blank">在新窗口中打开</a><br><ahref="book/books.html"target="_parent">在父窗口中打开</a><br><ahref="book/books.html"target="_top">在整页窗口中打开</a><br><ahref="book/books.html"target="newframe">在指定框架中打开</a></body></html>1．设置超链接打开窗口设置超链接打开窗口，需要使用超链接标签<a>及其“target”属性，设置方法为<ahref="属性值">超链接实例</a><html><head><title>全网设置超链接打开窗口</title><basetarget="_blank"/></head><body><br><ahref="book/books.html">打开books.html</a><br><ahref="/">打开人民邮电出版社网站</a><br><ahref="/">打开人邮学院网站</a><br><ahref="/">打开人邮教育社区网站</a></body></html>2．设置全网默认打开窗口设置全网采用同一种方式打开超链接窗口，需要使用基准网址标记标签<base>及其target属性，并在头部标签<head>中完成设置。设置方法为<basetarget="属性值"/><base>标签的“target”属性值与超链接标签<a>的“target”的属性值的概念和作用是相同的。3.5.7制作图文超链接网页综合范例我们以设计制作“云之雷科技有限公司”网站为样例，对公司旗下的3个笔记本电脑系列、3个台式机系列进行宣传。同时，链接天猫商城、京东商城和唯品会网站。为了方便客户联系，设立了联系邮箱。网页的样式如图：版面分析：对于笔记本电脑系列，需要3个图片book1.jpg、book2.jpg、book3.jpg做展示，并设置超链接，对应各自的笔记本电脑介绍文档book1.html、book2.html、book3.html；对于台式机系统，需要3个图片computer1.jpg、computer2.jpg、computer3.jpg做展示，并设置超链接，对应各自的台式机介绍文档computer1.html、computer2.html、computer3.html。因为人民邮电出版社、人邮学院、人邮教育社区是云之雷科技有限公司的合作伙伴，故而建立了指向这3个网站的超链接。最后，向客户提供联系方式，公布了联系电话、联系邮箱。<html><head><title>云之雷科技</title><basetarget="_blank"/></head><bodybgcolor="#CCCCCC"><imgsrc="sdlogo.png"width="80"height="80"alt="企业logo"/><fontcolor="blue"face="微软雅黑"size=6.5>云之雷科技有限公司</font><hr><h3>笔记本电脑系列</h3><ahref="book/book1.html"><imgsrc="book/book1.png"width="230"height="130"alt="计算机--笔记本图片"/></a><ahre

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论