1
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
课程
第04讲-添加超链接和多媒体元素
2
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
课程回顾
创建表格最基本的是哪三个标签？
创建跨行、跨列表格的属性是什么？什么情况
下使用？
表格的美化从哪几个方面进行？
3
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
本讲目录
超链接
插入多媒体对象
插入其他多媒体元素
4
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
本讲重点、难点
重点
相对路径和绝对路径的概念
链接的添加方法
插入多媒体对象
多媒体对象属性的设置
难点
绝对路径和相对路径概念的理解
多媒体属性的设置
背景透明
5
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
链接简介
网页中的链接
链接由源端点和目标端点两部分组成，有链接
的一端称为链接的源端点（鼠标光标移到其上
时通常会变为形状），提供链接资源的一端称
为目标端点，即地址，通常称之为。
是英文“ ”的缩写，其含义为“统一资源定
位符”，它定义了一种统一的网络资源寻找方
法，网络上的所有资源（如网页、音频、视频、
动画和压缩文件等）均可以通过这种方法访问。
的基本格式是“访问方案服务器:端口/路径/
文件#锚记”，
例如“” 。
6
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
链接简介
文字链接
图片链接
热点链接
目标
7
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
链接简介
设置链接样式
修改->页面属性->链接
8
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
超链接的种类
相对链接和绝对链接
相对链接只能链接页面内部的资源，如：页面和链接
所在页面处于同一个文件夹中
绝对链接一定带有通信方案，如：
9
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
相对路径和绝对路径
在网页设计中，通过路径表示链接、插入图像、、文
件的位置。
相对路径和绝对路径
绝对路径，如：c:\\
相对路径，如：
相对根目录： 如
相对上级目录：如 和
10
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
相对路径和绝对路径
要链接到同一目录 (C:\) 下的页面，可编写 <A =
"1"> 或 <A = "C:\\2">
相对路径名 绝对路径名
11
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
相对路径和绝对路径
如何表示同级目录的文件
2和3在同一个文件夹下， 如果2链接到3，可以在2中
这样写:
<a "3">同目录下文件间互相链接<>
如何表示上级目录的文件
1是2和3的上级目录中的文件，如果2或3链接到1，可
以在2或3中这样写
<a "1">链接到上级目录中的文件<>
代表一级上级目录(间隔一个目录) 代表二级上级目
录(间隔两个目录)，
12
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
相对路径和绝对路径
如何表示下级目录的文件
2和3是1的下级目录中的文件，如果在1中链接到2，
可以在1中这样写
<a "2">链接到下级目录()中的文件<>
13
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
超链接的种类
文件链接
给出链接文件的地址
电子邮件链接
163
锚标记
适合页面较长使用，跳转到文件的某个部分
空链接
超级链接
电子邮件链接
锚链接
14
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
超链接的种类
锚链接语法
<>
<>
<>链接到其他页面<>
<>
<>
<A "">[新人上路]<>
……
<A "">新人上路指南<>
……
<>
<> 1、定义锚标记
2、链接到锚标记所在位置
15
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
链接的种类
<>
<>
<>电子邮件链接<>
<>
<>
……
<A ": "> 站长信箱<>
……
<>
<>
单击“站长信箱”
链接后的输出结果
任何正确的电子邮
箱地址均可
16
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——完善版权信息
输入“设为首页”“加入收藏”“站长信箱
”
设为首页的代码：
<a "'()'('');">设为首页<>
加入收藏的代码：
<a "();">加入收藏<>
17
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
文件格式
电影文件，网络使用最佳，压缩
源文件，只能在应用程序中创建，并只能在应用程序
中打开
库文件，允许修改动画文件中的信息
在网页中插入动画之前最好将其压缩为的格式
18
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入动画
插入记录->媒体->
19
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入按钮
插入记录->媒体-> 按钮
注意：网页保存的路径不能含有中文，否则会因为不
能自动创建按钮报错
20
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入文本
插入记录->媒体-> 文本
21
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入
浏览器中包含文档网页时，用户可以浏览文档中的所
有页面。
插入记录->媒体->
22
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入视频
插入记录->媒体->
只能插入格式的视频文件
23
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
设置动画背景透明
有时，为了优化网页视觉效果，可在表格的单元格中
插入背景图像，然后再在该单元格中插入动画，这时
需要将动画设置为背景透明，否则就看不见下面的背
景图像了。
24
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
设置动画背景透明
操作步骤
在< “” “” />后，敲回车换行
添加代码
< "" ""/>
25
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——制作“江南旅游”
网首页
26
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——制作“江南旅游”
网首页
建立文件夹，复制素材文件夹””和””到该文件夹
中
新建网页文档，页面属性，字号12，背景色
”#2B8440”
单击右键，居中对齐，下移一个段落
插入4行1列的表格（第一行，第二行背景和（宽600高
220），第三行插入,第四行（行高50，居中对齐，文
本）)
27
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——制作“江南旅游”
网首页
第四行文本参数
字体：楷体；大小12；颜色：”#003333“；转滚颜色：
”#000000“;文本：”江南好，风景旧曾谙。日出江
花红胜火，春来江水绿如蓝。能不忆江南？！”；链
接到” “;目标；背景色：”#2B8440“;
28
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——制作“江南旅游”
网首页
第四行按钮参数
输入版权，调整
文本样式
29
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入影片
影片具有文件小、下载速度快，被目前主流的浏览器
所支持等优点，是使用制作的多媒体影片文件。
插入记录->媒体->
30
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入
是的应用程序，是一种动态、安全和跨平台的网络应
用程序，它能在网页中实现一些特殊效果，如下雪、
水纹和下雨等。 常被嵌入到语言中，可以实现较为复
杂的控制和动态效果。可以从网站上下载 ，如. 等网
站。
31
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入
插入记录->媒体-> ,打开选择文件对话框
在选择文件对话框中选择要插入的 文件，后缀名为
以图标的形式插入到网页中
根据 的相关使用说明，在代码编辑窗口的<><>之间
输入相应的代码
32
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入背景音乐
操作方法
在<><>之间添加< ”3” ”-1”>
3是音乐文件名；是音乐文件的位置；指定循环的次数，
当值为-1时表示无限次循环播放
33
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
插入插件
插件包括的范围很广，如：视频文件、音乐文件、动
画文件等。
插入记录->媒体->插件
如果计算机中安装了文件格式的插件，就可以在网页
中播放该视频文件
34
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
典型案例——在线影院
设置背景色为“#000000”
所有元素居中对齐
插入一个3行1列的表格
设置表格第一行背景颜色为“#999999”,水平对齐方
式为“居中对齐”、高30，输入文本“在线影院——
《生化危机3：灭绝》最新预告片”，设置文本颜色
“”
在第二行插入插件（影片），宽800，高500
设置第三行高50，水平垂直方向都为居中对齐输入“
申明：本网站所有资源均来自互联网，资源所有权归
原发行商所有，供广大爱好者学习交流之用，不做任
何商业用途， 请用户下载后于24小时内自觉删除，谢
谢！”，文本颜色为“#999999”
35
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
本讲回顾
链接的路径形式有哪两种？
网页中插入的多媒体有哪些类型？如何插入？
36
学电子商务，上“北财陈博客”看看。百度搜索“北财陈博客”
本节完
谢 谢
一月-
2312:29:1712:2912
:29一月-23一月-
2312:29
12:2912:29:1
7一月-23一月
-2312:29:17
2023/1/18 12:29:17
