网页设计报告(共17页).doc

《网页设计报告(共17页).doc》由会员分享，可在线阅读，更多相关《网页设计报告(共17页).doc（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上河南城建学院网页设计课程设计报告学 号： 专 业： 信息管理与信息系统姓 名： 田伟涛 题 目： 军事网站 指导老师： 张妍琰 田慧 吴孝利设计时间： 2012.6.182012.6.21 计算机科学与工程系2012年6月目录一、设计目的在21世界的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览个人网站，已经成为越来越多网民的选择，根据调查，中国大陆目前有3亿多网民，其中50%的网民有过在网络上浏览个人网页对他人的了解或获得他人的帮助的经历，30%的网民有过多次在网上浏览个人网页的经历，而经常性的在网络上浏览个人网站的网民，已经达到了20%以上。也

2、就是说，在中国大陆，最少有1000万多网民，已经选择了在WEB网中建立个人网站作为主要的展示自己才能方式之一。另外，在当今这个强权时代，军事力量的发展已成为每个国家的重中之重。新世纪的头十年，世界主要大国为赢得未来战略主动权 ，都启动了新一轮军事变革或转型，型，从而将世界军事变革推向了一个新的阶段。但是，由于国际战略形势的深刻变化，国际安全环境日趋复杂，特别是战争形态呈现出多样性的趋势，给大国军事变革增添了许多不确定因素，包括美国、俄罗斯等在内，其军事变革的进程并不像想象的那样一帆风顺。其他一些大国的军事变革，同样遇到了不少的阻力和困难。印度进入新世纪以来多次调整军事战略，军队的改革设想一个接

3、着一个，雄心勃勃的武器发展规划不断推出，但真正能够按照时间节点落实的为数不多，内外舆论对其军事改革的评价同样也是褒贬不一。回顾过去10年大国军事变革走过的历程，并非总是一路“高歌猛进”、“迅猛发展”。像其他社会领域的变革一样，大国军事变革走入新世纪，既有成功的经验，也有深刻的教训，当前正处在一个深刻的反思阶段 。就像一位战略家所说，一个民族的崛起从来都不会是和平的。在我中华名族重新屹立在世界民族之林的过程中，伴随着我们的是近百年大大小小的战争，这使我们深深明白，力量弱就没有话语权，就要挨打。现在，随着我国的迅速崛起，与周边国家的边境冲突越来越多，军事问题再一次回到了人们的视线，国防教育又一次成

4、为全民教育的一项重要内容，也是当代大、中学生整个思想政治教育的重要组成部分。历史经验表明，一个国家、一个民族的强弱兴衰与国民国防意识的强弱有密切的联系。大、中学生既有较高的科学文化知识，又年轻力壮，他们是国家最有希望的一代，是国防兵员的主要来源。加强全民的国防教育，首选要加强学生的国防教育，要从娃娃抓起，提高他们的国防观念。要做到这一点，最有效的途径就是对他们进行军事训练。通过军事训练，对他们进行爱国主义、革命英雄主义和人民军队的传统教育，激发他们的爱国主义热情，增强建设祖国、保卫祖国的责任感，从而推动全民国防教育的发展，弘扬中华民族崇勇尚武的传统美德，使全体公民都树立起居安思危、常备不懈、有

5、备无患的国防观念。在这样的背景之下，成立一个以军事历史为主题的网站，具有非常大的发展空间和市场潜力。它不仅能为网民提供一个在线获得信息平台，而且还可以使网民从历史中谋发展，以史为镜。因此，在上述情况下，我们设计并制作了这个军事历史型网站军事网。二、需求分析1、基本工具需求 Dreamweaver CS3、，Adobe Photoshop CS4，可以运用Dreamweaver CS3进行flash电子相册的制作，用Dreamweaver CS4进行页面布局、页面CSS编码编辑、排版、设计等功能，可以利用Photoshop CS4制作图片和对图片进行修改！2、基本要素需求1）图片要素运用图片是设

6、计与制作网页必不可少的部分，图片的运用能够给人更加直观的信息，图片的要求与页面的内容有关，我做的网页是军事历史网站，因此所用的图片都是一些军事相关图片，图片比较单一。不过在相关图片的制作过程中还是下了一定的功夫，希望能吸引网民的眼球，能够起到很好的宣传广告效应，再加上图片可以利用Photoshop修改和制作，因而更能够设计出较好的网页。2） 客户群体特点调查发现，网上军迷的关注点往往各不相同。总的来看，大致可以分为：战略迷、兵器迷、战史迷、热点迷等。通过对各大军事网站、论坛的板块设置、热点新闻、热帖的跟踪分析可以看出，军事迷们在网上对以下问题的关注度最大： 军事热点：军事迷们对国际安全，特别是

