网页设计第3章超级链接与网页中的多媒体.ppt

《网页设计第3章超级链接与网页中的多媒体.ppt》由会员分享，可在线阅读，更多相关《网页设计第3章超级链接与网页中的多媒体.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第 3 章超级链接与网页中的多媒体超级链接与网页中的多媒体本章知识技能要点：本章知识技能要点：掌握创建页面之间超级链接的基本方法掌握创建页面之间超级链接的基本方法 掌握绝对路径和相对路径的概念及其使用方法掌握绝对路径和相对路径的概念及其使用方法 掌握建立页面目录链接的方法掌握建立页面目录链接的方法 掌握在网页中插入图像以及设置各种图像效果的方法掌握在网页中插入图像以及设置各种图像效果的方法 掌握在网页中嵌入视频文件和音频文件的方法掌握在网页中嵌入视频文件和音频文件的方法 掌握制作滚动对象的基本方法掌握制作滚动对象的基本方法3.1 建立超链接HTML文件中最重要的应用之一就是超链接，超链接是一个

2、网站的灵魂，WEB上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们就可享受丰富多采的多媒体世界。3.1.1 3.1.1 超链接标签超链接标签 超链接标签超链接标签用于在网页中建立超级链接。用于在网页中建立超级链接。基本格式为：基本格式为：a href=链接文字链接文字 标签标签表示一个链接的开始，表示一个链接的开始，表示链接的结束；表示链接的结束；属属性性“href”“href”定定义义了了这这个个链链接接所所指指的

3、的地地方方，可可以以指指向向任任何何一一个个文文件件源源：例例如如一一个个HTMLHTML网网页页，一一个个图图片片，一一个个影影视视文文件件等等等。等。浏览者通过点击浏览者通过点击“链接文字链接文字”可以到达指定的文件。可以到达指定的文件。例如：例如：新浪主页新浪主页浏浏览览器器运运行行时时，网网页页中中显显示示“新新浪浪主主页页”为为带带有有下下划划线线的的文文字字，当浏览者点击它时，可以到达新浪网站的主页。当浏览者点击它时，可以到达新浪网站的主页。链链接接分分为为本本地地链链接接、URLURL链链接接和和目目录录链链接接。在在各各种种链链接接的的各各个个要要素素中中，资资源源地地址址是是

4、最最重重要要的的，一一旦旦路路径径上上出出现现差差错错，该该资资源就无法从用户端取得。源就无法从用户端取得。3.1 建立超链接 3.1.2 3.1.2 相对路径和绝对路径相对路径和绝对路径 3.1.2.1 3.1.2.1 绝对路径绝对路径 绝对路径：包含了标识绝对路径：包含了标识internetinternet上的文件所需要的所有信息。上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称。机名称，文件夹名称和文件名称。其格式为：其格式为：通讯协议：通讯协议：/服务器地址：通讯端口服务器地址

5、：通讯端口/文件位置文件位置././文文件名。件名。例：（此网址为假设）例：（此网址为假设）表明采用表明采用httphttp协议从名为的服务器上的目录协议从名为的服务器上的目录mywebmyweb中获得文中获得文件。件。3.1 建立超链接3.1.2.2 3.1.2.2 相对路径相对路径 相相对对路路经经是是以以当当前前文文件件所所在在路路径径为为起起点点，进进行行相相对对文文件件的的查查找找。一一个个相相对对的的URLURL不不包包括括协协议议和和主主机机地地址址信信息息，表表示示它它的的路路径径与与当当前前文文档档的的访访问问协协议议和和主主机机名名相相同同，甚甚至至有有相相同同的的目目录录

6、路路径径。通通常常只只包包含含文文件件夹夹名名和和文文件件名名。甚甚至至只只有有文文件件名名。可可以以用用相相对对URLURL指指向向与与源源文文档档位位于于同同一一服服务务器器或或同同文文件件夹夹中中的的文文件件。此此时时，浏浏览览器器链接的目标文档处在同一服务器或同一文件夹下。链接的目标文档处在同一服务器或同一文件夹下。如果链接到同一目录下，则只需输入要链接文件的名称。如果链接到同一目录下，则只需输入要链接文件的名称。例如，在里要引用文件作为超链接，例如，在里要引用文件作为超链接，设设 路径是：；路径是：；路径是：，两者在同一个目录下，路径是：，两者在同一个目录下，则在中加入超链接的代码应

