青川特产网站的设计与实现
本课题完成了青川特产网站的建设，设计青川特产网站是为给该公司通过网络，更好的方便顾客了解青川绿色无公害特产，提高产品销量，加强对品牌与质量的拓宽，实现网络销售为最终的目的。在网站的制作过程中使用Photoshop软件，融入青川特产公司的文化特色，以及参考已有网站的设计格局，制作出初步网页的效果图；使用Dremweaver软件，基于HTML和CSS对网站代码进行编写，编写好的代码通过W3C测试；使用JavaScript实现网页的动态效果；完成后的网站在主流浏览器上进行兼容性测试。本文从网站界面设计、JavaScript网页特效、CSS布局、和网站兼容性测试等多方面进行详细阐述。
目 录
一、引言 1
（一）课题研究背景 1
（二）课题研究的目的与意义 1
二、网站的需求分析 1
三、网站开发的技术与工具介绍 1
（一）开发工具 1
1.Photoshop 1
2.Dreamweaver 2
（二）开发技术 2
1.HTML 2
2.CSS 2
3.DIV+CSS 2
四、网站内容结构 2
五、网站内容结构 3
（一）页面色彩搭配 3
（二）页面布局 3
（三）LOGO设计 3
1.创意来源 3
2.具体效果 4
（四）导航栏设计 4
（五）首页效果的设计 5
（六）首页代码实现 6
（七）网站部分子页页面的设计与实现 7
1.青川菌菇页面设计与实现 7
2.招商合作页面设计与实现 8
3.山核桃花详细介绍网页设计与实现 8
4.青川特产成就设计与实现 9
5.青川蜂蜜页面展示 10
6.青川竹荪页面展示 11
六、网站特效 11
七、网站的兼容性测试 12
八、总结 13
致谢 14
参考文献 15
附录 16
一、引言
（一）课题研究背景
*好棒文|www.hbsrm.com +Q: ^351916072#
Internet网络的崛起日益迅速，提供收集信息并逐步进入传统的网络领域已成为互联网的最佳专属渠道。由此开发网站来介绍公司产品以及公司基本情况的方式盛行开来，现代大多数公司通过网站向消费者展示出一种便捷有效的浏览方式，将自己的产品展现个广大消费者。本购物网站实现了当前产品网站的基本功能。因人们收入逐渐增加，对食品的要求也越来越高，大多数人们逐渐爱上绿色无公害的山区食品。网上购物的出现给人们生活带来便利，也更加的普遍。这使许多公司都建立网站来宣传自己的产品。
（二）课题研究的目的与意义
本课题在设计过程，对青川特产公司现状做了详细调查后，设计出能够满足青川特产有限公司的实际需要的网站。在设计实施后，青川特产有限公司的运营过程中，可以通过对网站的管理来展示公司生产经营各环节的流程的情况，提高公司的知名度，从而大大增加客户对公司产品的了解。达到提高青川特产有限公司的竞争力的目的。通过对青川特产有限公司网站的设计与实施也对当今社会的信息化起到了有力的推动作用。
二、网站的需求分析
对于特产，本就属于地方性较强，而不被大多数人了解或者知道，只能通过口口相传，来提高自己的知名度，不用说竞争力，连在市场的占有率都比较弱，只能在地方的实体店进行竞争，但是地方竞争力有较强的，如果在地方进行实体店的扩张，并没有多好的优势，但是，通过网络，观察网络市场，网络市场竞争相对较好，通过网站对青川的特产进行展示和宣传，不仅仅能够让更多的了知道了解青川特产，更加的可以带动青川特产的销售途径以及销量，让更多的人熟知，从而可以拓宽青川特产的销售市场。
进行对特产的需求分析：通过此网站主要希望可以达到以下几个目的：（1）通过网站宣传青川特产（2）提高青川特产的知名度以及人们对青川特产的认知（3）运用网络的发展，来减少青川特产的宣传费用（4）通过网站展示提高青川特产的销售额度。
三、网站开发的技术与工具介绍
青川特产网站的功能主要是介绍青川特产的产品，以及各类产品的详细介绍，依据对网站模块的分析，该网站主要的作用是宣传青川特产产品，所以设计此网站为静态网站。青川特产网站的设计主要运用Photoshop、Dreamweaver两个开发软件，以及HTML、css、div+css开发技术，下面将进行介绍这两个部分：
（一）开发工具
1.Photoshop
Photoshop软件，是较为普遍的图片处理软件。Photoshop图片、图像以及文字相关的工作内容所广泛使Photoshop软件，其主要是对图片的处理作用，在青川特产网站的设计中，主要运用Photoshop软件的各项图像编辑功能，处理网站中所需要的一些图片。
2.Dreamweaver
Dreamweaver软件，是应用较为广泛网页制作和管理网站的网页编辑器。在开发青川特产网站时，通常主要运Dreamweaver软件进行网站代码的编写，在运用此软件进行编辑时可直观的看见所编写页面的效果，也可以很快找出所写代码问题所在。
（二）开发技术
1.HTML
HTML是为超文本标记语言，是标准通用标记的语言下面的一个应用。可以包含链接、图片，也包括音乐、程序等一些不是文字元素的一些元素，并且将这些元素链接在一起。青川特产网站开发的过程中就是运用HTML编写的超文本标记语言来设计与实现的。
2.CSS
CSS是翻译为层叠样式表，其是用来配合HTML的实现网站的网页样式的多样性的计算机语言，主要就是控制HTML的页面的布局与外观的样式，在青川特产网站的设计过程中，就运用了CSS的一些样式来实现网页的各个页面所需要的效果样式。
3.DIV+CSS
CSS网页布局中的方法，是WEB设计的标准，其可以实现网页的所有写的页面内容与网页的表现相分离的效果。DIV，在日常编写是称其名为盒子。其是一种可以来表现HTML样式多样化的计算机语言。
四、网站内容结构
青川特产网站主要是一个来展示与推广青川绿色无污染的特色有机产品的网站，通过各类商品展示，增加客户对公司产品的了解。达到提高青川特产有限公司的知名度的目的。在本网站中从首页、青川菌菇、农家特色、青川调味品、精品礼盒、自由搭配、关于我们、及登录注册页面展开介绍。如下表41所示：
表41 网站主要栏目介绍
目 录
一、引言 1
（一）课题研究背景 1
（二）课题研究的目的与意义 1
二、网站的需求分析 1
三、网站开发的技术与工具介绍 1
（一）开发工具 1
1.Photoshop 1
2.Dreamweaver 2
（二）开发技术 2
1.HTML 2
2.CSS 2
3.DIV+CSS 2
四、网站内容结构 2
五、网站内容结构 3
（一）页面色彩搭配 3
（二）页面布局 3
（三）LOGO设计 3
1.创意来源 3
2.具体效果 4
（四）导航栏设计 4
（五）首页效果的设计 5
（六）首页代码实现 6
（七）网站部分子页页面的设计与实现 7
1.青川菌菇页面设计与实现 7
2.招商合作页面设计与实现 8
3.山核桃花详细介绍网页设计与实现 8
4.青川特产成就设计与实现 9
5.青川蜂蜜页面展示 10
6.青川竹荪页面展示 11
六、网站特效 11
七、网站的兼容性测试 12
八、总结 13
致谢 14
参考文献 15
附录 16
一、引言
（一）课题研究背景
*好棒文|www.hbsrm.com +Q: ^351916072#
Internet网络的崛起日益迅速，提供收集信息并逐步进入传统的网络领域已成为互联网的最佳专属渠道。由此开发网站来介绍公司产品以及公司基本情况的方式盛行开来，现代大多数公司通过网站向消费者展示出一种便捷有效的浏览方式，将自己的产品展现个广大消费者。本购物网站实现了当前产品网站的基本功能。因人们收入逐渐增加，对食品的要求也越来越高，大多数人们逐渐爱上绿色无公害的山区食品。网上购物的出现给人们生活带来便利，也更加的普遍。这使许多公司都建立网站来宣传自己的产品。
（二）课题研究的目的与意义
本课题在设计过程，对青川特产公司现状做了详细调查后，设计出能够满足青川特产有限公司的实际需要的网站。在设计实施后，青川特产有限公司的运营过程中，可以通过对网站的管理来展示公司生产经营各环节的流程的情况，提高公司的知名度，从而大大增加客户对公司产品的了解。达到提高青川特产有限公司的竞争力的目的。通过对青川特产有限公司网站的设计与实施也对当今社会的信息化起到了有力的推动作用。
二、网站的需求分析
对于特产，本就属于地方性较强，而不被大多数人了解或者知道，只能通过口口相传，来提高自己的知名度，不用说竞争力，连在市场的占有率都比较弱，只能在地方的实体店进行竞争，但是地方竞争力有较强的，如果在地方进行实体店的扩张，并没有多好的优势，但是，通过网络，观察网络市场，网络市场竞争相对较好，通过网站对青川的特产进行展示和宣传，不仅仅能够让更多的了知道了解青川特产，更加的可以带动青川特产的销售途径以及销量，让更多的人熟知，从而可以拓宽青川特产的销售市场。
进行对特产的需求分析：通过此网站主要希望可以达到以下几个目的：（1）通过网站宣传青川特产（2）提高青川特产的知名度以及人们对青川特产的认知（3）运用网络的发展，来减少青川特产的宣传费用（4）通过网站展示提高青川特产的销售额度。
三、网站开发的技术与工具介绍
青川特产网站的功能主要是介绍青川特产的产品，以及各类产品的详细介绍，依据对网站模块的分析，该网站主要的作用是宣传青川特产产品，所以设计此网站为静态网站。青川特产网站的设计主要运用Photoshop、Dreamweaver两个开发软件，以及HTML、css、div+css开发技术，下面将进行介绍这两个部分：
（一）开发工具
1.Photoshop
Photoshop软件，是较为普遍的图片处理软件。Photoshop图片、图像以及文字相关的工作内容所广泛使Photoshop软件，其主要是对图片的处理作用，在青川特产网站的设计中，主要运用Photoshop软件的各项图像编辑功能，处理网站中所需要的一些图片。
2.Dreamweaver
Dreamweaver软件，是应用较为广泛网页制作和管理网站的网页编辑器。在开发青川特产网站时，通常主要运Dreamweaver软件进行网站代码的编写，在运用此软件进行编辑时可直观的看见所编写页面的效果，也可以很快找出所写代码问题所在。
（二）开发技术
1.HTML
HTML是为超文本标记语言，是标准通用标记的语言下面的一个应用。可以包含链接、图片，也包括音乐、程序等一些不是文字元素的一些元素，并且将这些元素链接在一起。青川特产网站开发的过程中就是运用HTML编写的超文本标记语言来设计与实现的。
2.CSS
CSS是翻译为层叠样式表，其是用来配合HTML的实现网站的网页样式的多样性的计算机语言，主要就是控制HTML的页面的布局与外观的样式，在青川特产网站的设计过程中，就运用了CSS的一些样式来实现网页的各个页面所需要的效果样式。
3.DIV+CSS
CSS网页布局中的方法，是WEB设计的标准，其可以实现网页的所有写的页面内容与网页的表现相分离的效果。DIV，在日常编写是称其名为盒子。其是一种可以来表现HTML样式多样化的计算机语言。
四、网站内容结构
青川特产网站主要是一个来展示与推广青川绿色无污染的特色有机产品的网站，通过各类商品展示，增加客户对公司产品的了解。达到提高青川特产有限公司的知名度的目的。在本网站中从首页、青川菌菇、农家特色、青川调味品、精品礼盒、自由搭配、关于我们、及登录注册页面展开介绍。如下表41所示：
表41 网站主要栏目介绍
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/637.html