7、军事方面的热点问题关注度最高。像近期爆发的俄罗斯与格鲁吉亚间的武装冲突等，常常跃升为各网站、论坛的头条；参加讨论、跟帖的军迷也特别多； 军事酷图：各大论坛中关于武器装备的帖子往往都有很高的点击率和众多的回复。如：“世界极品警用手枪”、“型坦克的致命弱点”、“图解号舰艇”之类的帖子的点击量高达十几万，甚至更多； 中国军情：有关我国国防发展的问题在网上的关注度非常高，尤其是我军现代化建设方面的动向及成果，往往是军迷们在网上追捧的“明星”。比如“中国可以没有航母，但一定要提升空军”等就引得众多网迷跟帖热议。 当然，网络做为一个娱乐成分很高的平台，一些军事网站偶尔也很八卦。像一些题为“我国最美丽的女军

8、人”、“以色列漂亮女兵”等帖子也会在一段时间受到网迷们的追捧。对广大军事爱好者来说，及时的军事热点、先进武器的报道等是总多网友的需要，因此，我制作军事纵横网，希望将来能够为广大的军事迷们提供即使热点状态和良好的交流平台。3、网页视觉设计与审美需求人们对美的需求是不断深入的，网页设计也同样如此。如何使访客更好的接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对平面设计美学的一种继承和延伸，两者的表现形式和目的具有一定的相似性。起初，我编排完的网页内容杂乱，缺乏规范性设计，图片处理缺乏美感，利用html、css和javascript设计的加注脚本特效的网页，由于缺乏技术性，致使页面效

9、果不美观。经过一周的调整和修改，查找课本资料和从网上搜集知识，基本上使得网页看起来主次分明、有条理，也颇有美感了。4、特殊需求网页内容要实现一些特殊的功能，例如：会员登陆、新闻评论等等。三、功能模块分析及设计1、设计目标在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。针对网站所要展示的内容进行设计整理，是页面不会显得太乱，给人整体划一的感觉。为了做到主题鲜明突出，要点明确，要按照要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。2、模块分析在需求分析的基础上，经过我们的讨论分析，确定网站

10、由以下几个模块组成：首页、军事情报、武器装备、军事图库、史海烟云、老照片。其中军事情报部门又包括中国军情，台海军情，国际军情、军事新闻、热点评论等部分。军事图库包括军事酷图、图说时政、纵览天下等部门。老照片包括人物志、档案馆、历史战争、论坛热图等部分。下图为网站总体结构图：首页老照片史海烟云军事图库武器装备军事情报图3.1网站总体结构图论坛热点论坛热图人物志战争历史档案馆纵览天下图说时政军事酷图军事要闻国际军情台海军情中国军情四、制作过程及要点在本次课程设计过程中我主要负责网站导航栏、首页、史海烟云、以及老照片等模块的制作及导航栏图片的PS制作。在制作过程中，主要用表格及嵌套表格布局1、导航栏

11、制作图 4.1 导航栏制作步骤：1) 插入一个1行3列的表格，表格宽度为70%，对齐方式为居中。2) 在第一列中插入网站logo图片“logo.jpg”，并设置第二列宽度为15px。3) 在第三列中插入一个三行一列的表格。4) 将嵌套表格第一行拆分为两列，在第一列中插入表单，并在表单中插入用户名、密码文本域及登录、重置按钮；在第二列中插入“设为首页”“加入收藏”链接。5) 将嵌套表格第二行拆分为四列，在第1、2、3列相应位置插入热点新闻及其链接；在第四列插入时间，并设置时间更新方式为“每次保存时更新”。6) 将嵌套表格第三行背景设置为图片，并插入一个一行六列的嵌套表格，表格间距为15px。7)

12、 在嵌套表格每个单元格中分别指行“插入图像对象鼠标经过图像”操作，将图片插入到相应位置。8) 将导航栏制作成模版，供其他模块使用。模版如下页图所示图4.2 模版在首页，历史烟云、老照片制作过程中，由于步骤太过复杂，在此不再一一列出，仅对要点部分进行说明。2、首页制作在首页制作过程中，我参考了网络上现有的大多数网站的布局，并以此为基础进行了优化和布局。图4.3 首页要点说明：专心-专注-专业视频的插入。将光标放在相应的单元格中，执行“插入媒体FLV.”操作，弹出对话框后选择相应视频，之后依次点击“检测大小”“确定”按钮，即可把视频插入到单元格中。3、史海烟云模块制作图4.4 史海云烟要点说明：在

