本课题完成了星空电脑商店网站的设计与制作，通过网站的建立来推广电脑商品。该网站的制作过程包括使用Photoshop软件，借鉴相似主题网站的界面，结合网站设计的趋势，完成网页的效果图；再运用Dreamweaver软件作为开发环境，编写HTML和CSS代码，完成网页对象的具体实现；结合JavaScript实现页面特效；包括图片的轮转和图片的放大，在作品完成后进行了网站的整体测试，减少了代码的冗余程度，在一定程度上节省了网站空间，并在主流浏览器上进行兼容性测试。本文主要从网站的设计、具体实现的过程、网站的测试等方面进行了详细的阐述。
目 录
一、引言 1
(一) 课题背景 1
(二) 课题目标 1
二、网站的需求分析 1
三、网站开发工具介绍 2
(一) Photoshop 2
(二) Dreamweaver 2
四、网站内容及设计 2
(一) LOGO设计 2
(二) 首页设计与布局 3
(三) 子页设计与布局 4
1. 产品分类页 4
2. 电脑产品详情页 5
五、网站的具体实现 5
(一) 网站首页的实现 5
(二) 网站子页的实现 7
1. 产品分类 7
2. 产品详情 8
3. 登录&注册 9
4. 关于我们 10
5. 资讯 10
(三) 特效的实现 11
1. 图片轮转特效 11
2. 图片放大特效 12
六、网站测试 12
七、总结 15
致谢 16
参考文献 17
附录 18
一、引言
课题背景
星空电脑网站是存在于淘宝、京东上的一家电脑商店。这家商店不止是在网上销售，它也有自己的生活中的店面，网站也在不断的创新和改变，但是整体设计的风格没有发生很大对的变化，有一些设计对于销售人群来说不是很方便，所以在它原有的网站上做了一些细微的变化。因为现在网络迅速普遍，很多商家都在用网站为自己的品牌做一个大力的
 *景先生毕设|www.jxszl.com +Q: *351916072* 
宣传和推广，扩大本身发展渠道，提高销售额。所以各个商户之间的竞争愈加激烈。星空电脑网站的设计与实现就是为了对星空电脑进一步的宣传，提高其知名度，增加在销售人群心中的地位。
课题目标
通过对这次课题的研究，宣传了星空电脑，增加星空电脑在销售人群的知名度，可以方便的让越来越多的人认识和了解星空电脑商店。同时增加其销售额，让这家店更广为人知，更接近人群。也让企业的服务为大众所认可、大众所喜爱。让星空电脑的品牌在人们心里打下良好的基础。
二、网站的需求分析
对于电脑公司来讲，致力于创建一个以宣传为主的网站。在短时间内打造品牌的一个宣传的力度，让更多的销售人群从知道我们的品牌到了解公司的品牌再到信任公司的品牌。建立销售群体更加信任、更加熟知的品牌，从而达到宣传公司的目的。为此本网站需设立以下几个内容：
品牌首页。首页是网站设计重要的一部分，是一个网站门面的体现。同时彰显了一个企业的精神，也是企业产品信息介绍的主要内容。
产品分类。产品的分类是企业为了让浏览者更加清晰完整的了解到企业的一个产品介绍，浏览者可以通过产品的分类清楚的了解到本公司产品的一个详情，同时也让企业本身积极有效的管理网站，及时的对企业产品的一些更新。
产品资讯。浏览者通过这一部分了解到电脑的一个基本的配置详情，增加的不仅仅是浏览者对我们产品信息的了解，从产品的内部出发介绍产品，从而增加顾客对产品深入的了解和信任。
关于我们。这部分整个介绍了电脑产品的的发展背景，从电脑的产生到最后日益壮大都做了一个详细的说明，电脑的阐述和来源，关于产品的背景和意义，是一个企业必不可少的部分。让其销售群体更好、更快的了解产品是我们义不容辞的事情。
用户登录、注册。我们更加提倡顾客成为我们的长期销售者，一方面我们可以固定的锁住客户数量，另一方面用老客户带动新客户的营销方式，增加其销售范围。使客户成为会员之后，可以更好的与我们沟通协议。对公司的产品提出宝贵的意见，同时顾客做出积极的反馈方便公司更好地做出相应的变化方针，达到最好的优化运营。
三、网站开发工具介绍
Photoshop
Photoshop，简称PS，是目前最为流行的制作工具和图像设计，Photoshop的领域应用很广泛。文字、视频图像收集、等各方面都涵括，操作简单、功能也是很强大。可以合并多副图像，不仅给我们提供了一个强有力的画图功能，还可以绘制各种你想要的图形艺术，用相机等采集图像，在对这些原有的图像进行美化加工，对色彩的调整有着很大的改变。PS还可以增加原有图像的特效，色彩方面的搭配做得更好、更优化，使其图片达到令人满意的效果。
Dreamweaver
Dreamweaver是一个站点创建个管理的工具，因此它不仅可以创建单独的文档。还可以创建完整的Web站点。它是由美国MACROMEDIA开发的，主要由HTML代码来实现，HTML最早作为一种标准的网页制作语言是在20世纪80年代提出的，最早的HTML不仅是用标签袁术描述网页的内容结构，用标签元素描述网页的排版布局。最后为了简化，HTML尽量将网页的内容结构与网页的排版布局分开，用标签元素描述网页的内容结构；用css描述网页的排版布局。现在大多数的网页都是由Dreamweaver来完成制作的。
四、网站内容及设计
本网站制作分为首页、产品、资讯、关于、登录和注册等6个产品内容，其中资讯通过几个典型的案列来介绍产品的配置，主要展示其商品的一个配置功能的介绍。详情见41设计结构图：

图41 网站详细结构图
LOGO设计
一家为星空电脑品牌的商铺LOGO设计，它的logo设计不仅是文字上的体现，还有相应图片的结合（如42图），简单大方的logo设计体现了星空电脑商店的特色，结合了电脑自身的特点，创造星空电脑商店的品牌意识。


图42 LOGO
星空电脑商店的LOGO如图42所见，由图可见，星空电脑商店的logo由星空电脑的文字、英文和图片这三个部分的组成，右边是星空电脑的文字下边是英文，最左边是由水蓝色作为背景一个小女孩正看着手中的电脑。蓝色领域广泛，具有冷静、沉稳的象征，大多数企业都用蓝色作为标准，而本次设计采用水蓝色的背景和嫩粉色的电脑相结合，寓意着成熟、稳重和科技效率。这正好体现公司在未来发展道路上的不断改革创新的精神。象征这企业对于销售群体的一个最有力的承诺。
用Photoshop软件制作设计logo的完成，人物图片在网上找的一个，打开软件之后首先新建一个页面，用文字进行对星空电脑四个字进行设计和制作，字体的颜色和大小进行了多次的筛选，最终确认为黑色，黑体大气、稳重。也跟本网站的初衷相符。接着就是图片的制作，图片的背景我先制作一个圆，然后选取的水蓝色，将其样式不断地调整，最后将下载下来的图片和我制作的圆合并为一张图片。采用正片叠底的样式制作为现在的效果。最后，在一些细节上做了一个稍微的调整。
首页设计与布局

原文链接：http://www.jxszl.com/jsj/xxaq/50545.html