爱满屋家庭网站的设计与实现
本课题完成的是爱满屋家庭网站的设计与实现。爱满屋家庭网站顾名思义就是属于自己家庭的一个网站，基于现在的孩子与家长的交流问题而设计的网站。全面涵盖家长、家庭生活需求的方方面面。融入自己家庭的个性。解决发生的矛盾，让孩子的抵触情绪消减，愿意与家长交流。提现了这个网站的价值与意义，使用互联网的现代化发展，将它更好的推销出去，让越来越多的用户使用它。运用Dreamweaver网站编辑软件来初步实现网站效果，实现HTML和CSS的代码编写，Photoshop来完成对图片的编辑，最后解决三大浏览器的兼容性问题。本文从网站的总体设计、布局与实现及兼容性测试等方面进行了详细阐述。
目 录
一、引言 1
（一） “爱满屋”家庭网站的背景 1
（二） “爱满屋”家庭网站目的 1
二、网站开发工具的介绍 1
（一） Dreamweaver软件 1
（二） Photoshop软件 1
三、网站的总体设计 1
（一） LOGO的设计 1
1. 创意来源 1
2. 具体效果 1
（二） 首页效果设计 2
1. 背景图的插入 2
2. “简述”和“感恩”的完成 2
（三） 子页效果设计 3
1.“最新的”和“统计信息”的设计 3
2.“最近来访我”的设计 4
四、网站的布局与实现 4
（一） 首页的实现 4
1.“我的主页”的实现 4
2.“家庭介绍”的实现 5
3.“相册”的实现 5
4.“分享”的实现 5
5.“更多”的实现 6
（二） 子页的实现 6
1. “相册”的实现 6
2. “成员介绍”的实现 6
3. “日志”的实现 7
4. “文章欣赏”的实现 7
5. “留言板”的实现 8
6. “爱豆”的实现 8
7. “精炼语句”的实现 9
8. “说说”的实现 9
9. “家庭树”的实现 10
（三） 特
*好棒文|www.hbsrm.com +Q: *351916072*
效的实现 10
1. 首页点击滑动 10
2.分享微信特效 11
五、网站的兼容性测试 11
（一） IE浏览器 11
（二） 谷歌浏览器 11
（三） 火狐浏览器 11
六、总结 12
致谢 13
参考文献 14
一、引言
“爱满屋”家庭网站的背景
现在各大网站的开发越来越多，越来越完善，从而推动着各行各业网站的实施。家庭网站应运而生了。家庭是社会的分子，也是社会最基础的实体之一。个人是组成家庭的基础，是必须的，但是每个人有自己的特性、脾气、习惯。随着孩子不断的成长，有了自己的想法，想要空间和自由。就这样孩子和家长产生了矛盾，然后爸爸和妈妈之间又有了冲突等等，像这样的摩擦是避免不了的。为了减少矛盾冲突，就建立了家庭网站。
“爱满屋”家庭网站目的
“爱满屋”家庭网站，顾名思义就是一个温馨、充满欢笑和爱的家庭网站。成员将自已的基本信息，兴趣爱好（总而言之越详细越好）录入进去，相互可以更加的了解。更可以分享趣事在网站上；也可以将说不出的口的话用文字表达出来，有利于成员之间的感情互动，消除不必要的误会；记录家庭生活中的点点滴滴，开心的难过的都是不可缺少的部分，值得去珍惜。 开创幸福生活，必须让爱心的阳光照亮生活的上空，让甜蜜的生活永远和谐和睦。这是人生幸福生活真谛所在。也是这个网站的宗旨。
二、网站开发工具的介绍
Dreamweaver软件
Adobe Dreamweaver是目前世界上使用范围最高的网页编辑器，它提供网页制作以及网站管理的功能。Dreamweaver通过使用HTML编辑器，使用户可以轻易的越过平台以及浏览器的束缚做出出色的网页。在最新的GS6版本中，用户可以快速的传输文件以及可以自由地在各种运行环境之间切换。
Photoshop软件
Photoshop是目前最流行的图像处理软件，它通过提供多种编修以及绘图功能实现对图形的编辑。截止2016年12月，最新版本的Photoshop已经可以提供包括平面设计、界面设计、网页设计、后期修饰等多达13种功能。由于其强大的图形处理能力，Photoshop已经被运用在图像处理，视频制作、文字修饰等方面。
三、网站的总体设计
LOGO的设计
创意来源
根据网站的名字“爱满屋”可以得知，“爱”是这个网站的宗旨，是不变的信念。We are family是一句很简单但是很有内涵的一句话，我们是一家人是不可分开的，我中有你你中有我，不可分割。
具体效果
如图31所示花瓣围城了一个心形包裹着“Family”。花瓣寓意着每个成员的情感的表达，为家付出的点滴。“Family”寓意着家庭成员，手拉着手共创美好的未来。争吵、矛盾会越来越少，欢声笑语会越来越多。
图31 logo
首页效果设计
背景图的插入
一个网站的背景图会为这个网站增色不少，绿色代表生机勃勃朝气无限。白色又代表着纯洁，白绿相间，清新中夹杂着生气。沙发、茶几桌、落地窗，再加上一盆绿色植物是家的标配。一张衬景的背景图展现了这个网站的含义。
“简述”和“感恩”的完成
“简述”和“感恩”在背景图之上又形成了一种白色的背景，让它们显得更有立体感。并列的效果节省了空间，没有冗余的代码。
简述是总体的介绍了网站的构成因素。包括 成员介绍, 相册, 日志, 说说, 留言, 欣赏, 幸运指数, 家庭树等等。如图32所示。
图32 “简述”的效果图
感恩：孝，其为人之本也，一个只有懂得感恩父母的人，才能算是一个完整的人。家，其为人之根也，一个只有融入家庭温暖的人，才能算是一个完整的人。如图33所示。
图33 感恩效果图
子页效果设计
1.“最新的”和“统计信息”的设计
“最新的”和“统计信息”参照了qq空间的设计，成为了网站的一个亮点。网站的使用者可以一目了然的知道网站最新的动态和情况。用数字化来呈现出结果，有视觉的冲击感。既方便又清晰。
“最新的”包含发布于、评论、阅读、我的文章这四个内容。发布的时间数量，评论的时间数量，阅读的时间数量，我的文章的时间数量都会完整的显示出来。如图34所示
目 录
一、引言 1
（一） “爱满屋”家庭网站的背景 1
（二） “爱满屋”家庭网站目的 1
二、网站开发工具的介绍 1
（一） Dreamweaver软件 1
（二） Photoshop软件 1
三、网站的总体设计 1
（一） LOGO的设计 1
1. 创意来源 1
2. 具体效果 1
（二） 首页效果设计 2
1. 背景图的插入 2
2. “简述”和“感恩”的完成 2
（三） 子页效果设计 3
1.“最新的”和“统计信息”的设计 3
2.“最近来访我”的设计 4
四、网站的布局与实现 4
（一） 首页的实现 4
1.“我的主页”的实现 4
2.“家庭介绍”的实现 5
3.“相册”的实现 5
4.“分享”的实现 5
5.“更多”的实现 6
（二） 子页的实现 6
1. “相册”的实现 6
2. “成员介绍”的实现 6
3. “日志”的实现 7
4. “文章欣赏”的实现 7
5. “留言板”的实现 8
6. “爱豆”的实现 8
7. “精炼语句”的实现 9
8. “说说”的实现 9
9. “家庭树”的实现 10
（三） 特
*好棒文|www.hbsrm.com +Q: *351916072*
效的实现 10
1. 首页点击滑动 10
2.分享微信特效 11
五、网站的兼容性测试 11
（一） IE浏览器 11
（二） 谷歌浏览器 11
（三） 火狐浏览器 11
六、总结 12
致谢 13
参考文献 14
一、引言
“爱满屋”家庭网站的背景
现在各大网站的开发越来越多，越来越完善，从而推动着各行各业网站的实施。家庭网站应运而生了。家庭是社会的分子，也是社会最基础的实体之一。个人是组成家庭的基础，是必须的，但是每个人有自己的特性、脾气、习惯。随着孩子不断的成长，有了自己的想法，想要空间和自由。就这样孩子和家长产生了矛盾，然后爸爸和妈妈之间又有了冲突等等，像这样的摩擦是避免不了的。为了减少矛盾冲突，就建立了家庭网站。
“爱满屋”家庭网站目的
“爱满屋”家庭网站，顾名思义就是一个温馨、充满欢笑和爱的家庭网站。成员将自已的基本信息，兴趣爱好（总而言之越详细越好）录入进去，相互可以更加的了解。更可以分享趣事在网站上；也可以将说不出的口的话用文字表达出来，有利于成员之间的感情互动，消除不必要的误会；记录家庭生活中的点点滴滴，开心的难过的都是不可缺少的部分，值得去珍惜。 开创幸福生活，必须让爱心的阳光照亮生活的上空，让甜蜜的生活永远和谐和睦。这是人生幸福生活真谛所在。也是这个网站的宗旨。
二、网站开发工具的介绍
Dreamweaver软件
Adobe Dreamweaver是目前世界上使用范围最高的网页编辑器，它提供网页制作以及网站管理的功能。Dreamweaver通过使用HTML编辑器，使用户可以轻易的越过平台以及浏览器的束缚做出出色的网页。在最新的GS6版本中，用户可以快速的传输文件以及可以自由地在各种运行环境之间切换。
Photoshop软件
Photoshop是目前最流行的图像处理软件，它通过提供多种编修以及绘图功能实现对图形的编辑。截止2016年12月，最新版本的Photoshop已经可以提供包括平面设计、界面设计、网页设计、后期修饰等多达13种功能。由于其强大的图形处理能力，Photoshop已经被运用在图像处理，视频制作、文字修饰等方面。
三、网站的总体设计
LOGO的设计
创意来源
根据网站的名字“爱满屋”可以得知，“爱”是这个网站的宗旨，是不变的信念。We are family是一句很简单但是很有内涵的一句话，我们是一家人是不可分开的，我中有你你中有我，不可分割。
具体效果
如图31所示花瓣围城了一个心形包裹着“Family”。花瓣寓意着每个成员的情感的表达，为家付出的点滴。“Family”寓意着家庭成员，手拉着手共创美好的未来。争吵、矛盾会越来越少，欢声笑语会越来越多。
图31 logo
首页效果设计
背景图的插入
一个网站的背景图会为这个网站增色不少，绿色代表生机勃勃朝气无限。白色又代表着纯洁，白绿相间，清新中夹杂着生气。沙发、茶几桌、落地窗，再加上一盆绿色植物是家的标配。一张衬景的背景图展现了这个网站的含义。
“简述”和“感恩”的完成
“简述”和“感恩”在背景图之上又形成了一种白色的背景，让它们显得更有立体感。并列的效果节省了空间，没有冗余的代码。
简述是总体的介绍了网站的构成因素。包括 成员介绍, 相册, 日志, 说说, 留言, 欣赏, 幸运指数, 家庭树等等。如图32所示。
图32 “简述”的效果图
感恩：孝，其为人之本也，一个只有懂得感恩父母的人，才能算是一个完整的人。家，其为人之根也，一个只有融入家庭温暖的人，才能算是一个完整的人。如图33所示。
图33 感恩效果图
子页效果设计
1.“最新的”和“统计信息”的设计
“最新的”和“统计信息”参照了qq空间的设计，成为了网站的一个亮点。网站的使用者可以一目了然的知道网站最新的动态和情况。用数字化来呈现出结果，有视觉的冲击感。既方便又清晰。
“最新的”包含发布于、评论、阅读、我的文章这四个内容。发布的时间数量，评论的时间数量，阅读的时间数量，我的文章的时间数量都会完整的显示出来。如图34所示
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/654.html
