网页设计实训报告书.doc

计算机技术系 实训项目报告书 2012 2013 学年第 1 学期实训项目名称： 个人博客网页设计 姓 名： 张腾 学 号： 35091104072 所在专业： 计算机技术系 所在班级： 11网络班 任务起至日期： 2012-12-10至2012-12-14 指导教师: 陈彦 成 绩: 15目 录 第一章 引言21.1 实训项目开发背景及意义21.2 项目开发环境简介3第二章 实训项目设计基本思路及创新点32.1实训项目设计的基本思路32.2项目设计创新点4第三章 实训项目总体规划5第四章 典型网页设计过程及样例7第五章 小结13参考文献16 实 训 项 目 报 告 书1实训报告内容摘要： 本次实训的主要目的是通过实验教学培养学生的动手能力，提高我的网页制作能力和水平，我选择的主题是个人博客。网页共分六个导航分别为首页、心情日志、留言板、光棍部落、时光机、关于我。2小组成员及工作分工： 小组成员：张滕小组分工：独立完成所有实训项目。 实 训 项 目 报 告 书3 实训报告内容：第一章 引言1.1 实训项目开发背景及意义通过校内的实际训练，使自己掌握在Windows环境下Dreamweaver CS5的基本操作和使用技能的基本方法，掌握相关理论知识；培养了自己设计网页的技能，提高自己学习课程的积极性，为今后学习其它有关网页设计与制作打下一个良好的基础。1、通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能；2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等； 3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质；4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。 博客秉承了个人网站的自由精神，但是综合了激发创造的新模式，使其更具开放和建设性。网页共分七个导航分别为首页、日志、相册、音乐、收藏、博友、关于我。1.2 项目开发环境简介 我们综合运用了Photoshop、Dreamweaver、Flash等软件,使用环境是windows7、windows XP。第二章 实训项目设计基本思路及创新点2.1实训项目设计的基本思路 我们的网站分为七层，第一层是首页，首先几乎包含了所有板块信息，可以让人们对我的网页有一个简单的了解。第二层是日志，记录了我欣赏的文章。第三层留言板，里边收录着博友的祝福。第四层音乐，都是自己喜欢的音乐，心情不好的时候来这里放松一下。第五层时光机，代表着人生的起起伏伏。第七层关于我，是我自己的简单的介绍。 我是用“穿越地平线的渴望”命名的网站，网站整体色调为浅黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用DIV+CSS,，盒子嵌套，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片和javascript特效，用以达到更好的浏览效果。首页页面如下：2.2项目设计创新点 在项目中，我们加入了一些网页特效，利用这些东西，给人一种耳目一新的感觉。导航链接效果，背景音乐添加，flash动画添加，javascript特效添加。 Javascript特效和flash如下：网页加入js特效，让页面更加吸引人，给人耳目一新的感觉。第3章 实训项目总体规划 1、站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。 2、进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。 3、除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、内容录入等。 4、动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等） 5、网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等建立站点，在做更改时，不会使网页页面产生混乱，增加效率和质量。文件站点： CSS样式：建立各种div和css规则，有利于对网站各部分进行更改，而不影响其他部分，第4章 典型网页设计过程及样例首页样式图：网站主色调为淡黑色，附之黄色，突出主题，避免给人杂乱的感觉。日志样式图：记录自己的生活点滴以及自动喜欢的文章，突出博客的意义时光机页面布局：页面插入flash，增加页面效果，使页面更加美观，富有活力。微博页面布局：加入了表单，可以输入文字，使用按钮，可以进行发表。音乐播放器特效及代码：加入背景音乐，是自己的博客更加丰富多彩，特效：蓝色气泡特效：蓝色气泡特效代码(蓝色气泡)：!- BeginImage0 = new Image();Image0.src = 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;function 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.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.scrollTop;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 24) growi = 25;setTimeout(MouseBubbles(), 10);MouseBubbles();/ End -实 训 项 目 报 告 书4遇到问题及解决方法：遇到的问题：1、网页不能在IE浏览器中预览以及在模板文件下新建的页面不能进行更改。2、特效代码问题不清楚。3、添加Flash后，预览时Flash没有在其相应位置。4、对文本或图片设置链接后，在预览效果中依然不能有效进行链接。解决方法：1、在网上查阅相关资料，借鉴好的作品，确定了图片和网站的大概版图。通过互联网查询，下载代码，再根据自己制作的网页进行更改，做出符合自己的代码。2、通过请教老师、上网搜索，问题得到解决。3、向老师询问，向同学讨教。第五章 小结 通过本次的实训，在老师的指导下，我不仅在知识上有了很大的提升而且在心得上也是收获颇多。本次实训的目的旨在检验我们在平常学习中所学知识、将上课所学的理论知识在实践中巩固掌握以及进一步熟悉和掌握网页设计与网页制作的基本流程。在设计的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自设计网站、制作网站，难免会遇到过各种各样的问题，同时在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固，比如说拖动层的设置，时间轴与层的显示与隐藏的综合应用，在CSS的具体应用还不是和很熟练，没有能完全达到自己预期的效果，通过这次网页设计与制作实训，一定把以前所学过的知识重新温故。本次实训自己设计的室内设计网网站实现了布局清晰、有条理，视觉效果较好，涉及的知识点较全面等目标，但是在连接数据库等方面还是存在一些问题，这是开发动态网站的重要基础，我认为自己以后应该在静态网页到动态网页的转变方面多钻研、多努力，使自己在静态、动态网站开发上的水平有一个质的