《网页设计实训报告书》由会员分享，可在线阅读，更多相关《网页设计实训报告书（19页珍藏版）》请在金锄头文库上搜索。
1、. .计算机技术系 实训工程报告书 2021 2021 学年第 1 学期实训工程名称： 个人博客网页设计姓 名： 腾 学 号：35091104072所在专业： 计算机技术系 所在班级： 11网络班 任务起至日期：2021-12-10至2021-12-14指导教师: 彦成 绩:优选. -目 录第一章 引言21.1 实训工程开发背景及意义21.2 工程开发环境简介3第二章 实训工程设计根本思路及创新点32.1实训工程设计的根本思路32.2工程设计创新点4第三章 实训工程总体规划5第四章 典型网页设计过程及样例7第五章 小结13参考文献16- .word.zl. - 实 训 项 目 报 告 书1实训
2、报告容摘要： 本次实训的主要目的是通过实验教学培养学生的动手能力，提高我的网页制作能力和水平，我选择的主题是个人博客。网页共分六个导航分别为首页、心情日志、留言板、光棍部落、时光机、关于我。2小组成员及工作分工： 小组成员：滕小组分工：独立完成所有实训工程。 实 训 项 目 报 告 书3 实训报告容：第一章 引言1.1 实训工程开发背景及意义通过校的实际训练，使自己掌握在Windows环境下Dreamweaver CS5的根本操作和使用技能的根本方法，掌握相关理论知识；培养了自己设计网页的技能，提高自己学习课程的积极性，为今后学习其它有关网页设计与制作打下一个良好的根底。1、通过综合实训进一步
3、稳固，深化和拓展学生的理论知识与专业技能；2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等； 3、培养学生运用所学的理论知识和技能解决开发过程中所遇到的实际问题的能力及其根本工作素质；4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。 博客秉承了个人的自由精神，但是综合了激发创造的新模式，使其更具开放和建立性。网页共分七个导航分别为首页、日志、相册、音乐、收藏、博友、关于我。1.2 工程开发环境简介 我们综合运用了Photoshop、Dreamwe
4、aver、Flash等软件,使用环境是windows7、windows XP。第二章 实训工程设计根本思路及创新点2.1实训工程设计的根本思路 我们的分为七层，第一层是首页，首先几乎包含了所有板块信息，可以让人们对我的网页有一个简单的了解。第二层是日志，记录了我欣赏的文章。第三层留言板，里边收录着博友的祝福。第四层音乐，都是自己喜欢的音乐，心情不好的时候来这里放松一下。第五层时光机，代表着人生的起起伏伏。第七层关于我，是我自己的简单的介绍。 我是用穿越地平线的渴望命名的，整体色调为浅黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以防止给人一种杂乱的感觉。版面设计十分灵活，根
5、据各局部容的不同适当的自由设计。网页布局主要用DIV+CSS,，盒子嵌套，以保证随时、准确的调用。另外，为了网页布局的协调，我参加了适当的flash透明动态图片和javascript特效，用以到达更好的浏览效果。首页页面如下：2.2工程设计创新点在工程中，我们参加了一些网页特效，利用这些东西，给人一种耳目一新的感觉。导航效果，背景音乐添加，flash动画添加，javascript特效添加。 Javascript特效和flash如下：网页参加js特效，让页面更加吸引人，给人耳目一新的感觉。第三章 实训工程总体规划 1、站点规划，搜集资料。确定主题容，规划站点构造，从网上搜索相关资料图片、文字等。
6、 2、进展主页设计。构思主页布局，进展主页标题图片的设计要求原创，进展主页其余图片的设计和页面容的录入，最后进展主页的整体优化设计。 3、除主页以外的网页设计，首先设计网页模版，一局部网页由模版生成，一局部为单独设计依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计。包括版面设计和图形设计、容录入等。 4、动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。综合优化。正确、得当，动态效果好时间轴动画、行为、代码的嵌入等 5、测试并递交。在浏览器中对完成的逐页翻开测试，包括正确与否，页面翻开时间，图片和动画是否丧失等建立站点，在做更改时，不会使网页页面产生混乱，增加效率和
7、质量。文件站点：CSS样式：建立各种div和css规那么，有利于对网站各局部进展更改，而不影响其他局部，第四章 典型网页设计过程及样例首页样式图：网站主色调为淡黑色，附之黄色，突出主题，防止给人杂乱的感觉。日志样式图：记录自己的生活点滴以及自动喜欢的文章，突出博客的意义时光机页面布局：页面插入flash，增加页面效果，使页面更加美观，富有活力。微博页面布局：参加了表单，可以输入文字，使用按钮，可以进展发表。音乐播放器特效及代码：参加背景音乐，是自己的博客更加丰富多彩，特效：蓝色气泡特效：蓝色气泡特效代码(蓝色气泡)：!- BeginImage0 = new Image();Image0.src
8、 = imagespaopao.gif;Amount = 10; Ymouse = -50Xmouse = -50;Ypos = new Array();Xpos = new Array();Speed = new Array();rate = new Array();grow = new Array();Step = new Array();Cstep = new Array();nsSize = new Array();ns = (document.layers)1:0;(document.layers)window.captureEvents(Event.MOUSEMOVE):0;fun
9、ction Mouse(evnt) Ymouse=(document.layers)evnt.pageY-20:event.y-20;Xmouse=(document.layers)evnt.pageX:event.x;(document.layers)window.onMouseMove=Mouse:document.onmousemove=Mouse;for (i = 0; i Amount; i+) Yposi = Ymouse;Xposi = Xmouse;Speedi = Math.random()*4+1;Cstepi = 0;Stepi = Math.random()*0.1+0
10、.05;growi = 8;nsSizei = Math.random()*15+5;ratei = Math.random()*0.05+0.01;if (ns) for (i = 0; i Amount; i+) document.write(); else document.write();for (i = 0; i Amount; i+) document.write();document.write();function MouseBubbles() var hscrll = (document.layers)window.pageYOffset:document.body.scro
11、llTop;var wscrll = (document.layers)window.pageXOffset:document.body.scrollLeft;for (i = 0; i Amount; i+)sy = Speedi * Math.sin(210 * Math.PI / 170);sx = Speedi * Math.cos(Cstepi * 2);Yposi += sy;Xposi += sx; if (Yposi -40) Yposi = Ymouse;Xposi = Xmouse;Speedi = Math.random() * 3 + 4;growi = 8;nsSizei = Math.random() * 10 + 5;if (ns) document.layerssn+i.left = Xposi + wscrll;document.layerssn+i.top = Yposi + hscrll;else sii.style.p
