网页制作设计报告.doc

题目: 网页制作期末设计报告
院系: 教育学院
专业: 应用心理学
姓名: 马莉
学号:
教师: 陈清毅
2013年12月15日
目录
一、 绪论 3
1、网站主题 3
2、网站规划 3
二、 正文 3
1、网页制作的前期策划与准备 3
2、设计方案 4
3、网页实现 5
——个人主页 5
6
11
12
12
13
——我喜欢的明星 13
三、 设计小结 13
1、设计中遇到的问题及解决 14
2、心得体会 14
四、 参考文献 14
绪论
1、网站主题
本网站主要是实现一个个人主页。相信每个人在网上都有自己的个人空间,不管是QQ空间,还是51空间等等,很多人都想把自己的主页弄得绚丽多彩,漂漂亮亮的,希望在众多的空间中脱颖而出,得到更多人的关注,因此此网站将告诉同学们我们自己去构建完全属于自己的一个主页,而且通过此网站可以使同学们更加的了解个人主页的组成。
2、网站规划
本网站共分有11个板块,分为我的主页、我的日志、我的相册、我的音乐、我的档案、我的好友、我的下载、我的爱好、我的博客、我的心情、我的家园,目前分别有对其中的七项进行介绍。
整个网站采用黑色为主色调,黑色给人以遐想,神秘的感觉,所以更能给人以视觉的冲击。整个网站的开头都是以一个flash文件,通过运用flash设置不断变化的文字效果,符合人的审美标准。为了使网页的风格保持一致,主要只有一个CSS模板。不同的网页在制作时,对主要的CSS模板进行继承,加入了新的元素来满足不同的需求。
布局方面,本网页主要采用了AP Div和表格布局页面,因为AP Div布局更灵活,而且易于修改,这样每个部分就好像一个独立的,你要修改哪个地方直接修改与它相关的而不会影响其他的部分。为了突出主题,每个子网页的头部部分及导航栏都与主页相同而且背景颜色也都一致。对JavaScript的运用主要集中在特效方面。分别是图片的自动从右向左滚动,还有日志导航的自动从下往上滚动,还有记录在此网站停留的时间等。
首页网站分主要分为为三大块,头部,主体,和底部。头部用以一个与个人主页题目相关的flash体现主题,并体现网站的内容;主体内分为三个块,左边用来介绍自己,以及登录的界面还有热点话题导航,中间主要显示最近日志更新导航,体现主页的主题,在右边插入一个flash的MV用来显示最新更新的照片,接着是相册的风采显示;底部用来添加主页地址连接以及联系方式,整个网站的设计条理清晰,层次分明。
正文
1 网页制作的前期策划和准备
在正式制作我们的网页之前,我们将主题确定在介绍个人主页上,一共做了11个子页面,但是真正有内容的只有6个,其他4个由于时间关系就有待改进了,因此加上主页,有内容的网页一共是7个。然后我们确定了一下各网页的整体布局以及颜色的选取,由于是个人主页欣赏,因此整体的颜色决定采用黑色,既符合广大同学们的喜爱同时也给人以视觉的冲击。确定了这些后,就是上网查找有关资料,看看别人的个人主页是怎么做的,还有查找需要的一些图片等。为了让网页做得更能符合当今网页设计的潮流,在网上找了一着动态效果的代码,通过仔