信息网络应用基础实验报告
题目:静态网页姓名: 班级: 学号:
实验主题
总主题:通过主人公庄焱的成长过程介绍电视剧《我是特种兵》,表达军人情怀。
总运行流程:点击链接“”后进行操作。
主要应用技术:多框架、超链接、表格、多媒体
分模块
引入模块
▪功能:显示引入图片《最后一颗子弹留给我》;配鸣枪音乐;三秒后自动跳转进入主界面。
▪运行流程:点击链接“”进入页面。
▪应用技术:使用<meta http-equiv="refresh" content="3;url=…">完成页面自动跳转;使用background添加背景图片;使用<EMBED src="…" />添加音乐。
▪关键代码:
分框架模块
▪功能:将主页面分为三个框架。
▪运行流程:跳转至本页面后自动运行。
▪应用技术:使用<frameset rows="21%,79%"><frame src="…"><frameset cols="%,%"><frame src="…"><frame src="…" name="…"></frameset>将主页面分为三个框架(主题图片展示、导航、内容显示)。
▪关键代码:
主题图片展示模块
▪功能:交替显示主题图片《我是特种兵》、《落日士兵》;在两边显示国旗。
▪运行流程:自动交替显示。
▪应用技术:使用<meta http-equiv="refresh" content="3;url=…">完成页面自动跳转;使用表格<table>…</table>将图片排成同一行;使用<img src ="…" width="…" height="…"/>插入图片。
▪关键代码:
导航模块
▪功能:循环播放背景音乐《永远的兄弟》;主页面分块导航;超链接至新浪视频《我是特种兵》全集。
▪运行流程:点击音乐播放的三角键可以控制“播放/暂停”,拖动进度条可以控制音乐进度,拖动音量条可以控制音量;点击“青涩”、“磨炼”、“成长”等关键字可以链接至主页面相应位置;点击“点击观看完整电视剧”跳转至新浪视频。
▪应用技术:使用<EMBED src="…" autostart="true" loop="true" width="522" height="100" volumelever="true" loop="-1"/>插入音乐;使用<img src ="…" usemap ="#xuanxiang" /><map name="xuanxiang" id="xuanxiang"><area shape="rect" coords="330,90,450,160" href="…" target="showframe" />在图片上选择矩形位置插入超链接。
▪关键代码:
内容显示模块
▪功能:背景图片不动;分为不同小专题,小专题下介绍主人公成长阶段;不同专题下可以播放对应视频;页面最下端直接返回页面顶部。
▪运行流程:拖动滚轮浏览页面;点击视频播放的三角键可以控制“播放/暂停”,拖动进度条可以控制视频进度,拖动音量条可以控制音量;点击“返回顶部”可以直接返回页面最上端。
▪应用技术:使用style="margin:100"设置页边距;使用<font size="6" color="darkblue">设置字体大小和颜色;使用<center></center>使文字、图片居中显示;使用<video width="800" height="500" controls="controls" ><source src="…" type="video/mp4" /></video>插入视频;使用<table><tr></tr></table>使视频在同一行显示;使用<a href=#top><h1>back</h1></a>返回顶部。
▪关键代码:
实验内容及运行结果
运行结果:按设计预想运行,图示如下:
引入页面:
主页面:
点击“磨炼”关键字后超链接至相应部位:
底部“返回顶部”超链接:
点击“点击观看完整电视剧”后跳转至搜狐视频:
实验心得与感受
经过本次实验,我更加牢固的掌握了静态网页编程的技术,除去书
本中给出的语句,再遇到相应的需求时,自己会从网上查询用法,也学到了很多知识。从页面设计、文案编写、音效选取、经典视频截取全部独立完成。在遇到问题后不断调整,最后设计出静态网页。总体比较满意,希望第二次实验顺利。
【附代码】
<html>
<head>
<title>我是特种兵</title>
</head>
<frameset rows="21%,79%">
<fr
北邮信网静态网页实验报告 来自淘豆网m.daumloan.com转载请标明出处.
