- 经过初步草图设计，到详细修改，最终决定了网站网站设计方案。网站主页包含首页、娱乐、学与测、图库、师生与聊天、关于与合作六大块。首页包括校内新闻和校外新闻入口，娱乐页包括游戏模块和笑话模块入口，学与测页包括学习模块和测试模块，图库页包括三大图集，师生与聊天页包括师生信息模块及聊天模块，关于与合作页包括关于以及合作企业模块。
- 主页：jQuery+html5实现响应式滚屏，实现一个页面包括首页、娱乐、学与测、图库、师生与聊天、关于与合作六个页面。
- 首页：用户打开网站第一眼看到的就是首页，所以首页要简明美观，包含用户常用功能入口。本网站首页就是按这个思路做的。首先映入眼帘的是“学生in家园”几个大字依次闪入。这里“学生in家园”其实是一张图片，我把它切割成了36pt的五块。按顺序依次放入首页正中。“学生in家园”下边依次是：工程人、毕业季、校歌、河北工程大学介绍、校园内外新闻入口等。由于缺少校园图片素材，部分图片来源于网络。
- 娱乐：娱乐页包含游戏和笑话入口，游戏目前只编写了扫雷，扫雷的玩法Windows上都有，这里只介绍我这个扫雷的特别之处。众所周知，扫雷游戏需要标出雷的位置。而我的这个扫雷是标出所有非雷的位置。游戏中，玩家利用提示周围雷数的方块推算出哪个方位有雷，不点此方块即可，当非雷方块全都点出，游戏胜利。页面方面是直接使用html语言，建立10×10的表格，优化样式实现。
- 学与测：学与测页面包括两大模块入口：学习模块和测试模块。两大模块，框架相同，内容不同。学习模块使用了一个Flash播放器的插件，支持avi，mp3等主流格式媒体的播放，不支持mp4格式视频的播放，之后查找一些mp4解码原理，终于实现支持mp4格式视频。模块支持暂停、全屏，播放前插播动画等功能。后台放有一些前沿技术教程。可以实时点播。测试模块是直接使用CSS样式去拼。可以实现单击开始按钮开始答题，自由不限数量添加题库，可以重做上一题，回答全部题后系统自动判断对错，打分，评论等功能。在编写测试模块时遇到了很多困难。
- 图库：各大图库是用的同一种样式展示。在制作样式时参考了网上视频教程的一些方法。图库展示方法采用左右拖动，并且在图片下方设预览框，可以方便用户直接跳选到自己想要欣赏的图片上。图片窗体采用自适应大小技术，即动态采集图片大小，设置图片框大小。图库动画流程，样式简洁。
- 师生与聊天：经常遇到有同学问老师或者同学的电话号码，可有时问了很多人都打听不到。所以我有一个目标，就是采集全校师生的信息，放到这个网站上。方便同学老师间联系，也使得学校更像一个大家庭。当然也包括一些师生的介绍，最好由师生自己填写。目前由于信息缺乏，只收录了部分学生的信息。聊天模块采用是使用MyEclipse10工具，使用Java Web技术，开发而成。服务器是用的Tomcat10。优点是稳定，跨平台，维护容易等。缺点是没有连接数据库，聊天数据不存储，不能发送图片等。聊天模块采用和主页相似样式，聊天方便，昵称登录即可使用。聊天模块部分代码：
- 关于与合作：关于与合作页，首先是河北工程大学简介。页面下方有两个按钮，左边的是关于，罗列校园介绍，校徽解释，校歌等。右侧是合作模块，包括慕课网等IT行业领航网站，以及学生常用网站。“关于”模块，只是简单的采用前沿技术（jQuery+html5）实现响应式滚屏。与首页逻辑原理相同。合作模块是简单的表格排布，图片设置超链接。
- 校内新闻和校外新闻：两大模块用相同技术实现，只不过页面排版不同。校内新闻罗列河北工程大学校园新闻，实时动态等。校外新闻罗列国家大事，国外新闻，内容严格挑选，保证积极向上。部分来源于腾讯新闻、新浪新闻、网易新闻等。
- 游戏：游戏模块目前只包括扫雷，以后会不定期更新游戏，微信大飞机游戏正在优化，后续会放入项目中。扫雷的玩法Windows上都有，这里只介绍我编写的这个扫雷的特别之处。众所周知，扫雷游戏需要标出雷块的位置。而我的这个扫雷是标出所有非雷的位置。游戏中，玩家利用提示周围雷数的方块推算出哪个方位有雷，不点此方块即可，当非雷方块全都点出，游戏胜利，简单易玩，生动有趣。页面方面是直接使用html语言，建立10×10的表格，优化样式实现。
- 笑话：笑话模块不只有笑话，还有搞笑的动态图片。编写此模块只为博得师生一笑，为校园生活增添乐趣。目前主流笑话网站，比如：糗事百科、捧腹网、百事不得其姐等，笑话是一页一页刷新的，流量特别不方便。学生家园笑话模块采用JavaScript技术实现瀑布流，即向下滑动页面，直接刷新新内容。简单的说，瀑布流的原理就是，循环每个（需要瀑布流布局）节点，依次将每个节点定位到列高最小的列后面，同时更新当前列的高度记录值。
- 学习：学习模块包括主流技术视频教程，选取优秀的，生动有趣的视频罗列。学生在日常学习之余，利用空闲时间，学习前沿知识，开阔视野。有助于学生全面发展，紧更潮流技术，当然也可以提高学校升学率。
- 测试：测试模块包括一些JavaScript和Html的测试题，题库可以随时增加。维护方便。测试模块是直接使用CSS样式去拼。可以实现单击开始按钮开始答题，自由不限数量添加题库，可以重做上一题，回答全部题后系统自动判断对错，打分，评论等功能。
- 校园人文：一个校园的图片，可以反映一个校园的人文精神，一个校园的内涵。校园人物的精神面貌，可以反映学校的学风建设情况。所以我编写了校园风景和校园人物两大图集。Web前台开发的优点是可移植。项目中三个图集使用的是相同的样式，同样的脚本。图库展示方法采用左右拖动，并且在图片下方设预览框，可以方便用户直接跳选到自己想要欣赏的图片上。图片窗体采用自适应大小技术，即动态采集图片大小，设置图片框大小。图库动画流程，样式简洁。
- 毕业季：恰逢毕业季，学生家园网站专门开发了毕业季专栏。罗列毕业生毕业照。在校四年生活即将结束。毕业季专栏，展现毕业生精彩写照的同时，给学校和学子们留下一份回忆。
- 师生信息：我有一个目标，就是采集全校师生的信息，放到这个网站上。方便同学老师间联系，也使得学校更像一个大家庭。在校园生活中经常遇到有同学有急事需要问老师或者同学的电话号码，可有时问了很多人都打听不到。师生信息模块要包括一些师生的介绍，最好由师生自己填写。目前由于信息缺乏，只收录了部分学生的信息。
- 聊天：聊天模块采用是使用MyEclipse10工具，使用Java Web技术，开发而成。服务器是用的Tomcat10。优点是稳定，跨平台，维护容易等。缺点是没有连接数据库，聊天数据不存储，不能发送图片等。聊天模块采用和主页相似样式，聊天方便，昵称登录即可使用。
- 关于：一个校园网站必须要有学校的介绍。而且介绍要全面，所以学生家园网站在最后设关于模块。模块介绍河北工程大学各层信息。由于信息缺乏，目前只包括四个栏目：河北工程大学简介、校徽释义、校训介绍以及校歌《学子心中不落的太阳》。
- 合作企业： 合作模块包括：优酷视频、京东商城、我要自学网、极客学院、搜狐网、慕课网、人人网、可可英语和W3school九个网站超链接。合作模块除了方便学生生活外，还可以增加广告收入，一举两得。