网站设计终稿合编.doc

通信信息网课程 结业报告 班 级： 学 号： 姓 名： 实验所属课程： 通信信息网 指 导 教 师 ： 设 计 题 目 ： 绿 园 环 保 网 完 成 时 间 ： 2015 年 1 月 8 日 目 录 第1章 绪言 2 第2章 网站目前的市场分析 2 第3章 设计目的 3 第4章 建网站的工具介绍 4 第5章 网站内容的规划 5 4.1网站的主题、风格和内容 5 4.2网站的栏目、目录和链接结构 7 4.2.1 栏目结构 7 4.2.2 目录结构 7 4.2.3链接结构 8 4.3 网站的设计 11 4.3.1 首页设计思路 11 4.3.2 子栏目设计思路 14 4.3.3 常用的html标签和属性 15 第6章 总结 17 6.1 在设计中要注意到的地方 17 6.2 在技术运用中要注意的地方 17 6.3 学习及设计心得体会 18 参考资料 19  绪言 环境保护，是21 世纪全人类都关心的重大课题。大到联合国气候大会，小到学校主办的环保创意大赛，环境保护事业正在全球范围内如火如荼的进行，俨然成了“全民总动员”。而在拥有13 亿人口的中国，环保事业似乎更像是一个未长大的孩童，十年树木，百年树人。学生是国家的希望，民族的未来，尤其是即将迈入社会的高校学生，更是社会建设的主力军。高校学生环保意识的提高对我国可持续发展和环境保护有着极其重要的作用。他们的一言一行代表着未来中国的形象，加强高校学生的环保意识宣传教育是着眼于未来的国家大计。 图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雪碧， 图2 二级链接图 其余的二级栏目与以上相同，主页面是内容加配图。导航栏部分当前页会相应的变白，字体变成黑色。在图片左上角用于加网站logo，logo底色是透明的。网站最下方为版权信息。 4.3 网站的设计 4.3.1 首页设计思路 主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入主页就有种一目了然的感觉，而且绿色也带给人清新的气息。 He