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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,3,章,超级链接与网页中的多媒体,本章知识技能要点：,掌握创建页面之间超级链接的基本方法,掌握绝对路径和相对路径的概念及其使用方法,掌握建立页面目录链接的方法,掌握在网页中插入图像以及设置各种图像效果的方法,掌握在网页中嵌入视频文件和音频文件的方法,掌握制作滚动对象的基本方法,3.1,建立超链接,HTML,文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，,WEB,上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们就可享受丰富多采的多媒体世界。,3.1.1,超链接标签,超链接标签,用于在网页中建立超级链接。,基本格式为：,链接文字,标签,表示一个链接的开始，,表示链接的结束；,属性“,href,”,定义了这个链接所指的地方，可以指向任何一个文件源：例如一个,HTML,网页，一个图片，一个影视文件等等。,浏览者通过点击“链接文字”可以到达指定的文件。,例如：,新浪主页,浏览器运行时，网页中显示“新浪主页”为带有下划线的文字，当浏览者点击它时，可以到达新浪网站的主页。,链接分为本地链接、,URL,链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。,3.1,建立超链接,3.1.2,相对路径和绝对路径,3.1.2.1,绝对路径,绝对路径：包含了标识,internet,上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称。,其格式为：,通讯协议：,/,服务器地址：通讯端口,/,文件位置,./,文件名。,例：, ,index.html,index.html,3.1,建立超链接,3.1.3,本地链接,对同一台机器上的不同文件进行的连接称为本地链接，它使用,unix,或,dos,系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。,例如：我们现在正在浏览的这一页的绝对路径是：,c:studyhtmlindex.htm,。若以相对路径表示则为：,文件的链接,3.1.4 URL,链接,如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种,URL,地址。,URL,意思是统一资源定位器，通过它可以以多种通讯协议与外界沟通来交换信息。,URL,链接的形式是：协议名：,/,主机,.,域名路径文件名,写在,HTML,文件中，链接其他主机上的文件时，格式如下：,电子工业出版社,3.1,建立超链接,3.1.5,电子邮件链接,在网站中，你经常会看到,联系我们,的链接，一点击这个链接，就会触发你的邮件客户端，比如,outlook express,，然后显示一个新建,mail,的窗口。用,可以实现这样的功能。,例如：,联系新浪,这是我的电子信箱,3.1.6,目录链接,前面所介绍的资源地址，只是单纯的指向一个文件，但是，在浏览页面时如果页面很长，要不断的拖动滚动条给浏览带来不便，要是浏览者可以从上头阅读到尾，又可以选择自己感兴趣的部分阅读，以上方法却是无法做到的。对于直接链接到某文件上部、下部或是其中的任意部分，可以使用目录链接。这种链接又称为书签链接或是锚点链接。,3.1,建立超链接,制作目录链接方法是：,（,1,）创建一个定位标记，设置文件中将要链接的位置。,格式是：,（,2,）在调用此链接的文件中的特定部分，定义连接。,格式是：,链接文字,。,如果是在一个文件内跳转，文件名可以省略不写。,3.1,建立超链接,3.2,网页中的多媒体,3.2.1,使用图像,3.2.1.1,插入图象标签,插入图像标签的格式为：,src,属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形文件，也可以是位于远端主机上的图形文件。地址的表示方法可以沿用上一篇内容“文件的链接”中,URL,地址表示方法。,表,3-1,列举了插入图片标签,中经常使用的属性。,例：,3.2,网页中的多媒体,3.2,网页中的多媒体,例,3-2,：,图像标签的应用示例,爱在深秋,秋雨无声无息地下着。,飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了,黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢,?,3.2,网页中的多媒体,例,3-2,的运行效果图,3.2,网页中的多媒体,3.2.1.2,图像的超链接,图象的超链接就是当网页浏览者在图形上单击时，就能连接到另一个地址上去。实现的方法和文字的链接方法是一样的，都是用,标签来完成。只要将,标签放在,和,之间就可以了。,其基本格式如下：,例如：,显示结果为：在网页中显示图像,1.gif,当浏览者点击这个图像时，便可连接到网页,index.htm,。,3.2,网页中的多媒体,3.2.1.3,影像地图超链接,在,HTML,中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行不同的超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：,。,使用格式如下：,3.2,网页中的多媒体,例,3-4,：,影像地图,本例在运行时，点击图像上的不同区域，分别可以链接到,1.htm,页面或者,2.htm,页面。,3.2,网页中的多媒体,3.2.2,使用视频,在网页中可以嵌入,.,mov,.mpg,.avi,等文件类型的动画或影片。常用的方法有以下三种。,3.2.2.1,用,标签插入视频文件,用,标签插入视频文件的格式是：,例如：,该语句的作用是在网页中嵌入一个名为,avifile.avi,的电影文件，往复播放,3,遍，并且当鼠标划过该对象时开始播放。,3.2,网页中的多媒体,3.2.2.2,用,标签链接一个视频文件,将视频文件做成一个链接的方法是：,视频名称,例如：,欣赏影片,运行时网页上显示“,欣赏影片,”字样，当浏览者点击此处时，便播放所链接的电影文件。,3.2.2.3,用,标签自动载入视频文件,使用,标签播放视频的格式为：,3.2,网页中的多媒体,例,3-5,：,视频播放,本例在运行时显示一个播放器,窗口，当点击播放按钮时开始,播放。,3.2,网页中的多媒体,3.2.3,播放音乐,HTML,除了可以插入图形和视频之外，还可以播放音乐。用浏览器可以播放的音乐格式有：,MIDI,音乐、,WAV,音乐、,AU,格式。,3.2.3.1,用,标签点播音乐,将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：,使用的格式为：,乐曲名,例如：,同桌的你,-au,音乐,3.2.3.2,用,标签自动载入音乐,基本语法是：,3.2,网页中的多媒体,例,3-6,：,视频播放,本例在运行时播放器窗口被隐藏，当打开页面时自动开始播放。如果将,hidden=true,属性取消，则可显示一个播放器窗口。,3.2,网页中的多媒体,3.2.3.3,背景音乐标签,在,html,文件中，还可以使用,标签为网页插入背景音乐。运行的效果是当网页被打开时自动播放所设置的音乐文件。不过只有在,IE,浏览器中才可以听到。,格式是：,其中,loop=#:,用于设置播放的循环次数,例：,3.2.4,滚动对象标签,在网页的设计过程中，动态效果的插入，会使网页更加生动灵活、丰富多彩。,标签可以实现设置的元素在网页中移动的效果，以达到动感十足的视觉效果。,应用格式为,:,滚动对象,标签有很多属性，用来定义元素的各种滚动方式。参见表,3-5.,3.2,网页中的多媒体,3.2,网页中的多媒体,例,3-7,：,默认的滚动文字,往上滚动的文字效果,往右滚动的文字效果,来回滚动的文字效果,以下是滚动的一组图片, ,3.2,网页中的多媒体,3.3,练习题,一、思考题：,什么是绝对路径和相对路径？,什么是超级链接？,网页中经常使用的超级链接有哪些类型？,网页中经常使用哪些格式的图像文件？,网页中经常使用哪些格式的视频文件？,网页中经常使用哪些格式的音频文件？,二、操作题：,用,HTML,代码设计一个使用背景图像的网页，其中含有三个超级链接，分别连接到另外三个网页。,仿照例,3-1,的运行效果，制作一个使用目录链接的浏览形式的网页。,用,HTML,代码设计一个多媒体网页，要求：,使用图片，并且合理设置图像的大小、位置、对齐方式。,在网页中嵌入视频文件，并能正确浏览。,在网页中含有音频文件，并能正确播放。,