7、该这样写：则在中加入超链接的代码应该这样写：3.1 建立超链接3.1.3 3.1.3 本地链接本地链接 对对同同一一台台机机器器上上的的不不同同文文件件进进行行的的连连接接称称为为本本地地链链接接，它它使使用用unixunix或或dosdos系系统统中中文文件件路路径径的的表表示示方方法法，采采用用绝绝对对路路径径或或相相对对路径来指示一个文件。路径来指示一个文件。例例如如：我我们们现现在在正正在在浏浏览览的的这这一一页页的的绝绝对对路路径径是是：。若若以以相相对对路径表示则为：路径表示则为：文件的链接文件的链接3.1.4 URL3.1.4 URL链接链接 如如果果链链接接的的文文件件在在其其

8、它它服服务务器器上上，我我们们就就要要弄弄清清我我们们所所指指向向的的文文件件时时采采用用的的哪哪一一种种URLURL地地址址。URLURL意意思思是是统统一一资资源源定定位位器器，通过它可以以多种通讯协议与外界沟通来交换信息。通过它可以以多种通讯协议与外界沟通来交换信息。URLURL链链接接的的形形式式是是：协协议议名名：/主主机机.域域名名路路径径文文件件名名 写在写在HTMLHTML文件中，链接其他主机上的文件时，格式如下：文件中，链接其他主机上的文件时，格式如下：电子工业出版社电子工业出版社3.1 建立超链接3.1.5 3.1.5 电子邮件链接电子邮件链接 在在网网站站中中，你你经经常

9、常会会看看到到 联联系系我我们们 的的链链接接，一一点点击击这这个个链链接接，就就会会触触发发你你的的邮邮件件客客户户端端，比比如如outlook outlook expressexpress，然然后后显示一个新建显示一个新建mailmail的窗口。用的窗口。用可以实现这样的功能。可以实现这样的功能。例如：例如：联系新浪联系新浪 a href=mailto:这这是是我我的的电电子子信信箱箱3.1.6 3.1.6 目录链接目录链接 前前面面所所介介绍绍的的资资源源地地址址，只只是是单单纯纯的的指指向向一一个个文文件件，但但是是，在在浏浏览览页页面面时时如如果果页页面面很很长长，要要不不断断的的拖

10、拖动动滚滚动动条条给给浏浏览览带带来来不不便便，要要是是浏浏览览者者可可以以从从上上头头阅阅读读到到尾尾，又又可可以以选选择择自自己己感感兴兴趣趣的的部部分分阅阅读读，以以上上方方法法却却是是无无法法做做到到的的。对对于于直直接接链链接接到到某某文文件件上上部部、下下部部或或是是其其中中的的任任意意部部分分，可可以以使使用用目目录录链接。这种链接又称为书签链接或是锚点链接。链接。这种链接又称为书签链接或是锚点链接。3.1 建立超链接制作目录链接方法是：制作目录链接方法是：（1 1）创建一个定位标记，设置文件中将要链接的位置。）创建一个定位标记，设置文件中将要链接的位置。格式是：格式是：a na

11、me=（2 2）在调用此链接的文件中的特定部分，定义连接。）在调用此链接的文件中的特定部分，定义连接。格式是：格式是：a href=链接文字链接文字。如果是在一个文件内跳转，文件名可以省略不写。如果是在一个文件内跳转，文件名可以省略不写。3.1 建立超链接3.2 网页中的多媒体3.2.1 3.2.1 使用图像使用图像3.2.1.1 3.2.1.1 插入图象标签插入图象标签插入图像标签的格式为：插入图像标签的格式为：img src=srcsrc属属性性指指明明了了所所要要链链接接的的图图象象文文件件地地址址，这这个个图图形形文文件件可可以以是是本本地地机机器器上上的的图图形形文文件件，也也可可以

