网页设计报告50338

精选文库 - 河南城建学院河南城建学院 网页设计网页设计课程设计报告课程设计报告 学学 号：号： 083410237 专专 业：业： 信息管理与信息系统信息管理与信息系统 姓姓 名：名： 田伟涛田伟涛 题题 目：目： 军事网站军事网站 指导老师：指导老师： 张妍琰张妍琰 田慧田慧 吴孝利吴孝利 设计时间：设计时间： 2012.6.182012.6.21 计算机科学与工程系计算机科学与工程系 2012 年年 6 月月 精选文库 - 目录目录 一、设计目的一、设计目的 .2 二、需求分析二、需求分析 .4 1、基本工具需求.4 2、基本要素需求.4 3、网页视觉设计与审美需求.5 4、特殊需求.5 三、功能模块分析及设计三、功能模块分析及设计 .6 1、设计目标.6 2、模块分析.6 四、制作过程及要点四、制作过程及要点 .6 四、制作过程及要点四、制作过程及要点 .7 1、导航栏制作.7 2、首页制作.8 3、史海烟云模块制作.9 4、老照片模块制作.9 五、系统介绍及功能展示五、系统介绍及功能展示 .10 五、系统介绍及功能展示五、系统介绍及功能展示 .11 1、系统介绍.11 2、部分功能展示.12 六、设计总结六、设计总结 .14 七、参考文献七、参考文献 .16 精选文库 - 一、设计目的一、设计目的 在 21 世界的今天，中国互联网技术已经进入了一个高速发展的阶段，直接 通过网络浏览个人网站，已经成为越来越多网民的选择，根据调查，中国大陆 目前有 3 亿多网民，其中 50%的网民有过在网络上浏览个人网页对他人的了解 或获得他人的帮助的经历，30%的网民有过多次在网上浏览个人网页的经历，而 经常性的在网络上浏览个人网站的网民，已经达到了 20%以上。也就是说，在 中国大陆，最少有 1000 万多网民，已经选择了在 WEB 网中建立个人网站作为主 要的展示自己才能方式之一。 另外，在当今这个强权时代，军事力量的发展已成为每个国家的重中之重。 新世纪的头十年，世界主要大国为赢得未来战略主动权 ，都启动了新一轮军事 变革或转型，型，从而将世界军事变革推向了一个新的阶段。但是，由于国际 战略形势的深刻变化，国际安全环境日趋复杂，特别是战争形态呈现出多样性 的趋势，给大国军事变革增添了许多不确定因素，包括美国、俄罗斯等在内， 其军事变革的进程并不像想象的那样一帆风顺。 其他一些大国的军事变革，同样遇到了不少的阻力和困难。印度进入新世 纪以来多次调整军事战略，军队的改革设想一个接着一个，雄心勃勃的武器发 展规划不断推出，但真正能够按照时间节点落实的为数不多，内外舆论对其军 事改革的评价同样也是褒贬不一。回顾过去 10 年大国军事变革走过的历程，并 非总是一路“高歌猛进” 、 “迅猛发展” 。像其他社会领域的变革一样，大国军事 变革走入新世纪，既有成功的经验，也有深刻的教训，当前正处在一个深刻的 反思阶段 。 就像一位战略家所说，一个民族的崛起从来都不会是和平的。在我中华名 族重新屹立在世界民族之林的过程中，伴随着我们的是近百年大大小小的战争， 这使我们深深明白，力量弱就没有话语权，就要挨打。现在，随着我国的迅速 崛起，与周边国家的边境冲突越来越多，军事问题再一次回到了人们的视线， 国防教育又一次成为全民教育的一项重要内容，也是当代大、中学生整个思想 政治教育的重要组成部分。历史经验表明，一个国家、一个民族的强弱兴衰与 精选文库 - 国民国防意识的强弱有密切的联系。大、中学生既有较高的科学文化知识，又 年轻力壮，他们是国家最有希望的一代，是国防兵员的主要来源。加强全民的 国防教育，首选要加强学生的国防教育，要从娃娃抓起，提高他们的国防观念。 要做到这一点，最有效的途径就是对他们进行军事训练。通过军事训练，对他 们进行爱国主义、革命英雄主义和人民军队的传统教育，激发他们的爱国主义 热情，增强建设祖国、保卫祖国的责任感，从而推动全民国防教育的发展，弘 扬中华民族崇勇尚武的传统美德，使全体公民都树立起居安思危、常备不懈、 有备无患的国防观念。 在这样的背景之下，成立一个以军事历史为主题的网站，具有非常大的发 展空间和市场潜力。它不仅能为网民提供一个在线获得信息平台，而且还可以 使网民从历史中谋发展，以史为镜。因此，在上述情况下，我们设计并制作了 这个军事历史型网站军事网。 精选文库 - 二、需求分析二、需求分析 1、基本工具需求 Dreamweaver CS3、，Adobe Photoshop CS4，可以运用 Dreamweaver CS3 进行 flash 电子相册的制作，用 Dreamweaver CS4 进行页面布局、页面 CSS 编 码编辑、排版、设计等功能，可以利用 Photoshop CS4 制作图片和对图片进行 修改！ 2、基本要素需求 1）图片要素 运用图片是设计与制作网页必不可少的部分，图片的运用能够给人更加直 观的信息，图片的要求与页面的内容有关，我做的网页是军事历史网站，因此 所用的图片都是一些军事相关图片，图片比较单一。不过在相关图片的制作过 程中还是下了一定的功夫，希望能吸引网民的眼球，能够起到很好的宣传广告 效应，再加上图片可以利用 Photoshop 修改和制作，因而更能够设计出较好的 网页。 2）客户群体特点 调查发现，网上军迷的关注点往往各不相同。总的来看，大致可以分为： 战略迷、兵器迷、战史迷、热点迷等。通过对各大军事网站、论坛的板块设置、 热点新闻、热帖的跟踪分析可以看出，军事迷们在网上对以下问题的关注度最 大： 军事热点：军事迷们对国际安全，特别是军事方面的热点问题关注度最高。 像近期爆发的俄罗斯与格鲁吉亚间的武装冲突等，常常跃升为各网站、论坛的 头条；参加讨论、跟帖的军迷也特别多； 军事酷图：各大论坛中关于武器装备 的帖子往往都有很高的点击率和众多的回复。如：“世界极品警用手枪”、 “型坦克的致命弱点”、“图解号舰艇”之类的帖子的点击量高达十 几万，甚至更多； 中国军情：有关我国国防发展的问题在网上的关注度非常高， 精选文库 - 尤其是我军现代化建设方面的动向及成果，往往是军迷们在网上追捧的“明星” 。比如“中国可以没有航母，但一定要提升空军”等就引得众多网迷跟帖热议。 当然，网络做为一个娱乐成分很高的平台，一些军事网站偶尔也很八卦。 像一些题为“我国最美丽的女军人”、“以色列漂亮女兵”等帖子也会在一段 时间受到网迷们的追捧。 对广大军事爱好者来说，及时的军事热点、先进武器的报道等是总多网友 的需要，因此，我制作军事纵横网，希望将来能够为广大的军事迷们提供即使 热点状态和良好的交流平台。 3、网页视觉设计与审美需求 人们对美的需求是不断深入的，网页设计也同样如此。如何使访客更好的 接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对平面 设计美学的一种继承和延伸，两者的表现形式和目的具有一定的相似性。起初， 我编排完的网页内容杂乱，缺乏规范性设计，图片处理缺乏美感，利用 html、css 和 javascript 设计的加注脚本特效的网页，由于缺乏技术性，致使 页面效果不美观。经过一周的调整和修改，查找课本资料和从网上搜集知识， 基本上使得网页看起来主次分明、有条理，也颇有美感了。 4、特殊需求 网页内容要实现一些特殊的功能，例如：会员登陆、新闻评论等等。 精选文库 - 三、功能模块分析及设计三、功能模块分析及设计 1、设计目标 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整 体风格和特色作出定位，规划网站的组织结构。针对网站所要展示的内容进行 设计整理，是页面不会显得太乱，给人整体划一的感觉。为了做到主题鲜明突 出，要点明确，要按照要求，以简单明确的语言和画面体现站点的主题；调动 一切手段充分表现网站点的个性和情趣，办出网站的特点。 2、模块分析 在需求分析的基础上，经过我们的讨论分析，确定网站由以下几个模块组 成：首页、军事情报、武器装备、军事图库、史海烟云、老照片。其中军事情 报部门又包括中国军情，台海军情，国际军情、军事新闻、热点评论等部分。 军事图库包括军事酷图、图说时政、纵览天下等部门。老照片包括人物志、档 案馆、历史战争、论坛热图等部分。下图为网站总体结构图： 首页 军事情报 武器装备军事图库史海烟云 老照片 图图 3.1 网站总体结构图网站总体结构图 国际军情 中国军情 档案馆 台海军情 军事要闻 纵览天下 图说时政 军事酷图 战争历史 人物志 论坛热图 论坛热点 精选文库 - 四、制作过程及要点四、制作过程及要点 在本次课程设计过程中我主要负责网站导航栏、首页、史海烟云、以及老 照片等模块的制作及导航栏图片的 PS 制作。在制作过程中，主要用表格及嵌 套表格布局 1、导航栏制作 制作步骤： 1)插入一个 1 行 3 列的表格，表格宽度为 70%，对齐方式为居中。 2)在第一列中插入网站 logo 图片“logo.jpg” ，并设置第二列宽度为 15px。 3)在第三列中插入一个三行一列的表格。 4)将嵌套表格第一行拆分为两列，在第一列中插入表单，并在表单中插入用 户名、密码文本域及登录、重置按钮；在第二列中插入“设为首页” “加入 收藏”链接。 5)将嵌套表格第二行拆分为四列，在第 1、2、3 列相应位置插入热点新闻及 其链接；在第四列插入时间，并设置时间更新方式为“每次保存时更新” 。 6)将嵌套表格第三行背景设置为图片，并插入一个一行六列的嵌套表格，表 格间距为 15px。 7)在嵌套表格每个单元格中分别指行“插入图像对象鼠标经过图像” 操作，将图片插入到相应位置。 8)将导航栏制作成模版，供其他模块使用。模版如下页图所示 图图 4.1 导航栏导航栏 精选文库 - 在首页，历史烟云、老照片制作过程中，由于步骤太过复杂，在此不再一一列出，仅 对要点部分进行说明。 2、首页制作 在首页制作过程中，我参考了网络上现有的大多数网站的布局，并以此为基础进行了 优化和布局。 要点说明： 视频的插入。将光标放在相应的单元格中，执行“插入媒体 FLV.”操作，弹出对话框后选择相应视频，之后依次点击“检测大小” “确定” 按钮，即可把视频插入到单元格中。 图图 4.2 模版模版 图图 4.3 首页首页 精选文库 - 3、史海烟云模块制作 要点说明： 在史海烟云模块中，除了插入视频外，还在热门点击栏目中使用了走马灯 效果，制作方法为：点击代码视图，将光标插入到相应位置，打入以下代码： 4、老照片模块制作 要点说明： 老照片模块的制作主要是布局，表格嵌套，及图片的插入。布局不再详细 说明，图片的插入执行“插入图像浏览”操作即可。另外，在老照片 二级页面中插入了 flash 电子相册，该部分是由 Dreamweaver CS3 做成的。 图图 4.4 史海云烟史海云烟 精选文库 - 图图 4.5 flash 电子相册电子相册 精选文库 - 五、系统介绍及功能展示五、系统介绍及功能展示 1、系统介绍 1) 首页：网站的主体，通过首页的链接到达各个分页 2) 军事情报：该模块由中国军情，台海军情，国际军情，军事要闻，热点 评论组成。主要用于收集最新的各类军情信息。用户可以通过该模块了解最近 发生的各类军事事件，足不出户，遍览天下。 3) 武器装备：主要为图片介绍。主要面向广大的武器迷们设计，该模块汇 聚世界各类武器，以及对他们性能的介绍和各国部队的装备情况。 4) 军事图库：该模块由军事酷图、图说时政、纵览全球组成。俗话说“有 图有真相” ，该模块正是基于这一点设计的，通过各类军事图片来反映最新，最 全的军事信息，时政信息等。对于不习惯阅读的网民可以通过本模块来了解天 下事。 5) 史海烟云：分为抗日战争、抗美援朝、对越反击战等栏目。以史为镜， 纵观古今，通过该模块，广大网页既可以了解过去的点点滴滴，又可以从历史 中反思现在。 6) 老照片：分为人物志、档案馆、历史战争，论坛热图等栏目。相对于历 史资料，或许图片更可以说明历史的真想， 。通过本模块，网友可以立体的还原 历史，更加透彻的了解历史。 精选文库 - 2、部分功能展示 图图 5.1 军事情报军事情报 图图 5.2 武器装备武器装备 精选文库 - 图图 5.3 史海烟云史海烟云 图图 5.4 历史图历史图 库库 图图 5.5 评论功能评论功能 精选文库 - 六、设计总结六、设计总结 1、问题与解决方法 在这次课程设计中出现了很多的错误，出现的最多的错误就是链接路径不 对，还有就是做的网页不能正常预览，由其是在主页中出现的错误，特别是网 页布局设计视图是好的，但是预览图就走位了；在留言板也反复做了好多遍才 做出来，那可真是一波三折。 ，之后复制到机房里面去就运行不了，之后找了很 多的原因，才找出来，首先要在你放的那个的文件夹，站一个 web 共享，在新 建一个站点，这样才能正常的运行，还有就是那个数据库就是要重新添加数据 源才可以，不然就会出现错误，遇到问题时我努力查阅资料，查阅代码。 2、心得体会 “书到用时方恨少” ，从这次课程设计当中我深刻的体会到理论知识的重要 性，理论结合实际才能将知识掌握牢固。为了使自己的网页风格统一，是自己 在设计过程中更加省时省力，我使用了较多的模板和表格嵌套，这使我的工作 效率大大提高。在设计的过程中遇到了很多问题，有些知识理解得不够深刻， 掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过 老师的细心指导和同学们的帮助达到了最终效果。 通过这个课程设计我学到了很多，也发现自己的不足，一周的课程设计结 束了，至于总体的感觉只能用八个字来概括虽然辛苦，但很充实。在这一周里， 我学到了很多有用的知识，我也深深地体会到 IT 行业的辛苦和伟大，随着科学 的迅猛发展，计算机行业发展更快了，新技术的广泛应用，会有很多领域是我 们未曾接触过的，只有敢于去尝试才能有所突破，有所创新。搞好一次课程设 计，是我今后走上社会的一种财富，所以努力搞好实训才是最要的，打高分不 是最重要的，最重要的是你在这次实训中你学到了什么，因为这就是你今后走 上社会的一种定贵的财富。学习的能力很重要，特别是对一个站长来说，因为 网络的发展太快，新的技术，新的模式，新的思维方法每天都在出现，如果不 学习，很快就