校联帮高校生活网的建设
校联帮高校生活网旨在帮助大学生更好地了解高校的一些社团信息和热门活动，让学生能更直接全面地了解社团。网站内容包括社团信息介绍、组织活动、热门的校内圈生活信息、品牌创业活动、宣传推广方式等。本网站在设计上采用扁平化风格，运用简洁清新的绿色和蓝色作为基本配色，以显示校园社团的朝气活泼，使用Photoshop软件完成图片的编辑加工和整体页面效果的设计。使用Dreamweaver完成HTML和CSS代码的编写，运用JavaScript实现页面的效果，增加网页的整体效果，完成后的网站通过主流浏览器的兼容性测试。本文主要从网站的布局、网站的设计与实现、页面特效实现、网站测试等方面进行详细阐述。
目 录
一、 引言 1
（一）课题背景 1
（二）课题目标 1
二、 开发工具 1
（一）PHOTOSHOP简介 1
（二）DREAMWEAVER简介 1
三、 网站的设计与实现 1
（一）规划网页结构 1
1. 站点结构规划 1
2. LOGO设计 2
3. 规划网页版式 2
（二）设计网站的布局 3
1.确定网站的逻辑结构图 3
4. 确定网站的色彩搭配 3
（三）网站的设计与实现 3
1. 网站的首页布局排版 3
2. 网站的子页设计及实现 4
3. 网站实现的主要栏目 5
（四）页面特效实现 12
1. 视频播放实现 12
2. 鼠标悬停特效的实现 13
四、 网站测试 13
五、 总结 15
致谢 16
参考文献 17
附录 18
引言
（一）课题背景
社团是校园文化的重要组成部分，不仅能丰富课余生活，培养个人能力，还可以增进同学之间的相互了解，结识更多的新朋友。建设校园社团网站可以更直接方便高校学生浏览和快速了解学校的社团活动信息，同时也增加了一条对社团活动宣传的通道，方便社团的招新，学生在选择社团的时候也不会眼花缭乱。
（二）课题目标
*好棒文|www.hbsrm.com +Q: ^351916072^
校联帮高校生活网旨在帮助大学生更好的了解高校的一些社团信息和热门活动。让学生能更直接全面的了解社团，为大学生提供了一个与人和社会接触的机会，通过参与或者管理社团活动，大学生可以直接审视和检验自己的兴趣、爱好、从而对自己有清醒的认识，对自己的长处和不足、优点和缺点有了直接的了解，从而提高自己的社交能力、实践能力、自制能力、生存能力、填补某些性格上的空白，帮助学生得到锻炼更好的融入社会。本课题主要是对大学的社团及组织、校内热门活动做出罗列简介，帮助学生更全面和直接的了解校内的社团组织和校园活动，让学生在选择社团的时候不再眼花缭乱，帮组学生丰富大学文化生活，规划好课余时间。
开发工具
（一）Photoshop简介
Photoshop是功能强大的工具，极大地方便了用户的使用要求。利用Photoshop可以制作精美的文字造型，还可以对文字进行复杂的变换。制定多种文字效果，多姿多彩的滤镜 ，用户不仅可以选择使用多种内置滤镜，还可以使用第三方的滤镜。
（二）Dreamweaver简介
DW是网页制作和管理网站的网页编辑器，能够实现所见即所得。通过它可以轻松地制作网页。具有多媒体和动画制作、网站设计、页面制作、网站管理等功能，是开发网页和管理网站的工具。它简单易操作，可以轻松地制作出自己的网页。
网站的设计与实现
（一）规划网页内容
为了顺利地制作出完整的网站，首先需要浏览网上现有的校园生活网页或者社团网站，然后对站点进行组织规划，再确定网站名称，收集、整理网站设计必需的资料。
（二）确定网站的结构
1.确定网站的逻辑结构图
网站的逻辑结构图是网站内容的索引大纲，有突出网站所涉及的主题及特色的功能。同时可方便访问者浏览页面，突出重点，让访问者快速了解网站的主题内容，如图31所示。
图31 网站的逻辑结构图
2.站点结构规划
在网页制作时，对站点进行仔细规划和组织，虽然对阅读者来说没有太大的感觉，但对于站点本身上传和维护有着重要影响，也方便后期对站点的管理，以达到节约时间和提高网页制作的效率的目的。
“校联帮高校生活网”站点目录结构如图32所示。
图32 站点目录结构
（三）网站的设计与实现
1.确定网站的色彩搭配
色彩是确立网站基本风格的前提，因为制作的是校园社团生活的网站，所以整体风格偏向于简洁清新活泼的配色，以显示校园社团的朝气活力。主色调为蓝色加绿色，辅色调为白色、橙色和粉色。
2.LOGO设计
LOGO有突出体现网站特色的作用，校园社团生活网站面向的是年轻的学生群体，所以协调地搭配多种颜色组合会更符合他们的审美。LOGO设计过程中遵循客观规律，以文字辅助图形，简单明了。围绕一个“电脑”的图标做设计，绿色的图标边框线条搭配浅蓝色的屏幕背景与网站主体颜色一致，而且能够使电脑屏幕中彩色的“HELP”字样更加醒目。底部是浅灰色的网站名称文字，强调网站的名称。该图形隐藏的意思是，学生可以通过该网站获得帮助，更好地了解校园生活圈和社团信息。
网站的LOGO如33所示：
图33 网站的LOGO
3.网站的首页布局排版
画出网页的首页布局，方便搭建网页框架如下所示。
LOGO 标题栏菜/单导航栏
网站内容的一个缩略介绍
二维码
学校热门活动
导语
丰富多彩的活动图片
交志同道合的朋友的图片
导语
导语
更多社团活动平台
社团体系
青年成长
创业服务
活动推广
文字链接导航
版权区
4.规划网页版式
学生浏览该网站的主要目的是了解社团和校内活动信息，因此网站的版式简洁，更能吸引用户浏览。在设计页面草图时大概分为上部、中部、底部，中部为网站的内容占比最大。
网页的版式设计效果如图34所示：
Header头部
网站的内容
Footer底部
图34 网页的版式设计效果
首页的DIV部分代码如下所示：
目 录
一、 引言 1
（一）课题背景 1
（二）课题目标 1
二、 开发工具 1
（一）PHOTOSHOP简介 1
（二）DREAMWEAVER简介 1
三、 网站的设计与实现 1
（一）规划网页结构 1
1. 站点结构规划 1
2. LOGO设计 2
3. 规划网页版式 2
（二）设计网站的布局 3
1.确定网站的逻辑结构图 3
4. 确定网站的色彩搭配 3
（三）网站的设计与实现 3
1. 网站的首页布局排版 3
2. 网站的子页设计及实现 4
3. 网站实现的主要栏目 5
（四）页面特效实现 12
1. 视频播放实现 12
2. 鼠标悬停特效的实现 13
四、 网站测试 13
五、 总结 15
致谢 16
参考文献 17
附录 18
引言
（一）课题背景
社团是校园文化的重要组成部分，不仅能丰富课余生活，培养个人能力，还可以增进同学之间的相互了解，结识更多的新朋友。建设校园社团网站可以更直接方便高校学生浏览和快速了解学校的社团活动信息，同时也增加了一条对社团活动宣传的通道，方便社团的招新，学生在选择社团的时候也不会眼花缭乱。
（二）课题目标
*好棒文|www.hbsrm.com +Q: ^351916072^
校联帮高校生活网旨在帮助大学生更好的了解高校的一些社团信息和热门活动。让学生能更直接全面的了解社团，为大学生提供了一个与人和社会接触的机会，通过参与或者管理社团活动，大学生可以直接审视和检验自己的兴趣、爱好、从而对自己有清醒的认识，对自己的长处和不足、优点和缺点有了直接的了解，从而提高自己的社交能力、实践能力、自制能力、生存能力、填补某些性格上的空白，帮助学生得到锻炼更好的融入社会。本课题主要是对大学的社团及组织、校内热门活动做出罗列简介，帮助学生更全面和直接的了解校内的社团组织和校园活动，让学生在选择社团的时候不再眼花缭乱，帮组学生丰富大学文化生活，规划好课余时间。
开发工具
（一）Photoshop简介
Photoshop是功能强大的工具，极大地方便了用户的使用要求。利用Photoshop可以制作精美的文字造型，还可以对文字进行复杂的变换。制定多种文字效果，多姿多彩的滤镜 ，用户不仅可以选择使用多种内置滤镜，还可以使用第三方的滤镜。
（二）Dreamweaver简介
DW是网页制作和管理网站的网页编辑器，能够实现所见即所得。通过它可以轻松地制作网页。具有多媒体和动画制作、网站设计、页面制作、网站管理等功能，是开发网页和管理网站的工具。它简单易操作，可以轻松地制作出自己的网页。
网站的设计与实现
（一）规划网页内容
为了顺利地制作出完整的网站，首先需要浏览网上现有的校园生活网页或者社团网站，然后对站点进行组织规划，再确定网站名称，收集、整理网站设计必需的资料。
（二）确定网站的结构
1.确定网站的逻辑结构图
网站的逻辑结构图是网站内容的索引大纲，有突出网站所涉及的主题及特色的功能。同时可方便访问者浏览页面，突出重点，让访问者快速了解网站的主题内容，如图31所示。
图31 网站的逻辑结构图
2.站点结构规划
在网页制作时，对站点进行仔细规划和组织，虽然对阅读者来说没有太大的感觉，但对于站点本身上传和维护有着重要影响，也方便后期对站点的管理，以达到节约时间和提高网页制作的效率的目的。
“校联帮高校生活网”站点目录结构如图32所示。
图32 站点目录结构
（三）网站的设计与实现
1.确定网站的色彩搭配
色彩是确立网站基本风格的前提，因为制作的是校园社团生活的网站，所以整体风格偏向于简洁清新活泼的配色，以显示校园社团的朝气活力。主色调为蓝色加绿色，辅色调为白色、橙色和粉色。
2.LOGO设计
LOGO有突出体现网站特色的作用，校园社团生活网站面向的是年轻的学生群体，所以协调地搭配多种颜色组合会更符合他们的审美。LOGO设计过程中遵循客观规律，以文字辅助图形，简单明了。围绕一个“电脑”的图标做设计，绿色的图标边框线条搭配浅蓝色的屏幕背景与网站主体颜色一致，而且能够使电脑屏幕中彩色的“HELP”字样更加醒目。底部是浅灰色的网站名称文字，强调网站的名称。该图形隐藏的意思是，学生可以通过该网站获得帮助，更好地了解校园生活圈和社团信息。
网站的LOGO如33所示：
图33 网站的LOGO
3.网站的首页布局排版
画出网页的首页布局，方便搭建网页框架如下所示。
LOGO 标题栏菜/单导航栏
网站内容的一个缩略介绍
二维码
学校热门活动
导语
丰富多彩的活动图片
交志同道合的朋友的图片
导语
导语
更多社团活动平台
社团体系
青年成长
创业服务
活动推广
文字链接导航
版权区
4.规划网页版式
学生浏览该网站的主要目的是了解社团和校内活动信息，因此网站的版式简洁，更能吸引用户浏览。在设计页面草图时大概分为上部、中部、底部，中部为网站的内容占比最大。
网页的版式设计效果如图34所示：
Header头部
网站的内容
Footer底部
图34 网页的版式设计效果
首页的DIV部分代码如下所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/666.html
