宝泰室内装潢网站建设
内容：本课题基于Bootstrap的布局，围绕徐州宝泰室内装潢设计有限公司完成主题网站的制作。在制作过程中使用了Photoshop和Sublime Text3软件。 Photoshop软件用来完成图片素材的加工、制作、美化和整体布局的效果设计图，使用Sublime Text3 软件来完成HTML和CSS样式的编写，完成网页的制作和修饰。运用JavaScript实现网页特效，增强网站的可视化效果。最终完成的网站经过IE浏览器、火狐浏览器、欧朋浏览器和谷歌浏览器四大主浏览器的测试，符合WEB的网页标准，获得预期成效。本文就网站制作过程中的设计、布局、实现、兼容性等方面做了详细的阐述。
一、 引言 1
二、 开发工具与技术 1
1.Photoshop 1
2.Sublime Text 1
三、 网站设计 2
（一） 总体设计 2
1、 功能结构图绘制 2
（二） 详细设计 3
1、 LOGO设计 3
2、 导航栏设计 3
3、 页面布局设计 3
4、 DIV布局结构 4
四、 网站实现 8
（一） 首页 8
（二） 子页实现 9
1. 公司介绍 10
2. 关于设计 10
3. 经典工程 10
4. 信息反馈 11
5. 网上订单 12
6. 估算报价 12
7. 联系我们 13
五、 网页特效 14
（一） JavaScript特效实现 14
六、 总结 15
致谢 16
参考文献 16
引言
住宅装饰装修行业是一个既古老传统又新兴现代的朝阳产业。现代住宅装饰专修已经成为一种时尚、一种追求、一种文化、一种艺术。住宅装饰装修潜力巨大，有市场、有机遇、有潜力、有希望。由于计算机网络技术的广泛应用以及人们对网络技术的依赖性以及能更好的适应时代潮流，故开发本网站。本网站使用HTML+CSS设计页面，使用JavaScript制作特效，使网站更加可视化。
开发工具与技术
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
1.Photoshop
利用Adobe Photoshop软件设计了该网站的LOGO，灰色调与银色调相协调，勾勒出一份淡雅温馨的氛围。同时，也利用PS设计了该网站的导航栏以及对经典工程页面的图片的处理。PS的使用使整个页面显得更加的美观，给浏览者一视觉上的享受。
2.Sublime Text
整个网站代码的编写以及CSS样式的设置，都是通过Sublime Text这款代码编辑器来编写。通过该软件将整个网站从构造变成了一个具体、清晰的网页。
网站设计
总体设计
功能结构图绘制
网站有首页、公司介绍、关于设计、经典工程、信息反馈、网上订单、估算报价、联系我们8个模块。
首页主要使用了一个图片轮转和灰色背景的效果。灰色淡雅的背景加上自动轮转精美绝伦的室内装修图，使整个页面显得更加的温馨、舒适。能够吸引浏览者进一步的浏览本网站。在图片轮转上方的导航栏设有公司介绍、关于设计、经典工程、企业顾问、网上订单、留言簿、联系我们等子页，在图片轮转的左方设有空间、风格、户型等工程的详细项目，让浏览者能快速、有效的了解徐州宝泰室内装潢设计有限公司的业务、内容，也为需要的装修的顾客提供了便利。
公司介绍主要是介绍徐州宝泰室内装潢设计有限公司，让浏览者能很好的了解徐州宝泰室内装潢有限公司。
关于设计主要是介绍了宝泰公司的设计观、怎样和设计师沟通等。经典工程则是宝泰公司根据空间、风格、户型等因素制作成的装修样式。
信息反馈则是方便顾客为宝泰公司提供意见。
网上订单则是让顾客不出家门就可以在网上填写订单、预订时间装修房子，为客户提供更加便捷的服务。
估算报价则是更好的方便顾客对于装修价格的了解，对于自家的装修风格以及装饰品能够有个更好的了解。
联系我们则主要写了宝泰公司的店址、联系电话、传真和EMail，方便顾客找寻、联系公司人员。
网站内容结构图如图31所示：
图31 网站内容结构图
详细设计
LOGO设计
本网站的LOGO设计使用了Photoshop软件，LOGO中有的那个小房子象征着这个公司与家有关，而房门是个B。B是徐州宝泰室内装潢设计有限公司宝的大写首字母，在右侧有“宝泰”二字。图像和文字使用灰色调，背景使用银色调，给人一种淡雅、温馨的感觉。
LOGO效果图如图32所示：
图32 LOGO效果图
导航栏设计
导航栏同样采用银色调，与公司LOGO底色保持一致。并且使用“方正喵呜体”为整个网站增加一些趣味性。使用黑色字体，是导航栏更加的突出、明显。
导航栏效果图如图33所示：
图33导航栏效果图
页面布局设计
首页
首页采用上中下框架结构。在首页的左上方是本网站的LOGO，在同一层次右上方是本网站的宗旨及公司名称。LOGO和网站宗旨、公司名称的背景颜色皆使用银色调，整个头部全部使用的是银色调，与LOGO的背景颜色保持一致，使公司LOGO与其他层次更好的融合在一起。首页布局以简洁为主，给浏览者一种高雅、温馨的感觉。在首页主要内容部分，左侧设有二级导航，右侧则是作品展示，这样能够让浏览者更加便捷、迅速的了解到自己需要的东西。
网站布局图如图34所示：
LOGO
网站宗旨
公司名称
导航栏
主要内容
图片
版权信息
图34网站布局图
子页
子页采用普遍布局，与首页布局相差无几。Header层包括公司logo、公司宗旨以及公司名称，能够让浏览者无论在哪个页面都能了解到该网站的一个宗旨以及公司的名称。子页整体布局仍以温馨、简洁为主，图文结合的方式使浏览者在浏览网站的过程中不会感到枯燥乏味。
子页的具体框架如图35所示：
LOGO
公司宗旨
公司名称
导航栏
主要内容
版权信息
图35 子页具体框架结构图
DIV布局结构
前期的一些准备工作做好之后，下面就开始网站的制作了，在Sublime中用div层来对整个页面进行布局，以达到预期效果的实现。Div+Css层叠样式表设计网页，是对上一步的布局进一步的美化，使其能够得到所需文字样式、大小、粗细、颜色等特殊效果的实现，使网站的内容更加的丰富多彩，而且CSS样式可重复使用，减少代码的冗余。
首页DIV布局采用层套式布局结构，具体DIV结构如图36所示：
图36 首页DIV结构图
一、 引言 1
二、 开发工具与技术 1
1.Photoshop 1
2.Sublime Text 1
三、 网站设计 2
（一） 总体设计 2
1、 功能结构图绘制 2
（二） 详细设计 3
1、 LOGO设计 3
2、 导航栏设计 3
3、 页面布局设计 3
4、 DIV布局结构 4
四、 网站实现 8
（一） 首页 8
（二） 子页实现 9
1. 公司介绍 10
2. 关于设计 10
3. 经典工程 10
4. 信息反馈 11
5. 网上订单 12
6. 估算报价 12
7. 联系我们 13
五、 网页特效 14
（一） JavaScript特效实现 14
六、 总结 15
致谢 16
参考文献 16
引言
住宅装饰装修行业是一个既古老传统又新兴现代的朝阳产业。现代住宅装饰专修已经成为一种时尚、一种追求、一种文化、一种艺术。住宅装饰装修潜力巨大，有市场、有机遇、有潜力、有希望。由于计算机网络技术的广泛应用以及人们对网络技术的依赖性以及能更好的适应时代潮流，故开发本网站。本网站使用HTML+CSS设计页面，使用JavaScript制作特效，使网站更加可视化。
开发工具与技术
*好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
1.Photoshop
利用Adobe Photoshop软件设计了该网站的LOGO，灰色调与银色调相协调，勾勒出一份淡雅温馨的氛围。同时，也利用PS设计了该网站的导航栏以及对经典工程页面的图片的处理。PS的使用使整个页面显得更加的美观，给浏览者一视觉上的享受。
2.Sublime Text
整个网站代码的编写以及CSS样式的设置，都是通过Sublime Text这款代码编辑器来编写。通过该软件将整个网站从构造变成了一个具体、清晰的网页。
网站设计
总体设计
功能结构图绘制
网站有首页、公司介绍、关于设计、经典工程、信息反馈、网上订单、估算报价、联系我们8个模块。
首页主要使用了一个图片轮转和灰色背景的效果。灰色淡雅的背景加上自动轮转精美绝伦的室内装修图，使整个页面显得更加的温馨、舒适。能够吸引浏览者进一步的浏览本网站。在图片轮转上方的导航栏设有公司介绍、关于设计、经典工程、企业顾问、网上订单、留言簿、联系我们等子页，在图片轮转的左方设有空间、风格、户型等工程的详细项目，让浏览者能快速、有效的了解徐州宝泰室内装潢设计有限公司的业务、内容，也为需要的装修的顾客提供了便利。
公司介绍主要是介绍徐州宝泰室内装潢设计有限公司，让浏览者能很好的了解徐州宝泰室内装潢有限公司。
关于设计主要是介绍了宝泰公司的设计观、怎样和设计师沟通等。经典工程则是宝泰公司根据空间、风格、户型等因素制作成的装修样式。
信息反馈则是方便顾客为宝泰公司提供意见。
网上订单则是让顾客不出家门就可以在网上填写订单、预订时间装修房子，为客户提供更加便捷的服务。
估算报价则是更好的方便顾客对于装修价格的了解，对于自家的装修风格以及装饰品能够有个更好的了解。
联系我们则主要写了宝泰公司的店址、联系电话、传真和EMail，方便顾客找寻、联系公司人员。
网站内容结构图如图31所示：
图31 网站内容结构图
详细设计
LOGO设计
本网站的LOGO设计使用了Photoshop软件，LOGO中有的那个小房子象征着这个公司与家有关，而房门是个B。B是徐州宝泰室内装潢设计有限公司宝的大写首字母，在右侧有“宝泰”二字。图像和文字使用灰色调，背景使用银色调，给人一种淡雅、温馨的感觉。
LOGO效果图如图32所示：
图32 LOGO效果图
导航栏设计
导航栏同样采用银色调，与公司LOGO底色保持一致。并且使用“方正喵呜体”为整个网站增加一些趣味性。使用黑色字体，是导航栏更加的突出、明显。
导航栏效果图如图33所示：
图33导航栏效果图
页面布局设计
首页
首页采用上中下框架结构。在首页的左上方是本网站的LOGO，在同一层次右上方是本网站的宗旨及公司名称。LOGO和网站宗旨、公司名称的背景颜色皆使用银色调，整个头部全部使用的是银色调，与LOGO的背景颜色保持一致，使公司LOGO与其他层次更好的融合在一起。首页布局以简洁为主，给浏览者一种高雅、温馨的感觉。在首页主要内容部分，左侧设有二级导航，右侧则是作品展示，这样能够让浏览者更加便捷、迅速的了解到自己需要的东西。
网站布局图如图34所示：
LOGO
网站宗旨
公司名称
导航栏
主要内容
图片
版权信息
图34网站布局图
子页
子页采用普遍布局，与首页布局相差无几。Header层包括公司logo、公司宗旨以及公司名称，能够让浏览者无论在哪个页面都能了解到该网站的一个宗旨以及公司的名称。子页整体布局仍以温馨、简洁为主，图文结合的方式使浏览者在浏览网站的过程中不会感到枯燥乏味。
子页的具体框架如图35所示：
LOGO
公司宗旨
公司名称
导航栏
主要内容
版权信息
图35 子页具体框架结构图
DIV布局结构
前期的一些准备工作做好之后，下面就开始网站的制作了，在Sublime中用div层来对整个页面进行布局，以达到预期效果的实现。Div+Css层叠样式表设计网页，是对上一步的布局进一步的美化，使其能够得到所需文字样式、大小、粗细、颜色等特殊效果的实现，使网站的内容更加的丰富多彩，而且CSS样式可重复使用，减少代码的冗余。
首页DIV布局采用层套式布局结构，具体DIV结构如图36所示：
图36 首页DIV结构图
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/797.html