13、史海烟云模块中，除了插入视频外，还在热门点击栏目中使用了走马灯效果，制作方法为：点击代码视图，将光标插入到相应位置，打入以下代码：4、老照片模块制作要点说明：老照片模块的制作主要是布局，表格嵌套，及图片的插入。布局不再详细说明，图片的插入执行“插入图像浏览”操作即可。另外，在老照片二级页面中插入了flash电子相册，该部分是由Dreamweaver CS3做成的。图4.5 flash电子相册五、系统介绍及功能展示1、系统介绍1) 首页：网站的主体，通过首页的链接到达各个分页2) 军事情报：该模块由中国军情，台海军情，国际军情，军事要闻，热点评论组成。主要用于收集最新的各类军情信息。用户可以通过

14、该模块了解最近发生的各类军事事件，足不出户，遍览天下。3) 武器装备：主要为图片介绍。主要面向广大的武器迷们设计，该模块汇聚世界各类武器，以及对他们性能的介绍和各国部队的装备情况。4) 军事图库：该模块由军事酷图、图说时政、纵览全球组成。俗话说“有图有真相”，该模块正是基于这一点设计的，通过各类军事图片来反映最新，最全的军事信息，时政信息等。对于不习惯阅读的网民可以通过本模块来了解天下事。5) 史海烟云：分为抗日战争、抗美援朝、对越反击战等栏目。以史为镜，纵观古今，通过该模块，广大网页既可以了解过去的点点滴滴，又可以从历史中反思现在。6) 老照片：分为人物志、档案馆、历史战争，论坛热图等栏目。

15、相对于历史资料，或许图片更可以说明历史的真想，。通过本模块，网友可以立体的还原历史，更加透彻的了解历史。2、部分功能展示图5.1 军事情报图5.2 武器装备图5.3 史海烟云图5.4 历史图库图5.5 评论功能六、设计总结 1、问题与解决方法 在这次课程设计中出现了很多的错误，出现的最多的错误就是链接路径不对，还有就是做的网页不能正常预览，由其是在主页中出现的错误，特别是网页布局设计视图是好的，但是预览图就走位了；在留言板也反复做了好多遍才做出来，那可真是一波三折。，之后复制到机房里面去就运行不了，之后找了很多的原因，才找出来，首先要在你放的那个的文件夹，站一个web 共享，在新建一个站点，这

16、样才能正常的运行，还有就是那个数据库就是要重新添加数据源才可以，不然就会出现错误，遇到问题时我努力查阅资料，查阅代码。2、心得体会“书到用时方恨少”，从这次课程设计当中我深刻的体会到理论知识的重要性，理论结合实际才能将知识掌握牢固。为了使自己的网页风格统一，是自己在设计过程中更加省时省力，我使用了较多的模板和表格嵌套，这使我的工作效率大大提高。在设计的过程中遇到了很多问题，有些知识理解得不够深刻，掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导和同学们的帮助达到了最终效果。 通过这个课程设计我学到了很多，也发现自己的不足，一周的课程设计结束了，至于总体的感觉只

17、能用八个字来概括虽然辛苦，但很充实。在这一周里，我学到了很多有用的知识，我也深深地体会到IT行业的辛苦和伟大，随着科学的迅猛发展，计算机行业发展更快了，新技术的广泛应用，会有很多领域是我们未曾接触过的，只有敢于去尝试才能有所突破，有所创新。搞好一次课程设计，是我今后走上社会的一种财富，所以努力搞好实训才是最要的，打高分不是最重要的，最重要的是你在这次实训中你学到了什么，因为这就是你今后走上社会的一种定贵的财富。学习的能力很重要，特别是对一个站长来说，因为网络的发展太快，新的技术，新的模式，新的思维方法每天都在出现，如果不学习，很快就会跟不上形势。做网站虽然辛苦但是让我知道：“千淘万漉虽辛苦，吹

18、尽黄沙始到金！”以前我经常在网上浏览网页，对那些图文并茂的网页很是喜欢，但是根本不知道是怎么做出来的，对一些代码我更本就看不懂，现在好了，经过这学期专门对的学习，我已学会了很多。虽然我还不是很专业，但是已经可以做一些不太复杂的网页了。通过这一周的课程设计，在张老师老师的精心教导下和同学们的帮助下，以及通过自己在平时的学习和实践，对网站创建和网页的设计知识有了更深的认识课程设计期间上网查看了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出自己学习的还不够，存在许多缺点疏漏，需要更加刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。七、参考文献1 马永强，胡柳，卢剑等. 中文版Dreamweaver CS4 多媒体教学经典教程M. 北京：清华大学出版社；北京：北京交通大学出版社，20102 兰婵丽，付民仓，王纪卿等. Dreamweaver CS3 经典实例M. 北京：电子工业出版社，2008.63 何海霞，陶琳. Dreamweaver CS3完美网页设计白金案例篇M. 北京：中国电力出版社，20084 刘晖 完美网站设计典型案例M. 北京：电子工业出版社，2008.6