网页设计实训报告书.doc

《网页设计实训报告书.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、计算机技术系实训项目报告书2012—2013学年第1学期实训项目名称：个人博客网页设计姓名：腾学号：35091104072所在专业：计算机技术系所在班级：11网络班任务起至日期：2012-12-10至2012-12-14指导教师:彦成绩:目录第一章引言21.1实训项目开发背景及意义21.2项目开发环境简介3第二章实训项目设计基本思路及创新点32.1实训项目设计的基本思路32.2项目设计创新点4第三章实训项目总体规划5第四章典型网页设计过程及样例7第五章小结13参考文献16实训项目报告书1．实训报告

2、容摘要：本次实训的主要目的是通过实验教学培养学生的动手能力，提高我的网页制作能力和水平，我选择的主题是个人博客。网页共分六个导航分别为首页、心情日志、留言板、光棍部落、时光机、关于我。2．小组成员及工作分工：小组成员：滕小组分工：独立完成所有实训项目。实训项目报告书3．实训报告容：第一章引言1.1实训项目开发背景及意义通过校的实际训练，使自己掌握在Windows环境下DreamweaverCS5的基本操作和使用技能的基本方法，掌握相关理论知识；培养了自己设计网页的技能，提高自己学习课程的积极性，为

3、今后学习其它有关网页设计与制作打下一个良好的基础。1、通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能；2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等；3、培养学生运用所学的理论知识和技能解决开发过程中所遇到的实际问题的能力及其基本工作素质；4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。博客秉承了个人的自由精神，但是综合了激发创造的新模

4、式，使其更具开放和建设性。网页共分七个导航分别为首页、日志、相册、音乐、收藏、博友、关于我。1.2项目开发环境简介我们综合运用了Photoshop、Dreamweaver、Flash等软件,使用环境是windows7、windowsXP。第二章实训项目设计基本思路及创新点2.1实训项目设计的基本思路我们的分为七层，第一层是首页，首先几乎包含了所有板块信息，可以让人们对我的网页有一个简单的了解。第二层是日志，记录了我欣赏的文章。第三层留言板，里边收录着博友的祝福。第四层音乐，都是自己喜欢的音乐，心情

5、不好的时候来这里放松一下。第五层时光机，代表着人生的起起伏伏。第七层关于我，是我自己的简单的介绍。我是用“穿越地平线的渴望”命名的，整体色调为浅黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分容的不同适当的自由设计。网页布局主要用DIV+CSS,，盒子嵌套，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片和javascript特效，用以达到更好的浏览效果。首页页面如下：2.2项目设计创新点

6、在项目中，我们加入了一些网页特效，利用这些东西，给人一种耳目一新的感觉。导航效果，背景音乐添加，flash动画添加，javascript特效添加。Javascript特效和flash如下：网页加入js特效，让页面更加吸引人，给人耳目一新的感觉。第三章实训项目总体规划1、站点规划，搜集资料。确定主题容，规划站点结构，从网上搜索相关资料（图片、文字等）。2、进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面容的录入，最后进行主页的整体优化设计。3、除主页以外的

7、网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、容录入等。4、动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。综合优化。正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）5、测试并递交。在浏览器中对完成的逐页打开测试，包括正确与否，页面打开时间，图片和动画是否丢失等建立站点，在做更改时，不会使网页页面产生混乱，增加效率和质量。文件站点：CSS样式：建立各种div和cs

8、s规则，有利于对网站各部分进行更改，而不影响其他部分，第三章典型网页设计过程及样例首页样式图：网站主色调为淡黑色，附之黄色，突出主题，避免给人杂乱的感觉。日志样式图：记录自己的生活点滴以及自动喜欢的文章，突出博客的意义时光机页面布局：页面插入flash，增加页面效果，使页面更加美观，富有活力。微博页面布局：加入了表单，可以输入文字，使用按钮，可以进行发表。音乐播放器特效及代码：