040超链接

第四课超链接第四课超链接学习目标超链接概述链接路径内部链接建立外部链接建立锚点链接图像链接图像映射2超链接概述链接是超文本的“超”的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。3IISIEDNS服务器是？61.163.241.19://61.163.241.19/homepage2006/images/cctvlogo_778.gif组织网页：HTML文件+图片文件+Flash文件其它图片和Flash等HTML源代码中需要播放的文件…………超级链接5HTMLHEADTITLE有趣的动物/TITLE/HEADBODYH1会弹琴的狗狗/H1AHREF=“dog.htm”单击此处查看/A/BODY/HTML超链接概述链接是超文本的“超”的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。链接由以下两个部分构成：位置点标签a，将文本或图形标识为链接属性href，用于指定要链接的文件标签A的常用属性href：指定链接地址name：给链接点命名target：指定链接的目标窗口——_self、_blank、_top、_parent66.2超链接的路径一个网站的多个页面之间的关系都是通过超链接实现的，每个页面都有一个存放位置和路径，了解一个文件与另一个文件之间的路径关系对建立超链接而言是非常重要的。在HTML文件中提供了三种路径：绝对路径、相对路径和根路径7绝对和相对路径名8要链接到另一目录(C:\example)下的页面，可编写AHREF=“..\example\Doc2.htm”或AHREF=“C:\example\Doc2.htm”要链接到同一目录(C:\html)下的页面，可编写AHREF=“Doc3.htm”或AHREF=“C:\html\Doc3.htm”C:\html目录C:\example目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名相对路径名设置绝对路径绝对路径是指文件的完整路径，即在进行超链接时使用了URL，例如：绝对路径通常会在网站的友情链接中使用96.2.2设置相对路径相对路径是指相对于当前文件的路径，即由当前文件如何找到目标文件。采用相对路径是建立两个文件之间的相对关系，可以不受站点和所处服务器位置的影响。相对路径的使用方法：同一目录：输入要链接的文件名称即可上一级目录：输入“../文件名”下一级目录：输入“目录名/文件名”对于图片文件而言，上面内容同样适用。106.2.3使用根路径根路径的设置也适合内部链接的建立，一般情况下不使用根路径，根路径以/开头，后面跟随文件所在位置的详细路径。例如文件znlj.jpg的根路径为/example/ch06/image/znlj.jpg使用根路径明显增加了代码的复杂程度在动态网页技术(ASP，JSP,PHP等)中通常会设置全局常量保存重要目录，方便访问相关文件，$image+“/catelog/bags/p1.jpg”11images/logo.gif../images/logo.gifgenres/rock/pinkfloyd.html实例演练打开0commonlink\exercise.html在网页中增加一个链接弹钢琴的狗href=“dog.htm”可爱的小狗imgsrc=“image\littledog.jpg”锚点链接示例:百度百科—厦门大学嘉庚学院锚点链接锚点链接是指点击链接后跳转到同一文档的不同部分，链接的目标点必须定义为锚标记。a标签中的NAME属性用于创建锚标记ANAME=“marker”主题名称/A为达到这种跳转效果，需在HREF参数中使用该标记AHREF=“#marker”热点文字/A16链接到同一文档的某个部分2-1锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果，请在HREF参数中使用该标记17ANAME=“marker”主题名称/AAHREF=“#marker”主题名称/A链接到同一文档的各个部分2-218bodyh1Web设计学习向导/h1h2在这里向您推荐最好的Web设计图书/h2pahref=#first第1本书/aahref=#second第2本书/aahref=#third第3本书/a/ph3aname=first/a精通CSS+DIV网页样式与布局/h3p本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术，使读者在学习CSS应用技术的同时，掌握CSS+DIV的精髓。/pp详细介绍/ph3aname=second/aCSS设计彻底研究/h3p本书是一本深入研究和揭示CSS设计技术的书籍。/ph3aname=third/aCSS设计禅意花园/h3p本书作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSSZenGarden(CSS禅意花园)。19.1.8设置图片链接——a•基本语法ahref=”URL”target=”目标窗口的打开方式”imgsrc=”图片地址”/a•语法说明href属性是用来设置图片的链接地址URL，target属性用来设置目标窗口的打开方式img标记中还可以添加其他的属性，如height、hspace、border等。19.1.8设置图片链接——a•实例代码19.1.8设置图片链接——a•网页效果19.1.9设置图片热区链接•基本语法imgsrc=”图片地址”usemap=”#映射图片名称”•热区链接属性的定义如下：mapname=”映射图片名称”areashape=”热区形状”coords=”热区坐标”href=”URL”/map19.1.9设置图片热区链接•语法说明img标记用来插入图片和引用映射图片名称，即用usemap属性来引用在map标记中所定义的映射图片名称，并且要在名称前加上#号。map标记只有一个name属性，用来定义映射图片的名称。area标记有三个属性，shape属性、coords属性和href属性。shape属性用来定义热区的形状，又有3个属性值，具体取值见表19-2coords属性用来定义热区的坐标，不同的形状其coords属性的设置方式也不同，具体可以参见表19-3href属性，用来定义超链接的目标地址。19.1.9设置图片热区链接•表19-2shape属性取值说明•表19-2shape属性取值说明19.1.9设置图片热区链接•示例imgsrc=“19-1-9.jpg”border=0usemap=“#hh”mapname=“hh”areashape=“rect”coords=“60,50,100,95“href=“19-1-8-2.html”选择矩形热区/map手形所在的矩形区域就是定义好的热区链接。通过单击该区域即可打开链接地址19-1-8-2.html19.1.9设置图片热区链接•示例imgsrc=19-1-9.jpgborder=0usemap=#hhalt=插入图片mapname=hhareashape=rectcoords=60,50,100,95href=19-1-8-2.htmlalt=荷花/map厦大漳州校区地图厦大漳州校区地图中国地图imgsrc=chinamap.gifwidth=654height=520border=0usemap=#Mapalt=chinamap/mapname=Mapid=Mapareashape=polycoords=504,363,502,366,498,369,494,368,492,366,489,366,489,370,489,375,489,378,486,380,483,383,480,385,480,388,480,393,479,399,477,401,476,406,476,409,474,412,475,413,479,413,482,413,484,414,488,418,489,421,489,425,490,429,493,429,498,424,499,419,503,416,506,414,509,411,511,407,515,405,516,402,518,399,520,398,520,393,515,392,515,389,517,389,519,386,519,383,519,381,522,381,525,378,526,374,527,372,523,372,522,372,520,372,520,369,518,369,516,371,516,374,513,374,511,372,510,369,505,365,503,361href==福建//map热点链接练习star.htm链接：猎户座：电子邮件链接用户可从网页发送电子邮件31HTMLHEADTITLE海豚/TITLE/HEADBODYH3充分交流，密切配合/H3BRP据说，海豚的交流模式几乎与人类的一样复杂！BRBRAHREF=mailto:[e-mail]请将您的疑问发送至DavidFernandez/A/BODY/HTML下载链接在图象、文字链接的地方，将压缩文件做为链接地址javascript:window.close()框架广告栏顶部框架(top.htm)商品详细介绍右侧框架(main.htm)商品导航左侧框架(left.htm)为何使用框架在另一个固定部分显示导航部分在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。站点中只有此部分是变化的。359.1框架概述框架用于将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面内容；另外框架可以方便地进行网页的导航。框架集框架主要包括两部分：框架集和框架。框架集是在一个文档内定义一组框架结构的HTML网页，它定义了在一个窗口中显示的框架数、框架的尺寸和载入到框架中的网页等框架指在网页上定义的一个显示区域。36框架集语法及属性htmlhead…/headframesetcols||rows=“”framespacing=“”bordercolor=“”framesrc=“页面文件名称”framesrc=“页面文件名称”/frameset/htmlframeset标签属性如下：Cols：将窗口纵向划分为几个框架Rows：将窗口横向划分为几个框架Framespacing：设置框架边框之间的间隔距离，默认0