零星家具网站设计与实现(附件)
零星家具网站是以解决消费者的疑虑，能够更加了解家具，充分的辨识家具的风格，使得家居的设计风格能够统一，令消费者回到家中能消除疲倦为目的。分别从家具的发展历程、家具鉴别、家具保养以及家居设计等方面并且穿插了名人对于家具发展的态度，充分的向消费者介绍了家具的不同方面。本网站主要是运用软件Dreamweaver进行HTML代码和CSS的编写，利用Photoshop编辑和美化图片，使得更贴近主题，同时借助了JavaScript增加动态效果，使网站变得更加生动，更好的向消费者展示这个网站，使网站的利用率变高，家具的售卖率也随之增长。
目 录
一、引言 1
二、开发工具与技术 1
三、主要设计内容 1
（一）总体设计 1
1、功能结构图 1
2、网页设计 2
3、首页Div的结构和层样式 2
4、子页Div的结构和层样式 4
（二）JavaScript动态效果介绍 4
四、网站设计具体实现 5
（一）Logo设计 5
（二）导航栏的设计 6
（三）网站主页面设计 6
（四）二级子页面设计 6
1、家具分类 6
2、发展历程 6
3、家具保养 8
4、家具鉴别 8
5、联系我们 8
（五）三级子页面设计 10
五、总结 12
致谢 13
参考文献 14
一、引言
在日常生活中并不少见，它是人类文明和生活实践的产物，代表着人类文明的发展和不断的进步，家具也是一种大众艺术。家具的发展也有阶段性，不同时期的家具风格显示出家具文化的不同特征。从古至今，从国内到国外，无一不体现出这一观点。然而现代社会的人们缺少这种追溯的理念，对家具风格的理念并不是特别清晰。因此设计此网站，从家具分类、家具的发展历程、家具的鉴别等方面能够让消费者在闲暇时浏览，能更清晰的了解自己的需求，与自身的喜好和风格相融合，利用相应的家具布置出自己满意的家居风格。消费者可以从家具保养这一模块简单了解家具保养的要求，联系我们这模块方便消费者填写表格去联系并且解决相 *好棒文|www.hbsrm.com +Q: ￥351916072￥
应的疑问。
本网站的建设主要是基于Dreamweaver编写的HTML与CSS代码，同时还借助了Photoshop与JavaScript，将设计与美化好的图片以动态的效果呈现在大众的眼前。
二、开发工具与技术
零星家具网站主要是向大众简单介绍家具的发展的历程以及家具种类，挑选方式和保养方法，期间穿插图片展示，所以以静态网站的方式的呈现。
在整个网页的设计过程中，主要运用了Dreamweaver和Photoshop这两个软件。Dreamweaver是现在开发的广泛使用的工具，在编辑代码时方便快捷，减少了代码与浏览器之前的频繁切换。不管是编辑HTML代码还是CSS代码时，只要打出代码首字母就能看到相应的提示，减少了代码编辑错误率。Photoshop这个软件的功能主要是图片处理，网站中的logo以及展示的图片上的水印和格式都是通过它的处理。
还有网站内的动态图片都是得益于JavaScript语言的辅助。在网页的HTML代码中引用JavaScript脚本，充分的展示了网站的动态的效果。
三、主要设计内容
（一）总体设计
1、功能结构图
本网站内容主要是简单的介绍家具。网站的整体规划一共包括31个页面（包括主页在内），网站主要以白灰色，绿色，黑色为主，上方导航栏为绿色，中间内容部分为白灰色底纹，下方版权区为黑色，色彩分明。其导航栏主要分为首页、家具分类、发展历程、家具保养、家具鉴别、联系我们这几个功能模块。其功能结构图如31所示
图31 功能结构图
2、网页设计
首页是浏览者见到的第一个网页，其也是奠定了浏览者的第一印象。首页的内容由家居设计，家居饰品，家具材料热点等方面简单的介绍了家具的相关方面，人物专栏主要是名人的一些看法，给浏览者一些有关家具的知识普及。其间穿插了图片，使得成为一个整体，更好的给浏览者参考。网站首页的框架使用DIV+CSS的布局方式来设计，首页大体框架如图32所示：
导航栏
Logo
搜索栏
Flash横幅
家具介绍
内容
内容
任务专栏
友情链接
图片
版权区
图32 首页框架图
首页布局中的导航、logo、横幅以及版权所有去都是固定的位置，其他内容分为两栏。使得界面构图简单整齐，给人一目了然的感觉。
子页沿用了首页的导航、logo、横幅以及版权，内容分为一栏以及两栏的格式，同样给人清晰的感觉。子页框架图如图33所示：
导航栏
logo
搜索栏
flash横幅
内容
友情链接
图片
版权区
图33 子页布局图
3、首页Div的结构和层样式
首页的div分层并不复杂，清晰可见，一目了然。具体分布如图34所示：
图34 首页div结构图
Div代码如下：
层式代码如下：
4、子页Div的结构和层样式
子页的布局比起首页来说相对更简单一点，大致结构如图35所示：
图35 子页1div结构图
Div代码如下：
目 录
一、引言 1
二、开发工具与技术 1
三、主要设计内容 1
（一）总体设计 1
1、功能结构图 1
2、网页设计 2
3、首页Div的结构和层样式 2
4、子页Div的结构和层样式 4
（二）JavaScript动态效果介绍 4
四、网站设计具体实现 5
（一）Logo设计 5
（二）导航栏的设计 6
（三）网站主页面设计 6
（四）二级子页面设计 6
1、家具分类 6
2、发展历程 6
3、家具保养 8
4、家具鉴别 8
5、联系我们 8
（五）三级子页面设计 10
五、总结 12
致谢 13
参考文献 14
一、引言
在日常生活中并不少见，它是人类文明和生活实践的产物，代表着人类文明的发展和不断的进步，家具也是一种大众艺术。家具的发展也有阶段性，不同时期的家具风格显示出家具文化的不同特征。从古至今，从国内到国外，无一不体现出这一观点。然而现代社会的人们缺少这种追溯的理念，对家具风格的理念并不是特别清晰。因此设计此网站，从家具分类、家具的发展历程、家具的鉴别等方面能够让消费者在闲暇时浏览，能更清晰的了解自己的需求，与自身的喜好和风格相融合，利用相应的家具布置出自己满意的家居风格。消费者可以从家具保养这一模块简单了解家具保养的要求，联系我们这模块方便消费者填写表格去联系并且解决相 *好棒文|www.hbsrm.com +Q: ￥351916072￥
应的疑问。
本网站的建设主要是基于Dreamweaver编写的HTML与CSS代码，同时还借助了Photoshop与JavaScript，将设计与美化好的图片以动态的效果呈现在大众的眼前。
二、开发工具与技术
零星家具网站主要是向大众简单介绍家具的发展的历程以及家具种类，挑选方式和保养方法，期间穿插图片展示，所以以静态网站的方式的呈现。
在整个网页的设计过程中，主要运用了Dreamweaver和Photoshop这两个软件。Dreamweaver是现在开发的广泛使用的工具，在编辑代码时方便快捷，减少了代码与浏览器之前的频繁切换。不管是编辑HTML代码还是CSS代码时，只要打出代码首字母就能看到相应的提示，减少了代码编辑错误率。Photoshop这个软件的功能主要是图片处理，网站中的logo以及展示的图片上的水印和格式都是通过它的处理。
还有网站内的动态图片都是得益于JavaScript语言的辅助。在网页的HTML代码中引用JavaScript脚本，充分的展示了网站的动态的效果。
三、主要设计内容
（一）总体设计
1、功能结构图
本网站内容主要是简单的介绍家具。网站的整体规划一共包括31个页面（包括主页在内），网站主要以白灰色，绿色，黑色为主，上方导航栏为绿色，中间内容部分为白灰色底纹，下方版权区为黑色，色彩分明。其导航栏主要分为首页、家具分类、发展历程、家具保养、家具鉴别、联系我们这几个功能模块。其功能结构图如31所示
图31 功能结构图
2、网页设计
首页是浏览者见到的第一个网页，其也是奠定了浏览者的第一印象。首页的内容由家居设计，家居饰品，家具材料热点等方面简单的介绍了家具的相关方面，人物专栏主要是名人的一些看法，给浏览者一些有关家具的知识普及。其间穿插了图片，使得成为一个整体，更好的给浏览者参考。网站首页的框架使用DIV+CSS的布局方式来设计，首页大体框架如图32所示：
导航栏
Logo
搜索栏
Flash横幅
家具介绍
内容
内容
任务专栏
友情链接
图片
版权区
图32 首页框架图
首页布局中的导航、logo、横幅以及版权所有去都是固定的位置，其他内容分为两栏。使得界面构图简单整齐，给人一目了然的感觉。
子页沿用了首页的导航、logo、横幅以及版权，内容分为一栏以及两栏的格式，同样给人清晰的感觉。子页框架图如图33所示：
导航栏
logo
搜索栏
flash横幅
内容
友情链接
图片
版权区
图33 子页布局图
3、首页Div的结构和层样式
首页的div分层并不复杂，清晰可见，一目了然。具体分布如图34所示：
图34 首页div结构图
Div代码如下：
层式代码如下：
4、子页Div的结构和层样式
子页的布局比起首页来说相对更简单一点，大致结构如图35所示：
图35 子页1div结构图
Div代码如下：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/1188.html
