网页设计超链接.ppt

《网页设计超链接.ppt》由会员分享，可在线阅读，更多相关《网页设计超链接.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、网页制作综合技术教程网页制作综合技术教程第三章第三章第三章第三章 超链接超链接超链接超链接第四课第四课 超链接超链接学习目标学习目标超链接概述超链接概述链接路径链接路径内部链接建立内部链接建立外部链接建立外部链接建立锚点链接锚点链接图像链接图像链接图像映射图像映射2 超链接概述超链接概述链接是超文本的链接是超文本的“超超”的部分，链接，又称位置点的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。小程序、多媒体效果或文档中特定位置。3超级链接超级链接4有趣的动物会弹琴的狗狗会弹琴的狗狗 单击此处查看

2、单击此处查看超链接概述超链接概述链接是超文本的链接是超文本的“超超”的部分，链接，又称位置点的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。小程序、多媒体效果或文档中特定位置。链接由以下两个部分构成：链接由以下两个部分构成：位置点标签位置点标签，将文本或图形标识为链接，将文本或图形标识为链接属性属性href，用于，用于指定要链接的文件指定要链接的文件标签标签的常用属性的常用属性 href：指定链接地址：指定链接地址 name：给链接点命名：给链接点命名 target：指定链接的目标窗口：指定链接

3、的目标窗口_self、_blank、_top、_parent56.2 超链接的路径超链接的路径一个网站的多个页面之间的关系都是通过一个网站的多个页面之间的关系都是通过超链接实现的，每个页面都有一个存放超链接实现的，每个页面都有一个存放位置和路径，了解一个文件与另一个文位置和路径，了解一个文件与另一个文件之间的路径关系对建立超链接而言是件之间的路径关系对建立超链接而言是非常重要的。非常重要的。在在HTML文件中提供了三种路径：绝对路文件中提供了三种路径：绝对路径、相对路径和根路径径、相对路径和根路径6绝对和相对路径名绝对和相对路径名7要链接到另一目录(C:example)下的页面，可编写 或 要

4、链接到同一目录(C:html)下的页面，可编写 或 C:html 目录目录C:example目录目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名绝对路径名相对路径名相对路径名设置绝对路径设置绝对路径绝对路径是指文件的完整路径，即在进行超链接绝对路径是指文件的完整路径，即在进行超链接时使用了时使用了URL，例如：，例如：/index.php/teach/index.php绝对路径通常会在网站的友情链接中使用绝对路径通常会在网站的友情链接中使用86.2.2 设置相对路径设置相对路径相对路径是指相对路径是指相对于当前文件的路径相对于当前文件的路径，即，即由当前文件如何找

5、到目标文件。采用相由当前文件如何找到目标文件。采用相对路径是建立两个文件之间的相对关系，对路径是建立两个文件之间的相对关系，可以不受站点和所处服务器位置的影响。可以不受站点和所处服务器位置的影响。相对路径的使用方法：相对路径的使用方法：同一目录：输入要链接的文件名称即可同一目录：输入要链接的文件名称即可上一级目录：输入上一级目录：输入“./文件名文件名”下一级目录：输入下一级目录：输入“目录名目录名/文件名文件名”对于图片文件而言，上面内容同样适用。对于图片文件而言，上面内容同样适用。96.2.3 使用根路径使用根路径根路径的设置也适合内部链接的建立，一般根路径的设置也适合内部链接的建立，一般

6、情况下不使用根路径，情况下不使用根路径，根路径以根路径以/开头开头，后，后面跟随文件所在位置的详细路径。面跟随文件所在位置的详细路径。例如文件例如文件znlj.jpg的根路径为的根路径为 /example/ch06/image/znlj.jpg使用根路径明显增加了代码的复杂程度使用根路径明显增加了代码的复杂程度在动态网页技术在动态网页技术(ASP，JSP,PHP等等)中通常中通常会设置全局常量保存重要目录，方便访问会设置全局常量保存重要目录，方便访问相关文件，相关文件，$image+“/catelog/bags/p1.jpg”10实例演练实例演练images/logo.gif./images/

