温州大学新官网

摘  要： 在现在网络飞速发展的时代，每个大学都拥有了自己的官方网站，而这个网站就相当于是大学在网络上的门面，拥有一个布局整洁美观且内容齐全的官方网站，才能更好地吸引学生和家长以及各类人群浏览。

温州大学现已形成本科教育、研究生教育、继续教育、留学生教育、国际合作教育等多层次、多形式并举的办学格局；学科涵盖文学、理学、工学、法学、教育学、经济学、历史学、管理学、艺术学等九个门类。设有15个学院，举办瓯江学院（独立学院）。“教师教育”“创新创业教育”办学特色显著，“文理科基础教育”“工程教育”“艺术教育”优势逐步凸显。

温州大学网站开发采用了div+css开发技术，有网站首页、研究生院、新闻中心、信息技术中心等页面，界面设计以淡色为主，秉承着简洁美观的主旨。网站版块多以内容块作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。网站结合js等控件实现了下拉列表、轮播。

关键词：div+css 大学网站 JQuery

目 录

1 引言 1

1.1 温州大学新官网的开发背景 1

1.2 温州大学新官网的意义与设计目的 1

2 开发工具及环境介绍 2

2.1 温州大学新官网的开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 HBuilder 2

2.2.2 Adobe Photoshop CS4 3

2.2.3 Dreamweaver 8 3

2.2.4 Mozilla Firefox 4

2.3 本项目应用的主要开发技术 4

2.3.1 JQuery 4

2.3.2 DIV+CSS 5

2.3.3 Layui 5

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

3.3 项目进度计划 8

4 前端布局分析与设计 9

4.1 前端总体开发流程与设计 9

4.1.1 分层开发 9

4.1.2 代码编写 9

4.2 前端UI设计 9

4.2.1 模块分布 9

4.2.2 颜色配置 10

4.2.3 Css元素 10

4.3 网站结构布局与设计 11

4.3.1 网站首页结构 11

4.3.2 主题鲜明，富有特色 11

4.4 网站功能实现 11

4.4.1 网站动态效果实现 11

5 网站实现 13

5.1 界面设计 13

5.1.1 首页制作 13

5.1.2 邮件系统登陆页 16

5.1.3 信息技术中心分页 18

5.1.4 研究生院分页 21

5.1.5 新闻中心 24

5.2 说明 26

5.2.1 项目文件命名规范 26

5.2.2 项目文件结构说明 26

6 总结与展望 27

致谢 28

参考文献 29