网页设计与制作期末设计报告.docx

网页设计与制作---个人网站设计报告指导老师:盛加林学号:20082809姓名:杜才伟班级:信管0802概述随着网络技术的迅速发展,网络应用越来越趋于平凡化,无论是企业还是其他组织机构或者是个人,都希望利用计算机网络技术开发对自己有价值的东西。关于个人网站,现在越来越多的人通过个人网站记录自己的故事,与朋友分享生活的点滴,同时还可以通过个人网站广交朋友。本次的个人网站设计是网页设计与制作的期末检测,同时也是对自己学台是windows,运用的工具是MacromediaDreamweaver8,主要语言是html语言和javascript,样式设计采用的是css样式。在个人网站的设计中,我采用了通常iframe网页框架,风格源于自己浏览其他网站的灵感,网页flash的设计借鉴了网上优秀flash动画,首页还采用了网页音乐播放器控件。照片的处理用到了photoshop和MacromediaFireworks8。设计结构图设计主题岁月如梭,年华似水。默默流逝的青春给我们每个人留下了不同的回忆,我的个人空间的设计主要是记录大学生活。有学校的剪影,有寝室的合影……每一张记录都是未来的我最美好的回忆。设计的主要以怀念为主题。曾经的那些花儿,曾经的那些故事都是生命里美的转弯。模块介绍(一)、首页介绍首页是个人网站的入口,大概的设计框架是头是一个部分、头以下分为左右两个部分。头部如下图:导航条:导航条主要是“我们的故事”、“相册”、“关于我”三个模块的超链接点击三个连接即可跳转到不同页面。头部以下部分:这部分的设计主要有图片处理、文字从下往上滚动、音乐播放器、时钟的设计、flash设计(二)、我们的故事我们的故事主要是文字描述,整体样式如下:这个部分主要是记录一些故事,每一段故事中都会存在一些悲伤的插曲,背景漂浮的flash动画加上背景音乐,还有略带伤感的文字,整体呈现淡淡的伤感而又不失积极向上。(三)、相册 相册主要是展示大学四年中的记录,有关于学校的,有我们寝室的,有自己的:整天样式如下图:相册页面上面是大学里照片的轮换,中间是自己处理后的照片,下面是文字大概描述照片的故事:(四)、关于我主要设计(一)、首页主体框架<bodyonLoad="InitialiseAutoScrollArea();"> <EMBEDstyle="POSITION:absolute;WIDTH:980px;HEIGHT:541px;TOP:1px;LEFT:1px"height=541type=application/x-shockwave-flashalign=rightwidth=967src=quality="high"wmode="transparent"> <center> <divclass="body"> <divclass="top"> <imgsrc="../image/"width="980px;"height="130px;"/> </div> <divclass="daohang"> <divclass="gongneng"> <ahref="">我们的故事</a>&nbsp;| <ahref="">相片采集</a>&nbsp;| <ahref="">关于我</a>&nbsp; </div> </div> <divclass="c1"> <divstyle="margin-left:0px;margin-top:-10px;width:250px;"> <imgsrc="../image/"/> </div> <divstyle="width:300px;height:200px;float:left;margin-left:280px;margin-top:20px;background-color:#"> <iframesrc="../music/"frameborder="0"height="220px"width="310px;"></iframe> </div> <divclass="wenzhang"id="divASContainer"style="width:250px;height:300px;float:auto;margin-left:750px;margin-top:20px;visibility:hidden;"> <divid="divASContent"style="margin-left:30px;font-size:15px;float:auto;font-weight:900;"> <pstyle="font-style:italic;">这里记录的不止是故事..