班级网站的设计与实现
目 录
一、引言 - 1 -
（一）课题开发目的 - 1 -
（二）课题开发意义 - 1 -
（三）课题内容 - 1 -
（四）课题开发技术 - 1 -
1. HTML - 1 -
2. CSS - 1 -
（五）课题开发工具 - 2 -
1. Photoshop - 2 -
2. Dreamweaver - 2 -
二、网站内容规划 - 2 -
1. 整体介绍 - 2 -
2. 网站色彩 - 2 -
三、网站设计 - 3 -
（一）LOGO设计 - 3 -
1. 设计思想 - 3 -
2. 设计步骤 - 3 -
（二）导航设计 - 3 -
1. 设计思想 - 3 -
2. 设计步骤 - 3 -
（三）首页设计 - 4 -
1. 设计思想 - 4 -
2. 设计步骤 - 4 -
（四）子页设计 - 5 -
1. 设计思想 - 5 -
2. 设计步骤 - 5 -
四、网站具体制作 - 11 -
（一） 首页制作 - 11 -
1. 制作过程 - 11 -
2. CSS样式 - 11 -
（二） 子页制作 - 12 -
1. 我们的家（班级成员） - 12 -
2. 宿舍风光 - 13 -
3. 点点滴滴（集体活动） - 13 -
4. 班级相册 - 14 -
5. 家乡风光 - *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
14 -
6. 风景图片 - 14 -
7. 联系我们 - 14 -
（三） 特效制作 - 15 -
1. 导航特效实现 - 15 -
2. 首页图片轮转效果 - 15 -
总结 - 17 -
致谢 - 18 -
参考文献 - 19 -
一、引言
（一）课题开发目的
自从我们从2012年踏入学院开始陪伴在我们身边的就是同学们，而随着时间一点一点流逝我们也慢慢的会走出校园，踏入社会，成为社会的一份子。随着我们开始工作，慢慢的或许我们不会忘记班级同学之间的情谊，但是对同学的映像以及在大学的生活会随着时间而慢慢的变淡。班级网站实现了记录我们在大学的时光，它也提供了寻找同学的方便快速，因此设计了班级网站，以方便大家之间的寻找和联系，也有让我们的记忆一直保存在此不会遗忘。
（二）课题开发意义
目前的网络发展越来越快，人们在生活中的应用页都涉及到网络，在这样的一个大环境下，开发班级网站是为了同学们更好的在离开学院后，回想起大学的时光时有一个能够查看到以往记忆的地方。由于目前网络的普及性，同学们之后需要查看时通过上网即可，是非常的方便。
（三）课题内容
本论文对于班级网站从采集信息到制作软件以及制作的过程做出了一个详细的介绍，对于网站中的一些布局以及所使用到的代码也会做出详细的解释和展示。
（四）课题开发技术
HTML
HTML全称又为HyperText Mark-up Language，中文名为超文本标记语言。是由各种标记（Tag）组成的标记语言，用来描述网页文档中的各个组成部分。通过HTML有效快速的将网页的布局显示出来，使用DIV层的代码很好的将网页分为各个模块，通过CSS对各个模块再进行设置，从而让各个模块再网页中美观的显示出来
CSS
CSS即层叠样式表（Cascading?StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
（五）课题开发工具
1.Photoshop
Photoshop又简称为PS，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其中的编修与绘图工具，可以更好进行图片编辑工作，Photoshop可分为图像编辑、图像合成、较色调色等。
2.Dreamweaver
Dreamweaver是一种所见即所得的HTML编辑器，软件由美国著名的网站应用开发工具生产商Adobe Macromedia在2005年6月推出并正式投入市场，目前已经发展的非常成熟。无论是习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式让设计网页和管理网站变得更加容易。
二、网站内容规划
1.整体介绍
网站整体是对我们的大学生活中的点点滴滴做了一个记录和保存，为了方便我们在毕业后寻找同学以及寻找我们在大学生活的照片，在网站中放置了我们大学生活，活动，班级成员的许多照片。网站的逻辑结构如图2-1所示。
图2-1 网站逻辑结构图
2.网站色彩
一个网站的色彩会对浏览者起到一个吸引的作用，如果一个网站的色彩与网站的主题非常不搭的话，那么进入网站之后对网站的浏览就会失去一大部分兴趣，考虑到是毕业后同学们用于回忆的网站，因此在网站的主要颜色上选择了淡黄色，给人一种勾起回忆的氛围，对于导航栏的颜色黑色太明显，与回忆不搭，选择了蓝色的底色和白色的文字。大体颜色上都不会选择深色，给浏览者一种更好的氛围以及浏览的兴趣。
三、网站设计
（一）LOGO设计
1.设计思想
一个网站的LOGO也是网站的一个特色所在，对于班级网站来说，需要凸显我们大学生活的基调。于是采用了风车的模型象征我们学习的心不会停止，在风车的四个风叶上选择了红色，蓝色，绿色，淡黄色。红色代表着我们刚步入校园时的朝气蓬勃，蓝色是代表我们进入学院后每天相处在蓝天下的心情，绿色纪念着我们军训以及我们集体外出活动在操场的草坪上的时光，淡黄色则是迎合网站的回忆色彩。
设计步骤
先设计风车的模型，按顺时针的顺序从11点方向开始在四个风叶上染色，分别为：红色，蓝色，绿色，淡黄色。为了让风车看起来更加的形象在风叶之间添加了象征旋转的弧线，并用渐变的颜色使它看起来并不那么突兀。具体如图3-1。
图3-1 网站LOGO
（二）导航设计
1.设计思想
导航的设计方面为了不影响网页底色带来的回忆氛围采用了底色蓝色，导航字体为白色，让导航栏看上去更为美观，在鼠标移上去后字体变为蓝色同时底色变为白色。为了不使导航栏过于拥挤，将导航栏分为4块，在我们的家，点点滴滴下方使用下拉菜单，让导航栏看上去整洁，大方。
图3-8 集体活动
在集体活动的子页中有我们记录比较详细的所举办的集体活动，我们在活动中页拍了一些有纪念意义的照片，在每张集体活动的照片前面也添加了此次活动详细介绍以及活动的内容等。
一、引言 - 1 -
（一）课题开发目的 - 1 -
（二）课题开发意义 - 1 -
（三）课题内容 - 1 -
（四）课题开发技术 - 1 -
1. HTML - 1 -
2. CSS - 1 -
（五）课题开发工具 - 2 -
1. Photoshop - 2 -
2. Dreamweaver - 2 -
二、网站内容规划 - 2 -
1. 整体介绍 - 2 -
2. 网站色彩 - 2 -
三、网站设计 - 3 -
（一）LOGO设计 - 3 -
1. 设计思想 - 3 -
2. 设计步骤 - 3 -
（二）导航设计 - 3 -
1. 设计思想 - 3 -
2. 设计步骤 - 3 -
（三）首页设计 - 4 -
1. 设计思想 - 4 -
2. 设计步骤 - 4 -
（四）子页设计 - 5 -
1. 设计思想 - 5 -
2. 设计步骤 - 5 -
四、网站具体制作 - 11 -
（一） 首页制作 - 11 -
1. 制作过程 - 11 -
2. CSS样式 - 11 -
（二） 子页制作 - 12 -
1. 我们的家（班级成员） - 12 -
2. 宿舍风光 - 13 -
3. 点点滴滴（集体活动） - 13 -
4. 班级相册 - 14 -
5. 家乡风光 - *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
14 -
6. 风景图片 - 14 -
7. 联系我们 - 14 -
（三） 特效制作 - 15 -
1. 导航特效实现 - 15 -
2. 首页图片轮转效果 - 15 -
总结 - 17 -
致谢 - 18 -
参考文献 - 19 -
一、引言
（一）课题开发目的
自从我们从2012年踏入学院开始陪伴在我们身边的就是同学们，而随着时间一点一点流逝我们也慢慢的会走出校园，踏入社会，成为社会的一份子。随着我们开始工作，慢慢的或许我们不会忘记班级同学之间的情谊，但是对同学的映像以及在大学的生活会随着时间而慢慢的变淡。班级网站实现了记录我们在大学的时光，它也提供了寻找同学的方便快速，因此设计了班级网站，以方便大家之间的寻找和联系，也有让我们的记忆一直保存在此不会遗忘。
（二）课题开发意义
目前的网络发展越来越快，人们在生活中的应用页都涉及到网络，在这样的一个大环境下，开发班级网站是为了同学们更好的在离开学院后，回想起大学的时光时有一个能够查看到以往记忆的地方。由于目前网络的普及性，同学们之后需要查看时通过上网即可，是非常的方便。
（三）课题内容
本论文对于班级网站从采集信息到制作软件以及制作的过程做出了一个详细的介绍，对于网站中的一些布局以及所使用到的代码也会做出详细的解释和展示。
（四）课题开发技术
HTML
HTML全称又为HyperText Mark-up Language，中文名为超文本标记语言。是由各种标记（Tag）组成的标记语言，用来描述网页文档中的各个组成部分。通过HTML有效快速的将网页的布局显示出来，使用DIV层的代码很好的将网页分为各个模块，通过CSS对各个模块再进行设置，从而让各个模块再网页中美观的显示出来
CSS
CSS即层叠样式表（Cascading?StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
（五）课题开发工具
1.Photoshop
Photoshop又简称为PS，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其中的编修与绘图工具，可以更好进行图片编辑工作，Photoshop可分为图像编辑、图像合成、较色调色等。
2.Dreamweaver
Dreamweaver是一种所见即所得的HTML编辑器，软件由美国著名的网站应用开发工具生产商Adobe Macromedia在2005年6月推出并正式投入市场，目前已经发展的非常成熟。无论是习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式让设计网页和管理网站变得更加容易。
二、网站内容规划
1.整体介绍
网站整体是对我们的大学生活中的点点滴滴做了一个记录和保存，为了方便我们在毕业后寻找同学以及寻找我们在大学生活的照片，在网站中放置了我们大学生活，活动，班级成员的许多照片。网站的逻辑结构如图2-1所示。
图2-1 网站逻辑结构图
2.网站色彩
一个网站的色彩会对浏览者起到一个吸引的作用，如果一个网站的色彩与网站的主题非常不搭的话，那么进入网站之后对网站的浏览就会失去一大部分兴趣，考虑到是毕业后同学们用于回忆的网站，因此在网站的主要颜色上选择了淡黄色，给人一种勾起回忆的氛围，对于导航栏的颜色黑色太明显，与回忆不搭，选择了蓝色的底色和白色的文字。大体颜色上都不会选择深色，给浏览者一种更好的氛围以及浏览的兴趣。
三、网站设计
（一）LOGO设计
1.设计思想
一个网站的LOGO也是网站的一个特色所在，对于班级网站来说，需要凸显我们大学生活的基调。于是采用了风车的模型象征我们学习的心不会停止，在风车的四个风叶上选择了红色，蓝色，绿色，淡黄色。红色代表着我们刚步入校园时的朝气蓬勃，蓝色是代表我们进入学院后每天相处在蓝天下的心情，绿色纪念着我们军训以及我们集体外出活动在操场的草坪上的时光，淡黄色则是迎合网站的回忆色彩。
设计步骤
先设计风车的模型，按顺时针的顺序从11点方向开始在四个风叶上染色，分别为：红色，蓝色，绿色，淡黄色。为了让风车看起来更加的形象在风叶之间添加了象征旋转的弧线，并用渐变的颜色使它看起来并不那么突兀。具体如图3-1。
图3-1 网站LOGO
（二）导航设计
1.设计思想
导航的设计方面为了不影响网页底色带来的回忆氛围采用了底色蓝色，导航字体为白色，让导航栏看上去更为美观，在鼠标移上去后字体变为蓝色同时底色变为白色。为了不使导航栏过于拥挤，将导航栏分为4块，在我们的家，点点滴滴下方使用下拉菜单，让导航栏看上去整洁，大方。
图3-8 集体活动
在集体活动的子页中有我们记录比较详细的所举办的集体活动，我们在活动中页拍了一些有纪念意义的照片，在每张集体活动的照片前面也添加了此次活动详细介绍以及活动的内容等。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1751.html