12、以是是位位于于远远端端主主机机上上的的图图形形文文件件。地地址址的的表表示示方方法法可可以以沿沿用用上上一一篇篇内容内容“文件的链接文件的链接”中中URLURL地址表示方法。地址表示方法。表表3-13-1列举了插入图片标签列举了插入图片标签中经常使用的属性。中经常使用的属性。例：例：3.2 网页中的多媒体3.2 网页中的多媒体例例例例3-23-2：图像标签的应用示例图像标签的应用示例 爱在深秋爱在深秋 img src=1.gif width=100 heigth=100 align=left hspace=30 vspace=20 秋雨无声无息地下着。秋雨无声无息地下着。飒飒的秋风不可一世地横

13、行在萧条的郊外。无力与秋风抗争的枯叶，只能飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了地上落叶多了 黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深雨到深秋易作霖，萧萧难会此时心秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀，此时，又有谁能听我诉说心中的那份情怀呢呢?3.2 网页中的多媒体例例3-2的运行效果图的运行效果图 3.2 网页中的多媒

14、体3.2.1.2 3.2.1.2 图像的超链接图像的超链接 图图象象的的超超链链接接就就是是当当网网页页浏浏览览者者在在图图形形上上单单击击时时，就就能能连连接接到到另另一一个个地地址址上上去去。实实现现的的方方法法和和文文字字的的链链接接方方法法是是一一样样的的，都都是是用用标标签签来来完完成成。只只要要将将标标签签放放在在和和之之间就可以了。间就可以了。其基本格式如下：其基本格式如下：a 例如：例如：显显示示结结果果为为：在在网网页页中中显显示示图图像像1.gif,1.gif,当当浏浏览览者者点点击击这这个个图图像像时，便可连接到网页。时，便可连接到网页。3.2 网页中的多媒体3.2.1.

15、3 3.2.1.3 影像地图超链接影像地图超链接 在在HTMLHTML中还可以把图片划分成多个热点区域，每一个热点域链接到不中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行不同的超链接。这就是影像地图。要完成地图区域再让不同的区域进行不同的超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：超链接要用到三种标签：。使用格式如下：使用格式如下：img src=map name=area shape=1 area shape=2 area sh

16、ape=n 3.2 网页中的多媒体例例例例3-43-4：影像地图影像地图 img src=1.gif alt=usemap=#yxdt 本例在运行时，点击图像上的不同区域，分别可以链接到页面或者页面。本例在运行时，点击图像上的不同区域，分别可以链接到页面或者页面。3.2 网页中的多媒体3.2.2 3.2.2 使用视频使用视频在网页中可以嵌入在网页中可以嵌入.mov,.mpg,.avi.mov,.mpg,.avi等文件类型的动画或影片。等文件类型的动画或影片。常用的方法有以下三种。常用的方法有以下三种。3.2.2.1 3.2.2.1 用用标签插入视频文件标签插入视频文件 用用标签插入视频文件的格

17、式是：标签插入视频文件的格式是：img dynsrc=avi 例如：例如：该语句的作用是在网页中嵌入一个名为的电影文件，往复播该语句的作用是在网页中嵌入一个名为的电影文件，往复播放放3 3遍，并且当鼠标划过该对象时开始播放。遍，并且当鼠标划过该对象时开始播放。3.2 网页中的多媒体3.2.2.2 3.2.2.2 用用标签链接一个视频文件标签链接一个视频文件将视频文件做成一个链接的方法是：将视频文件做成一个链接的方法是：a视频名称视频名称例如：例如：ahref=欣赏影片欣赏影片运行时网页上显示运行时网页上显示“欣赏影片欣赏影片”字样，当浏览者点字样，当浏览者点击此处时，便播放所链接的电影文件。击

18、此处时，便播放所链接的电影文件。用用标签自动载入视频文件标签自动载入视频文件使用使用标签播放视频的格式为：标签播放视频的格式为：embed src=3.2 网页中的多媒体例例例例3-53-5：视频播放视频播放 embed src=“autostart=false loop=false width=350 height=250 本例在运行时显示一个播放器本例在运行时显示一个播放器 窗口，当点击播放按钮时开始窗口，当点击播放按钮时开始 播放。播放。3.2 网页中的多媒体3.2.3 3.2.3 播放音乐播放音乐 HTMLHTML除了可以插入图形和视频之外，还可以播放音乐。用浏览器可除了可以插入图形和

