《网页设计超链接》PPT课件.ppt

网页制作综合技术教程,第三章 超链接,第四课 超链接,学习目标 超链接概述 链接路径 内部链接建立 外部链接建立 锚点链接 图像链接 图像映射,2,超链接概述,链接是超文本的“超”的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。,3,超级链接,4, 有趣的动物 会弹琴的狗狗 单击此处查看 ,超链接概述,链接是超文本的“超”的部分，链接，又称位置点anchor，将文本或图形标识指向其他文档、图形、小程序、多媒体效果或文档中特定位置。 链接由以下两个部分构成： 位置点标签，将文本或图形标识为链接 属性href，用于指定要链接的文件 标签的常用属性 href：指定链接地址 name：给链接点命名 target：指定链接的目标窗口_self、 _blank、 _top、 _parent,5,6.2 超链接的路径,一个网站的多个页面之间的关系都是通过超链接实现的，每个页面都有一个存放位置和路径，了解一个文件与另一个文件之间的路径关系对建立超链接而言是非常重要的。 在HTML文件中提供了三种路径：绝对路径、相对路径和根路径,6,绝对和相对路径名,7,要链接到另一目录 (C:example) 下的页面，可编写 或,要链接到同一目录 (C:html) 下的页面，可编写 或 ,C:html 目录,C:example目录,绝对路径名,相对路径名,设置绝对路径,绝对路径是指文件的完整路径，即在进行超链接时使用了URL，例如： 绝对路径通常会在网站的友情链接中使用,8,6.2.2 设置相对路径,相对路径是指相对于当前文件的路径，即由当前文件如何找到目标文件。采用相对路径是建立两个文件之间的相对关系，可以不受站点和所处服务器位置的影响。 相对路径的使用方法： 同一目录：输入要链接的文件名称即可 上一级目录：输入“./文件名” 下一级目录：输入“目录名/文件名” 对于图片文件而言，上面内容同样适用。,9,6.2.3 使用根路径,根路径的设置也适合内部链接的建立，一般情况下不使用根路径，根路径以/开头，后面跟随文件所在位置的详细路径。 例如文件znlj.jpg的根路径为 /example/ch06/image/znlj.jpg 使用根路径明显增加了代码的复杂程度 在动态网页技术(ASP，JSP,PHP等)中通常会设置全局常量保存重要目录，方便访问相关文件，$image + “/catelog/bags/p1.jpg”,10,实例演练,images/logo.gif ./images/logo.gif genres/rock/pinkfloyd.html,实例演练,锚点链接,锚点链接是指点击链接后跳转到同一文档的不同部分，链接的目标点必须定义为锚标记。 标签中 的 NAME 属性用于创建锚标记 主题名称 为达到这种跳转效果，需在 HREF 参数中使用该标记 热点文字,13,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,14,主题名称,主题名称,链接到同一文档的各个部分2-2,15,. . . 狮子 斑马 印度豹 狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 斑马 没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.,19.1.8 设置图片链接,基本语法, ,语法说明,href属性是用来设置图片的链接地址URL， target属性用来设置目标窗口的打开方式 img标记中还可以添加其他的属性，如height、hspace、border等。,19.1.8 设置图片链接,实例代码,19.1.8 设置图片链接,网页效果,19.1.9 设置图片热区链接,基本语法 ,热区链接属性的定义如下： ,19.1.9 设置图片热区链接,语法说明, 标记用来插入图片和引用映射图片名称，即用usemap属性来引用在标记中所定义的映射图片名称，并且要在名称前加上#号。 标记只有一个name属性，用来定义映射图片的名称。 标记有三个属性，shape属性、coords属性和href属性。 shape属性用来定义热区的形状，又有3个属性值，具体取值见表19-2 coords属性用来定义热区的坐标，不同的形状其coords属性的设置方式也不同，具体可以参见表19-3 href属性，用来定义超链接的目标地址。,19.1.9 设置图片热区链接,表19-2 shape属性取值说明,表19-2 shape属性取值说明,19.1.9 设置图片热区链接,示例 选择矩形热区 ,手形所在的矩形区域就是定义好的热区链接。 通过单击该区域即可打开链接地址19-1-8-2.html,19.1.9 设置图片热区链接,示例 ,厦大漳州校区地图,厦大漳州校区地图,中国地图, ,电子邮件链接,用户可从网页发送电子邮件,27, 海豚 充分交流，密切配合 据说，海豚的交流模式几乎与人类的一样复杂！ 请将您的疑问发送至 David Fernandez ,下载链接,在图象、文字链接的地方，将压缩文件做为链接地址 脚本链接： javascript:window.close(),作业,制作页面-continent/index.html 体现以下技术的几种： 内部链接建立 外部链接建立 锚点链接 图像链接 图像映射,29,框架,广告栏顶部框架(top.htm),商品详细介绍右侧框架(main.htm),商品导航 左侧 框架(left.htm),为何使用框架,在另一个固定部分 显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。 站点中只有此部分是变化的。,32,9.1 框架概述,框架用于将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面内容；另外框架可以方便地进行网页的导航。 框架集 框架主要包括两部分：框架集和框架。 框架集是在一个文档内定义一组框架结构的HTML网页，它定义了在一个窗口中显示的框架数、框架的尺寸和载入到框架中的网页等 框架指在网页上定义的一个显示区域。,33,框架集语法及属性, ,标签属性如下： Cols：将窗口纵向划分为几个框架 Rows：将窗口横向划分为几个框架 Framespacing：设置框架边框之间的间隔距离，默认0 Bordercolor：设置框架边框颜色（设置的是间距颜色）,注意：在框架集页面代码中不要使用标签，即与不同时使用,34,补充例题,将窗口分割成左右两部分，左面占据20%，框架边框间距为4像素，颜色为红色（3-8.htm）（若是上下分割呢？） 代码如下： 框架的应用 ,此处指定上侧框架窗口为190px，*代表剩下的宽度,35,框架的设置,完成窗口分割后，需要对分割出来的每个子窗口进行控制，相应的属性在标签中设置，主要属性如下： src：设置子窗口中要显示的页面的路径和名称 name：设置子窗口的名称 frameborder：设置边框宽度，通常将其设置为0 scrolling：设置是否显示滚动条，取值有yes、no、auto（默认） noresize：禁止改变子窗口大小 marginwidth marginheight,36,Src属性应用举例, 框架应用 ,37,Name属性举例,在frame6.htm中，点击左侧框架中的超级链接，结果都显示在新窗口中，若要把左侧框架中的超链接“课程特色”、“教学大纲”、“电子课件”、“电子教案”、“授课计划”和“教材建设”所链接的页面内容显示在右侧框架中，该如何进行？ 将右侧框架命名为right 将navigation.html中的每个超链接设置target=right,3.7.6 在框架之间进行链接,图3.20 框架之间的链接,39,9.5 浮动框架,使用普通框架很难控制页面的整体宽度和布局，而浮动框架是一种特殊的框架页面，在浏览器窗口中可以直接将浮动框架嵌入在某个单元格中，以达到通过表格控制页面布局的目的。语法如下： 注意：浮动框架总是要显式设置高度和宽度,40,完成案例iframe.htm,41,为上面案例添加外围一行一列的外围表格，用于设置页面边框效果。,