3-超链接与多媒体

1、网页中的网页中的超链接与多媒体设计超链接与多媒体设计教学基本要求教学基本要求 n超链接是网页设计基础中必不可少的基础知识，内容不是很多，但经常用到，所以一定要完全理解并熟练掌握。路径的概念路径的概念超链接的建立超链接的建立超链接的应用超链接的应用路径的概念路径的概念n在WWW上所有的文件都有自己的存放位置和路径，创建文件间的超链接的关键是确定被链接文件的路径。在WWW上文件路径有两种表示方法：绝对路径和相对路径。n绝对路径v 绝对路径是文件的完整路径，以Web站点的根目录为基准。v 例：http:/ 是以引用文件的网页所在的位置为参数基础而建立的目录路径如果当前位于joke.html页面：lo

2、gin.html的相对路径为 ”login.html”face.gif的相对路径为 ”images/face.gif”index.html的相对路径为 ”./index.html”超链接标签超链接标签n语法语法v 显示的文字 v 属性href：链接的目标v 属性title：鼠标指向链接时的提示文字v 属性target：显示目标内容的窗口类型：属性值描述_parent在上一级窗口中打开_blank在新窗口中打开_self在当前窗口中打开_top在最前端显示的窗口中打开超链接设计例超链接设计例n代码如下： 链接示例 新浪网站链接 超链接设计例超链接设计例n点击“新浪网站链接”链接，就可以打开新的窗

3、口，展现新浪网主页。超链接的几种设计超链接的几种设计n页内链接v 建立链接： 目录文字 v 链接目标： 书签内容 n站内链接v 显示的文字 n其他站点链接v 显示的文字 n图像式链接v n邮箱链接v 显示的文字 网页内部链接例网页内部链接例n如果一个页面很长，寻找相应内容比较困难，可以通过在同一个网页文件中建立链接来实现。n建立页内链接：v 目录文字 n在链接的目标处（通常我们称之为书签或锚）v 书签内容 查看我的爱好查看我的性格 . .爱好我喜欢户外的活动，不太愿意呆在室内。爱到有山有水的地方玩，比如“十渡”、“桃源仙谷”和“生存岛”这样的地方 性格自认为比较开朗，有时也会表现出内向的一面，

4、朋友说我有 图像链接例图像链接例n只需将标签放在和之间，那么这个图像将成为一个可单击的图像，并产生一个链接。n语法格式为：v n图像链接示例图像链接示例n示例代码如下： 链接示例 你可以将一张图片作为一个链接，点击这个图片。 图像链接示例图像链接示例n页面显示效果如图邮箱链接邮箱链接n在网站中，经常会看到“联系我们”或者“给我写信”的链接，用鼠标点击后会发现将启动本地机器的邮件工具，并且地址栏的内容已经填写完整。n其实现的语法格式为：v 描述文字v 注：除发送邮箱外，其他邮件选项可在邮件工具界面中填写。n邮箱链接邮箱链接n示例：v 给管理员发送邮件 邮箱链接例邮箱链接例n代码如下： 邮箱链接示

5、例 这个邮箱地址链接写了to, cc, bcc, subject, body 的内容： 写信给新浪 注:空格请用%20表示。邮箱链接例邮箱链接例n页面显示效果图：邮箱链接例邮箱链接例n点击“写信给新浪”链接后，效果如图：网页中的多媒体设计网页中的多媒体设计n教学要求：v 掌握制作多媒体网页的方法v 网页插入滚动字幕v 在网页中嵌入音频、视频及flash文件等多媒体文件，使网页的内容更加丰富多彩。滚动字幕滚动字幕n使用标签实现，是一个双标签。n语法格式:v 要滚动的文字 nMarquee属性介绍：v direction属性：文字滚动方向（取值：up、down、left、right）v behav

6、ior属性：滚动方式（ scroll循环、slide单次、alternate调向）v scrollamount属性：滚动速度v scrolldelay属性：设置滚动延迟v bgcolor属性：设置背景色。v height和width属性：设置滚动字幕的高度和宽度v hspace和vspace属性：设置滚动字幕周围的空白区域的大小v loop属性：设置滚动次数滚动字幕例滚动字幕例n滚动字幕示例代码滚动文字滚动文字 生命在于运动，奋斗不息，“滚动”不止滚动字幕例滚动字幕例n滚动字幕示例嵌入多媒体文件嵌入多媒体文件插入音频插入音频嵌入嵌入mp3mp3、设置背景音乐、设置背景音乐插入视频插入视频插入插入aviavi视频文件视频文件插入动画插入动画插入插入FlashFlash动画动画插入音频插入音频n嵌入mp3的语法格式为：v v 例：n置背景音乐的语法格式为：v v 例： 背景音乐 背景音乐 插入视频插入视频n在网页中插入avi视频文件的语法格式为：v n例： 插入视频 播放视频 n插入插入Flash动画