19、视频之外，还可以播放音乐。用浏览器可以播放的音乐格式有：以播放的音乐格式有：MIDIMIDI音乐、音乐、WAVWAV音乐、音乐、AUAU格式。格式。用用标签点播音乐标签点播音乐 将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：音乐了，这样做的方法很简单：使用的格式为：使用的格式为：a乐曲名乐曲名 例如：例如：ahref=同桌的你同桌的你-au-au音乐音乐3.2.3.2 3.2.3.2 用用标签自动载入音乐标签自动载入音乐 基本语法是：基本语法是：embed src=3.2 网页中的多媒体例例例例3

20、-63-6：视频播放视频播放 embed src=autostart=true hidden=true loop=true width=145 height=60 本例在运行时播放器窗口被隐藏，当打开页面时自动开始播本例在运行时播放器窗口被隐藏，当打开页面时自动开始播放。如果将放。如果将hidden=truehidden=true属性取消，则可显示一个播放器窗属性取消，则可显示一个播放器窗口。口。3.2 网页中的多媒体3.2.3.3 3.2.3.3 背景音乐标签背景音乐标签在在htmlhtml文件中，还可以使用文件中，还可以使用标签为标签为网页插入背景音乐。运行的效果是当网页被打开时网页插入背

21、景音乐。运行的效果是当网页被打开时自动播放所设置的音乐文件。不过只有在自动播放所设置的音乐文件。不过只有在IEIE浏览器浏览器中才可以听到。中才可以听到。格式是：格式是：bgsound src=loop=#其中其中loop=#:loop=#:用于设置播放的循环次数用于设置播放的循环次数 例：例：3.2.4 3.2.4 滚动对象标签滚动对象标签在网页的设计过程中，动态效果的插入，会使网页在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。更加生动灵活、丰富多彩。标签可以实现设置的元素在网页中移动标签可以实现设置的元素在网页中移动的效果，以达到动感十足的视觉效果。的效果，以达到动感

22、十足的视觉效果。应用格式为应用格式为:滚动对象滚动对象标签有很多属性，用来定义元素的各种标签有很多属性，用来定义元素的各种滚动方式。参见表滚动方式。参见表3-5.3-5.3.2 网页中的多媒体3.2 网页中的多媒体例例例例3-73-7：默认的滚动文字默认的滚动文字 往上滚动的文字效果往上滚动的文字效果 往右滚动的文字效果往右滚动的文字效果 来回滚动的文字效果来回滚动的文字效果 以下是滚动的一组图片以下是滚动的一组图片 3.2 网页中的多媒体3.3 练习题一、思考题：一、思考题：一、思考题：一、思考题：什么是绝对路径和相对路径？什么是绝对路径和相对路径？什么是超级链接？什么是超级链接？网页中经常

23、使用的超级链接有哪些类型？网页中经常使用的超级链接有哪些类型？网页中经常使用哪些格式的图像文件？网页中经常使用哪些格式的图像文件？网页中经常使用哪些格式的视频文件？网页中经常使用哪些格式的视频文件？网页中经常使用哪些格式的音频文件？网页中经常使用哪些格式的音频文件？二、操作题：二、操作题：二、操作题：二、操作题：用用HTMLHTML代码设计一个使用背景图像的网页，其中含有三个超级链接，代码设计一个使用背景图像的网页，其中含有三个超级链接，分别连接到另外三个网页。分别连接到另外三个网页。仿照例仿照例3-13-1的运行效果，制作一个使用目录链接的浏览形式的网页。的运行效果，制作一个使用目录链接的浏览形式的网页。用用HTMLHTML代码设计一个多媒体网页，要求：代码设计一个多媒体网页，要求：1.1.使用图片，并且合理设置图像的大小、位置、对齐方式。使用图片，并且合理设置图像的大小、位置、对齐方式。2.2.在网页中嵌入视频文件，并能正确浏览。在网页中嵌入视频文件，并能正确浏览。3.3.在网页中含有音频文件，并能正确播放。在网页中含有音频文件，并能正确播放。