7、logo.gifgenres/rock/pinkfloyd.html实例演练实例演练锚点链接锚点链接锚点链接是指点击链接后跳转到同一文档锚点链接是指点击链接后跳转到同一文档的不同部分，链接的目标点必须定义为的不同部分，链接的目标点必须定义为锚标记。锚标记。标签中标签中 的的 NAME 属性用于创建锚标属性用于创建锚标记记 主题名称主题名称为达到这种跳转效果，需在为达到这种跳转效果，需在 HREF 参数参数中使用该标记中使用该标记热点文字热点文字 13链接到同一文档的某个部分链接到同一文档的某个部分2-1锚记标签用于使用户锚记标签用于使用户“跳跳”到文档的某个部到文档的某个部分分HTML 的的

8、NAME 属性用于创建锚标记属性用于创建锚标记 为达到这种跳转效果，请在为达到这种跳转效果，请在 HREF 参数中使参数中使用该标记用该标记14主题名称主题名称链接到同一文档的各个部分链接到同一文档的各个部分2-215.狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.19.1.8 19.1.8 设置图片链接设置图片链接基本语法基本语法a href=”URL”target=”img src=”语法说明语法说明hr

9、ef属性是用来设置图片的链接地址链接地址URL，target属性用来设置目标窗口的打开方式 img标记中还可以添加其他的属性，如height、hspace、border等。19.1.8 19.1.8 设置图片链接设置图片链接实例代码实例代码19.1.8 19.1.8 设置图片链接设置图片链接网页效果网页效果19.1.9 19.1.9 设置图片热区链接设置图片热区链接基本语法基本语法 img src=”热区链接属性的定义如下：map name=”area shape=”href=”URL”19.1.9 19.1.9 设置图片热区链接设置图片热区链接语法说明语法说明 标记用来插入图片和引用映射图片

10、名称，即用usemapusemap属性来属性来引用在引用在标记中所定义的映射图片名称，并且要在名称前加上标记中所定义的映射图片名称，并且要在名称前加上#号号。标记只有一个name属性，用来定义映射图片的名称。标记有三个属性，shape属性、coords属性和href属性。shape属性用来定义热区的形状，又有3个属性值，具体取值见表19-2 coords属性用来定义热区的坐标，不同的形状其coords属性的设置方式也不同，具体可以参见表19-3 href属性，用来定义超链接的目标地址。19.1.9 19.1.9 设置图片热区链接设置图片热区链接表19-2 shape属性取值说明表19-2 sh

11、ape属性取值说明19.1.9 19.1.9 设置图片热区链接设置图片热区链接示例 选择矩形热区 手形手形所在的矩形区域就是定义好的所在的矩形区域就是定义好的热区链接热区链接。通过单击该区域即可打开通过单击该区域即可打开链接地址链接地址19-1-8-2.html19.1.9 19.1.9 设置图片热区链接设置图片热区链接示例 厦大漳州校区地图#厦大漳州校区地图#中国地图 电子邮件链接电子邮件链接用户可从网页发送电子邮件用户可从网页发送电子邮件27海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez下载链接下载链接在图象、文字链接的地

12、方，将压缩文件做为链在图象、文字链接的地方，将压缩文件做为链接地址接地址脚本链接：脚本链接：javascript:window.close()javascript:window.close()作业作业制作页面制作页面-continent/index.html体现以下技术的几种：体现以下技术的几种：内部链接建立内部链接建立外部链接建立外部链接建立锚点链接锚点链接图像链接图像链接图像映射图像映射29框架框架 广告栏顶部框架(top.htm)商品详细介绍右侧框架(main.htm)商品导航左侧框架(left.htm)为何使用框架 在另一个固定部分在另一个固定部分显示导航部分显示导航部分在页面的一个固

