specialized自行车网站的设计与实现
本课题完成了specialized自行车宣传网站的设计与实现，以网站的方式来宣传specialized自行车这个品牌，增加其产品的知名度。该网站的制作主要包括使用Photoshop软件，参考成熟网站的设计风格，初步制作出网页的具体效果图。运用Dreamweaver软件，基于HTML和CSS对网页代码进行编写，使用类的方式编写代码。同时运用JavaScript实现网页特效，增加网页的整体效果。将编写好的代码再进行测试，防止多余代码占用大量内存。网页初步完成之后，在主流浏览器上进行兼容性测试。本文从网站界面设计、CSS布局、JavaScript网页特效和网站兼容性测试等方面进行详细阐述。
目 录
一、 引言 1
(一) 课题背景 1
(二) 课题目标 1
二、 网站的需求分析 1
三、 网站开发工具的介绍 2
(一) PhotoShop软件 2
(二) Dreamweaver软件 2
四、 界面设计 2
(一) LOGO设计 2
1. 创意来源 3
2. 具体效果 3
(二) 首页设计 3
(三) 子页设计 4
五、 网站的具体实现 6
(一) 首页的实现 6
(二) 子页的实现 7
1. 产品分类 7
2. 产品详情 7
3. 登录&注册 8
4. 关于我们 9
5. 联系我们 9
(三) 特效的实现 10
1. 图片轮转特效 10
2. 图片放大特效 10
六、 网站的兼容性设计 11
(一) IE浏览器测试 11
(二) 火狐浏览器测试 12
(三) 谷歌浏览器测试 12
七、总结 12
致谢 14
参考文献 15
附录 16
(一) 首页代码 16
(二) CSS 19
(三) JS 21
引言
课题背景
随着科技的进步、时
*好棒文|www.hbsrm.com +Q: @351916072@
代的发展，计算机信息行业逐渐步入人们的生活中，人们越来越离不开各种各样的信息，离不开网络，人们对网络的追求也越来越迫切。
Specialized自行车是存在于淘宝、天猫上的一家销售specialized山地车的店铺。这家店铺不仅仅是一家网上的店铺，它既有实体店也有属于自己的网站。它的网站也在不断的更新与改变中，但是总体的风格一成不变，有一些设计对于顾客来说不是很方便，所以我对这个网站做了一些改变。现在因为网络的迅速普及，大多数的商家都在利用网络为自己的产品做宣传，增加自己的产品的发展渠道，提高销售业绩，以这种廉价的方式来获取最大的宣传效果，所以公司、企业之间的竞争越来越激烈。Specialized自行车网站的设计与实现就是为了对Specialized自行车做进一步的宣传，提高其在人们心目中的地位，增加它的知名度。
课题目标
通过对本课题的研究，宣传了Specialized自行车，增加了Specialized自行车在老百姓中的知名度，让越来越多的人认识和了解Specialized自行车。同时增加了其销售渠道，让这家店铺更开放，更接近老百姓，也让公司的服务更加周到，让specialized自行车的品牌形象在老百姓心中奠定良好的基础。
网站的需求分析
网站是公司用来向用户和顾客提供信息，是公司发展的信息平台。网站的制作不仅是把企业想要表达的内容放在网站上，而且包含了更多的元素，给浏览者更多的视觉体验。现在的公司需要用一些更有效的方法来增强竞争力，那就是建造一个宣传自身商品形象的宣传模式的网站。另外，通过宣传网站，可以开拓自己的营销方式和市场，能够从同行中脱颖而出，完善企业的宣传与服务环节，从而提升自己的价值和经济效益。
网站以业务需求为基础，提出网站需要完成以下任务：网站需要让浏览者能够看到商品的信息及动态，还有就是能够显示出该公司现有的各种类型的商品以及其详细的信息，由于消费者的需求在增加和变化，公司在面对面销售的基础上也要随之发展做出相应的服务。
对于自行车公司来说，我们将建立一个以宣传为目的的类型的网站。将在短期内打造品牌的宣传力度，让更多的客户了解品牌、信任公司。本网站需要设立以下几个内容：
品牌首页
网站首页是体现一个网站的门面，也显示了企业的一些相关信息，是网站设计中比较重要的一部分，它展现了整个网站的主体内容，能够让浏览者在第一时间领略到企业的特色。
产品分类
将这些产品进行有序分类，让浏览者更容易找到自己想要的商品，加强客户对这些商品的印象。
产品详情
对这些商品进行详细的描述，让浏览者更加深入的了解这些商品。
关于我们
具体介绍公司的背景，品牌的创立和发展史，增加公司的宣传力度，让客户能够全面的了解这个品牌，有利于更好的树立品牌形象。
联系我们
介绍公司的联系方式、地址等，让客户能够方便的对公司提出意见，也方便公司能够及时改善不足的地方。
用户登录&注册
使用户成为会员，可以在足不出户的情况下了解产品，同时对产品及公司提出意见或建议，也提高了客户与公司之间的沟通方式，使企业的运营达到最好的优化。
网站开发工具的介绍
PhotoShop软件
Photoshop ，简称PS，是一款由Adobe公司推出的图像处理类型的软件。Photoshop的应用领域很广泛，主要处理以像素所构成的数字图像，还可以对多幅图像进行合并且增加特殊效果等等。
Dreamweaver软件
Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的一款设计软件，是一个可视化网站开发工具。它支持最新的 Html 编程语言和 CSS 技术，大多数的网页都可以用Dreamweaver来完成。
界面设计
为满足网站对功能的需求，本网站分为首页、产品分类、产品详情、关于我们、联系我们、用户登录、用户注册等七个产品内容，结构图如下图41所示：
图41 网站详细结构图
LOGO设计
创意来源
这是一家品牌为specialized的山地自行车的店铺的LOGO设计，它有它原来的标志。它原网站的LOGO设计(如图42)简约大方。Specialized，翻译成中文有特殊、特别的意思，还有专门的、专用的以及品牌自行车的含义。国内车友亲切的称呼其为“闪电”。
它的LOGO虽然简单又不失风格，但是体现不出来它这款山地自行车的特色。因为它有闪电的意思，所以将“specialized”与“闪电”合二为一，并结合自行车的特点以及原网站的logo的特色，设计出了新的specialized自行车网站的LOGO图样。
目 录
一、 引言 1
(一) 课题背景 1
(二) 课题目标 1
二、 网站的需求分析 1
三、 网站开发工具的介绍 2
(一) PhotoShop软件 2
(二) Dreamweaver软件 2
四、 界面设计 2
(一) LOGO设计 2
1. 创意来源 3
2. 具体效果 3
(二) 首页设计 3
(三) 子页设计 4
五、 网站的具体实现 6
(一) 首页的实现 6
(二) 子页的实现 7
1. 产品分类 7
2. 产品详情 7
3. 登录&注册 8
4. 关于我们 9
5. 联系我们 9
(三) 特效的实现 10
1. 图片轮转特效 10
2. 图片放大特效 10
六、 网站的兼容性设计 11
(一) IE浏览器测试 11
(二) 火狐浏览器测试 12
(三) 谷歌浏览器测试 12
七、总结 12
致谢 14
参考文献 15
附录 16
(一) 首页代码 16
(二) CSS 19
(三) JS 21
引言
课题背景
随着科技的进步、时
*好棒文|www.hbsrm.com +Q: @351916072@
代的发展，计算机信息行业逐渐步入人们的生活中，人们越来越离不开各种各样的信息，离不开网络，人们对网络的追求也越来越迫切。
Specialized自行车是存在于淘宝、天猫上的一家销售specialized山地车的店铺。这家店铺不仅仅是一家网上的店铺，它既有实体店也有属于自己的网站。它的网站也在不断的更新与改变中，但是总体的风格一成不变，有一些设计对于顾客来说不是很方便，所以我对这个网站做了一些改变。现在因为网络的迅速普及，大多数的商家都在利用网络为自己的产品做宣传，增加自己的产品的发展渠道，提高销售业绩，以这种廉价的方式来获取最大的宣传效果，所以公司、企业之间的竞争越来越激烈。Specialized自行车网站的设计与实现就是为了对Specialized自行车做进一步的宣传，提高其在人们心目中的地位，增加它的知名度。
课题目标
通过对本课题的研究，宣传了Specialized自行车，增加了Specialized自行车在老百姓中的知名度，让越来越多的人认识和了解Specialized自行车。同时增加了其销售渠道，让这家店铺更开放，更接近老百姓，也让公司的服务更加周到，让specialized自行车的品牌形象在老百姓心中奠定良好的基础。
网站的需求分析
网站是公司用来向用户和顾客提供信息，是公司发展的信息平台。网站的制作不仅是把企业想要表达的内容放在网站上，而且包含了更多的元素，给浏览者更多的视觉体验。现在的公司需要用一些更有效的方法来增强竞争力，那就是建造一个宣传自身商品形象的宣传模式的网站。另外，通过宣传网站，可以开拓自己的营销方式和市场，能够从同行中脱颖而出，完善企业的宣传与服务环节，从而提升自己的价值和经济效益。
网站以业务需求为基础，提出网站需要完成以下任务：网站需要让浏览者能够看到商品的信息及动态，还有就是能够显示出该公司现有的各种类型的商品以及其详细的信息，由于消费者的需求在增加和变化，公司在面对面销售的基础上也要随之发展做出相应的服务。
对于自行车公司来说，我们将建立一个以宣传为目的的类型的网站。将在短期内打造品牌的宣传力度，让更多的客户了解品牌、信任公司。本网站需要设立以下几个内容：
品牌首页
网站首页是体现一个网站的门面，也显示了企业的一些相关信息，是网站设计中比较重要的一部分，它展现了整个网站的主体内容，能够让浏览者在第一时间领略到企业的特色。
产品分类
将这些产品进行有序分类，让浏览者更容易找到自己想要的商品，加强客户对这些商品的印象。
产品详情
对这些商品进行详细的描述，让浏览者更加深入的了解这些商品。
关于我们
具体介绍公司的背景，品牌的创立和发展史，增加公司的宣传力度，让客户能够全面的了解这个品牌，有利于更好的树立品牌形象。
联系我们
介绍公司的联系方式、地址等，让客户能够方便的对公司提出意见，也方便公司能够及时改善不足的地方。
用户登录&注册
使用户成为会员，可以在足不出户的情况下了解产品，同时对产品及公司提出意见或建议，也提高了客户与公司之间的沟通方式，使企业的运营达到最好的优化。
网站开发工具的介绍
PhotoShop软件
Photoshop ，简称PS，是一款由Adobe公司推出的图像处理类型的软件。Photoshop的应用领域很广泛，主要处理以像素所构成的数字图像，还可以对多幅图像进行合并且增加特殊效果等等。
Dreamweaver软件
Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的一款设计软件，是一个可视化网站开发工具。它支持最新的 Html 编程语言和 CSS 技术，大多数的网页都可以用Dreamweaver来完成。
界面设计
为满足网站对功能的需求，本网站分为首页、产品分类、产品详情、关于我们、联系我们、用户登录、用户注册等七个产品内容，结构图如下图41所示：
图41 网站详细结构图
LOGO设计
创意来源
这是一家品牌为specialized的山地自行车的店铺的LOGO设计，它有它原来的标志。它原网站的LOGO设计(如图42)简约大方。Specialized，翻译成中文有特殊、特别的意思，还有专门的、专用的以及品牌自行车的含义。国内车友亲切的称呼其为“闪电”。
它的LOGO虽然简单又不失风格，但是体现不出来它这款山地自行车的特色。因为它有闪电的意思，所以将“specialized”与“闪电”合二为一，并结合自行车的特点以及原网站的logo的特色，设计出了新的specialized自行车网站的LOGO图样。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/701.html
