北邮信网静态网页实验报告..docx

信息网络应用基础实验报告题目：静态网页姓名：班级：学号：实验主题总主题：通过主人公庄焱的成长过程介绍电视剧《我是特种兵》，表达军人情怀。总运行流程：点击链接“最后一颗子弹留给我.html”后进行操作。主要应用技术：多框架、超链接、表格、多媒体分模块引入模块?功能：显示引入图片《最后一颗子弹留给我》；配鸣枪音乐；三秒后自动跳转进入主界面。?运行流程：点击链接“最后一颗子弹留给我.html”进入页面。?应用技术：使用meta http-equiv=refresh content=3;url=…完成页面自动跳转；使用background添加背景图片；使用EMBED src=… /添加音乐。?关键代码：分框架模块?功能：将主页面分为三个框架。?运行流程：跳转至本页面后自动运行。?应用技术：使用frameset rows=21%,79%frame src=…frameset cols=19.5%,80.5%frame src=…frame src=… name=…/frameset将主页面分为三个框架（主题图片展示、导航、内容显示）。?关键代码：主题图片展示模块?功能：交替显示主题图片《我是特种兵》、《落日士兵》；在两边显示国旗。?运行流程：自动交替显示。?应用技术：使用meta http-equiv=refresh content=3;url=…完成页面自动跳转；使用表格table…/table将图片排成同一行；使用imgsrc =… width=… height=…/插入图片。?关键代码：导航模块?功能：循环播放背景音乐《永远的兄弟》；主页面分块导航；超链接至新浪视频《我是特种兵》全集。?运行流程：点击音乐播放的三角键可以控制“播放/暂停”，拖动进度条可以控制音乐进度，拖动音量条可以控制音量；点击“青涩”、“磨炼”、“成长”等关键字可以链接至主页面相应位置；点击“点击观看完整电视剧”跳转至新浪视频。?应用技术：使用EMBED src=… autostart=true loop=true width=522 height=100 volumelever=true loop=-1/插入音乐；使用imgsrc =… usemap =#xuanxiang /map name=xuanxiang id=xuanxiangarea 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插入视频；使用tabletr/tr/table使视频在同一行显示；使用a href=#toph1back/h1/a返回顶部。?关键代码：实验内容及运行结果运行结果：按设计预想运行，图示如下：引入页面：主页面：点击“磨炼”关键字后超链接至相应部位：底部“返回顶部”超链接：点击“点击观看完整电视剧”后跳转至搜狐视频：实验心得与感受经过本次实验，我更加牢固的掌握了静态网页编程的技术，除去书本中给出的语句，再遇到相应的需求时，自己会从网上查询用法，也学到了很多知识。从页面设计、文案编写、音效选取、经典视频截取全部独立完成。在遇到问题后不断调整，最后设计出静态网页。总体比较满意，希望第二次实验顺利。【附代码】No0.htmlhtmlheadtitle我是特种兵/title/headframeset rows=21%,79%frame src=E:\学习\大三\信息网络应用基础\静态网页实验\No1.htmlframeset cols=19.5%,80.5%frame src=E:\学习\大三\信息网络应用基础\静态网页实验\No2.htmlframe src=E:\学习\大三\信息网络应用基础\静态网页实验\No3.html name=showframe/frameset!frame src=E:\学习\大三\信息网络应用基础\静态网页实验\作者声明.html/frameset/htmlNo1.htmlhtmlheadmeta h