Web前端技术基础实验报告三之超链接与多媒体文件应用

这篇具有很好参考价值的文章主要介绍了Web前端技术基础实验报告三之超链接与多媒体文件应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Web前端技术基础实验报告

实验题目:超链接与多媒体文件应用

实验目的:熟悉超链接与多媒体文件的插入的相关标签

实验内容 :

实验过程及结果

Web前端技术基础实验报告

实验题目:超链接与多媒体文件应用

实验目的:熟悉超链接与多媒体文件的插入的相关标签

实验内容 :

项目1  设计简易灯箱画廊

1.实验所需素材

在trees文件夹中提供一个MP3文件和18个JPG文件,设计页面时可以使用。

2.编程实现简易灯箱画廊,鼠标单击任一个图像超链接,在底部浮动框架中显示大图像,效果如图1-3-1所示的页面。

 Web前端技术基础实验报告三之超链接与多媒体文件应用

图1-3-1 简易灯箱画廊

项目2  设计支持音频、视频播放的网页

1.编程设计支持音视、视频播放的网页,效果如图1-3-3所示的页面。

 Web前端技术基础实验报告三之超链接与多媒体文件应用

         图1-3-3 多媒体及滚动字幕网页设计效果

2.歌词内容如下:

明月几时有?把酒问青天。

        不知天上宫阙,今夕是何年。

        我欲乘风归去,又恐琼楼玉宇,高处不胜寒,起舞弄清影,何似在人间。

        转朱阁,抵绮户,照无眠。

        不应有恨,何事偏向别时圆。  

        人有悲欢离合,月有阴晴圆缺,此事古难全。

        但愿人长久,千里共婵娟。

   3.音频、视频资源在embed子目录下。

实验过程及结果:

项目一:设计简易灯箱画廊

代码:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                 <title>简易灯箱画廊设计</title>
                 <style type="text/css">
                         body {text-align: center;}
                         #div1 {width: 900px;
                                  height: 500px;
                                  margin: 0px auto;
                                  text-align: center;
                                  background: rgb(51,204,153);
                         }
                        h3 {
                                  font-size: 24px;
                                  color: white;
                                  padding: 10px auto;
                         }
                         ul {
                                 margin: 0 auto;
                                 width: 800px;
                                 list-style-type: none;
                                 height: 120px;
                         }
                         li {
                                 float: left;
                                  width: 110px;
                                  height: 90px;
                                  margin: 5px;
                         }
                         img {
                                 border: 0;
                                  width: 100px;
                                  height: 80px;
                         }
                         a {
                                 color: #FFFFFF;
                                  text-decoration: none;
                         }
                         a:link,
                         a:visited,
                         a:active {
                                  color: #0033cc;
                         }
                         a:hover {
                                border-bottom: 4px solid #ff0000;
                         }
                 </style>
        </head>
        <body>
                <div id="div1">
                         <h3>简易灯箱画廊设计</h3>
                         <hr color="red" size="3">
                         <ul>
                                  <li><a href="trees/t1.jpg" target="iframe">T1<img src="trees/t1.jpg"></a></li>
                                  <li><a href="trees/t2.jpg" target="iframe">T2<img src="trees/t2.jpg"></a></li>
                                  <li><a href="trees/t3.jpg" target="iframe">T3<img src="trees/t3.jpg"></a></li>
                                  <li><a href="trees/t4.jpg" target="iframe">T4<img src="trees/t4.jpg"></a></li>
                                  <li><a href="trees/t5.jpg" target="iframe">T5<img src="trees/t5.jpg"></a></li>
                                  <li><a href="trees/t6.jpg" target="iframe">T6<img src="trees/t6.jpg"></a></li>
                         </ul>
                         <iframe src="trees/t1.jpg" name="iframe" width="500px" height="300px"> frameborder="0"<br></iframe>
                 </div>
        </body>
</html>

截图:

Web前端技术基础实验报告三之超链接与多媒体文件应用 

项目二:设计支持音频、视频播放的网页

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多媒体及滚动字幕应用</title>
		<style type="text/css">
			#div1 {
				text-align: center;
			}
			#hr1 {
				color: rgb(74, 74, 255);
			}
			p {
				font-family: 隶书;
				color: rgb(0, 0, 144);
			}
			#div2 {
				background-color: rgb(153, 204, 0);
				height: 250px;
				width: 1264px;
			}
			ul {
				list-style-type: none;
			}
			li {
				float: left;
				margin: 20px;
			}
			#div3 {
				background-color: rgb(51, 153, 255);
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h3>明月几时有</h3>
			<hr color="#0000FF" size="2">
			<p>明月几时有?把酒问青天。<br>
				不知天上宫阙,今夕是何年。<br>
				我欲乘风归去,又恐琼楼玉宇,<br>
				高处不胜寒,起舞弄清影,何似在人间。<br>
				转朱阁,抵绮户,照无眠。<br>
				不应有恨,何事偏向别时圆。<br>
				人有悲欢离合,月有阴晴圆缺,此事古难全。<br>
				但愿人长久,千里共婵娟。
			</p>
			<hr color="red" size="2">
			<div id="div2">
				<ul>
					<li><embed src="embed/62.swf" width="300" height="150" autostart="true" loop="true"></li>
					<li><embed src="embed/蔡琴明月几时有.mp3" width="300" height="150" autostart="false" loop="true"></li>
					<li><embed src="embed/0303.swf" width="300" height="150" autostart="true" loop="true"></li>
				</ul>
			</div>
			<div id="div3">
				<marquee>欢迎来到我的多媒体世界!</marquee>
			</div>
		</div>
	</body>
