鸿图房产网站设计制作
目 录
一、引言 1
二、开发工具及相关的技术 1
（一）开发工具 1
（二）开发技术 2
三、网站需求分析 2
（一）建站目的 2
（二）网站的定位 2
（三）网站功能划分及介绍 3
四、网站的设计与实现 4
（一）网站界面设计 4
1．颜色搭配和字体大小 4
2．网站整体设计 4
（二）网站的实现 6
1．页眉的实现 6
2．中部排序的实现 10
2．页尾的实现 11
（三）相册页面以及留言板的实现 13
1．相册页面的实现 13
2．留言板的实现 16
四、网站调试 19
（一）测试网站超链接 19
（二）测试网站页面 19
（三）测试网站代码 19
（四）检查站点中的文件夹 19
（五）网站兼容性测试 19
五、总结 20
六、致谢 21
七、参考文献 22
附录一、部分代码图 23
附录二、部分页面效果图 24
附录三、程序清单 25
一、引言
科技发展日益迅猛，时代的发展速度也令我们措手不及，带来了很多新鲜的事物。计算机的发展经过了四代，现已进入了人工智能时代，这也将对社会的发展产生深远的影响。现如今，网络是时代不可或缺的东西，已经进入了我们生活的方方面面，涉及了很多领域。迄今为止的互联网格局和势头来看，企业网站已经逐步成为互联网市场的需要，发展的方向也必然趋向于专业化。如今企业网站通过网络平台拓宽市场 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
，提高知名度已经是一个企业必不可少的部分。制作出一个好的网站，为用户留下深刻的印象。这样，不但能提高企业网站的知名度也提高了点击率。
目前的鸿图房产公司还采用传统的经营模式，但是随着网络电子商务的兴起以及国家和地方对网络贸易的支持，鸿图房产公司意识到网络平台的优势，准备建立起网络贸易，通过建设房产的网络平台让更多的用户了解鸿图房产，知道可以通过这个平台来了解房屋的价格等房产资讯。
鸿图房产网站利用Dreamweaver工具进行开发，主要采用DIV+CSS技术，从而达到更好的控制页面的布局。另外还采用了JQuery、Ajax、JavaScript等辅助开发技术。网站以介绍房产发展的趋势、房价的走势以及房屋的装修为项目背景，为了能让用户方便快捷的了解资讯为出发点，通过浏览该网站了解到房产的最新资讯和房屋装修的最新风格是最终的目的。网站架构简单，用户易懂。为用户能够更全更快的了解房产信息搭起一座桥梁。在搭建这座桥梁的同时，也面临需要解决的问题，比如：通常浏览房产网站的人群普遍年龄、收入、习惯、爱好、审美等，也为今后网站能够更好的运作铺路。
二、开发工具及相关的技术
（一）开发工具
Dreamweaver中文名为梦想编织者，在网页设计制作的领域中应用最广泛。发展历程经过3个阶段。第一代由Macromedia公司1997年12月发布Dreamweaver1.0；随Macromedia公司被Adobe公司收购后，第二代于1998年12月发布Dreamweaver2.0.。第三代于次年1999年12月发布Dreamweaver3.0。此版本的内存小，不足3M，是一个经典的版本。此时Dreamweaver已经是集合于网站的管理和网页的制作于一体的网页编辑器，一套专门针对网页设计师的视觉化网页开发工具，它可以跨越平台和浏览器的限制，制作出充满动感的网页。
本次网站的开发中用的版本为Macromedia Dreamweaver8.0，具有可视化的网页设计和网站管理的公告，支持最新的Web技术，包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和 Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
（二）开发技术
本次网站开发主要采用的是DIV+CSS技术，是一种网页的布局方式，实现网页的内容与样式相分离（特点），能够大大缩减页面代码，能提高页面浏览速度，缩减带宽成本；结构清晰，容易被搜索引擎搜索到；缩短改版时间。还能够更好的控制页面布局。
DIV的中文是层叠样表单元的位置和层次，全称是Division，是划分的意思。它可以定义文档中的分区或节，它的标签可以把文档分为独立的、不同的部分，并且它可以用作严格的组织工具，并且不适用任何格式与其相关联。
CSS的中文是层叠样式表。级联样式表是用来表现html样式的计算机语言。CSS与网页的表现内容分离但又互相连接，用来互相连接。CSS的编写可以达到制作者想要的排版效果，并且精确的显示出来，而它的写法也是具有较强的易读性，易修改。
三、网站需求分析
（一）建站目的
如今，人们想知道关于房产的信息，会自然而然的上网查找。因此，建一个鸿图房产公司的企业网站，让更多的人知道这个网站。当然为了吸引更多的人浏览，首先应做到网站信息的全面化和准确性。为了稳固自身在房产界的地位，必须要跟上时代的节奏，适应经济发展环境，避免被淘汰的危险。通过电子商务降低成本，拓展销售渠道。
（二）网站的定位
经过对房产的网络资料的搜集整理，反馈出来的结果表示一般年轻人浏览房产信息占的比例最高，这是非常重要的一个信息，因为围绕着年轻人的想法、爱好、习惯、还有欣赏的风格来定位自身的网站，因此网站的风格定为简单清新的风格，让人看上去特别舒服，在浏览页面的过程中不会有视觉上的累，
整个页面排序合理，看上去一目了然。当然自身的网站必须有自己的独特性：其一，用户在浏览网站时有时不是因为此网站做的是多么全面，而是因为其网站某种独一无二，便是这种独一无二，就是差异点。一般房产网站上都是一些房产的资讯，而本次制作的网站穿插一些房屋的装修风格，让用户在了解房屋信息的同时，能够知道一些房子的装饰和一些装饰的报价。其二，用户访问互联网也不是因为你的互联网做得多么美观，功能多么齐全，而是你的网站能解决他的某种独特的需求。
（三）网站功能划分及介绍
鸿图房产网站可以帮助人们了解更多的关于房产的知识，具体主要包括home页面、About us页面、Products页面、Services页面、Content页面等。在网站制作的规划中把房产政策、房价和房屋装修都做了分块。在制作的过程中主要用到的DIV，主要就是给网页分为几大块，每一块都是一个DIV层，一个网页大概分为图标、导航、内容以及脚本。内容这个DIV层可以根据自身的需要分为几小块，写不同的内容。Home页面有最新房产资讯、最新装潢风格、房屋风水设计格局、最新房产政策、热门楼盘盘点等网站的最新动态信息。Services页面包含了几种最新最流行的房屋装潢风格；About us页面有公司的介绍和房产的资讯；Products页面介绍了房屋的户型，和户型的介绍；Content页面是公司的具体位置和联系方式；以上页面均可随意点击任意标题进入下一级页面了解更详细内容。另外还有2个相册的页面，里面放一些不同装潢风格的样板房，让用户能够见到成品，得到信任感。另外还有一个留言板，用户可以对本网站进行评价或者提一些意见或建议，通过阅读用户的留言，来完善自身的网站。图3-1是网站结构图
一、引言 1
二、开发工具及相关的技术 1
（一）开发工具 1
（二）开发技术 2
三、网站需求分析 2
（一）建站目的 2
（二）网站的定位 2
（三）网站功能划分及介绍 3
四、网站的设计与实现 4
（一）网站界面设计 4
1．颜色搭配和字体大小 4
2．网站整体设计 4
（二）网站的实现 6
1．页眉的实现 6
2．中部排序的实现 10
2．页尾的实现 11
（三）相册页面以及留言板的实现 13
1．相册页面的实现 13
2．留言板的实现 16
四、网站调试 19
（一）测试网站超链接 19
（二）测试网站页面 19
（三）测试网站代码 19
（四）检查站点中的文件夹 19
（五）网站兼容性测试 19
五、总结 20
六、致谢 21
七、参考文献 22
附录一、部分代码图 23
附录二、部分页面效果图 24
附录三、程序清单 25
一、引言
科技发展日益迅猛，时代的发展速度也令我们措手不及，带来了很多新鲜的事物。计算机的发展经过了四代，现已进入了人工智能时代，这也将对社会的发展产生深远的影响。现如今，网络是时代不可或缺的东西，已经进入了我们生活的方方面面，涉及了很多领域。迄今为止的互联网格局和势头来看，企业网站已经逐步成为互联网市场的需要，发展的方向也必然趋向于专业化。如今企业网站通过网络平台拓宽市场 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
，提高知名度已经是一个企业必不可少的部分。制作出一个好的网站，为用户留下深刻的印象。这样，不但能提高企业网站的知名度也提高了点击率。
目前的鸿图房产公司还采用传统的经营模式，但是随着网络电子商务的兴起以及国家和地方对网络贸易的支持，鸿图房产公司意识到网络平台的优势，准备建立起网络贸易，通过建设房产的网络平台让更多的用户了解鸿图房产，知道可以通过这个平台来了解房屋的价格等房产资讯。
鸿图房产网站利用Dreamweaver工具进行开发，主要采用DIV+CSS技术，从而达到更好的控制页面的布局。另外还采用了JQuery、Ajax、JavaScript等辅助开发技术。网站以介绍房产发展的趋势、房价的走势以及房屋的装修为项目背景，为了能让用户方便快捷的了解资讯为出发点，通过浏览该网站了解到房产的最新资讯和房屋装修的最新风格是最终的目的。网站架构简单，用户易懂。为用户能够更全更快的了解房产信息搭起一座桥梁。在搭建这座桥梁的同时，也面临需要解决的问题，比如：通常浏览房产网站的人群普遍年龄、收入、习惯、爱好、审美等，也为今后网站能够更好的运作铺路。
二、开发工具及相关的技术
（一）开发工具
Dreamweaver中文名为梦想编织者，在网页设计制作的领域中应用最广泛。发展历程经过3个阶段。第一代由Macromedia公司1997年12月发布Dreamweaver1.0；随Macromedia公司被Adobe公司收购后，第二代于1998年12月发布Dreamweaver2.0.。第三代于次年1999年12月发布Dreamweaver3.0。此版本的内存小，不足3M，是一个经典的版本。此时Dreamweaver已经是集合于网站的管理和网页的制作于一体的网页编辑器，一套专门针对网页设计师的视觉化网页开发工具，它可以跨越平台和浏览器的限制，制作出充满动感的网页。
本次网站的开发中用的版本为Macromedia Dreamweaver8.0，具有可视化的网页设计和网站管理的公告，支持最新的Web技术，包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和 Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
（二）开发技术
本次网站开发主要采用的是DIV+CSS技术，是一种网页的布局方式，实现网页的内容与样式相分离（特点），能够大大缩减页面代码，能提高页面浏览速度，缩减带宽成本；结构清晰，容易被搜索引擎搜索到；缩短改版时间。还能够更好的控制页面布局。
DIV的中文是层叠样表单元的位置和层次，全称是Division，是划分的意思。它可以定义文档中的分区或节，它的标签可以把文档分为独立的、不同的部分，并且它可以用作严格的组织工具，并且不适用任何格式与其相关联。
CSS的中文是层叠样式表。级联样式表是用来表现html样式的计算机语言。CSS与网页的表现内容分离但又互相连接，用来互相连接。CSS的编写可以达到制作者想要的排版效果，并且精确的显示出来，而它的写法也是具有较强的易读性，易修改。
三、网站需求分析
（一）建站目的
如今，人们想知道关于房产的信息，会自然而然的上网查找。因此，建一个鸿图房产公司的企业网站，让更多的人知道这个网站。当然为了吸引更多的人浏览，首先应做到网站信息的全面化和准确性。为了稳固自身在房产界的地位，必须要跟上时代的节奏，适应经济发展环境，避免被淘汰的危险。通过电子商务降低成本，拓展销售渠道。
（二）网站的定位
经过对房产的网络资料的搜集整理，反馈出来的结果表示一般年轻人浏览房产信息占的比例最高，这是非常重要的一个信息，因为围绕着年轻人的想法、爱好、习惯、还有欣赏的风格来定位自身的网站，因此网站的风格定为简单清新的风格，让人看上去特别舒服，在浏览页面的过程中不会有视觉上的累，
整个页面排序合理，看上去一目了然。当然自身的网站必须有自己的独特性：其一，用户在浏览网站时有时不是因为此网站做的是多么全面，而是因为其网站某种独一无二，便是这种独一无二，就是差异点。一般房产网站上都是一些房产的资讯，而本次制作的网站穿插一些房屋的装修风格，让用户在了解房屋信息的同时，能够知道一些房子的装饰和一些装饰的报价。其二，用户访问互联网也不是因为你的互联网做得多么美观，功能多么齐全，而是你的网站能解决他的某种独特的需求。
（三）网站功能划分及介绍
鸿图房产网站可以帮助人们了解更多的关于房产的知识，具体主要包括home页面、About us页面、Products页面、Services页面、Content页面等。在网站制作的规划中把房产政策、房价和房屋装修都做了分块。在制作的过程中主要用到的DIV，主要就是给网页分为几大块，每一块都是一个DIV层，一个网页大概分为图标、导航、内容以及脚本。内容这个DIV层可以根据自身的需要分为几小块，写不同的内容。Home页面有最新房产资讯、最新装潢风格、房屋风水设计格局、最新房产政策、热门楼盘盘点等网站的最新动态信息。Services页面包含了几种最新最流行的房屋装潢风格；About us页面有公司的介绍和房产的资讯；Products页面介绍了房屋的户型，和户型的介绍；Content页面是公司的具体位置和联系方式；以上页面均可随意点击任意标题进入下一级页面了解更详细内容。另外还有2个相册的页面，里面放一些不同装潢风格的样板房，让用户能够见到成品，得到信任感。另外还有一个留言板，用户可以对本网站进行评价或者提一些意见或建议，通过阅读用户的留言，来完善自身的网站。图3-1是网站结构图
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1862.html
