木子礼家居网站的设计与实现
本课题完成的是木子礼家居网站的设计与实现，以网站的方式来宣传木子礼家居公司，展示公司商品，企业文化，增加其产品的销售渠道和产品的推广度。网站的设计图具体实现使用Photoshop软件，在借鉴相关家居网站设计风格的基础上，融入木子礼家居公司的文化特色，以及当下流行的设计风格，设计出网页的具体效果；运用Dreamweaver网站编辑软件，实现HTML和CSS的代码编写，运用JavaScript添加网页特效，增加网站的整体效果；最终进行三大主流浏览器的兼容性测试。实现的网站将进一步方便顾客对公司的产品，销售及服务的了解，能够极大地拓展顾客渠道。本文从网站界面设计，CSS布局，JavaScript网页特效,网站兼容性测试等方面进行详细的阐述。
目 录
一、 引言 1
（一） 课题背景 1
（二） 课题目标 1
二、 网站的需求分析 1
三、 网站开发工具的介绍 1
（一） Photoshop软件介绍 1
（二） Dreamweaver软件介绍 1
（三） 开发语言介绍 1
1.HTML 1
2.CSS 1
3.JavaScript 2
四、 网站的界面设计 2
（一） LOGO设计 2
1.公司文化特色 2
2.创意理念 2
（二） 首页效果设计 2
1. 品牌联合的设计 2
2. 了解更多，关注微博的设计 3
（三） 子页效果设计 3
1. 个人中心的设计 3
2. 查看详情的设计 4
五、 网站的具体实现 4
（一） 首页的实现 4
（二） 子页的实现 6
1. 注册 6
2. 登录 6
3. 展示 7
4. 设计团队 7
5. 装修百科 8
6. 关于我们 8
7. 意见反馈 9
（三） 特效的实现 10
1. 首页返回顶部的实现 10
2. 个人中心订单管理弹跳框的实现 10<
*好棒文|www.hbsrm.com +Q: &351916072&
br /> 六、 网站的兼容性测试 11
（一） IE浏览器测试 11
（二） 火狐浏览器 11
（三） 谷歌浏览器 11
七、 总结 12
参考文献 14
附录 15
引言
课题背景
随着时代的发展，互联网的日新月异的改革，大众通过网站了解各行各业已经成为生活中必不可缺的一部分，与此同时网站建设技术也在日益更新。各大电商、企业通过门户网站介绍公司文化、企业产品。木子礼家居网站的设计与实现，它是一个宣传、介绍家居产业和文化的网站。通过该网站，用户可以了解家居公司的产品、并对产品进行咨询和购买。
课题目标
本网站的设计将木子礼家居公司的文化特色融入了其公司的产品之中，同时公司网站的设计也会为了方便顾客而采取相对应的咨询服务，从而使公司产品的销售量获得提高。
网站的需求分析
以传统方式推广将耗费大量的人力和财力，而且过多的传单的宣传造成资源浪费，不仅是公司财力的浪费以及对纸张的浪费，而且传单所传递的信息量是有限的，顾客看过接到传单看过以后，如果未保存，下次想了解也无从获取，而网络网站宣传，存在一定的持久性，并且信息足够全面，减少资源浪费。所以以目前状况，本网站的设计与开发有着迫切的需求。
网站开发工具的介绍
Photoshop软件介绍
Photoshop主要处理像素所构成的数字图像，可以分为图像编辑、图像合成、校色调色及功能色效制作部分等功能。Photoshop则是对图像有着很强大的处理功能的，网页图片的美化是直接影响客户的好感的。利用Photoshop是可以对网页图片进行很好的处理，会让客户产生好感，促进销售。
Dreamweaver软件介绍
Dreamweaver是创建和管理网页的专业化可视编辑器。使用网站的图片可以快速制作网站的雏形、设计、更新和重组网页。改变网页的位置或者档案的名称，Dreamweaver则会自动更新所有的链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜索和置换功能让复杂的网站更新从而变得既迅速又简单。
开发语言介绍
1.HTML
HTML功能强大，支持不同数据格式的文件镶入。主要特点就是可以建立文本与图片相互结合的错综复杂的页面，而且这些所建立的页面都可以被网上任何其他人浏览，无论使用的是什么类型的电脑或浏览器。
2.CSS
CSS主要负责格式化信息，全称Cascading Style Sheet，层叠样式表。它的作用就是控制HTML页面的布局和外观的样式，能够非常灵活地并且更好地控制页面外观。
3.JavaScript
可以让网站更富有鲜明的色彩，动态效果也会更为明显。让客户在文字与图片的审美疲劳中，感觉到耳目一新，别具一格的视觉效果。木子礼家居网站也考虑到了这一点，在图片切换、图片滚动中展现了此效果。其主要特点便是可以嵌入动态文本于HTML页面当中。
网站的界面设计
LOGO设计
1.公司文化特色
公司以“绿色环保，健康消费”的核心理念，通过提高产品的环保标准，从而得到广大消费者的信赖与支持。本公司采用环保材质，为客户提供与众不同，别具一格的产品，为客户制造家的感觉，营造家的氛围。除此之外，公司的创建成立设计主要是让公司产品送到客户手中，可以让客户觉得就像是收到礼物一般开心。
2.创意理念
绿色突显出企业名字，突显了绿色环保的概念。整体设计以大气简单风格为主要的设计风格。实现效果如下图41所示。
图41 logo效果图
首页效果设计
品牌联合的设计
一个网站需要有自己独特的品牌，本网站有着许多联合的商家，点开品牌联合的更多可以展示许多合作商家品牌，而每个商家品牌则连接着不同风格的网站。在有网络的情况下，就可以连接到外网，查看相关商家品牌网站的相关信息，如图42所示。
图42 品牌联合效果图
了解更多，关注微博的设计
好的网站不光需要好的设计，好的产品，还需要好的口碑，好的服务。本网站可以链接到微博。众所周知，微博已然成为群众关注消息的重要途径之一。无论好的消息，还是坏的事件，只要通过刷刷微博就可以看到。所以本网站可以链接到微博，方便客户更好的浏览，查看，对比和选择，如图43所示。
图43 了解更多，关注微博效果图
子页效果设计
目 录
一、 引言 1
（一） 课题背景 1
（二） 课题目标 1
二、 网站的需求分析 1
三、 网站开发工具的介绍 1
（一） Photoshop软件介绍 1
（二） Dreamweaver软件介绍 1
（三） 开发语言介绍 1
1.HTML 1
2.CSS 1
3.JavaScript 2
四、 网站的界面设计 2
（一） LOGO设计 2
1.公司文化特色 2
2.创意理念 2
（二） 首页效果设计 2
1. 品牌联合的设计 2
2. 了解更多，关注微博的设计 3
（三） 子页效果设计 3
1. 个人中心的设计 3
2. 查看详情的设计 4
五、 网站的具体实现 4
（一） 首页的实现 4
（二） 子页的实现 6
1. 注册 6
2. 登录 6
3. 展示 7
4. 设计团队 7
5. 装修百科 8
6. 关于我们 8
7. 意见反馈 9
（三） 特效的实现 10
1. 首页返回顶部的实现 10
2. 个人中心订单管理弹跳框的实现 10<
*好棒文|www.hbsrm.com +Q: &351916072&
br /> 六、 网站的兼容性测试 11
（一） IE浏览器测试 11
（二） 火狐浏览器 11
（三） 谷歌浏览器 11
七、 总结 12
参考文献 14
附录 15
引言
课题背景
随着时代的发展，互联网的日新月异的改革，大众通过网站了解各行各业已经成为生活中必不可缺的一部分，与此同时网站建设技术也在日益更新。各大电商、企业通过门户网站介绍公司文化、企业产品。木子礼家居网站的设计与实现，它是一个宣传、介绍家居产业和文化的网站。通过该网站，用户可以了解家居公司的产品、并对产品进行咨询和购买。
课题目标
本网站的设计将木子礼家居公司的文化特色融入了其公司的产品之中，同时公司网站的设计也会为了方便顾客而采取相对应的咨询服务，从而使公司产品的销售量获得提高。
网站的需求分析
以传统方式推广将耗费大量的人力和财力，而且过多的传单的宣传造成资源浪费，不仅是公司财力的浪费以及对纸张的浪费，而且传单所传递的信息量是有限的，顾客看过接到传单看过以后，如果未保存，下次想了解也无从获取，而网络网站宣传，存在一定的持久性，并且信息足够全面，减少资源浪费。所以以目前状况，本网站的设计与开发有着迫切的需求。
网站开发工具的介绍
Photoshop软件介绍
Photoshop主要处理像素所构成的数字图像，可以分为图像编辑、图像合成、校色调色及功能色效制作部分等功能。Photoshop则是对图像有着很强大的处理功能的，网页图片的美化是直接影响客户的好感的。利用Photoshop是可以对网页图片进行很好的处理，会让客户产生好感，促进销售。
Dreamweaver软件介绍
Dreamweaver是创建和管理网页的专业化可视编辑器。使用网站的图片可以快速制作网站的雏形、设计、更新和重组网页。改变网页的位置或者档案的名称，Dreamweaver则会自动更新所有的链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜索和置换功能让复杂的网站更新从而变得既迅速又简单。
开发语言介绍
1.HTML
HTML功能强大，支持不同数据格式的文件镶入。主要特点就是可以建立文本与图片相互结合的错综复杂的页面，而且这些所建立的页面都可以被网上任何其他人浏览，无论使用的是什么类型的电脑或浏览器。
2.CSS
CSS主要负责格式化信息，全称Cascading Style Sheet，层叠样式表。它的作用就是控制HTML页面的布局和外观的样式，能够非常灵活地并且更好地控制页面外观。
3.JavaScript
可以让网站更富有鲜明的色彩，动态效果也会更为明显。让客户在文字与图片的审美疲劳中，感觉到耳目一新，别具一格的视觉效果。木子礼家居网站也考虑到了这一点，在图片切换、图片滚动中展现了此效果。其主要特点便是可以嵌入动态文本于HTML页面当中。
网站的界面设计
LOGO设计
1.公司文化特色
公司以“绿色环保，健康消费”的核心理念，通过提高产品的环保标准，从而得到广大消费者的信赖与支持。本公司采用环保材质，为客户提供与众不同，别具一格的产品，为客户制造家的感觉，营造家的氛围。除此之外，公司的创建成立设计主要是让公司产品送到客户手中，可以让客户觉得就像是收到礼物一般开心。
2.创意理念
绿色突显出企业名字，突显了绿色环保的概念。整体设计以大气简单风格为主要的设计风格。实现效果如下图41所示。
图41 logo效果图
首页效果设计
品牌联合的设计
一个网站需要有自己独特的品牌，本网站有着许多联合的商家，点开品牌联合的更多可以展示许多合作商家品牌，而每个商家品牌则连接着不同风格的网站。在有网络的情况下，就可以连接到外网，查看相关商家品牌网站的相关信息，如图42所示。
图42 品牌联合效果图
了解更多，关注微博的设计
好的网站不光需要好的设计，好的产品，还需要好的口碑，好的服务。本网站可以链接到微博。众所周知，微博已然成为群众关注消息的重要途径之一。无论好的消息，还是坏的事件，只要通过刷刷微博就可以看到。所以本网站可以链接到微博，方便客户更好的浏览，查看，对比和选择，如图43所示。
图43 了解更多，关注微博效果图
子页效果设计
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/667.html