13、定部分显示徽标或静态信息在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。在此处显示主要内容。站点中只有此部分是变化的。站点中只有此部分是变化的。329.1 框架概述框架概述框架用于将浏览器窗口划分为若干个区域，框架用于将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面内容；每个区域可以分别显示不同的页面内容；另外框架可以方便地进行网页的导航。另外框架可以方便地进行网页的导航。框架集框架集框架主要包括两部分：框架集和框架。框架主要包括两部分：框架集和框架。框架集是在一个文档内定义一组框架结构框架集是在一个文档内定义一组框架结构的的HTML网页，它定义了在一个窗口中显示网页，它

14、定义了在一个窗口中显示的框架数、框架的尺寸和载入到框架中的网的框架数、框架的尺寸和载入到框架中的网页等页等框架指在网页上定义的一个显示区域。框架指在网页上定义的一个显示区域。33框架集语法及属性框架集语法及属性 q标签属性如下：qCols：将窗口纵向划分为几个框架qRows：将窗口横向划分为几个框架qFramespacing：设置框架边框之间的间隔距离，默认0qBordercolor：设置框架边框颜色（设置的是间距颜色）注意：在框架集页面代码中不要使用标签，即与不同时使用34补充例题补充例题将窗口分割成左右两部分，左面占据将窗口分割成左右两部分，左面占据20%，框，框架边框间距为架边框间距为4

15、像素，颜色为红色（像素，颜色为红色（3-8.htm）（若是上下分割呢？）（若是上下分割呢？）代码如下：代码如下：框架的应用框架的应用 此处指定上侧框架窗口为190px，*代表剩下的宽度35框架的设置框架的设置完成窗口分割后，需要对分割出来的每个完成窗口分割后，需要对分割出来的每个子窗口进行控制，相应的属性在子窗口进行控制，相应的属性在标签中设置，主要属性如下：标签中设置，主要属性如下：src：设置子窗口中要显示的页面的路径和：设置子窗口中要显示的页面的路径和名称名称 name：设置子窗口的名称：设置子窗口的名称 frameborder：设置边框宽度，通常将其：设置边框宽度，通常将其设置为设置为

16、0 scrolling：设置是否显示滚动条，取值有：设置是否显示滚动条，取值有yes、no、auto（默认）（默认）noresize：禁止改变子窗口大小：禁止改变子窗口大小 marginwidth marginheight36Src属性应用举例属性应用举例 框架应用框架应用 37Name属性举例属性举例在在frame6.htm中，点击左侧框架中的超中，点击左侧框架中的超级链接，结果都显示在新窗口中，若要级链接，结果都显示在新窗口中，若要把左侧框架中的超链接把左侧框架中的超链接“课程特色课程特色”、“教学大纲教学大纲”、“电子课件电子课件”、“电子电子教案教案”、“授课计划授课计划”和和“教材建

17、设教材建设”所链接的页面内容显示在右侧框架中，所链接的页面内容显示在右侧框架中，该如何进行？该如何进行？将右侧框架命名为将右侧框架命名为right将将navigation.html中的每个超链接设置中的每个超链接设置target=right3.7.6 3.7.6 在框架之间进行链接在框架之间进行链接图图3.20 框架之间的链接框架之间的链接399.5 浮动框架浮动框架使用普通框架很难控制页面的整体宽度和布使用普通框架很难控制页面的整体宽度和布局，而浮动框架是一种特殊的框架页面，局，而浮动框架是一种特殊的框架页面，在浏览器窗口中可以直接将浮动框架嵌入在浏览器窗口中可以直接将浮动框架嵌入在某个单元格中，以达到通过表格控制页在某个单元格中，以达到通过表格控制页面布局的目的。语法如下：面布局的目的。语法如下：注意：浮动框架总是要显式设置高度和宽度注意：浮动框架总是要显式设置高度和宽度40完成案例iframe.htm770 x150 设置logo770 x35 设置一级导航，内嵌1行10列表格嵌套一行两列表格185*400浮动框架leftSrc为jxnrdh.html585*400浮动框架rightSrc为jxnr/kcts.html41为上面案例添加外围一行一列的外围表格，为上面案例添加外围一行一列的外围表格，用于设置页面边框效果。用于设置页面边框效果。