Download presentation
Presentation is loading. Please wait.
1
W3C标准网页制作 主讲教师：张 涛
2
第8讲、建立超链接 8.1.超链接的概念 8.2.链接标记<a> 8.3.书签链接
3
8.1.超链接的概念 链接是一个网站的灵魂。在HTML语言中创建链接非常方便，但超链接的原理对于一个网站却至关重要。理解一些关于链接的基本概念和原理，不仅有助于HTML链接标记的使用，而且对于其他网页制作软件的使用，以及对于高层次的网页编程等都有很大的帮助。 本章将从超链接的理论讲起，介绍2种地址形式：绝对地址、文件相对地址。然后介绍如何创建各种不同形式的链接。 超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系。
4
8.2.链接标记<a> 关于路径 每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 ● 绝对路径 如 ● 相对路径 如 news/default.htm 在了解这2种地址形式前先要理解另外两个概念：内部链接和外部链接。 内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称作外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。 绝对路径：绝对路径为文件提供完全的路径，包括适用的协议。 相对路径：相对路径是最适合网站的内部链接的。只要是属于同一网站之下的，即使不在同一个目录下，相对链接也非常适合。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。 这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。
5
8.2.链接标记<a> 链接标记的属性 Href 指定链接地址 Name 给链接命名 Title 给链接提示文字
链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<A>标记。本章介绍的超链接应用都是基于<A>标记基础上的。 链接标记的属性 Href 指定链接地址 Name 给链接命名 Title 给链接提示文字 Target 指定链接的目标窗口 <a href=“ title=“点击链接” target=_blank>新浪网</a> 属 性 值 描 述 _parent 在上一级窗口中打开。一般使用分帧的框架页会经常使用 _blank 在新窗口中打开 _self 在同一个帧或窗口中打开，这项一般不用设置 _top 在浏览器的整个窗口打开，忽略任何框架
6
8.3.书签链接 在浏览页面的时候，如果页面的内容较多，页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该网页或另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，应该是件很方便的事，并且还可以在页面中设定诸如“返回页首”之类的链接。这就称为书签链接。 建立书签链接分为两步，一是建立书签，二是为书签制作链接。 建立书签 下面来制作一个包含网页设计三剑客内容的软件介绍页面，并为其中的每一软件建立一个书签，这个书签就是随后将要跳转的位置。也就是说，这个书签就确定了一个页面内部的超链接导引依据。 基本语法 <A name=“name”>文字</a> 链接同一页面中的书签 下面我们就为刚刚制作的8-3.htm制作好链接，我们希望在页面的起始位置制作3个链接，分别链接到每一个软件介绍的位置上。 基本语法 <A HREF=“#B00KMARK_name”>文字链接</a>链接同一页面中的书签 下面我们就为刚刚制作的8-3.htm制作好链接，我们希望在页面的起始位置制作3个链接，分别链接到每一个软件介绍的位置上， 基本语法 <A HREF=“#B00KMARK_name”>文字链接</a> 链接不同页面中的书签 基本语法 <A HREF=“#B00KMARK_name”>文字链接</a>
7
8.3.书签链接 <HTML> <HEAD> <TITLE>链接到同一页面的书签</TITLE> </HEAD> <BODY> <H1>主流的网页设计软件</H1> <A HREF=“#dw”>Dreamweaver MX 2004</A> <A HREF=“#fl”>Flash MX 2004</A> <A HREF=“#fw”>Fireworks MX 2004</A> <A NAME=“dw”><H3>Dreamweaver MX 2004</H3></A> Dreamweaver MX 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑，优秀的代码控制，完整的站点规划和管理，超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。 <P> <A NAME=“f1”><H3>Flash MX 2004</H3></A> FLASH MX 2004作为网页矢量交互动画软件的代表，提供了图形绘制，动画制作和交互三大功能。掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。 <P> <A NAME=“fw”><H3>Fireworks MX 2004</H3></A> Fireworks MX 2004作为网页图像设计软件的代表，在继承了前期版本图形绘制、页面特效功能的同时，大大地发展了位图图像方面的处理功能，这无疑使这个软件有了更大的向Photoshop挑战的资本，而其在网页设计方面的诸多应用，又是无任何软件可与之媲美。 <P> </BODY> </HTML>
8
谢谢!
Similar presentations
