第4章用HTML建立超链接

第四章用HTML建立超链接4.1设置基本文字超链接建立HTML标记为a/a标记。超链接最重要的两个要素，设置为超链接到文本内容和超链接指向的目标地址。基本超链接的结构如下：ahref=“”百度/a链接标记属性地址链接文本URL的格式每个文档在互联网上有唯一的地址，该地址被称为统一资源定位器（UniformResourceLaocator）,简称URL。URL由四个部分组成：协议、主机名、文件夹名和文件名。协议主机名文件夹名文件名URL的类型超链接的URL有两种类型：绝对URL和相对URL。绝对URL如下：相对URL分为两种：1、相对文档的URL，这种URL以链接的原文档为起点。2、相对服务器的URL，这种URL以服务器的根目录为前点。URL的类型htmlheadtitle超链接/title/headbodyp点击ahref=链接01/a链接到第1个网页。/pp点击ahref=/02.html链接02/a链接到第2个网页。/pp点击ahref=../sub/03.html链接03/a链接到第3个网页。/p/body/html绝对URL服务器相对URL文档相对URL绝对URL和文档相对URL比较常用。4.2设置页面内部特定目标的链接超链接不仅可以跳转到其他页面，也可以在本业内跳转。二者的跳转目标名称必须要一致4.2设置页面内部特定目标的链接htmlheadtitle无标题文档/title/headbodypahref=#first第1本书/aahref=#second第2本书/aahref=#third第3本书/a/ph3aname=“third/a精通CSS+DIV网页样式与布局/h3p本书系统地讲解了CSS层叠样式表的……能力。/pp详细介绍/ph3aname=second/aCSS设计彻底研究/h3p本书是一本深入研究和揭示CSS设计技术的书籍。本书在……以然。br详细介绍/ph3aname=third/aCSS设计禅意花园/h3p本书作者是世界著名的网站设计师，……性能优良且具有强大生命力的网站。br/body/html4.3设置图片的超链接htmlheadtitle图片的超链接/title/headbodyahref=1.htmlimgsrc=cup.gif/abr/body/html4.3设置图片的超链接为图片添加一个超链接后，浏览器就会自动给图片加上一个粗边框，就像在建立文字超链接时会加上下划线一样。如果希望去掉这个边框，只需要在img标记中设置border=“1”后就可以取消这个边框。ahref=1.htmlimgsrc=cup.gifborder=“0”/a4.4设置电子邮件链接电子邮件链接类似于URL的链接方式，格式是mailto:电子邮件地址。htmlheadtitle邮件的链接/title/headbody联系我们：ahref=mailto:[e-mail]给我们发送邮件/a。/body/html4.5设置以新窗口显示链接页面如果要在点击某个链接以后，打开一个新的浏览器窗口，在这个新窗口里显示目标页面，就需要在a标记中设置”target”属性。Target属性设置为“_blank”，就会自动打开一个新窗口，显示目标页面。4.5设置以新窗口显示链接页面htmlheadtitle以新窗口方式打开/title/headbody以ahref=1.htmltarget=_blank新窗口/a方式打开一个页面。/body/html4.6创建热点区域所谓图片的热点区域就是将一个图片划分成若干个链接区域。访问者点击不同区域会链接到不同的目标页面。HTML中可以使用3种类型的热点区域：矩形、圆形和多边形。4.6创建热点区域imgsrc=hotmap.jpgwidth=542height=266border=0usemap=#1mapname=“1areashape=rectcoords=25,71,168,185href=2.htmltarget=_blank矩形左上右下链接地址4.6创建热点区域areashape=circlecoords=302,124,59href=2.htmltarget=_parentareashape=polycoords=447,198,438,183,384,106,391,48,469,26,509,101,483,150href=2.htmltarget=_self/map左上半径各点坐标4.6创建热点区域在设计窗口中定位热点区域：4.6创建热点区域1、创建新文档，插入图片。2、在属性面板中选择要创建的热点类型（矩形、圆形、多边形）3、画区域4、指针热点进行调整5、输入跳转的目标页面6、选择跳转方式4.7框架之间的链接框架是一种常用网页布局工具。它的作用是把浏览器的显示空间划分为几个部分，每个部分都可以独立显示不同的页面。建立框架与框架集（frameframeset）frameset和/frameset标记是与body和/body同级的，因此，不要将frameset和/frameset标记包含在body标记中，否则frameset标记将无法正常使用。用cols属性将窗口分为左右两部分窗口框架的分割方式有两种，一种是水平分割，另一种是垂直分割。在frameset标记中的cols属性和rows属性用来控制窗口的分割方式。Cols属性可以将一个框架集分割为若干列，其中语法结构是：framesetcols=“n1,n2……，*”N1表示窗口1的的宽度，以像素或百分比为单位*表示分配给前面所有窗口后剩下的宽度。比如framesetcols=“20%,30%,*”,那么星号就代表50%用rows属性将窗口分为上中下三部分htmlheadtitle/title/headframesetrows=“30%,40%,*”frameframe/frameset/html框架的嵌套Rows属性和cols属性也可以混合起来使用，实现框架的嵌套。htmlheadtitle/title/headframesetrows=“30%,*”frameframesetrows=“60%,*”frameframe/frameset/frameset/html用src属性在框架中插入网页其语法结构如下：framesrc=HTML文件的位置htmlheadtitle/title/headframesetrows=“40%,*”framesrc=1.htmframesrc=2.htm/frameset/html用src属性在框架之间链接（P63）Target的四种属性：_blank:表示新打开一个浏览器窗口，在其中显示链接的目标页面。_self:相当于不设置target属性，窗口中显示链接的目标页面。_top:表示在顶级框架，也就是在浏览器窗口中显示链接的目标页面。_partent：表示在上一级框架中显示链接的目标页面。创建嵌入式框架iframe也称为“浮动框架”，可以自由控制窗口的大小。在使用的时候不需要创建框架集，直接插入iframe即可。iframewidth=800height=200src=1.htm/iframe4.8链接增多后网站的组织结构与维护通常在开发网站的时候，并不是把所有的网页文件都保存在一个站点根目录下，而是使用不同的文件夹存放不同性质的文件。建立起合适的网站文件存储结果，能迅速定位自己需要的文件，或者将制作完成的文件存储到相应的目录中，进行网站的开发工作。4.8链接增多后网站的组织结构与维护方案一将不同类型的文件存放在不同的文件夹中，这种存储方法使用于中小型的网站，该方法是用过文件的类型对文件进行管理。例如：将图片文件都放在Pic文件夹中，将声音文件都放在sounds文件夹中。方案二按照主题对文件进行分类管理。在这种存储方案中，网站的页面按照不同的主题进行分类存储。关于某个主题的所有文件被存放在一个文件夹中，然后再进一步细分文件的类型。这种存储方案使用那些页面与文件数量众多，信息量大的静态网站。方案三对文件的类型进行进一步细分存储管理。这种存储方案实际上式第一种存储方案的深化，将页面进一步细分后进行分类存储管理。这种存储方案使用于那些文件类型复杂、包含各种文件的多媒体动态网站。