大学生静态网页设计课程设计报告模板编号BG1(联系客服下载)
 
摘  要
本课程设计是设计一个个人主页来展示自己相关的信息,同时主页内也有一个登陆系统,该系统用于自己登陆来管理网站。每个人都有自己的一面,而每个人展示的方法都大不相同。对于一个个性不是时分鲜明的人来说,有一个自己的个人网站,会有一个很好的展示平台。
 
 
第一章    绪 论
设计一个个人主页来展示自己相关的信息,同时主页内也有一个登陆系统,该系统用于自己登陆来管理网站。每个人都有自己的一面,而每个人展示的方法都大不相同。对于一个个性不是时分鲜明的人来说,有一个自己的个人网站,会有一个很好的展示平台。
在这个平台上可以晒自己的相片,也可以有一些名人名言。可以把自己感兴趣的时事新闻添加到网站。每个人的爱好不同,富裕了的人有多种兴趣和爱好,养鸟种花、逛街购物、寻朋访友等等等等,现在兴起的娱乐形式又出现了建个人网站的形式,打上个人资料、上传个人照片、回复朋友留言、交流共同爱好,成为一种新型的时尚娱乐方式。这种个人网站没有其他目的,他们把网站作为个人宠物,每天细心照料,倾注个人的热情。而个人主页对于我来说就是一个展示自我,同时又可以交到许多朋友的平台。对于个性鲜明的我们,需要展示的平台也越来越多。此时,互联网这一交流平台已经成为年轻一代我们的平台。可以足不出户的购物、订餐和许多功能。一个个主页可以让我们充分来发挥自己的才能。
 
 
第二章  设计概述
2.1功能设计
2.1.1功能概述
设计一个个人主页,首页可以有一个登陆管理该网站的登陆窗口。网站布局中主要有 4 部分,第一部分为页面中间部分,此部分用于发布一些最新消息。网站右侧,有一个滚动的字幕栏,用于大家发表一些信息和心情。在滚动栏下方有个自己用的链接部分,在主页最下方是友情连接部分。导航栏部分有6个,分为首页、相册、哲理、留言、通讯录和音乐欣赏。
 
2.1.2系统功能设计
系统功能中有很多功能,主要功能有滚动字幕来让大家发表自己的看法,和一些交流信息。社区热帖部分用于发表一些最新信息,相册子页显示一些照片。 哲理模块添加了一些人生哲理文章,音乐子子页有自己喜欢的歌曲,可以添加和替换,留言板,通讯录部分记录联系电话和一些信息。
 
图2.1 系统功能结构图
如图2.1所示,个人网站由首页、相册、哲理、音乐、留言、通讯录等页面构成。相册用于个人上传管理图片,查看图片;哲理提供查看文章功能;音乐可供个人添加修改个人喜欢的音乐音频及相关文字介绍;留言可供其他游客在个人空间留言;通信录用于保存个人常用的朋友的联系方式。
2.2站点整体规划
2.2.1网站目录结构设计
网站的目录是指建立网站时创建的目录。例如:在用frontpage98 建立网站时都默认建立了根目录和 images 子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。
如图 2.2所示,在网站设计过程中把站点的目录设在本地磁盘 D 盘下的未命名站点 3,在本目录下有图片存放文件夹, 视频存放文件夹, 文本存放文件等。
 
图2.2 网站目录结构
各个目录及文件的作用如表2.1所示。
表2.1 网站目录及文件说明
序号 资源名称 类型 说明
1 Index.html 网页文件 首页
2 xc.html 网页文件 相册首页
3 CSS 目录 保存css文件
4 images 目录 保存图片
5 media 目录 保存视频
。。。
 
2.2.2首页布局设计
在进行制作前, 对网站首页有一个整体的布局设计, 熟话说人要脸,树要皮。而且一个好的网站首页会第一眼吸引到浏览该网站的游客 , 这就要求我们的首页有一个好的布局设计。布局如图2.3所示。
 
图2.2 网站首页布局
 
 
 
 
 
第三章   详细设计
4.1首页
4.1.1首页设计
首页主要是显示的一些信息和连接,按照事先画好的布局图来进行布局设计。效果如图 4.1。
 
图4.1 网站首页
4.1.2首页代码
<td vAlign="bottom" align="middle" width="88" height="1">
<p align="center"><ahref="xc.html"><img onMouseOver="this.src='images/myhome_1.gif'"onMouseOut="this.src='images/myhome.gif'"src="images/myhome.gif"  border="0" width="70" height="26">
<div style="position:relative;left:3px;top:-20px;z-index:99;width:50px;"> 相册</div>
滚动字幕
<marquee id="scrollArea" height="150" width="380" loop="-1"
scrollamount="1" scrolldelay="50" direction="up" onMouseOver
=scrollArea.stop() onMouseOut=scrollArea.start()> 滚 动 内 容
</marquee>
4.2相册子页
4.2.1相册子页设计
在相册子页中,用到了类似于 windows图片预览里的幻灯片功能,在每个图片框中添加图片地址, 然后修改坐标, 修改图片切换时间等。效果如图 4.2。
 
图4.2 相册子页效果图
 
4.2.2相册子页代码
。。。
 
 
第四章   课程设计心得
虽然此次课程设计的时间急促, 但是这个收获应该说是相当大的。一开始我们从参考书上找来了课题,但是毕竟是参考书,做到后来发现很多程序都是不完整的,这让我们伤透了脑筋。参考书毕竟只是一个参考,设计这种东西最后还是要靠自己动脑筋。然后整个设计通过了软件和硬件上的调试,应该说这是通过我们小组成员的共同努力和动脑完成的,虽然内容并不是很复杂,但是我们觉得设计的过程相当重要,学到了很多,收获了很多。通过这次课程设计我们也发现了自身存在的不足之处,虽然感觉理论上已经掌握,但在运用到实践的过程中仍有意想不到的困惑,经过一番努力才得以解决。我觉得课程设计反映的是一个从理论到实际应用的过程,但是更远一点可以联系到以后毕业之后从学校转到踏上社会的一个过程。同时也体会到同学之间的配合﹑相处,以及自身的动脑和努力,都是以后工作中需要的。
时间太短暂了,能大概的了解网页设计的基本步骤,还达不到熟练的程度去进行设计,但这些对于我们来说已经有很大进步了。通过亲自实践操作也学到了很多书本上没有的知识,既增长操作的能力,也使我所学的知识得到了巩固。这将是我走向社会的一笔最为宝贵的财富,同时通过亲自操作、实验、调试,从根本上解决了我们在学习过程中的一些疑问, 促进了我对知识的理解与应用, 通过努力与合作,最终解决了我所遇到的大部分问题。
 
参考文献
[1]  杨烨等 . 网页设计与制作 实用 教程 . 北京 : 清华大学出版社,2011.1
[2] 杨选辉 . 网页设计与制作教程 . 北京: 清华大学出版社 ,2008.8
[3]  王诚君等 . 网页设计三合一实用教程 . 北京 :