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

1、网页设计与制作期末设计报告网页设计与制作 -个人网站设计报告指导老师：盛加林学号：20082809姓名：杜才伟班级：信管0802一 概述随着网络技术的迅速发展，网络应用越来越趋于平凡化，无论是企业还是其他组织机构或者是个人，都希望利用计算机网络技术开发对自己有价值的东西。关于个人网站，现在越来越多的人通过个人网站记录自己的故事，与朋友分享生活的点滴，同时还可以通过个人网站广交朋友。本次的个人网站设计是网页设计与制作的期末检测，同时也是对自己学习的检验。本次设计运用平台是windows，运用的工具是Macromedia Dreamweaver 8，主要语言是html语言和javascript，样

2、式设计采用的是css样式。在个人网站的设计中，我采用了通常iframe网页框架，风格源于自己浏览其他网站的灵感，网页flash的设计借鉴了网上优秀flash动画，首页还采用了网页音乐播放器控件。照片的处理用到了photoshop和Macromedia Fireworks 8。二 设计结构图 三 设计主题岁月如梭，年华似水。默默流逝的青春给我们每个人留下了不同的回忆，我的个人空间的设计主要是记录大学生活。有学校的剪影，有寝室的合影每一张记录都是未来的我最美好的回忆。设计的主要以怀念为主题。曾经的那些花儿，曾经的那些故事都是生命里美的转弯。四 模块介绍（一）、首页介绍首页是个人网站的入口，大概的设

3、计框架是头是一个部分、头以下分为左右两个部分。头部如下图：导航条：导航条主要是“我们的故事”、“相册”、“关于我”三个模块的超链接点击三个连接即可跳转到不同页面。头部以下部分：这部分的设计主要有图片处理、文字从下往上滚动、音乐播放器、时钟的设计、flash设计(二)、我们的故事我们的故事主要是文字描述，整体样式如下：这个部分主要是记录一些故事，每一段故事中都会存在一些悲伤的插曲，背景漂浮的flash动画加上背景音乐，还有略带伤感的文字，整体呈现淡淡的伤感而又不失积极向上。(三)、相册 相册主要是展示大学四年中的记录，有关于学校的，有我们寝室的，有自己的：整天样式如下图：相册页面上面是大学里照片

4、的轮换，中间是自己处理后的照片，下面是文字大概描述照片的故事：(四)、关于我五 主要设计(一)、首页主体框架 我们的故事 | 相片采集 | 关于我  这里记录的不止是故事. 更多的是一路走来的心情. 倾听心里最真实的声音. 找回那份似曾相识的感觉. 让感情的世界不留遗憾. 轻轻的敲醒沉睡了的心灵. 让心灵最深处，闪出记忆深处的阴影. 回头看看来时的路. 脚印已被世尘掩埋. 1 2 3 4 5 6 7 8 9 10 11 12 . . . . . . . . . . . . （二）、文字滚动效果(三)、时钟效果pX = 100;pY = 100;obs = new

5、Array(13);function ob() for (i = 0; i 13; i+) if (document.all) obsi = new Array (eval(ob+i).style,-100,-100);else obsi = new Array (eval(document.ob+i),-100,-100); function cl(a, b, c) if (document.all) if (a != 0) b += -1;eval(c+a+.style.pixelTop=+(pY+(c);eval(c+a+.style.pixelLeft=+(pX+(b);else if

6、 (a != 0) b += 10;eval(document.c+a+.top=+(pY+(c);eval(document.c+a+.left=+(pX+(b); function runClock() for (i = 0; i 13; i+) obsi0.left=obsi1+pX;obsi0.top=obsi2+pY; var lastsec;function timer() time = new Date ();sec = time.getSeconds();if (sec != lastsec) lastsec = sec;sec = Math.PI * sec / 30;min

7、 = Math.PI * time.getMinutes() / 30;hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes() / 360;for (i = 1; i 6; i+) obsi1 = Math.sin(sec) * (44 - (i-1) * 11) - 16;if (document.layers)obsi1 += 10;obsi2 = -Math.cos(sec) * (44 - (i-1) * 11) - 27;for (i = 6;i 10; i+) obsi1 = Math.si

8、n(min) * (40 - (i-6) * 10) - 16;if (document.layers)obsi1 += 10;obsi2 = -Math.cos(min) * (40 - (i-6) * 10) - 27;for (i = 10; i 13; i+) obsi1 = Math.sin(hr) * (37 - (i-10) * 11) - 16;if (document.layers)obsi1 += 10;obsi2 = -Math.cos(hr) * (37 - (i-10) * 11) - 27; function setNum() cl (0, -67, -65);cl

9、 (1, 10, -51);cl (2, 28, -33);cl (3, 35, -8);cl (4, 28, 17);cl (5, 10, 35);cl (6, -15, 42);cl (7, -40, 35);cl (8, -58, 17);cl (9, -65, -8);cl (10, -58, -33);cl (11, -40, -51);cl (12, -16, -56);function startClock() ob();setNum();setInterval(timer(), 100);setInterval(runClock(), 100);(四)、主要css样式 .bod

10、yfont-size:15px;margin-top:-20px; .topwidth:980px;height:130px;.daohangbackground-color:#666666;height:20px;width:980px;.gongnengfloat:right.gongneng afont-size:15px;text-decoration:none;.leftwidth:200px;height:400px;float:left;.c1background:url(./image/right.png) no-repeat;width:980px;height:600px;

11、.jieshaofloat:right;width:150px;height:180px;margin-right:30px;margin-top:-50px;15:29 2012-4-22#divASContainer CLIP: rect(0px 320px 120px 0px); HEIGHT: 300px; LEFT: 10px; OVERFLOW: hidden; POSITION: absolute; TOP:300px; VISIBILITY: hidden; WIDTH: 250px#divASContent LEFT: 0px; POSITION: absolute; TOP: 0