信息网络应用基础网页制作实验.docx

北京邮电大学

信息网络应用基础

实验报告

实验名称:基于HTML的简单网页设计与制作学院:电子工程学院

班级:

姓名:

班内序号:

2012年11月24日

一、实验主题

本次信息网络应用实验需要运用HTML语言自行设计制作一个网页，要求能在本机上运行。根据自己的兴趣爱好，我设计了一个介绍影片信息的网页，电影名称是《三傻大闹宝莱坞》，在网页中运用文字、图片、音乐、表格、超链接等简要介绍了这部电影作品，整个界面大方精致，达到了预期的效果。

主题与功能

本网页的标题为“三傻大闹宝莱坞”，主要运用各种手段展示了这部电影的内容、主要人物、演职员表、电影插曲、电影对白欣赏、在线电影欣赏等，较为完整清楚的介绍了整部电影的各方面特色。介绍中除了运用文字之外，在介绍主要人物时附有插图，展示演职员表时附有表格，运用超链接在另一个文档中展示电影经典对白，并且链接到Internet中的在线影片，同时在文档底部设置超链接用来返回顶部，这样可以更为方便的浏览整个页面。

考虑到计算机屏幕较宽，如果用整个屏幕展示文字、单张图片等，将显得不够协调，阅读起来也不够舒适。因此运用多框架技术，将整个网页竖直拆分成不等宽的两半，左半较宽用于展示影片信息，右半较窄用于留白，左右页面宽度比例为78%:22%。同时为了避免色调单调，左右页面均加上了背景图片，总体看上去显得很协调。

运行流程

本设计成果主要由两个自行设计的网页和一个Internet网页组成，第一个网页承载了介绍影片的绝大部分信息，包括图像、音乐、表格、

超链接等，另一个网页为超链接的界面，由文字构成，标题为“精彩对白”，展示影片中的精彩台词。运行流程为打开标题为“三傻大闹宝莱坞”的网页，自上而下翻阅影片的介绍内容，阅至“电影插曲欣赏”出，单击播放按钮，则播放该影片的片头曲；在“影片欣赏”标题下，将会看到三个超链接，其中第一个会链接到“精彩对白”文档；第二个会链接到Internet网页播放影片；最后一个链接到原文档顶部，至此完成了全部文档的浏览。

每部分功能与对应的HTML技术

网页的功能与HTML技术对应关系用下表展示。

主页面各标题

主页面各标题

功能

HTML技术

影片简介

总体介绍影片

段落、文本、多框架

用文字、图片介绍

人物介绍

多媒体，图像标签

主要人物

主要演员表

介绍演职员信息

表格技术

电影插曲欣赏

插入电影片头曲

多媒体，插入音乐

影片欣赏

进一步介绍影片信息

超链接技术

表1网页的功能与HTML技术对应表

二、实验内容运行结果

实验效果截图

如下页图1到图6所示为实验中网页运行的效果图，其中图1展示了文档的标题，正文的前两个标题和第一个段落，两个标题之间运用hr/标签分隔，划分显得更加清晰。图2显示的是运用多框架技

图1文档标题、正文标题、段落、水平线

术将页面拆分，使得阅读起来更为方便。图3到图5分别展示了插入图片、表格、音乐的HTML技术的应用，图6则展示了超链接的运用，加下划线的字样为超链接，每个超链接都有相应的提示用法。截图中也显示了背景图片的效果和页面布局的效果。

图2多框架技术

图3插入图片

图4表格运用

图5插入音乐

图6超链接运用

实验关键代码

插入背景图片

body

bodybackground=E:\我的文件\三上信息网络应用基础\实验一\材料\背景图片.jpg

插入插图

imgsrc=E:\我的文件\三上信息网络应用基础\实验一\材料\兰彻.jpgwidth=512height=340

插入表格

tablewidth=600border=5bgcolor=yellow

trtd角色/tdtd演员/tdtd中文配音/td/tr

trtdRancho/tdtd阿米尔·汗/AamirKhan/tdtd文章

/td/tr

trtdFarhan Qureshi/tdtd马德哈万/tdtd王凯

/td/tr

trtdRaju Rastogi/tdtd沙尔曼·乔什/SharmanJoshi/tdtd吴凌云/td/tr

trtdPia/tdtd卡琳娜·卡普/KareenaKapoor/tdtd汤唯

/td/tr

/table

插入音乐

embedsrc=E:\我的文件\三上信息网络应用基础\实验一\材料\BehtiHawaSaThaWoh三傻大闹宝莱坞插曲.mp3width=512height=340autostart=0loop=false/

插入超链接

欣赏精彩对白ahref=精彩对白.htmlb请点击这里/b/a

三、实验心得与感受

遇到的问题与解决方法

实验过程中总体较为顺利，不过因为