网页设计实训报告书.docx

网页设计实训报告书.docx

《网页设计实训报告书.docx》由会员分享，可在线阅读，更多相关《网页设计实训报告书.docx（13页珍藏版）》请在冰豆网上搜索。

网页设计实训报告书

计算机技术系

实训项目报告书

2012—2013学年第1学期

实训项目名称：

个人博客网页设计

姓名：

张腾

学号：

072

所在专业：

计算机技术系

所在班级：

11网络班

任务起至日期：

2012-12-10至2012-12-14

指导教师:

陈彦

成绩:

实训项目报告书

1．实训报告内容摘要：

本次实训的主要目的是通过实验教学培养学生的动手能力，提高我的网页制作能力和水平，我选择的主题是个人博客。

网页共分六个导航分别为首页、心情日志、留言板、光棍部落、时光机、关于我。

2．小组成员及工作分工：

小组成员：

张滕

小组分工：

独立完成所有实训项目。

实训项目报告书

3．

实训报告内容：

第一章引言

实训项目开发背景及意义

通过校内的实际训练，使自己掌握在Windows环境下DreamweaverCS5的基本操作和使用技能的基本方法，掌握相关理论知识；培养了自己设计网页的技能，提高自己学习课程的积极性，为今后学习其它有关网页设计与制作打下一个良好的基础。

1、通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能；

2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等；

3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质；

4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。

博客秉承了个人网站的自由精神，但是综合了激发创造的新模式，使其更具开放和建设性。

网页共分七个导航分别为首页、日志、相册、音乐、收藏、博友、关于我。

项目开发环境简介

我们综合运用了Photoshop、Dreamweaver、Flash等软件,使用环境是windows7、windowsXP。

第二章实训项目设计基本思路及创新点

实训项目设计的基本思路

我们的网站分为七层，第一层是首页，首先几乎包含了所有板块信息，可以让人们对我的网页有一个简单的了解。

第二层是日志，记录了我欣赏的文章。

第三层留言板，里边收录着博友的祝福。

第四层音乐，都是自己喜欢的音乐，心情不好的时候来这里放松一下。

第五层时光机，代表着人生的起起伏伏。

第七层关于我，是我自己的简单的介绍。

我是用“穿越地平线的渴望”命名的网站，网站整体色调为浅黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。

版面设计十分灵活，根据各部分内容的不同适当的自由设计。

网页布局主要用DIV+CSS,，盒子嵌套，以保证随时、准确的调用。

另外，为了网页布局的协调，我加入了适当的flash透明动态图片和javascript特效，用以达到更好的浏览效果。

首页页面如下：

项目设计创新点

在项目中，我们加入了一些网页特效，利用这些东西，给人一种耳目一新的感觉。

导航链接效果，背景音乐添加，flash动画添加，javascript特效添加。

Javascript特效和flash如下：

第3章实训项目总体规划

1、站点规划，搜集资料。

确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。

2、进行主页设计。

构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。

3、除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。

包括版面设计和图形设计、内容录入等。

4、动画设计。

主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。

综合优化。

链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）

5、网站测试并递交。

在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等

文件站点：

CSS样式：

第4章

典型网页设计过程及样例

首页样式图：

日志样式图：

时光机页面布局：

微博页面布局：

音乐播放器特效及代码：

特效：

蓝色气泡

特效代码（蓝色气泡）：

--Begin

--此特效使用《网页特效精灵》编辑制作-->

--奥天软件：

=newImage（）;

="images\\";

Amount=10;

Ymouse=-50

Xmouse=-50;

Ypos=newArray（）;

Xpos=newArray（）;

Speed=newArray（）;

rate=newArray（）;

grow=newArray（）;

Step=newArray（）;

Cstep=newArray（）;

nsSize=newArray（）;

ns=?

1:

0;

?

:

0;

functionMouse（evnt）{

Ymouse=?

:

;

Xmouse=?

:

;

}

?

=Mouse:

=Mouse;

for（i=0;i

Ypos[i]=Ymouse;

Xpos[i]=Xmouse;

Speed[i]=（）*4+1;

Cstep[i]=0;

Step[i]=（）*+;

grow[i]=8;

nsSize[i]=（）*15+5;

rate[i]=（）*+;

}

if（ns）{

for（i=0;i

（""）;

}

}

else{

（'

absolute;top:

0px;left:

0px">

relative">'）;

for（i=0;i

（'

absolute;top:

0px;left:

0px;filter:

alpha（opacity=90）">'）;

}

（'