北邮HTML静态网页制作.docx
《北邮HTML静态网页制作.docx》由会员分享，可在线阅读，更多相关《北邮HTML静态网页制作.docx（13页珍藏版）》请在冰豆网上搜索。
北邮HTML静态网页制作
信息网络应用基础课程设计
题目:
HTML静态网页制作
姓名
学院电子工程学院
专业电子信息科学与技术
班级2014211202
学号2014210
班内序号
指导教师范春晓
目录
一、实验要求3
二、实验主题3
1、设计主题3
2、功能3
3、运行流程4
4、每部分功能及应用的HTML技术4
三、实验内容运行结果5
1、整体布局5
2、局部9
四、实验心得与感受12
1、遇到的问题12
2、实验心得12
一、实验要求
1、有明确的主题。
2、页面制作精美、大方，看着舒服。
3、至少选择以下三类技术完成网页：
（1）多媒体（图像、声音）
（2）超链接（三种）
（3）表格（表格中的链接）
（4）表单
（5）多框架
二、实验主题
1、设计主题
旅行——洛杉矶
本次信息网络应用基础实验需要运用HTML语言自行设计一个网页，要求能在本机上运行。
根据自己的兴趣爱好，我设计了介绍“旅行——洛杉矶”为例的网页。
洛杉矶是美国一个非常著名的城市。
在网页中运用文字、图片、音乐、表格、超链接等简要介绍了这个地方的美景、文化、旅游路线等等，页面中使用了表单用于用户的登录。
达到了预期的效果。
2、功能
（1）打开网页后可以播放背景音乐，且可以暂停或调节音量。
（2）界面有视频，可以点击控制视频界面的三种大小模式（放大，缩小，普通）。
（3）超链接到美国国家地理网。
（4）显示表格，并且向表格的单元格中添加图片和万维网的链接。
（5）还有图像超链接，点击图像跳转到另一设计的HTML文件中。
（6）表单可以输入想要用户名和密码。
（7）表格是各个关于洛杉矶的模块，点击模块链接后页面显示相应模块。
（8）每个模块显示相应内容。
（9）返回顶部的设置，在界面底部点击“返回顶部”即回到界面的最顶部界面中。
3、运行流程
（1）打开名为“我的追梦者”的html文件。
（2）播放背景音乐。
可选择暂停或调节音量。
（3）在表单栏中可以输入用户名和密码，其中密码是“
”模式。
（4）其中在表单中设置有6个链接，可以查看各种你对于洛杉矶的印象而搜索。
（5）界面的视频，是关于洛杉矶美景的一个视频，点击即可播放，对于界面的大小有放大、缩小、普通三种选择。
（6）三种超链接，点击“美国国家地理网”即可进入其官网，表格中的超链接点击即可进入相应的模块，图片超链接点击即可跳转到“北京，北京”网页中去。
（7）在界面最底部，点击“返回顶部”即可回到界面顶部。
（8）全部浏览完成。
4、每部分功能及应用的HTML技术
（1）显示文字：
加入段落。
（2）显示背景图片：
“src”，即“source”。
（3）播放音乐：
“audio”插入播放器。
（4）登录界面：
插入表单。
（5）跳转相应模块：
超链接之“同一文档的其他位置”。
（6）显示表格：
添加表格。
（7）跳转万维网：
超链接之“美国国家地理网”。
（8）跳转另一设计的网页：
超链接之“北京，北京”。
（9）返回顶部：
“href”进行。
三、实验内容运行结果
运行结果、运行图片及其运行代码。
1、整体布局
（1）
主界面
（2）文字链接及图片链接
a.美国国家地理网：
b.其他地方，例如北京
（3）目录简介里的各个界面链接：
a.洛杉矶简介
b.相关美景
c.电影的魅力
d.音乐风云
e.明星阵容
f.游玩路线
2、局部
（1）背景音乐及文字超链接
运行代码：
（2）登录界面
运行代码：
（3）目录简介
运行代码：
（4）视频模块
运行代码：
（5）图片超链接
运行代码：
（6）返回顶部
运行代码：
（7）主题，文字
运行代码
四、实验心得与感受
1、遇到的问题
在插入视频播放的时候，总是自动播放，然而我是想一开始是不播放的。
开始排版的时候不能让输入的文字按自己想放置的位置而放置。
解决方法：
把“controls”给去掉即可解决这个问题了。
排放的文字书上是用
来弄的，即使文字部分加入空格键也是不能改变它的位置，而我换用
这个即可解决这个问题了。2、实验心得
这次的实验中，终于学会了一直以来很好奇网页的编写。
从最初的一无所知，到逐渐的熟练掌握。
尤其是做的内容还是我很喜欢的城市。
做的认真不言而喻。
最终完成后浏览成果时，给别人展示、讲解功能时，真的很开心。
然而，这仅仅是开始。
需要走的路，需要学习的知识，还有很多很多。
希望在今后的学习生活中，能像这次的实验一样，可以将个人兴趣和知识融合在一起。
让我们学的更有动力、更有趣味性。
升级会员 