HTML+CSS百安居装饰网站设计
目 录
一、 言引 1
二、 分析概况 1
三、设计开发工具 2
四、网站主题设计内容 2
（一） 网站开发设计模式流程 2
1． 结构图绘制 2
2． 界面设计 3
3． DIV+CSS的布局 4
4． 首页的div结构和层样式 4
5． 子页的div结构和层样式 5
（二） 网站基本功能 6
1． 首页 6
2． 公司简介 7
3． 案例中心 8
4． 新闻中心 8
5． 服务流程 9
6． 加盟我们 10
7． 在线留言 10
8． 人才招聘 11
9． 联系我们 11
（三）JavaScript实现 11
1. Flash动画实现 12
2. 实现代码如下 12
五、总结 14
致谢 15
参考文献 15
言引
本站采用了DIV+CSS布局的方法去实现了一个装饰网站的构建,使用DIV+CSS布局的网站兼容性高、维护容易，它已经成为主流的网站布局方法了。
现今社会中的企业还是传统商务方法为主的商业模式，企业建立网站、开展电子商务模式是一个不能够回避的现实状况。随着电子商务经济、经济全球化时代的到来，企业如果还死守传统商务模式，必定不能够适应经济全球化这个大趋势，许许多多的企业就是因为当前运行状况还算良好，没意识到会正在面临因不适应经济发展大环境而将被淘汰出局的危机。当竞争对手通过因特网分享了信息、通过电子商务降低了成本并且拓展了销售渠道时，你却只能够错失良机。 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
本装饰网站正是在这种时代的大背景下应运而生的。
分析概况
现今社会中的企业还是传统商务方法为主的商业模式，企业建立网站、开展电子商务模式是一个不能够回避的现实状况。随着电子商务经济、经济全球化时代的到来，企业如果还死守传统商务模式，必定不能够适应经济全球化这个大趋势，许许多多的企业就是因为当前运行状况还算良好，没意识到会正在面临因不适应经济发展大环境而将被淘汰出局的危机。当竞争对手通过 因特网分享了信息、通过电子商务降低了成本并且拓展了销售渠道时，你却只能够错失良机。很多的人和企业都希望在国际互联网上占有一席宝地。
三、设计开发工具
正确的选择网站开发工具是非常重要的。本网站用到了Dreamweaver、记事本、Photoshop等软件来实现百安居企业网站的设计，通过JavaScript和Flash来实现网站的特效设计。网站通过Dreamweaver来实现布局，Dreamweaver的优点主要有：最佳制作效率、网站管理、无可比拟的控制能力，而这些优点也正符合网站设计制作的种种要求。Photoshop主要是用来设计修饰图片的软件，从功能上看，Photoshop分为图像的合成和编辑、校色调色、特效制作部分。在Photoshop界面中，图像编辑是图像处理的基础，可以对图像做各种变化，像图像的放大、缩小、倾斜、镜像、旋转、透视等等。也可以对图像进行复制、祛除斑点、修补、修饰图像的残损等。Dreamweaver和Photoshop的配合使用制作出来的网站能够满足各方面的要求即集美观性和实用性于一体。
四、网站主题设计内容
网站开发设计模式流程
结构图绘制
网站分为网站首页、公司简介、案例中心、新闻中心、服务流程、加盟我们、在线留言7大模块，每一个模块都进行了仔细的编辑和排版。模块中除了有文字介绍，还有相当一部分的精美图片供网站浏览者欣赏。详细结构如4-1所示
图4-1网站结构图
各个网页的主要内容：网站首页是每一个网站浏览者进入网站的首个浏览的网页，本站采用了比较柔和的色调建立网站，让浏览者不会有视觉疲劳的感觉。公司简介这一模块主要是为网页浏览者提供企业的部分信息，以期让浏览者了解百安居是一个什么样的企业；案例中心这一模块主要是向浏览者展示了企业的一些出色的设计成果；新闻中心，主要是一个对外公布企业实际状况的一个模块，让外部的人也能够了解公司的动态发展；服务流程是一个包含公司一整套为客户提供服务的模块；加盟我们则是一个对外招商的一个模块；最后一个是在线留言，这个模块是为了欢迎广大新老顾客给公司提出意见和建议而特别设计的一个模块。这7个模块相辅相成，实现了将百安居这个企业全方位展现在浏览者面前。
界面设计
利用Photoshop将网站的基本架构设计出来，同时运用DIV+CSS进行布局，加入HTML代码设计出整个企业网站的排布形式。具体结构框架设计如图4-2和图4-3所示
Logo 公司名称
导航
装修案例
公司简介
形象展示
联系我们
案例展示
版权
图4-2首页布局
首页布局主要是以简介大方一目了然为基础进行设计的，让浏览者能够一目了然。整体上采用了标准规格的三字型，浏览者可以一眼就看到企业网站首页的主要内容，不会让浏览者感觉很乱而产生不耐烦心理。首页主要让浏览者能够大概了解公司及公司相关产品的展出。
子页结构框架图如图4-3所示
Logo 公司名称
导航
装修案例
公司简介
联系我们
版权
图4-3子页布局
子页采用的也是三字型布局方式，主要是为那些想进一步了解企业的浏览者提供进一步了解的空间，子页采用图文相结合的方式来设计的，让人不会产生枯燥无味之感。装修案例是采用链接的方式设计的，点击自己感兴趣的标题就可以直接跳转到自己想要去了解的模块，让人感觉很方便，不用回头重新找。
DIV+CSS的布局
前期的准备工作做好了，下面就要正式进入网站的制作阶段了。在Dreamweaver中需要用DIV层来对整个网页进行布局。DIV+CSS是层叠样式表，是对上一步的布局更加美化，可以得到所需要的文字大小、颜色、粗细、下划线等效果，使网站拥有丰富的样式，而且样式可以重复使用，这样就使得代码简单、不冗余，不繁杂。
实现内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。HTML文件代码精简，打开更快，这个是DIV+CSS技术最显著的特点，也是CSS存在的根源，是完全颠覆现在传统网页设计的技术。只需要用DIV层套层就可以实现以往表格套表格所有的效果，这样的结果就是使用DIV+CSS技术，让生成的网页文件大小更精简。
nav
一、 言引 1
二、 分析概况 1
三、设计开发工具 2
四、网站主题设计内容 2
（一） 网站开发设计模式流程 2
1． 结构图绘制 2
2． 界面设计 3
3． DIV+CSS的布局 4
4． 首页的div结构和层样式 4
5． 子页的div结构和层样式 5
（二） 网站基本功能 6
1． 首页 6
2． 公司简介 7
3． 案例中心 8
4． 新闻中心 8
5． 服务流程 9
6． 加盟我们 10
7． 在线留言 10
8． 人才招聘 11
9． 联系我们 11
（三）JavaScript实现 11
1. Flash动画实现 12
2. 实现代码如下 12
五、总结 14
致谢 15
参考文献 15
言引
本站采用了DIV+CSS布局的方法去实现了一个装饰网站的构建,使用DIV+CSS布局的网站兼容性高、维护容易，它已经成为主流的网站布局方法了。
现今社会中的企业还是传统商务方法为主的商业模式，企业建立网站、开展电子商务模式是一个不能够回避的现实状况。随着电子商务经济、经济全球化时代的到来，企业如果还死守传统商务模式，必定不能够适应经济全球化这个大趋势，许许多多的企业就是因为当前运行状况还算良好，没意识到会正在面临因不适应经济发展大环境而将被淘汰出局的危机。当竞争对手通过因特网分享了信息、通过电子商务降低了成本并且拓展了销售渠道时，你却只能够错失良机。 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
本装饰网站正是在这种时代的大背景下应运而生的。
分析概况
现今社会中的企业还是传统商务方法为主的商业模式，企业建立网站、开展电子商务模式是一个不能够回避的现实状况。随着电子商务经济、经济全球化时代的到来，企业如果还死守传统商务模式，必定不能够适应经济全球化这个大趋势，许许多多的企业就是因为当前运行状况还算良好，没意识到会正在面临因不适应经济发展大环境而将被淘汰出局的危机。当竞争对手通过 因特网分享了信息、通过电子商务降低了成本并且拓展了销售渠道时，你却只能够错失良机。很多的人和企业都希望在国际互联网上占有一席宝地。
三、设计开发工具
正确的选择网站开发工具是非常重要的。本网站用到了Dreamweaver、记事本、Photoshop等软件来实现百安居企业网站的设计，通过JavaScript和Flash来实现网站的特效设计。网站通过Dreamweaver来实现布局，Dreamweaver的优点主要有：最佳制作效率、网站管理、无可比拟的控制能力，而这些优点也正符合网站设计制作的种种要求。Photoshop主要是用来设计修饰图片的软件，从功能上看，Photoshop分为图像的合成和编辑、校色调色、特效制作部分。在Photoshop界面中，图像编辑是图像处理的基础，可以对图像做各种变化，像图像的放大、缩小、倾斜、镜像、旋转、透视等等。也可以对图像进行复制、祛除斑点、修补、修饰图像的残损等。Dreamweaver和Photoshop的配合使用制作出来的网站能够满足各方面的要求即集美观性和实用性于一体。
四、网站主题设计内容
网站开发设计模式流程
结构图绘制
网站分为网站首页、公司简介、案例中心、新闻中心、服务流程、加盟我们、在线留言7大模块，每一个模块都进行了仔细的编辑和排版。模块中除了有文字介绍，还有相当一部分的精美图片供网站浏览者欣赏。详细结构如4-1所示
图4-1网站结构图
各个网页的主要内容：网站首页是每一个网站浏览者进入网站的首个浏览的网页，本站采用了比较柔和的色调建立网站，让浏览者不会有视觉疲劳的感觉。公司简介这一模块主要是为网页浏览者提供企业的部分信息，以期让浏览者了解百安居是一个什么样的企业；案例中心这一模块主要是向浏览者展示了企业的一些出色的设计成果；新闻中心，主要是一个对外公布企业实际状况的一个模块，让外部的人也能够了解公司的动态发展；服务流程是一个包含公司一整套为客户提供服务的模块；加盟我们则是一个对外招商的一个模块；最后一个是在线留言，这个模块是为了欢迎广大新老顾客给公司提出意见和建议而特别设计的一个模块。这7个模块相辅相成，实现了将百安居这个企业全方位展现在浏览者面前。
界面设计
利用Photoshop将网站的基本架构设计出来，同时运用DIV+CSS进行布局，加入HTML代码设计出整个企业网站的排布形式。具体结构框架设计如图4-2和图4-3所示
Logo 公司名称
导航
装修案例
公司简介
形象展示
联系我们
案例展示
版权
图4-2首页布局
首页布局主要是以简介大方一目了然为基础进行设计的，让浏览者能够一目了然。整体上采用了标准规格的三字型，浏览者可以一眼就看到企业网站首页的主要内容，不会让浏览者感觉很乱而产生不耐烦心理。首页主要让浏览者能够大概了解公司及公司相关产品的展出。
子页结构框架图如图4-3所示
Logo 公司名称
导航
装修案例
公司简介
联系我们
版权
图4-3子页布局
子页采用的也是三字型布局方式，主要是为那些想进一步了解企业的浏览者提供进一步了解的空间，子页采用图文相结合的方式来设计的，让人不会产生枯燥无味之感。装修案例是采用链接的方式设计的，点击自己感兴趣的标题就可以直接跳转到自己想要去了解的模块，让人感觉很方便，不用回头重新找。
DIV+CSS的布局
前期的准备工作做好了，下面就要正式进入网站的制作阶段了。在Dreamweaver中需要用DIV层来对整个网页进行布局。DIV+CSS是层叠样式表，是对上一步的布局更加美化，可以得到所需要的文字大小、颜色、粗细、下划线等效果，使网站拥有丰富的样式，而且样式可以重复使用，这样就使得代码简单、不冗余，不繁杂。
实现内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。HTML文件代码精简，打开更快，这个是DIV+CSS技术最显著的特点，也是CSS存在的根源，是完全颠覆现在传统网页设计的技术。只需要用DIV层套层就可以实现以往表格套表格所有的效果，这样的结果就是使用DIV+CSS技术，让生成的网页文件大小更精简。
nav
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1803.html
