第07章节创建超链接.pptVIP

HTML与CSS前台页面设计 创建超链接 第七章 HTML与CSS前台页面设计 第七章 创建超链接 HTML与CSS前台页面设计 本章要点 超链接的概念 连接标记 使用CSS样式设置书签格式 图片连接 图片映射 HTML与CSS前台页面设计 目录： 7.1 超链接概述 7.2 超链接标记a及其属性 7.3 利用CSS样式设置书签格式 7.4 图片链接 7.5 图片映射链接 7.6 综合实例 第七章 创建超链接 7.1 超链接概述 超链接是一个网站的灵魂。一个网站是由多个页面组成的，创建超链接有利于页面与页面之间的跳转，从而将整个网站中的页面有机地连接起来，它是网页中至关重要的元素。一般情况是将鼠标光标移至超连接处时显示为下划线，单击鼠标即可跳转到超链接的相应页面。 每一个网页都有独一无二 的地址，即URL。 7.2 超链接标记a及其属性 超链接标记虽然在网页设计制作中占有不可替代的地位，但是其标记只有一个，那就是a标记。本章介绍的超链接应用都是基于a标记基础上的。 a href=”file_url” 链接文字/a 7.2 超链接标记a及其属性 每一个文件都有自己的存放位置和路径，理解一个文件到要链接的文件之间的路径关系式创建超链接的根本。 URL——统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此，链接可以分为以下3种： 绝对路径 相对路径 根路径 7.2 超链接标记a及其属性 1.绝对路径 绝对路径为文件提供完全的路径，包括适用的协议，如http,ftp,rtsp等。一般常见的有： 当链接到其他网站中的文件时，必须使用绝对链接。 7.2 超链接标记a及其属性 2.相对路径 相对路径是最适合网站的内部链接的。只要是属于同一网站之下的，即使不在同一个目录下，相对链接也非常适合。 相对链接的使用方法为： 如果链接到同一目录下，则只需输入要链接文档的名称。 如链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名。 如链接到上一级目录中的文件，则先输入“../”，再输入目录名、文件名。 7.2 超链接标记a及其属性 要从news1.html链接到news2.html，只需在设置链接的位置输入“news2.html”。 要从news3.html链接到国内新闻目录中的news2.html，只需输入“国内新闻/news2.html”。 要从news1.html链接到上一级目录中的news3.html，只需输入“../news3.html”。 7.2 超链接标记a及其属性 3.根路径 根目录相对地址同样适用于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用： 当站点的规模非常大，放置于几个服务器上时 当一个服务器上同时放置几个站点时 根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。 7.2.1 内部链接 所谓内部链接，指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需内容的HTML文件。 7.2.2 书签链接 建立书签链接分为两步，一是建立书签，二是为书签制作链接。 建立书签：a name=”name”文字/a 书签链接：a href=”#name”文字链接/a 7.2 超链接标记a及其属性 7.2.3 外部链接 所谓外部链接，指的是跳转到当前网站外部，与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对地址。 制作外部链接的时候，使用URL统一资源定位符来定位万维网信息，这种方式可以简洁、准确地描述信息所在的地点。 常见的URL格式如表所示。 7.2 超链接标记a及其属性 1.链接外部网站 a href=”http://”文字链接/a 2.链接FTP a href=”ftp://”文字链接/a 3.链接到news新闻组 a href=”news://”文字链接/a 4.发送e-mail a href=”mailto:a@b.c”发送邮件/a a href=”mailto:a@b.c?subject=content”邮件主题/a a href=”mailto:a@b.c?cc=a@b.c”抄送/a a href=”mailto:a@b.c?bcc=a@b.c”