怡安大药房网站的设计与实现
本课题完成的是怡安大药房网站的设计与实现，以网络销售的方式来宣传怡安大药房网站，增加其产品的销售渠道。利用Photoshop软件，参考成熟的网站的设计风格，融入药店的特色，初步设计出网站的效果图。使用Dreamweaver网站编辑软件，基于HTML5和CSS对网页进行代码的编写；运用JavaScript添加网页特效，增加网站的整体效果；实现的网站将进一步方便顾客对公司的产品，销售及服务的了解，能极大地拓展客户渠道。最终进行三大主流浏览器的兼容测试。实现的网站将进一步方便顾客对公司的产品，销售及服务的了解，能极大地拓展客户渠道。本文从网站界面设计、CSS布局、JavaScript网页特效和网站兼容性测试等方面进行了详细描述。
目 录
一、引言 1
（一）网站的开发目的 1
（二）网站的需求分析 1
（三）内容简介 1
二、网站开发准备 1
（一）网站开发技术支持 1
（二）网站开发工具的介绍 2
三、网站设计 2
（一）网站主题 2
（二）网站的逻辑结构 3
（三）网站的界面设计 4
四、网站的具体实现 10
（一）首页的实现 10
（二）子页的实现 13
（三）特效的实现 17
五、网站的兼容性测试及应注意的问题 20
（一）网站的兼容性测试 20
（二）应注意的问题 21
六、总结 23
致谢 24
参考文献 25
一、引言
（一）网站的开发目的
随着时代的发展，网络对人们生活的影响日渐显现。它不仅改变着人们的沟通交流，信息收集，娱乐消遣的方式，最重要的还有购物方式。越来越多的人网上购物，电子商务的迅速崛起和发展，也使得更多的商家关注到了电子商务的价值。网络营销不仅可以全方位的展现企业的品牌、精神、文化、品质、地位、特点、价值，同时也为网上联系客户创造有效平台，其最终目的是以最少的投入获得最大的收益和利润。具体表现在它能够为公司树立全新形象，为产品起到扩大宣传的作用；提供最新的企业信息，使客户获取信息更快捷；企业收集反
*好棒文|www.hbsrm.com +Q: ￥351916072￥
馈更便利，提高客户服务质量；增强企业的销售能力，有效的抓住目标对象，将产品的优势宣传出去；提高产品附加值，附加值越高的产品在市场上的竞争力就越强。
（二）网站的需求分析
随着网络的迅速发展，电子商务日渐繁盛。从商家方面来看，电子商务的运用，重新定义了传统的经营模式，使得商家与顾客直接在网络上交易对接，双方目标更加明确，大大提高效率。同时，尤为重要的一点，电子商务减少了商家到客户的中间环节，有效的降低了企业传统渠道的经营成本，如人员费用，房租费用等等。借助网络的便捷，大企业与中小企业分享同一的信息，在同一平台进行竞争，可以有效的缩小两者之间的差距，为中小企业的提供公平良好的发展空间。此外，电子商务打破了时间空间的限制，使得交易更加开放自由。从消费者方面来看，网上购物现如今已经成为生活的一部分，不仅可以浏览到所需物品的信息，种类齐全，方便比价，还可以不受时空的限制，足部出户就能收到货物，十分便利。
在这种大环境下，许多商家也陆续创建其自己的网络平台来进行宣传和销售。怡安大药房原先只有实体店，网站的建立，可以为药店带来新的机遇。树立全新的商业形象，实现药品的在线展示、介绍，提供最新的药品信息，加大药店的宣传力度，拓宽销售渠道。有利于商家节省广告宣传费用和运营成本，增加药品销量，也便于顾客了解和查看药品的信息。一定程度上扩大了消费市场，为企业带来新的商机。同时，药店通过反馈的信息可以更好地了解到顾客的心理与需求,更好的把握商机。
（三）内容简介
怡安大药房是一家从事药品保健产品的民营企业，本次开发此网站是为了消费者清晰明了的了解本公司产品及相关内容，本公司的发展对象是面向全体广大人民，本着能为更多人服务的精神，我们专注于网站的建立，用心服务大众，通过不懈的努力，完美塑造本公司形象，为产品推广和未来发展提供更好的选择。
二、网站开发准备
（一）网站开发技术支持
HTML
HTML（超文本标记语言 Hyper Text Markup Language），HTML是用来描述网页的一种语言，是构成网页的基础。它可以有许多标签组成，可以包含文字、图像、声音等不同格式的文件。
CSS
CSS是Cascading Style Sheet的简写，又叫“层叠样式表”，可以简称“样式表”。CSS包括行内样式表、内嵌样式表、外部样式表三种。行内样式表可以直接在标签中书写，内嵌样式表将样式写在标签之间，外部样式表在页面外部建立一个CSS样式表，用例如“”标签相链接，选择外部样式表书写页面条理会更加清晰。
JavaScript
JavaScript是给网页增加动态功能的一种脚本语言。JavaScript具有易读取性、 安全性、易学易用、跨平台性、动态性等特点的轻量级的程序语言。
（二）网站开发工具的介绍
Photoshop软件
Photoshop是一款优秀的图像编辑软件，运用ps,可以裁剪渲染出需要的图像。
Dreamweaver软件
Dreamweaver软件是一款专业的Web开发软件，更好的方便开发者编辑制作网站。
谷歌浏览器
谷歌浏览器是一款很实用的浏览器，可以查看网页代码的执行情况，页面div图层的分布情况，便于代码的实施、修改和完善。
4.FSCapture
FSCapture是一款图片裁切工具，可以裁切出高质量的图像，有助于网站的进行。
三、网站设计
（一）网站主题
1.主题确立
怡安大药房是一个面向消费者的网站，具有宣传展示商品，发布最新药品信息的功能，从而起到树立公司形象，增强影响力，扩大销售的作用。
2.网站形象设计
(1)、网站的LOGO设计
创意来源：蓝色的手和红白色的药形成鲜明对比，吸引人的眼球。六边形是化学元素的代表，显示了对科学的严谨态度，联创的拼音给logo添上一抹活泼自由的色彩。效果如图31所示：
图31 “怡安大药房”logo
(2)、网站的色彩搭配
网站的色彩搭配，以蓝、白为主，灰、黄为辅。这样总体看来，比较简洁大方，蓝黄是经典的色彩搭配，蓝色让人宁静安详，沉稳理智，黄色代表阳光，积极向上。这样搭配使人视觉上感到舒适。白色简单大方给人以安静的视觉享受，搭配比较有个性的英文字体，即时尚又稳重，符合药店网站的官方印象。
（3）、网站的字体设置
网站的主体字体为“微软雅黑”，颜色为黑色或者灰色，字体大是为小四。总体看上去是比较舒适的字体。
目 录
一、引言 1
（一）网站的开发目的 1
（二）网站的需求分析 1
（三）内容简介 1
二、网站开发准备 1
（一）网站开发技术支持 1
（二）网站开发工具的介绍 2
三、网站设计 2
（一）网站主题 2
（二）网站的逻辑结构 3
（三）网站的界面设计 4
四、网站的具体实现 10
（一）首页的实现 10
（二）子页的实现 13
（三）特效的实现 17
五、网站的兼容性测试及应注意的问题 20
（一）网站的兼容性测试 20
（二）应注意的问题 21
六、总结 23
致谢 24
参考文献 25
一、引言
（一）网站的开发目的
随着时代的发展，网络对人们生活的影响日渐显现。它不仅改变着人们的沟通交流，信息收集，娱乐消遣的方式，最重要的还有购物方式。越来越多的人网上购物，电子商务的迅速崛起和发展，也使得更多的商家关注到了电子商务的价值。网络营销不仅可以全方位的展现企业的品牌、精神、文化、品质、地位、特点、价值，同时也为网上联系客户创造有效平台，其最终目的是以最少的投入获得最大的收益和利润。具体表现在它能够为公司树立全新形象，为产品起到扩大宣传的作用；提供最新的企业信息，使客户获取信息更快捷；企业收集反
*好棒文|www.hbsrm.com +Q: ￥351916072￥
馈更便利，提高客户服务质量；增强企业的销售能力，有效的抓住目标对象，将产品的优势宣传出去；提高产品附加值，附加值越高的产品在市场上的竞争力就越强。
（二）网站的需求分析
随着网络的迅速发展，电子商务日渐繁盛。从商家方面来看，电子商务的运用，重新定义了传统的经营模式，使得商家与顾客直接在网络上交易对接，双方目标更加明确，大大提高效率。同时，尤为重要的一点，电子商务减少了商家到客户的中间环节，有效的降低了企业传统渠道的经营成本，如人员费用，房租费用等等。借助网络的便捷，大企业与中小企业分享同一的信息，在同一平台进行竞争，可以有效的缩小两者之间的差距，为中小企业的提供公平良好的发展空间。此外，电子商务打破了时间空间的限制，使得交易更加开放自由。从消费者方面来看，网上购物现如今已经成为生活的一部分，不仅可以浏览到所需物品的信息，种类齐全，方便比价，还可以不受时空的限制，足部出户就能收到货物，十分便利。
在这种大环境下，许多商家也陆续创建其自己的网络平台来进行宣传和销售。怡安大药房原先只有实体店，网站的建立，可以为药店带来新的机遇。树立全新的商业形象，实现药品的在线展示、介绍，提供最新的药品信息，加大药店的宣传力度，拓宽销售渠道。有利于商家节省广告宣传费用和运营成本，增加药品销量，也便于顾客了解和查看药品的信息。一定程度上扩大了消费市场，为企业带来新的商机。同时，药店通过反馈的信息可以更好地了解到顾客的心理与需求,更好的把握商机。
（三）内容简介
怡安大药房是一家从事药品保健产品的民营企业，本次开发此网站是为了消费者清晰明了的了解本公司产品及相关内容，本公司的发展对象是面向全体广大人民，本着能为更多人服务的精神，我们专注于网站的建立，用心服务大众，通过不懈的努力，完美塑造本公司形象，为产品推广和未来发展提供更好的选择。
二、网站开发准备
（一）网站开发技术支持
HTML
HTML（超文本标记语言 Hyper Text Markup Language），HTML是用来描述网页的一种语言，是构成网页的基础。它可以有许多标签组成，可以包含文字、图像、声音等不同格式的文件。
CSS
CSS是Cascading Style Sheet的简写，又叫“层叠样式表”，可以简称“样式表”。CSS包括行内样式表、内嵌样式表、外部样式表三种。行内样式表可以直接在标签中书写，内嵌样式表将样式写在标签之间，外部样式表在页面外部建立一个CSS样式表，用例如“”标签相链接，选择外部样式表书写页面条理会更加清晰。
JavaScript
JavaScript是给网页增加动态功能的一种脚本语言。JavaScript具有易读取性、 安全性、易学易用、跨平台性、动态性等特点的轻量级的程序语言。
（二）网站开发工具的介绍
Photoshop软件
Photoshop是一款优秀的图像编辑软件，运用ps,可以裁剪渲染出需要的图像。
Dreamweaver软件
Dreamweaver软件是一款专业的Web开发软件，更好的方便开发者编辑制作网站。
谷歌浏览器
谷歌浏览器是一款很实用的浏览器，可以查看网页代码的执行情况，页面div图层的分布情况，便于代码的实施、修改和完善。
4.FSCapture
FSCapture是一款图片裁切工具，可以裁切出高质量的图像，有助于网站的进行。
三、网站设计
（一）网站主题
1.主题确立
怡安大药房是一个面向消费者的网站，具有宣传展示商品，发布最新药品信息的功能，从而起到树立公司形象，增强影响力，扩大销售的作用。
2.网站形象设计
(1)、网站的LOGO设计
创意来源：蓝色的手和红白色的药形成鲜明对比，吸引人的眼球。六边形是化学元素的代表，显示了对科学的严谨态度，联创的拼音给logo添上一抹活泼自由的色彩。效果如图31所示：
图31 “怡安大药房”logo
(2)、网站的色彩搭配
网站的色彩搭配，以蓝、白为主，灰、黄为辅。这样总体看来，比较简洁大方，蓝黄是经典的色彩搭配，蓝色让人宁静安详，沉稳理智，黄色代表阳光，积极向上。这样搭配使人视觉上感到舒适。白色简单大方给人以安静的视觉享受，搭配比较有个性的英文字体，即时尚又稳重，符合药店网站的官方印象。
（3）、网站的字体设置
网站的主体字体为“微软雅黑”，颜色为黑色或者灰色，字体大是为小四。总体看上去是比较舒适的字体。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/676.html
