工信版（中职）Web前端设计基础 项目四电子课件
2022-10-25
|
42页
|
114人阅读
|
5人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 2.75 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574088.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目四电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
网页中的多媒体
项目四
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
创建锚点链接和热点地图；
插入音视频文件；
制作视频播放器。
制作音乐播放器；
创建超链接；
二 知识准备
建立超链接；
添加音频文件；
添加视频文件。
建立超链接
在HTML文件中最重要的应用之一就是超链接，它能够让浏览者在各个独立的页面之间方便地跳转。超链接有外部链接、内部链接、电子邮件链接、锚点链接、空连接、脚本链接等。
建立超链接
1.URL概念
URL为Uniform Resource Locator的缩写，翻译为“统一资源定位器”，它是从互联网上得到资源位置和访问方法的一种表示，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
建立超链接
2.超链接标签<a>
在HTML 5中建立超链接使用的标签为<a></a>。超链接的基本结构如下：
<a href="链接地址" target="目标窗口的打开方式">超链接文字</a>
href属性表示链接地址，链接地址所指向的链接类型包括图片文件、网站地址、FTP地址、电子邮件等，指向不同目标类型的超链接有三类，如表所示。
href目标 举例说明
链接到各种类型的文件 <a href="index.html">链接到index.html文件</a>
<a href="photo.jpg">链接到图片</a>
<a href="info.docx">链接到Word文档</a>
<a href="sucai.rar">链接到RAR压缩文件</a>
链接到其他网站或FTP服务器 <a href="http://www.baidu.com">链接到百度首页</a>
<a href="ftp://172.16.1.200">链接到FTP服务器</a>
链接到电子邮件 <a href="mailto:yourname@qq.com">链接到电子邮件地址</a>
建立超链接
2.超链接标签<a>
target属性来控制浏览器窗口的打开方式，target属性值有四个，如表所示。
target属性值 说明
_self 默认方式，即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层里打开链接
建立超链接
2.超链接标签<a>
【例4-1】target属性值_blank实例，代码如下所示（示例文件4-1.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target属性_blank实例</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">新窗口打开百度</a>
</body>
</html>
在chrome浏览器中预览
单击超链接
建立超链接
3.创建锚点链接
对于内容比较多导致页面过长的网页，访问者需要不停地拖动浏览器上的滚动条来查看网页中的内容，为了方便查看，在网页中需要建立锚点链接。
所谓锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。
建立超链接
3.创建锚点链接
【例4-2】锚点链接实例，代码如下所示（示例文件4-2.html）。
<body>
<h1>WEB前端设计教程目录</h1>
<ul>
<li><a href="#C1">项目一</a></li>
<li><a href="#C2">项目二</a></li>
<li><a href="#C3">项目三</a></li>
<li><a href="#C4">项目四</a></li>
<li><a href="#C5">项目五</a></li>
<li><a href="#C6">项目六</a></li>
<li><a href="#C7">项目七</a></li>
<li><a href="#C8">项目八</a></li>
</ul>
<h2><a name="C1">项目一</a></h2>
<p>本项目讲解的内容是 ... ...</p>
<h2><a name="C2">项目二</a>
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。