易居阁网站建设
摘 要： 这几年随着我国经济不断的发展，房地产不断的再扩张，房地产行业已经成为国家经济的主导产业之一，网络信息的发展也不断的提升，此次课题就围绕房地产来建设一个网站。 此课题主要用到Photoshop、Sublime Text等软件，运用DIV+CSS布局方式、响应设计、以及利用JS、jQuery来实现网站的交互，页面主要包括：用户注册登录、邮箱、管理员登录界面、在不同的浏览器里网页是否存在差异 、图片信息资源浏览、24小时在线客服、各类信息分类、留言板发布，下面是对此次网站的说明。
目 录
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
二、开发工具介绍 1
（一）Sublime Text 1
（二）JavaScript 1
（三）Photoshop 1
（四）开发环境 2
三、网站页面设计 2
（一）整体介绍 2
（二）具体介绍 3
1. Logo设计 3
2.首页设计 3
3.新房 5
4.租房 6
5.留言板 8
6.房屋信息 8
7.人员招聘 10
8.联系我们 10
9.注册页面 11
四、部分特效代码展示 11
（一）分享链接特效 11
（二）Banner特效 12
（三）在线客服特效 12
总结 14
致谢 15
参考文献 16
一、引言
（一）选题背景
记得有一次去一家房地产公司去面试，周围全是高楼大厦，地产公司里坐着许多购房者，询问经纪人一些关于房子的情况，如：问问周边哪个楼盘的好，找找适合自己价位的房子。如果上班族没有时间去了解购房的信息，该怎么解决这个问题，现在网络这么发达，在网站也可以找到需求的房子，足不出户节省了大部分的时间。
（二）选题意义
这几年随着经济的发展的速度，房地产行业也在不断的矿长，房地产已经成为国民经济的主导产业之一，房
*好棒文|www.hbsrm.com +Q: ^351916072#
子居住是人们生活的需求吗，大部分城市的房价不断上涨，房价太高导致很多家庭购房困难。如何买到称心如意的房子呢，上“易居阁”。
现在国家开放二胎政策，每家每户可能不在像以前一样都是独生子女，子女不愿意和父母住，那么购房成了一个大问题，父母会为子女购房而担忧。上“易居阁”实地考察，不存在任何虚假信息，买到你想要而价格合适的房子。
（三）课题内容
本课题的主要研究的内容以前台为主。前台重点是信息资源的多样化，网站的页面的布局以及格调，主要还是以图片信息的浏览为主，其次就是各类房屋的分类，还有全天24小时客服的在线。
二、开发工具介绍
（一）Sublime Text
Sublime Text它是一种适用于多种语言跨平台的编辑器，它是一个非常强大的软件，而且界面清晰明朗，不会让人看了不舒服。本网页所有前端效果全靠它，它的主要功能有；多重选择、多窗口、项目的切换、代码的自动完成、拼写检查它的优点有：主流的前端开发编辑器、体积小、运行速度快、文本功能大、支持编译功能且可控制台看到输出等，它还支持Windows、Linux等操作系统。
JavaScript
JavaScript它是一种网络脚本语言，主要应用于web前端开发，常用来给HTML网页添加动态功能，比如响应用户的各种操作它拥有非常炫丽的动态效果为客户给予视觉上的冲击，它是通过嵌入式的方式，在HTML中来实现强大的效果，它的用途：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、检测访客的浏览信息等。
Photoshop
Adobe Photoshop，简称“PS”，是由Adobo Systems开发和发行的图像处理软件。Photoshop它主要是一款图片处像软件，它在图像、图形、文字、视频、出版等各方面都有涉及，它的主要功能具有：专业测评、平面设计、广告摄影、影像创意、网页制作、后期修饰、视觉创意、见面设计等，本网页所有图片处理都应用于它。
（四）开发环境
开发所用系统：Windows 10
开发所需编辑器：Submlie Text3
开发所用浏览器：IE浏览器、360浏览器
三、网站页面设计
（一）整体介绍
网站的逻辑结构图如图31所示。
图31网站逻辑结构图
首页：首页集合了所有网页的信息，它分上中下三个模块，其中运用了JavaScript, DIV+CSS, JQuery特效。最主要的是向用户展示更多的信息量，让用户可以更充分的了解资讯、新闻。
新房：本页面主要是对部分开发新的楼盘进行了介绍，主要展示的是一些高端的楼盘信息，包括地段、路况、周边配套、房价，可以让客户了解这些新楼盘的实际情况。
租房：本页面主要简单的介绍了一下租房的信息，许多人因在外地上班所以要租房子住，对网上租房可能还不太了解，本网页的最上方有个筛选框，可以通过自己的需求筛选出自己想要的租房信息，不在需要跟走马观花一样一个一个的挑。
留言板：本页面主要是给客户用来交流，让更多人有一个沟通平台，促进大家的友谊，当然留言板里还存在客户和潜在顾客之间通过信息互相影响。
人员招聘：本页面主要展示的是一些人员招聘的具体要求和联系方式、地址等。
联系我们：这个页面主要告诉客户联系方式和具体店址，如果有什么不了解的还可以通过客服来解决，其中知识产权的信息，让有兴趣的人们能快速方便准确的找到我们的地址，让本网站的宣传起到实际的作用。
（二）具体介绍
1. Logo设计
网站主要以“房地产为”主题，用于解决现在居民的住房问题，网站的Logo是一个房子外观，给人以一目了然的感觉，更显得格外大气，此Logo是使用PhotoShop这款软件设计而成。如图32所示。
图32 logo设计图
2.首页设计
网站的首页是一个网页的整体布局，也是灵魂的体现，首页里主要包含了：logo、banner、导航条，导航条主要分：首页、新房、租房、二手房、留言板、人员招聘、联系我们八个模块。
首页的设计框架如图33所示。
Logo、搜索框、登录、注册
导航条
Banner
目 录
一、引言 1
（一）选题背景 1
（二）选题意义 1
（三）课题内容 1
二、开发工具介绍 1
（一）Sublime Text 1
（二）JavaScript 1
（三）Photoshop 1
（四）开发环境 2
三、网站页面设计 2
（一）整体介绍 2
（二）具体介绍 3
1. Logo设计 3
2.首页设计 3
3.新房 5
4.租房 6
5.留言板 8
6.房屋信息 8
7.人员招聘 10
8.联系我们 10
9.注册页面 11
四、部分特效代码展示 11
（一）分享链接特效 11
（二）Banner特效 12
（三）在线客服特效 12
总结 14
致谢 15
参考文献 16
一、引言
（一）选题背景
记得有一次去一家房地产公司去面试，周围全是高楼大厦，地产公司里坐着许多购房者，询问经纪人一些关于房子的情况，如：问问周边哪个楼盘的好，找找适合自己价位的房子。如果上班族没有时间去了解购房的信息，该怎么解决这个问题，现在网络这么发达，在网站也可以找到需求的房子，足不出户节省了大部分的时间。
（二）选题意义
这几年随着经济的发展的速度，房地产行业也在不断的矿长，房地产已经成为国民经济的主导产业之一，房
*好棒文|www.hbsrm.com +Q: ^351916072#
子居住是人们生活的需求吗，大部分城市的房价不断上涨，房价太高导致很多家庭购房困难。如何买到称心如意的房子呢，上“易居阁”。
现在国家开放二胎政策，每家每户可能不在像以前一样都是独生子女，子女不愿意和父母住，那么购房成了一个大问题，父母会为子女购房而担忧。上“易居阁”实地考察，不存在任何虚假信息，买到你想要而价格合适的房子。
（三）课题内容
本课题的主要研究的内容以前台为主。前台重点是信息资源的多样化，网站的页面的布局以及格调，主要还是以图片信息的浏览为主，其次就是各类房屋的分类，还有全天24小时客服的在线。
二、开发工具介绍
（一）Sublime Text
Sublime Text它是一种适用于多种语言跨平台的编辑器，它是一个非常强大的软件，而且界面清晰明朗，不会让人看了不舒服。本网页所有前端效果全靠它，它的主要功能有；多重选择、多窗口、项目的切换、代码的自动完成、拼写检查它的优点有：主流的前端开发编辑器、体积小、运行速度快、文本功能大、支持编译功能且可控制台看到输出等，它还支持Windows、Linux等操作系统。
JavaScript
JavaScript它是一种网络脚本语言，主要应用于web前端开发，常用来给HTML网页添加动态功能，比如响应用户的各种操作它拥有非常炫丽的动态效果为客户给予视觉上的冲击，它是通过嵌入式的方式，在HTML中来实现强大的效果，它的用途：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、检测访客的浏览信息等。
Photoshop
Adobe Photoshop，简称“PS”，是由Adobo Systems开发和发行的图像处理软件。Photoshop它主要是一款图片处像软件，它在图像、图形、文字、视频、出版等各方面都有涉及，它的主要功能具有：专业测评、平面设计、广告摄影、影像创意、网页制作、后期修饰、视觉创意、见面设计等，本网页所有图片处理都应用于它。
（四）开发环境
开发所用系统：Windows 10
开发所需编辑器：Submlie Text3
开发所用浏览器：IE浏览器、360浏览器
三、网站页面设计
（一）整体介绍
网站的逻辑结构图如图31所示。
图31网站逻辑结构图
首页：首页集合了所有网页的信息，它分上中下三个模块，其中运用了JavaScript, DIV+CSS, JQuery特效。最主要的是向用户展示更多的信息量，让用户可以更充分的了解资讯、新闻。
新房：本页面主要是对部分开发新的楼盘进行了介绍，主要展示的是一些高端的楼盘信息，包括地段、路况、周边配套、房价，可以让客户了解这些新楼盘的实际情况。
租房：本页面主要简单的介绍了一下租房的信息，许多人因在外地上班所以要租房子住，对网上租房可能还不太了解，本网页的最上方有个筛选框，可以通过自己的需求筛选出自己想要的租房信息，不在需要跟走马观花一样一个一个的挑。
留言板：本页面主要是给客户用来交流，让更多人有一个沟通平台，促进大家的友谊，当然留言板里还存在客户和潜在顾客之间通过信息互相影响。
人员招聘：本页面主要展示的是一些人员招聘的具体要求和联系方式、地址等。
联系我们：这个页面主要告诉客户联系方式和具体店址，如果有什么不了解的还可以通过客服来解决，其中知识产权的信息，让有兴趣的人们能快速方便准确的找到我们的地址，让本网站的宣传起到实际的作用。
（二）具体介绍
1. Logo设计
网站主要以“房地产为”主题，用于解决现在居民的住房问题，网站的Logo是一个房子外观，给人以一目了然的感觉，更显得格外大气，此Logo是使用PhotoShop这款软件设计而成。如图32所示。
图32 logo设计图
2.首页设计
网站的首页是一个网页的整体布局，也是灵魂的体现，首页里主要包含了：logo、banner、导航条，导航条主要分：首页、新房、租房、二手房、留言板、人员招聘、联系我们八个模块。
首页的设计框架如图33所示。
Logo、搜索框、登录、注册
导航条
Banner
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/737.html
