网站设计报告终稿.doc

通信信息网课程结业报告通信信息网课程结业报告班 级： 学 号： 姓 名： 实验所属课程： 通信信息网 指 导 教 师 ： 设 计 题 目 ： 绿 园 环 保 网 完 成 时 间 ： 2015 年 1 月 8 日 目 录第1章 绪言2第2章 网站目前的市场分析2第3章 设计目的3第4章 建网站的工具介绍4第5章 网站内容的规划54.1网站的主题、风格和内容54.2网站的栏目、目录和链接结构74.2.1 栏目结构74.2.2 目录结构74.2.3链接结构84.3 网站的设计114.3.1 首页设计思路114.3.2 子栏目设计思路144.3.3 常用的html标签和属性15第6章 总结176.1 在设计中要注意到的地方176.2 在技术运用中要注意的地方176.3 学习及设计心得体会18参考资料19第1章 绪言环境保护，是21 世纪全人类都关心的重大课题。大到联合国气候大会，小到学校主办的环保创意大赛，环境保护事业正在全球范围内如火如荼的进行，俨然成了“全民总动员”。而在拥有13 亿人口的中国，环保事业似乎更像是一个未长大的孩童，环境问题的日益明显，使我们不得不意识到提高环保意识应该赶快提上日程。十年树木，百年树人。学生是国家的希望，民族的未来，尤其是即将迈入社会的高校学生，更是社会建设的主力军。高校学生环保意识的提高对我国可持续发展和环境保护有着极其重要的作用。他们的一言一行代表着未来中国的形象，加强高校学生的环保意识宣传教育是着眼于未来的国家大计。然而还有很多的大学生对环保责任感不强，生态保护意识薄弱，提高大学生环保意识迫在眉睫。在此背景下，结合新时代下大学生喜欢新鲜刺激的特点以及互联网高速的发展，使得建设校园环保网站成为了提高大学生环保意识的最为有效的方式之一。本网站为绿园环保网，旨在宣传环保理念，提高本校学生环保意识，强化全校的环境危机意识。而作为一个学校环境与资源保护协会的会长，更意识到环保网站的重要性。第2章 网站目前的市场分析首先，环保是一个名词，如何把环保理念普及到大学生的脑子里，在实践中我们认识到：要做好环境保护工作，就离不开广大群众的支持和参与，因此，加强环境保护的宣传，扩大环境保护各项工作在当今社会的影响显得十分必要，而在互联网的快速发展的时代，网络宣传的影响力就显得十分强大，就使得建设网站成为宣传环保理念的不二选择。其次，纵观现有同类环保网站，拥有可能以下弊端：1.发表一些当今社会发生的环保事件或者是转发一下国家的环保政策，内容枯燥没有新鲜感，无法吸引浏览者的兴趣，获得大学生的共鸣。2.网站界面要不然拘泥于条条框框中，看上去枯燥乏味。要不然就是太过新颖，被漂亮的特效堆积起来，反而喧宾夺主使浏览者忽略内容。3.需要注册才能够查看其中内容，不够开放，浏览不方便。所以一种既能够吸引浏览者眼球，引起共鸣又能跟上时代脚步即使更新的动态网站就更加迫切的被需要；最后，本网站不但利用了互联网的优势，以一种新兴型媒体手段进行宣传，更在内容上进行了新的改进。相比于同类网站的千篇一律，本网站修改了网页界面的条条框框格式，但又不会运用过多特效喧宾夺主，在网页内容上秉承着以小见大、以点带面的理念，将焦点聚焦在校园中或者生活中发生的小事上，引起广大师生的关注与共鸣，让本校学生感受环保就在身边，以宣传环保事迹和环保理念的方式达到加强广大师生的环保理念，加入到环保的行动中来。如今正处于大学校园之中，大学校园就是一个社会的缩影，大学生成为社会上一个强势群体。加强大学生的环保意识就显得十分必要。学校提供了校园网这一个很好的平台，可以让设计出的环保网站放在校内网上让更多的学生来关注这个网站，同时也促进了校园文化的建设，符合绿色校园的要求。第3章 设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的工具，网站在当今时间被越来越多的人用来宣传。设计网站能够让同学们通过实践受到一次综合训练，以便能够较全面的理解、掌握和综合运用所学的知识。本课程采用自学+实验的方式，让我们了解和掌握如何利用HTML5来构建Web页面（网页），用CSS（bootstrap库）来美化Web页面（网页），以及利用JavaScript来进行简单的客户端交互等方面的基础知识，应尽可能有第3方的CSS框架、JavaScript等技术。通过该课程的学习，应该能够对一个较复杂页面（如重庆交通大学首页）进行分析，也能自己建设一个中等复杂程度的静态页面，同时为今后使用服务器端的动态网页技术构建网站打下基础。通过设计达到掌握网页设计、制作的技巧，了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可按照要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握photoshop、webstom等软件的操作和应用，熟练掌握如如何调整网页美观度、引用第三方技术等。这学期出于对网页设计的兴趣，我认真学习的网页设计的知识，在此能够学以致用，一方面巩固我的学习知识，一方面能够给我建立网站带来基础知识的技术支撑。第4章 建网站的工具介绍 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。智能的代码补全支持不同浏览器的提示，还包括所有用户自定义的函数(项目中)代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。代码格式化代码不仅可以格式化，而且所有规则都可以自己来定义html提示大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。联想查询只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全项目查找函数或者变量，还可以查找使用并高亮。代码重构这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。代码检查和快速修复可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。代码调试支持代码调试，界面和IDEA相似，非常方便。代码结构浏览可以快速浏览和定位代码折叠功能虽小，不过胜在方便高效包裹或者去掉外围代码自动提示包裹或者去掉外围代码，一键搞定第5章 网站内容的规划 4.1网站的主题、风格和内容网站的主题为绿园环保，旨在宣传环保理念，提高本校学生环保意识。网站选用黑色作为网页的主色调，以表示当今社会日益严重的环境问题，需要环保力量的注入与努力；绿色为点缀，绿色给人生机勃勃的感觉，而绿色代表和平、宁静、自然、环保、生命、成长、生机、希望、青春和希望，代表环保的力量一直存在，在不断的贡献自己的一份力量来改变这个现状。同时大学生这一祖国的未来更彰显了绿色青春与活力的特点。版面布局统一采用左方固定，中间嵌套结构，通过下导航栏实现网页之间的导航链接，简约而不失风格。在内容上，主要以校内外环保事件为主，加上一些网站介绍、环保小常识、环保图片以增加网站的趣味性，还附有留言板来收集建议和观点从而增加网站与同学们的互动。如下图所示：图4.1.1 网站整体风格4.2网站的栏目、目录和链接结构4.2.1 栏目结构绿园环保网首页关于我们环保大事件留言板环保小知识环保资讯校园环保活动社会环保活动图4.2.1 框架结构图4.2.2 目录结构631206040323 网站根目录 css 存放外置css文件 js 存放外置js文件 images 存放图片 text 存放文件 index 首页 aboutus 子栏目（关于我们） event 子栏目（环保大事件） information 子栏目（环保资讯） knowledge 子栏目（环保小常识） message 子栏目（留言板）表4.2.1 网站栏目一览表编号一级栏目二级栏目栏目内容及功能介绍1热门首页展示网站大致布局、风格等环保大事件展示世界环保事件2资讯环保小知识展示环保小知识环保资讯展示学校或身边的环保活动3关于关于我们介绍本网站留言板用于浏览者提供意见4.2.3链接结构网站采用星状结构和树状链接结构混合模式，一目了然，使浏览者既能方便快速的达到自己需要的页面，又能够清晰的知道自己的位置。表4.2.2 网站链接结构图主页一级二级首页index.html关于我们Aboutus.html环保小知识knowledge.html环保大事件event.html环保资讯information.html留言板message.html一级链接：图4.2.2 一级链接图页面左边设置了LOGO，导航、搜索和留言部分，一级导航和留言板加了图标，图标是用了CSS Sprites 技术（国内开发者昵称为CSS精灵、CSS雪碧，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了）。页面中间顶部是网站标题，标题是LOGO、汉字、英文组成的png透明图片，加了css样式的title效果使得鼠标放在图片上便会出现“关爱环境 珍惜生命 保存希望”的字样，中间是幻灯片切换，下面是头条内容展示。页面右边是三个小部件框，分别显示环保资讯、环保小知识、友情链接。点击可直接进入相关详细页面。二级链接：图2 二级链接图其余的二级栏目与以上相同，主页面是内容加配图。导航栏部分当前页会相应的变白，字体变成黑色。在图片左上角用于加网站logo，logo底色是透明的。网站最下方为版权信息。4.3 网站的设计4.3.1 首页设计思路主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入主页就有种一目了然的感觉，而且绿色也带给人清新的气息。Head头部设计有内容类型、网页格式、字符编码、关键词、连接样式表、定义客户端脚本等。左边为导航部分：导航上面有一个LOGO和搜索部分，LOGO为png格式透明图片，可以显示页面背景；搜索功能需要动态脚本实现，如php，暂未实现此功能。导航分为一级导航和二级导航，一级导航分为三个大块：热门、咨询、关于，导航文字上面是通过CSS精灵截取的图标，图标可以通过class引入CSS样式的方式改动，导航当前页面切换添加了淡入淡出的js切换效果。导航下面是一个反馈留言板（留言板可以实现在网页上面立即显示留言，但是由于没有引入数据库，留言不能够长久保存）。从左到右第一根分割线是原图片效果，第二根分割线是有分割线的图片重复成一列形成。中间为幻灯片展示和头条内容展示：幻灯片上面有一个一级标题，标题是LOGO、汉字、英文组成的png透明图片，加了css样式的title效果使得鼠标放在图片上便会出现“关爱环境 珍惜生命 保存希望”的字样。该题目以CSS中的tal样式添加了一条分割线。幻灯片可显示热门推荐的标题、内容简介、图片，左右有切换按钮。点击阅读全文可跳转到此文章详细显示页面（需联网链接）。下面即为头条内容展示，有图片和文字内容，添加了hover效果，鼠标放上去图片和文字均会有变化（图片变浅、文字变绿色），点击图片或文字均可进入详细页面。最下面有一个版权设计，鼠标放在绿色字体上面便会显示title对应的文字，是引用了css中的样式。右边为随机推荐文章连接和网站友情链接：右边是三个ul无序列表，显示的是相应的文章题目或者超链接，点击可进入相应连接。右边的最下面是一个返回顶部的按钮，运用这条语句实现：回到顶部 hidefocus=true”， hideFocus即隐藏聚焦，具有使对象聚焦失效的功能，即focus代表鼠标点击后有个虚线框，hidefocus就是隐藏这个虚线框，并且值为true就是启用这个属性，;scroll()为js函数：scroll(x,y)跳转到页面的指定坐标点，目标点是以像素为单位从页面左上角为标记点的距离，水平和垂直滚动条滚动到相应x,y点，从而实现点击top之后回到顶部页面。引用原图片 原返回图片 鼠标点击第一个是默认显示的图片 加个hover后就显示另外个位置的图片，加了CSS动画 形成切换的效果，点击之后执行js语句实现。4.3.2 子栏目设计思路文章列表页面：点击环保大事件进入文章列表页面，导航和一级标题仍然存在，有分页按钮和文章标题、内容、缩略图、发表时间和发布者信息，可根据需要点击下一页进入下一个页面。下一页没有全部把内容填进去，只有第二页可切换信息，其他页面的内容和第一页相同。文章详细页面：点击相关导航可进入。留言板设计分析：从上到下分为显示页面、输入页面、提交按钮，运用了js技术，可将浏览者提交的意见立即反馈到留言板上面。如下图：4.3.3 常用的html标签和属性1. 用到的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 栏目标题：title 滚动：scroll2. 用到的html标签举例： 用于定义客户端脚本，比如 JavaScript,script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。定义了与文档相关联的名称/值对 连接样式表定义输入变量 标签定义列表项目 标签显示斜体文本效果是提交搜索表单按钮为强调内容 标签定义多行的文本输入控件,通过 cols 和 rows 属性来规定 textarea 的尺寸3. 用到的html标签举例rel 属性指示被链接的文档是一个样式表;href 属性指向了一个外部样式表的位置src属性:资源地址type 和 language 属性都可用来指定 标签中的脚本的类型method是提交方式，分为post和get两种，get是明文提交，在浏览器地址栏可以看到post是后台提交；action是提交信息的页面，提交过去的内容就是input里输入的内容onclick 属性由元素上的鼠标点击触发border边框第6章 总结6.1 在设计中要注意到的地方1. 导航清晰，布局合理，层次分明，页面的链接层次不要太深，尽量让人第一眼看清网站的大体；2. 保持统一的风格，有助于加深访问者对的网站的印象。要实现风格的统一，举个例子来说，可以尝试让导航条样式统一，各个栏目采用不同的色彩搭配，在保持风格统一的同时为网站增加一些变化；3. 色彩和谐、重点突出，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美观的页面；4. 界面清爽，要吸引访问者长时间的停留在的网站，千万不能让用户第一眼就感觉压抑。大量的文字内容要使用舒服的背景色，前景文字和背景之间要对比鲜明，这样访问者浏览时眼睛才不致疲劳；5. 动态效果不宜太多，适当的动态效果可以起到画龙点睛的作用，过多的动态效果会让人眼花缭乱而抓不住主题；6. 内容的选取应多一些原创的内容，主页才会带有更多的个性色彩。6.2 在技术运用中要注意的地方1. 先为站点定义好统一的第三方CSS，这样不但可以让的网页在浏览器改变设置时不变形，还有助于保持整个站点的风格统一，并且方便修改；2. 不要打开过多的新窗口，每个链接都会打开不同的新窗口可能让人反感；3. 图象的制作要兼顾大小和美观，图片和文字的混排、图片的合理压缩可以让页面美观而且文件小巧。6.3 学习及设计心得体会历时一个多星期的网页设计终于完成了，在这次的实践中让我学到了不少东西，更让我体会到制作网站的乐趣。下面就畅谈一下此次设计的心得体会。 1. 通过这次网页课程设计进一步激发了学习兴趣，调动学习的自觉性，自己动脑动手，运用网络资源，结合教材和老师