WEB前端人机导论实验-实训3超链接与多媒体文件应用
1.项目1 ?设计简易灯箱画廊
A.题目要求：
编程实现简易灯箱画廊，鼠标单击任一个图像超链接，在底部浮动框架中显示大图像，效果如下的页面。
B.思路:
（1）CSS样式：
a.在样式中对body元素进行居中对齐，设置标题的字体大小和颜色，以及列表、列表项、图片和链接的样式。
b..创建一个名为"div1"的<div>元素，作为整个内容的容器。这个<div>元素具有指定的宽度、高度和背景颜色。
（2）主体内容：
a.在"div1"中，设置一个标题<h3>标签，并使用水平线<hr>来分隔标题和图像列表。
b.创建一个无序列表<ul>，用于显示图像缩略图。这个列表具有指定的宽度、高度，去除了原点符号，并在水平方向上居中对齐。
c.在列表中创建六个列表项<li>，每个列表项包含一个链接<a>和一个图像<img>，这些图像用于显示缩略图。链接指向不同的大图，通过href属性定义，同时使用target属性将大图显示在名为"iframe"的<iframe>元素中。
d.为链接定义鼠标悬停效果，当鼠标悬停在链接上时，添加下划线和红色底边。
e.最后，创建一个<iframe>元素，用于显示大图。它的src属性初始值为"img/trees/t1.jpg"，名称为"iframe"，并且具有指定的宽度、高度和无边框。
C.总体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易灯箱画廊设计</title>
<style type="text/css">
body{
text-align: center;
}
h3{
font-size: 24px;
color: white;
}
ul{
width: 800px;
height: 120px;
list-style-type: none;/*去掉原点*/
margin: 0 auto;/*减少默认空格*/
}
li{
width: 110px;
height: 90px;
float: left;
margin: 5px;
}
img{
width: 100px;
height: 80px;
border: 0;
}
a{
color: #FFFFFF
text-decoration:
}
a:link,
a:visited,
a:active{
color: #0033cc;
}
a:hover{/*鼠标悬停点击某张图片的效果*/
border-bottom: 4px solid #ff0000;
}
.div1{
text-align: center;
width: 900px;
height: 500px;
background-color: rgb(51,204,153);
}
</style>
</head>
<body>
<div id="" class="div1">
<h3>简易灯箱画廊设计</h3>
<hr color="red" size="3">
<ul>
<li><a href="img/trees/t1.jpg" target="iframe">T1<img src="img/trees/t1.jpg"></a></li>
<li><a href="img/trees/t2.jpg" target="iframe">T2<img src="img/trees/t2.jpg"></a></li>
<li><a href="img/trees/t3.jpg" target="iframe">T3<img src="img/trees/t3.jpg"></a></li>
<li><a href="img/trees/t4.jpg" target="iframe">T4<img src="img/trees/t4.jpg"></a></li>
<li><a href="img/trees/t5.jpg" target="iframe">T5<img src="img/trees/t5.jpg"></a></li>
<li><a href="img/trees/t6.jpg" target="iframe">T6<img src="img/trees/t6.jpg"></a></li>
</ul>
<iframe src="img/trees/t1.jpg" name="iframe" width="500px" height="300px" frameborder="0">
</iframe>
</div>
</body>
</html>2.项目2 ?设计支持音频、视频播放的网页
A.题目要求:
编程设计支持音视、视频播放的网页，效果下图所示的页面
B.思路：
（1）CSS样式：
a.在样式中，将body元素的文本居中对齐，设置标题<h3>的字体大小和颜色，定义段落<p>的字体、字号和颜色。
b.创建一个无序列表<ul>，并去除列表项符号。
c.创建两个<div>元素，分别具有id属性为"div1"和"div2"，用于组织页面的不同部分。
d."div1"的背景颜色为"yellowgreen"，宽度为1500px，高度为250px。
e."div2"的背景颜色为"dodgerblue"，宽度为1500px，高度为20px。
（2）主体内容
a.在<body>部分，设置一个标题<h3>，之后是紫色的水平线。
b.在段落<p>中，插入一首诗歌，以及作者的名字。
c.使用<hr>标签创建红色的水平线。
d.在列表中创建三个列表项<li>，每个包含一个<embed>元素，用于嵌入不同的多媒体内容（Flash动画和视频）。<embed>元素包含src属性，指定要嵌入的多媒体文件的路径，以及宽度、高度、自动播放和循环等属性。
e.在div1中创建一个横向的列表，用于显示嵌入的多媒体内容。
f.在div2中显示滚动的文字，通过<marquee>元素实现。
C.总体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设计支持音视、视频播放的网页</title>
<style type="text/css">
body{
text-align: center;
}
h3{
font-size: 25px;
color: black;
}
p{
font-family: 隶书;
font-size: 15px;
color: #666099;
}
ul{
list-style-type: none;
}
li{
float: left;
margin: 20px;
}
#div1{
background-color: yellowgreen;
width: 1500px;
height: 250px;
}
#div2{
background-color: dodgerblue;
width: 1500px;
height: 20px;
}
</style>
</head>
<body>
<h3>明月几时有</h3>
<hr color="purple" size="2">
<p>明月几时有？把酒问青天。<br>
不知天上宫阙，今夕是何年。<br>
我欲乘风归去，又恐琼楼玉宇，<br>
高处不胜寒，起舞弄清影，何似在人间。<br>
转朱阁，抵绮户，照无眠。<br>
不应有恨，何事偏向别时圆。<br>
人有悲欢离合，月有阴晴圆缺，此事古难全。<br>
但愿人长久，千里共婵娟。
</p>
<hr color="red" size="2">
<div id="div1">
<ul>
<li><embed src="img/embed/62.swf" width="300"
height="150" autostart="true" loop="true"</li>
<li><embed src="img/embed/htmlexample.mpeg" width="300"
height="150" autostart="false" loop="true"</li>
<li><embed src="img/embed/0303.swf" width="300"
height="150" autostart="true" loop="true"</li>
</ul>
</div>
<div id="div2">
<marquee>欢迎来到我的多媒体世界！</marquee>
</div>
</body>
</html>3.项目3 ?设计简易网站导航
A.题目要求:
采用段落或无序列表与超链接组合实现网站导航,效果图如下图
B.思路：
（1）CSS样式：
a.所有<div>元素文本内容居中对齐。
b.所有无序列表<ul>的文本内容居中对齐，同时去除了列表项符号。
c.所有列表项<li>元素以浮动方式（float: center）排列，并以display: inline方式进行布局。
d.所有链接<a>的文字内边距为0上下，20左右。
e.使用<co>标签包围的文字颜色为紫色。
（2）主体内容：
a.在<body>部分，内容被包含在一个<div>元素中，没有指定id属性。
b.显示一个<h5>标题，标题文本左对齐，标题内容为"使用段落标记和超链接实现网站导航"。
c.创建一个段落<p>，包含多个超链接<a>，这些链接指向不同的网站，包括百度、新浪、腾讯、搜狐、网易和360搜索。部分链接使用<co>标签包围以改变颜色。
e.使用<hr>标签创建一条宽度为3的蓝色水平分隔线。
f.显示另一个<h5>标题，标题文本左对齐，标题内容为"利用无序列表实现水平导航条"。
g.创建一个无序列表<ul>，包含多个列表项<li>，每个列表项包含一个超链接<a>，链接指向不同的网站，包括百度、新浪、腾讯、搜狐、网易和360搜索。部分链接使用<co>标签包围以改变颜色。
C.总体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易网站导航</title>
<style type="text/css">
div{
text-align: center;
}
ul{
text-align: center;
list-style-type: none;
}
li{
float: center;
width: 110px;
display: inline;
}
li a{
padding:0 20px;
}
co{
color: purple;
}
</style>
</head>
<body>
<div id="">
<h5 align="left">使用段落标记和超链接实现网站导航</h5>
<p>
<a href="http://www.baidu.com/"><co>百度</co></a>
<a href="http://www.sina.com.cn/">新浪</a>
<a href="http://www.qq.com/">腾讯</a>
<a href="http://www.sohu.com/">搜狐</a>
<a href="http://www.163.com/">网易</a>
<a href="http://www.google.com.hk/"><co>360搜索</co></a>
</p>
<hr color="#0066ff" size="3">
<h5 align="left">利用无序列表实现水平导航条</h5>
<ul>
<li><a href="http://www.baidu.com/"><co>百度</co></a></li>
<li><a href="http://www.sina.com.cn/">新浪</a></li>
<li><a href="http://www.qq.com/">腾讯</a></li>
<li><a href="http://www.sohu.com/">搜狐</a></li>
<li><a href="http://www.163.com/">网易</a></li>
<li><a href="http://www.google.com.hk/"><co>360搜索</co></a></li>
</ul>
</div>
</body>
</html>
4.项目4 ?设计新生课程简介
A.题目要求：
编程实现新生课程简介页面，效果如下图所示：
B.思路
在<body>部分，页面内容包括：
a.一个居中对齐的<h2>标题，标题内容为"专业课程导航"。
b..一个<a>标记（带有name属性），用于创建页面内的导航锚点，使用户能够快速跳转到不同的课程。
c.创建一个无序列表<ul>，其中包含多个列表项<li>，每个列表项都包含一个<a>链接，这些链接用于跳转到不同的课程。
d.每门课程都以<h3>标题开始，标题使用<a>标记（带有name属性），用于创建页面内的导航锚点，以便用户能够跳转到指定课程的位置。
e.对于每门课程，使用<p>段落来提供相关课程的详细信息，包括课程名称和描述。在每门课程的描述下，使用<strong>元素包围一个<a>链接，该链接允许用户返回到课程导航页面的顶部。
C.总体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>专业课程导航</title>
</head>
<body>
<h2 align="center">专业课程导航</h2>
<a name="dir0">专业课程导航</a>
<ul>
<li><a href="#dir1">英语</a></li>
<li><a href="#dir2">高数</a></li>
<li><a href="#dir3">大学物理</a></li>
</ul>
<h3><a name="dir1">英语</a></h3>
<p> 基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。
<strong><a href="#dir0">返回</a></strong></p>
<h3><a name="dir2">高数</a></h3>
<p> 《高等数学》课程介绍随着科学技术的迅猛发展，数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础，是理科各专业和经济管理专业类学生的必修课，也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学，使学生掌握处理数学问题的思想和方法，培养学生科学思维能力，同时为后续课程的学习奠定良好的基础。
<strong><a href="#dir0">返回</a></strong></p>
<h3><a name="dir3">大学物理</a></h3>
<p> 以物理学基础为内容的大学物理课程，是理工科各专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
<strong><a href="#dir0">返回</a></strong></p>
</body>
</html>
5. 课外拓展训练3-设计“桂林风景展览”页面
A.题目要求：所需设计的页面效果图如下
B.思路:
（1）CSS样式：
a.所有图片<img>的宽度为100像素，高度为100像素，去掉边框，设置了7像素的外边距。
b.<h2>标题文本居中对齐，文本颜色为红色。
c.所有无序列表<ul>的文本内容居中对齐，同时去除了列表项符号。
d.所有列表项<li>元素以内联（display: inline）方式进行布局，每个列表项的宽度为120像素，高度为30像素。
（2）主体内容：
a.一个居中对齐的<h2>标题，标题内容为"桂林风景展览"，用于描述页面主题。
b.一个无序列表<ul>，其中包含多个列表项<li>，每个列表项包含一个超链接<a>，链接指向不同的图片文件（image31.jpg，image32.jpg，image33.jpg，和image34.jpg），并且包含相应的图片。
c.另一个无序列表<ul>，其中包含四个超链接<a>，这些链接指向相同的图片文件，用于提供图片的描述。在每个链接之间使用<li>元素创建空白，以实现排列格式，同时让链接和图片描述配对显示。
C.总体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景展览</title>
<style type="text/css">
img{
width: 100px;
height: 100px;
border: 0px;
margin: 7px;
}
h2{
text-align: center;
color: red;
}
ul{
text-align: center;
list-style-type: none;
}
li{
display: inline;
width: 120px;
height: 30px;
}
</style>
</head>
<body>
<h2>桂林风景展览</h2>
<ul>
<li><a href="img/Guilin/image31.jpg"><img src="img/Guilin/image31.jpg"></a></li>
<li><a href="img/Guilin/image32.jpg"><img src="img/Guilin/image32.jpg"></a></li>
<li><a href="img/Guilin/image33.jpg"><img src="img/Guilin/image33.jpg"></a></li>
<li><a href="img/Guilin/image34.jpg"><img src="img/Guilin/image34.jpg"></a></li>
</ul>
<ul>
<a href="img/Guilin/image31.jpg">桂林风景1</a>
<li> </li><a href="img/Guilin/image32.jpg">桂林风景2</a>
<li> <a href="img/Guilin/image33.jpg">桂林风景3</a></li>
<li> </li><a href="img/Guilin/image34.jpg">桂林风景4</a></li>
</ul>
</body>
</html>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- qt图形化界面开发DAY4
- shell编程
- 海思SD3403,SS928/926,hi3519dv500,hi3516dv500移植yolov7,yolov8（4）
- 达达快送无代码API：电商平台广告推广与客服系统一体化
- 汽车标定技术(十六)--FETK如何帮助Aurix实现快速原型、标定测量功能(2)
- win11更改桌面默认存储路径
- 网络爬虫基本原理介绍
- YOLOv8-Seg改进：轻量化改进 | 华为Ghostnet，超越谷歌MobileNet | CVPR2020
- VQE音频处理流程
- 函数组件useState用法 以及 useState异步回调获取不到最新值