</html>

截图:

Web前端技术基础实验报告三之超链接与多媒体文件应用

 文章来源地址https://www.toymoban.com/news/detail-415325.html

到了这里,关于Web前端技术基础实验报告三之超链接与多媒体文件应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 成都工业学院Web技术基础(WEB)实验六:ECMAScript基础语法

    写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考,前端变化比较大,按照要求,只能做到像,不能做到一模一样 3、图片和文字仅为示例,需要自行替换 4、如果代码不满足你的要求,请寻求其他的途径 运行环境 window11家庭版 WebStorm 2023.2.2 实验要求、源代码

    2024年02月04日
    浏览(40)
  • 【Web前端基础】实验8 表格与表格页面布局

    表格资料: 会议时间 会议名称 演讲人 2015年10月14日09:30 - 17:00 中国二恶英排放清单研究 刘文彬 研究员(中国科学院生态研究中心) 2015年10月14日09:30 - 17:00 优化的PAHs和Dioxin分析仪在环境分析中的应用 孔晔(安捷伦) 2015年10月14日09:30 - 17:00 LCMS在持久性有机污染物分析中的

    2024年02月04日
    浏览(45)
  • Web前端开发技术课程实验一——制作一个视频播放页面(可控制播放/暂停)

    学习Web前端中的视频网页制作 学会html和js相结合 学会视频播放/暂停/放缩大小的功能 掌握 html 基本语法 掌握javascript基本语法 掌握条件语句 周一至周五晚上 7 点—晚上9点

    2024年02月16日
    浏览(52)
  • 成都工业学院Web技术基础(WEB)实验四:CSS3布局应用

    写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考,前端变化比较大,按照要求,只能做到像,不能做到一模一样 3、图片和文字仅为示例,需要自行替换 4、如果代码不满足你的要求,请寻求其他的途径 运行环境 window11家庭版 WebStorm 2023.2.2 实验要求、源代码

    2024年02月01日
    浏览(53)
  • [HTML]Web前端开发技术3(HTML5、CSS3、JavaScript )超链接,target,scrolling,marginwidth,frameborder,iframe——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 超链接 概述 超链接语法、路径及分类 超链接标签 超链接路径 相对路径的用法 超链接分类 超链接的

    2024年02月05日
    浏览(58)
  • 国开电大《WEB开发基础》形考任务【答案】实验1-5:电商网站前端页面内容编写

    国开电大《WEB开发基础》形考任务1 国开电大《WEB开发基础》形考任务1 国开电大《WEB开发基础》形考任务3 国开电大《WEB开发基础》形考任务4 国开电大《WEB开发基础》形考任务5 作业答案 联系QQ:1603277115 【目标】 根据素材中的设计图,编写网站首页,查询列表页和详情页三

    2024年02月03日
    浏览(61)
  • 区块链技术与应用实验报告(实验五)

    🍊 博客主页 :作者主页 🍊 简介 :云计算领域优质创作者🏆、在校期间参与众多计算机相关的省赛、国赛,斩获系列荣誉。考取华为资深工程师、红帽工程师等系列认证。 🍊 关注我 : 简历模板、学习资料、文档下载、技术支持 都可以私信我哦! 让生命像一团热烈燃烧

    2023年04月08日
    浏览(37)
  • 区块链技术与应用实验报告(实验六)

    🍊 博客主页 :作者主页 🍊 简介 :云计算领域优质创作者🏆、在校期间参与众多计算机相关的省赛、国赛,斩获系列荣誉。考取华为资深工程师、红帽工程师等系列认证。 🍊 关注我 : 简历模板、学习资料、文档下载、技术支持 都可以私信我哦! 让生命像一团热烈燃烧

    2024年02月05日
    浏览(54)
  • 测试技术与信号处理实验报告

    目录 金属箔式应变片——单臂电桥性能实验 金属箔式应变片——半桥性能实验 金属箔式应变片——全桥性能实验 差动变压器的性能实验 直流全桥的应用——电子秤实验 交流激励时霍尔式传感器的位移特性实验 电容式传感器的位移实验 磁电式转速传感器测速实验 实验目的

    2024年02月06日
    浏览(41)
  • 物联网定位技术|实验报告|实验一 Wi-Fi指纹定位

    实验1  Wi-Fi指纹定位 1. 实验目标 2. 实验背景 3. 实验原理 3.1 WIFI基础知识 3.2室内定位方法建模 3.3指纹定位算法 ①离线/训练阶段 ②在线/定位阶段 4.  关键代码 5. 实验结果 6. 室内定位误差分析 6.1 非视距传播 6.2 多径传播 6.3 阴影效应 7. 实验总结 物联网定位技术 实验报

    2023年04月27日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包