《web设计课件.ppt》由会员分享，可在线阅读，更多相关《web设计课件.ppt（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web开发基础授课教师：董晓慧email：ise_本讲内容第六章 添加链接第六章 添加链接创建到外部网页的链接创建到自己服务器上文档的相对链接链接到网页中的指定点添加“mailto”链接以新窗口作为目标6.1 锚元素（超文本链接）锚元素结构：链接文本或图像例：Go to sina锚是内联元素，只能包含文本和其他内联元素，不能包含块元素。链接文本、图像的颜色，访问过的链接颜色，可使用样式表进行外观的改变6.2 href特性href（hypertext reference，超文本引用）特性向浏览器提供网页地址（即URL）URL必须放在引号中间指定URL的方法绝对URL提供文档的完整的URL，包括协
2、议、域名，还可以指定路径名。指定外部网页的时候，需要使用绝对URL，例：href=http:/相对URL描述了链接网页相对于当前文档的路径名，它只需要路径名。当链接到自己的网站（即相同服务器上）的另一个文档时，使用相对URL，例：href=recipes/index.html6.3 链接到web上的网页外部链接：指向不在自己服务器或网站的网页使用绝对URL，以http:/开头例：exampleschapter06jenskitchenindex.html添加锚标签添加URL到href特性中6.4 站内链接站内链接：从主页到各部分网页，从各部分网页到内容网页的链接使用相对链接目录存储文件的“地方
3、”，以分层结构组织，呈倒立的树状散开。最高层的目录称为根（root），它以斜杠表示。根可以包含多个目录，每个目录可以包含次级目录，这些次级目录又可以包含更多的次级目录，以此类推。路径名（pathname）是指向特定文件和目录的符号，它告诉浏览器到哪里去找文件。相对路径名：描述从当前文档的位置开始，如何获取链接文档Jens Kitchen网站结构/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.html
4、路径名禁忌不要使用反斜线()：网页URL路径名只使用正斜线不要以盘符开头：一旦文件传到服务器上，盘符就不合适了，会破坏链接不要以file开头：这表示文件是本地的，当上传到服务器上后，会导致链接错误6.4.1 目录内链接链接到相同目录中的文件/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.html只需提供文件的名称（文件名）当URL是一个文件名称时，服务器将在当前目录中查找相应文件例：创建从主页ind
5、ex.html到综合信息网页about.html的链接指向只有文件名的链接，表示链接文件与当前文档在一个目录中要将路径名包含在URL中，从而指示浏览器例1：创建链接，从index.html指向recipes目录中的salmon.html文件/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.htmlhref=recipes/salmon.html6.4.2 链接到低层目录例2：创建链接，从index.h
6、tml指向couscous.html文件/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.html需要提供穿过两个子目录到达couscous.html的指令href=“recipes/pasta/couscous.html”路径名的组织：从当前文件相同位置的目录名开始，使用斜线接上每层目录名，直到发现链接文件名。当链接到低层目录时，路径名一定要包含到达目标文件所需经过的所有子目录的名称。路径名约定“d
7、ot-dot-slash（点点斜）”（./）：路径名以./开始，告诉浏览器“回到上一层目录”，然后再找具体文件的路径/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.html例：创建从salmom.html到首页index.html的链接6.4.3 链接到高层目录href=./index.html如何跳出两层目录？网站的根目录包含网站中所有的目录和文件相对网站根目录：从根目录开始，列出目录的名称，直到
8、发现目标文件例：Garlic Salmon正斜线（/）代表根目录并将浏览器带到顶级目录。优缺点对于总不在相同目录中的内容，或者动态生成的材料来说，很有用；这些链接不能在本地机器上工作，因为它们是相对于硬盘的6.4.4 网站的相对根路径名/jenskitchenimages/pasta/recipes/jenskitchen.gifspoon.gifabout.htmlindex.htmlsalmon.htmltapenade.htmlcouscous.htmllinguine.html在指定URL时，img元素的src特性与href特性工作方式相同例6.4.5 对于图像 情况相同对于信息在长的
9、滚动网页的底部，或一次点击就需要回到网页顶部，会提供快捷的方式；链接到网页的指定点，也称为链接到文档片段；链接到网页中的指定点分为两个过程确定目的地设置到那的链接6.4.6 链接到网页中的指定点第一步：命名目的地创建目的地，就是使用id特性给文档中的目标元素赋予唯一的名称（片段标识符）使用id来命名元素，可以用作片段标识符，即链接目的地例：H注：id值必须以字母或下划线开头链接到目的地使用带有href特性的a元素，来提供链接的位置在片段前使用#号（也称哈希或编号符号）例：H例：glossary.html链接到另一文档的片段在URL的结尾添加片段名称，就可以链接到另一文档中的片段例：see th
10、e glossary,letter H使用标记打开窗口在锚元素中使用target特性设置target特性值为_blank或者你选中的任何名称该方法不能控制窗口的尺寸例：OReilly更好的方法：将target窗口设为具体名称，后面的链接都可以使用这个，窗口名称不要以下划线开头例：OReilly6.4.7 以新浏览器窗口为目标使用Javascript打开窗口使用Javascript可以设置新窗口的尺寸Javascript包括两部分：脚本本身和链接中的脚本例：windowscript.html在文档的body部分，你将看到每个链接都包括设置为“popup”的rel特性，没有rel值的链接不会触发脚本打开新窗口的缺点易用性问题新窗口可能会对一些用户，特别是通过屏幕阅读器或其他辅助设备访问网站的用户。mailto链接：href特性值设置为mailto:示例：Contact Al klecher6.4.7 邮件链接