Web编程基础实训报告

Web编程基础实训报告系（部）：信息工程系专业班级：计算机科学与技术14-1学生姓名：张**学号：201443******完成日期：2015年12月25日实训类型课程实训实训地点软件工程、操作系统实验室实训课题Web编程基础实训实训日期2015－12－21至2015－12－25实训成绩指导教师评语指导教师签名：_____________________年____月____日《Web编程基础实训报告》第1页前言随着网络技术的发展，Web应用越来越广泛，如果用户要开发具有实际应用价值的Web应用程序，必须熟练地掌握Web编程技术相关的基础知识。经过一学期课堂上对《Web编程基础》的学习和上机实验对部分知识点的实际应用，已经掌握的关于网站的相关基础知识。通过本次实训把所学到的知识应用到实际的生活中，本次实训是要求做一个“个人网站”，并撰写实训报告。一、课程实训的目的通过课程实训，每个学生在指导教师的指导下，完成一定的任务，受到一次综合运用所学知识、独立完成某项技术工作的训练，从而培养和提高其独立工作能力，主要有以下四个方面的业务能力：1．综合运用所学专业基本理论，提高查阅文献和资料的能力，其中包括提高阅读外文资料的能力。2．培养学生进行方案设计，分析比较和设计、计算的能力。3．培养学生网站开发，和调试计算机程序的能力。4．提高学生进行技术总结和撰写说明书的能力。二、实训要求：本课程是为了配合《Web编程基础》课程开设，通过使用Dreamweaver完成设计。主要使学生在规定的时间内，完成课程内容涉及到的主要课题设计、实现和训练。使学生掌握Web编程的理论知识与实践结合，扩大加深对网络建设的理解，并提高学生的实践能力。《Web编程基础实训报告》第2页三、实训内容：建立一个完整的Web站点，要做到：网站的目标定位准确；版面的总体设计和栏目设置（布局合理，可使用表格、框架、DIV进行布局）；提供的内容，信息准确、及时、信息量大小适度；网页的制作、页面的结构、色彩、导航合理；网站浏览的速度，交互设计是否合理、方便。在设计中利用CSS样式对字体整体样式进行修饰，要格调一致。《Web编程基础实训报告》第3页目录一、网站设计的必要性······················1二、功能设计···························21、设计的功能与目标2、主要设计思想三、详细设计··························3（一）1、站点设计2、工具使用3、显示环境4、页面设计5、网页链接并调试（二）1、各个模块的设计思想的实现及功能（1）index（2）我的主页（3）个人喜好（4）自我介绍（5）我的未来网页（6）成长经历页面（7）哲学天地（8）我的相册网页四、实训总结·························8附录：（重要代码，以我的主页为例）··············9《Web编程基础实训报告》第1页一、网站设计的必要性网站设计，意义重大，网站是我们面对互联网用户的“桥梁”，这个“桥梁”的完美程度将对访客对于我们的第一印象产生极大的影响！全球现在约有15亿的用户接入了因特网，今后会更为壮大。通过建设一个网站，可以更好的展示个人/企业或者机构。在当前，门户博客、网店、微博、轻博等平台虽然可以更好的对自己展示。但是，网站仍然是最重要的自我展示的方案。因此，建设一个与自身形象相称或者更新颖的网站，是当前时代必不可少的选择！在互联网时代，信息是处于一种爆炸的状态。在信息横流、大众被真假难辨的信息流所迷惑的时候，您的网站是否可以因为建设的十分独特而脱颖而出，并因此为您带来收益呢？另外，通过互联网，我们可以更好的得到网站用户的反馈信息，这将对我们的成长进步起到很大的作用。近几年随着网络的发展而逐渐受到人们的重视，它本身以网络为载体，把各种信息以最快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美的需求。人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，这是远远不够的!要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美的方面入手，制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，运用一些平面设计中美的基本形式到网页中去，增加网页设计的美感和大众的视觉审美需求。总之，你的网站的设计是否符合大众的口味，是否新颖决定了你的网站第2页的质量。二、功能设计：设计的功能与目标及主要设计思想1、设计的功能与目标根据实训要求设计一个个人网站，内容包括：个人情况简介网页：个人简介，成长经历网页、个人喜好网页、我的主页网页、我的相册网页以及其他相关网页。通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友有一个倾诉的地方。因为是个人网站，所以只是选择了自己擅长和喜爱的内容，突出自己的风格和特点。我的个人网站大体上包括一下内容：index，个人简介，我的相册，我的未来，成长经历，哲学天地，个人喜好，7大模块，其中个人喜好网页包括：军情观察、诗词天地和动画乐园等内容，我的未来网页包括：我的梦想和梦想人生等内容，哲学天地网页包括：中国哲学和西方哲学等内容。本次实训，我的目标就是将自己的个人资料全部展示在我的个人网站里面，以至于在别人浏览过我的网站可以更好地了解我。为了浏览者的视觉效果，我的网站还特别注意了颜色的变化，以及网页的和谐统一。2、主要设计思想首页和我的主页采用表格进行布局设计，军情观察采用浮动框架设计，中国哲学采用框架结构布局设计，其他页面采用DIV+CSS布局设计以及DIV+CSS+表格混合使用进行布局设计。网页还采用了：滚动字幕、个人相册、菜单、导航条、弹出信息对话框、脚本等技术。第3页我的网站（index）我的主页页个人喜好自我介绍我的未来成长经历哲学天地我的相册诗词天地军情观察动画乐园我的梦想梦想人生中国哲学西方哲学三、详细设计（一）1.站点设计独立设计实现一个站点。使用设计工具建立站点。站点中需要实现功能文件的制作。我的网站站点结构图如下图所示：第4页2、工具使用在Dreamweaver等工具中选择需要的工具。选择合适的软件环境制作。3、显示环境网页视觉效果应采用InternetExplorer6.0以上版本浏览器，显示分辨率以1024×768状态为准。4、页面设计使用绘图软件设计和切割效果图。通过对图的设计安排实现一张网页。使用表格进行网页布局设计。要求整体风格要一致，网页的制作、页面的结构、色彩、导航合理。提供的内容，信息是否准确、及时、信息量大小适度。5、把文件复制到其他地方链接不会错。网站结构结构清晰，文件有清晰的分类。（二）1、各个模块的设计思想的实现及功能（1）index：我的index页面总体布局是用表格布局，背景图片是经过PS处理过的，其中表格内有我的个人简介和个人信息。表头有一超链接直接进入我的个人主页。本页还有一脚本，当打开本页面时会弹出来一个对话框“WelcomeToHere!!”。页面结构如图所示：第5页（2）我的主页我的主页都是用表格制成，分成八部分：头部、底部、导航、正文、公告及人生哲学和道德经两部分，导航在左上部分实现对大部分网页的超链接，中间是正文部分，右上部分是公告栏，左、右下部分分别是人生哲学和道德经相关的文字以及对标题、正文字体的修饰。页面结构如图所示：（3）个人喜好个人喜好我分别用了三个网页：军情观察页面、诗词天地页面和动画天地页面。其中，军情观察页面采用DIV和浮动框架布局：标题栏、导航栏、浮动框架列表导航栏及浮动框架部分。列表导航栏有四个超链接都是让它们在浮动框架中显示其中都介绍了最近的军事事实，还有一些中国的战机、导弹、战舰等内容。而诗词天地用DIV+CSS布局，分成四部分，头部、导航、正文和底部，其中正文部分又分为左中右三部分分别是相关的古诗词和一些图片，部分文字做了特效处理。动画乐园也是采用DIV+CSS布局，主题选择了《功夫熊猫》这部电影的我的主页军情观察页面诗词天地页面动画天地页面第6页内容，也是分成标题栏、导航栏、正文和底部说明及联系方式等内容。其中正文部分分成四部分图片、电影英文简介，以及两部分用英语和汉语经典台词部分。（4）自我介绍页面自我介绍部分采用表格来布局，方法很简单采用两行两列表格划分，其中在对字体用CSS修饰，显示不同的效果（5）我的未来网页“我的未来”由两部分网页组成：我的梦想网页和人生梦想网页。其中我的梦想网页采用DIV+CSS布局，其中有六个盒子组成：标题栏盒子、导航盒子、底部盒子和中间盒子，其中中间盒子又嵌套两个盒子分别向左、右浮动。以及图片的插入和固定。人生梦想网页用了九个盒子：最上边是导航盒子，标题栏盒子，正文盒子底部盒子依次向下，其中标题栏嵌套两个盒子，一个插入Logo，另一个设置滚动文字。正文盒子也嵌套两个盒子分别向左、右浮动。自我介绍页面我的梦想网页人生梦想网页第7页（6）成长经历页面成长经历页面采用DIV+CSS结构布局，分为三大部分：导航、正文和底部信息栏，其中正文又分为八小部分分别插入不同的图片作为背景鱼片，然后每个小盒子里输入相关的文字内容，在用CSS修饰让文字看起来更美观。（7）哲学天地哲学天地由中国哲学网页和西方哲学网页两部分组成。其中中国哲学采用框架布局页面，按20%、80%分成两行，然后再把80%按20%、80%分成两列。上部分是导航栏，下面两部分是关于《道德经》的古文，类似于电子书（有锚链接），左边是目录，点击目录文章在右边的框架里显示。而西方哲学页面是用DIV+CSS来布局的，是用灰色或和灰色相近的颜色来作为背景，总体布局和其他的DIV+CSS布局有相似之处。成长经历页面中国哲学网页西方哲学网页第8页（8）我的相册网页我相册网页总体采用DIV+CSS布局，但少部分采用表格布局（嵌套在DIV中），我的相册采用onMouseOver这一属性，让鼠标停留在小图片上，此图片就会被放大在新的DIV盒子里，其他布局部分和上面的类似，只是一小部分做了细节处理。四、实训总结：在进行个人网站课程设计的这几天里，我利用了学习之余的一切可利用的剩余时间，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！本次期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，这次的实验过程，我学会了很多知识，虽然过程比较艰辛，但在INTENET领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。这次实训使我接触到了新的知识，学会了网页设计的基本思想，加深了我对网页编程语言的了解，以及加强了我动手做网页的实际能力。对我以后的学习和工作打下了基础，使我受益匪浅。我的相册网页第9页附录：（重要代码，以我的主页为例）一、导航：divid=menuulliahref=我的主页.htmltarget=_blank我的主页/a/liliahref=#个人喜好/aulliahref=军情观察.htmltarget=_blank军情观察/a/liliahref=诗词天地.htmltarget=_blank诗词天地/a/liliahref=个人喜好.htmltarget=_blank动画乐园/a/li/ul/liliahref=../index.htmltarget=_blank自我介绍/a/li