HTML建立超链接.ppt

1、第四章,邯郸学院清华万博,用HTML建立超链接,讲师：王靖,本章目标,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,掌握使用HTML建立超级链接 掌握HTML如何设置锚点,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,4.1 设置基本文字超链接,超级链接基础,1. 理解超链接 超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。 2 .按照目标端点的不同，可

2、以将超链接分为以下几种形式。 (1) 文件链接：这种链接的目标端点是的一个文件，它可以位于当前网页所在的服务器，也可以位于其他服务器。 (2) 锚点链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。 (3) E-mail链接：通过这种链接可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。,页面链接标签,链接到其他页面 免费注册,链接的地址, 链接到其他页面 免费注册 登录 ,链接内容,单击”免费注册”之后链接到的页面,Copyright 2010-2012 Hdwnt Inc. All R

3、ights Reserved.,页面链接标签,链接到其他页面 相对路径 指定从根目录到文件的完整路径。 绝对路径 指定相对于当前文件的文件位置。,在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？,两种方式：相对路径和绝对路径,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,页面链接标签,要链接到同一目录 (C:HTML) 下的页面，可编写 或 ,相对路径名,绝对路径名,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,超链接示例,页面链接标签,要实现如

4、下图所示的超链接效果，怎么办？,演示示例：演示锚链接的例子,使用锚记标签,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,页面链接标签,链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 主题名称 为达到这种跳转效果，请在 HREF 参数中使用该标记 主题名称 注意：href属性赋的值若是锚站的name属性值，则必须在书签名前边加一个“#”号。,演示示例：演示锚链接的例子, 链接到其他页面 新人上路 新人上路指南 ,1、定义锚标记,2、链接到锚标记所在位置,Copyright 2010-20

5、12 Hdwnt Inc. All Rights Reserved.,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,命名锚站示例,页面链接标签,电子邮件链接 要链接电子邮件，可在链接标签中插入”mailto:邮箱地址” 站长信箱,演示示例：演示电子邮件链接, 电子邮件链接 站长信箱 ,单击”站长信箱”链接后的输出结果,任何正确的电子邮箱地址均可,使用图像创建图片链接,标记其它常用属性 TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。如果省略该属性，则目标文档将取代包含该超链接的文档。TARGE

6、T属性的取值既可以是窗口或框架的名称，也可以用“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；用“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；用“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中；用“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。 TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字,使用图像创建图片链接,可以为图片设置链接，使其指向其它页面。要设置图片链接，只需要在锚站标记和之间包含标记，并在锚站标记的hr

7、ef属性中添加要链接到目标文件名称。,使用图像使用缩略图,即用一幅文件较小的副本图片来代替原来较大的图片，将其加入到页面中，再在较小的副本图片上创建一个指向原来的大图片的链接。这个副本图片称为“缩略图”。,创建图像地图,图像地图是图片链接的一种延伸，在一个图像地图中可以设置多个链接，可以连接到什么页面主要取决于使用者点击了图片的哪个部分。 在一张图像地图中，整张图片被分成多块活动的区域，这些区域被称为“热点”。用户需要自己定义这些热点，把它们分别链接到各自独立的URI地址。 图像地图的基本类型包括两种： 客户端图像地图：该地图将直接被浏览器处理 服务器端图像地图：该地图将被Web服务器上的一段

8、程序负责解析处理,影像地图标记 ,标记形式 热点标记（）属性 href属性，用于设定该热点所链接的url地址。 shape和coods属性，shape和coords是两个主要的参数，用于设定热点的形状和大小。 shape=“rect” ，shape=“circle” ，shape=poligon,图像地图实例,滚动标签, 滚动文字或图像 ,滚动延迟时间,滚动对象的方向,说明： scrolldelay：表示滚动延迟时间，默认值为90。 direction：表示滚动的方向，默认为从右向左。,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,查看

9、源代码,滚动标签,水平滚动 垂直滚动 Avon化妆品 雅诗兰黛 ,水平向左移动,垂直向上移动,图片和文字同时垂直向上移动,声明滚动文字结束,声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,移动的常用属性,文字移动方向的设置 文字移动方式的设置 文字移动循环的设置 文字移动速度与延时的设置 文字移动底色的设置 文字移动面积的设置,移动的常用属性,DIRECTION属性决定了文字的移动方向：,移动的常用属性,BEHAVIOR属性决定了文字的移动方式：,移动的常用属性,LOOP属性决

10、定了文字的移动次数：,移动的常用属性,SCROLLAMOUNT属性决定了文字的移动速度：,移动的常用属性,SCROLLDELAY属性决定了将中间的字体循环移动的延时。,移动的常用属性,HEIGHT、 WIDTH和BGCOLOR属性分别控制了文字移动面积的高度、宽度和背景颜色。,框架之间的链接 - p59,1建立框架与框架集 2用COLS属性将窗口分为左右两部分 3用ROWS属性将窗口分为上中下三部分 4框架的嵌套 5用SRC属性在框架中插入网页 6用SRC属性在框架之间链接 7创建嵌入式框架,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架 (m

11、ain.htm),框架的边框,框架集页面(FrameSet.htm),框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的。, ,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的基本结构, rows_cols框架 ,将窗口分割成上中下3部分,窗口边框的宽度,如果要在浏览器中创建左中右三个窗口,该如何实现？,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,如何创建多个复杂的窗口,要实现如下图所示

12、的窗口，该如何制作？,1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口,top窗口,left 窗口,right窗口,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,如何创建多个复杂的窗口,4、新建多框架HTML页面“Frame_Sets.html”,. ,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何

13、设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例2：不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性 name“显示的窗口名” ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。, ,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,演示示例3：使用target=“窗口名”,如何设置窗口链接的显示位置,target目标窗口属性 四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口, ,新启一个窗口打开文件 “right.html”,演示示例4：使用四个特殊的窗口,小结2,top.htm