WEB应用开发工程师 3超链接与多媒体.ppt

网页中的超链接与多媒体设计 教学基本要求 超链接是网页设计基础中必不可少的基础知识，内容不是很多，但经常用到，所以一定要完全理解并熟练掌握。 路径的概念 超链接的建立 超链接的应用 路径的概念 在WWW上所有的文件都有自己的存放位置和路径，创建文件间的超链接的关键是确定被链接文件的路径。在WWW上文件路径有两种表示方法：绝对路径和相对路径。 绝对路径 绝对路径是文件的完整路径，以Web站点的根目录为基准。 例：/more/index.html 相对路径 是以引用文件的网页所在的位置为参数基础而建立的目录路径 如果当前位于joke.html页面： login.html的相对路径为 ”login.html” face.gif的相对路径为 ”images/face.gif” index.html的相对路径为 ”../index.html” 超链接标签 语法 a href = “url” target = “value” title=“…” 显示的文字 /a 属性href：链接的目标 属性title：鼠标指向链接时的提示文字 属性target：显示目标内容的窗口类型： 属性值 描述 _parent 在上一级窗口中打开 _blank 在新窗口中打开 _self 在当前窗口中打开 _top 在最前端显示的窗口中打开 超链接设计例 代码如下： html head title 链接示例 /title /head body p a href== title = “新浪网站“ target=_blank 新浪网站链接 /a /p /body /html 超链接设计例 点击“新浪网站链接”链接，就可以打开新的窗口，展现新浪网主页。 超链接的几种设计 页内链接 建立链接：a href = #书签名 目录文字 … /a 链接目标：a name = 书签名 书签内容 … /a 站内链接 a href=“xxx.html” 显示的文字 /a 其他站点链接 a href =“http://网址” 显示的文字 /a 图像式链接 a href =“url” img src =“图片地址” alt = “替代值” … /a 邮箱链接 a href =“mailto: E-mail 地址” 显示的文字 /a 网页内部链接例 如果一个页面很长，寻找相应内容比较困难，可以通过在同一个网页文件中建立链接来实现。 建立页内链接： a href = #书签名 目录文字 … /a 在链接的目标处（通常我们称之为书签或锚） a name = 书签名 书签内容 … /a a href=#hobby查看我的爱好/abr a href=#character查看我的性格/a …. …… ………. h1a name=hobby爱好/a/h1 我喜欢户外的活动，不太愿意呆在室内。爱到有山有水的地方玩，比如“十渡”、“桃源仙谷”和“生存岛”这样的地方… h1a name=character性格/a/h1 自认为比较开朗，有时也会表现出内向的一面，朋友说我有… 图像链接例 只需将img标签放在a和/a之间，那么这个图像将成为一个可单击的图像，并产生一个链接。 语法格式为： a href = “url” target = 窗口名称 img src = “图片url” alt = 替代文字 border = 参数值 align = 参数值 height =参数值 width = 参数值 vspace = 参数值 hspace = 参数值 /a 图像链接示例 示例代码如下： html head title链接示例/title /head body p 你可以将一张图片作为一个链接，点击这个图片。 a href=../asdocs/html_tutorials/humor03.html img src=../images/smile.jpg /a /p /body /html 图像链接示例 页面显示效果如图 邮箱链接 在网站中，经常会看到“联系我们”或者“给我写信”的链接，用鼠标