当前位置：文档库 › 珠宝展示网站前台设计与开发静态网站毕业设计(含网页PSD)

珠宝展示网站前台设计与开发静态网站毕业设计(含网页PSD)

设计论文

设计题目：珠宝展示网站前台设计与开发学生姓名：

指导教师：

专业名称：

所在院系：

摘要

新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与进行更深入的融合和渗透。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。为了适应知识经济社会的需要，促进学习与交流。网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。随着互联网的普及和发展，必将有越来越多的企业及个人在Internet上拥有自己的网站。网站建设成为企事业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。越来越多的人已开始对互联网的认知阶段进入到认同和行动阶段。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的协作，更多的与外界交流新的信息，和人共享信息，特构建珠宝网站。

新的技术总是带来新机遇。企业迫切需要充分利用网络，加速培养自身的学习能力，捕捉市场变化的机遇，积极吸取新知识并制定相应的战略，重组资源，调整自己的行动。这样企事业才能应变灵活，不断提高竞争优势。

关键字：Flash；Photoshop；Dream weaver；珠宝展示网站

摘要................................................................................................................................................... I 第1章绪论................................................................................................................................... - 1 -

1.1网站建设概述................................................................................................................... - 1 -

1.2网站需求分析................................................................................................................... - 1 -

1.3系统概述........................................................................................................................... - 2 -

1.4 Adobe Dream weaver简介............................................................................................. - 2 -

1.5 Flash 简介.................................................................................................................... - 4 -

1.6 Photoshop 简介............................................................................................................ - 5 - 第2章总体设计........................................................................................................................... - 7 -

2.1 利用Flash制作动画...................................................................................................... - 7 -

2.1.1 主页动画.............................................................................................................. - 9 -

2.1.2 产品中心动画.................................................................................................... - 10 -

2.1.3 销售网点动画.................................................................................................... - 10 -

2.1.４产品特征动画.................................................................................................. - 12 -

2.1.５专题活动动画......................................................................... 错误！未定义书签。

2.2 利用Photoshop整修图片............................................................................................ - 12 -

2.3 实现网页设计................................................................................................................ - 13 -

2.3.1主页..................................................................................................................... - 14 -

2.3.2品牌介绍............................................................................................................. - 15 -

2.3.3产品中心............................................................................................................. - 16 -

2.3.4新闻资讯............................................................................................................. - 17 -

2.3.5尊贵服务............................................................................................................. - 18 -

2.3.6珠宝文化............................................................................................................. - 19 - 第3章结论................................................................................................................................. - 24 - 参考文献............................................................................................................ 错误！未定义书签。致谢........................................................................................................................................... - 26 - 指导教师评语.................................................................................................... 错误！未定义书签。答辩委员会评语................................................................................................ 错误！未定义书签。

图目录

图1主页动画效果.................................................................................... 错误！未定义书签。图2产品中心动画效果............................................................................ 错误！未定义书签。图3新品上市效果图................................................................................ 错误！未定义书签。图4精品系列效果图................................................................................ 错误！未定义书签。图5豪华定制效果图................................................................................ 错误！未定义书签。图6销售网点主界面................................................................................ 错误！未定义书签。图7销售网点效果图................................................................................ 错误！未定义书签。图8产特征效果图.................................................................................... 错误！未定义书签。图9专题活动效果图................................................................................ 错误！未定义书签。图10 PS常用工具................................................................................................................ - 13 - 图11主页.................................................................................................. 错误！未定义书签。图12品牌介绍.......................................................................................... 错误！未定义书签。图13产品中心.......................................................................................... 错误！未定义书签。图14新闻资讯.......................................................................................... 错误！未定义书签。图15尊贵服务.......................................................................................... 错误！未定义书签。图16珠宝文化.......................................................................................... 错误！未定义书签。图17中秋传说与金镶玉兔...................................................................... 错误！未定义书签。图18欧洲珠宝文化历史之八:现当代时期的首饰文化........................ 错误！未定义书签。图19中国珠宝文化历史之六:明清时期(下)........................................ 错误！未定义书签。

第1章绪论

1.1网站建设概述

此次设计的题目是做一个珠宝网站展示网站（静态），至少要做七个页面，主要包括网站网站首页、关于我们、新闻动态、产品展示、今日推荐、客户留言、联系我们等多个页面。网站采用Adobe Dream weaver技术编写，过程中也采用了Adobe Photoshop CS3做了一些图片的整修。

1.2网站需求分析

网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站则是反映企业形象和文化的重要窗口。

在建站的可行性分析方面，设计中，我主要针对已经确定的需求和目标，研究网站建设的社会环境、市场等可行性、技术可行性，经济可行性以及开发人员等问题。

在IT行业迅速发展的今天,企业网站的建设已经成为一个企业发展必不可少的存在。对于创意设计有限公司来说，我们将建立一个以宣传为目的的网站类型。将于短期内强力打造公司的宣传力度，让更多的客户了解，信任公司。网站的建设，也是公司对于宣传方面的长期投资。

○1企业品牌形象。

对于一个以生产为主的大型企业而言，企业的品牌形象至关重要。特别是对于互联网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业形象及企业实力，因此，企业网站的形象往往决定了客户对企业产品的信心。建立具有国际水准的网站，能够极大的提升企业的整体形象。

○2产品展示。

一般其他营销模式的企业网站都是注重产品展示来加强企业的宣传力度，但是对于创意设计有限公司来说，没有其实际物品展示，只有展现其出众的业绩实例才能让客户信服，才能从侧面展现出公司的实力，让客户更放心的把业务交给公司处理。

○3公司介绍。

具体介绍出公司的发展史，结构，业务流程等等一系列来加大公司的宣传力度，好让客户能全面的了解公司。公司的详细信息，都将批注在网页上，好让顾客方便联系。在推销的同时更要注重企业的特色推广和服务信息等。

○4内部管理优化。

网站的建设将会为企业内部的管理带来一种全新的模式。网站是实现这一模式的平台。在降低企业内部资源顺好、减低成本、加强企业员工与员工，企业与员工之间的联系和沟通等方面发挥巨大的作用，最终使企业的运营和运作打到最大的优化。

1.3系统概述

在现今的信息共享的时代，网络信息化管理工作系统信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。互联网商业的普及应用已经成网络经济的大势所趋。本章主要介绍网站建设所必须掌握的基础知识，以及在制作网面过程所用到一些相关软件及相关知识。

1.4 Adobe Dream weaver简介

Adobe Dream weaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。Dreamweaver自MX版本开始，使用了Opera的排版引擎 "Presto" 作为网页预览。

软件优点

制作效率

Dream weaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

网站管理

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使

用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。

1.5 fireworks 简介

Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Dreamweaver和Adobe Flash软件省时集成。在Fireworks 中将设计迅速转变为模型，或利用来自Illustrator、Photoshop 和 Flash 的其它资源。然后直接置入Dreamweaver 中轻松地进行开发与部署。Fireworks特性如下：

①矢量编辑与位图编辑。创建和编辑矢量图像与位图图像，并导入和编辑本机Photoshop 文件。

②图像优化。采用预览、跨平台灰度系统预览、选择性 JPEG 压缩和大量导出控件，针对各种交付情况优化图像。

③高效的 Photoshop 和 Illustrator 集成。导入 Photoshop (PSD) 文件，导入时可保持分层的图层、图层效果和混合模式。将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。导入 Illustrator (AI) 文件，导入时可保持包括图层、组和颜色信息在内的图形完整性。

④智能缩放。通过 9 切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。将 9 切片缩放与新的自动形状库相结合, 以加速网站和应用程序的原型构建进度。

⑤简化的 Dreamweaver 和 Flash 集成。复制 Fireworks CS3 中的任意对象, 并直接粘贴到 Dreamweaver CS3 中。创建可保存为 CSS 和 HTML 的弹出菜单。将 Fireworks (PNG) 文件直接导出至 Flash CS3, 导出时可保持矢量、位图、动画和多状态不变, 然后在 Flash CS3 中编辑文件。

众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大,最终还是要用Fireworks 来处理一下。

1.6 Photoshop 简介

Photoshop是电脑上的图像处理软件；对于广大Photoshop爱好者而言，PS亦用来形容通过Photoshop等图形处理软件处理过的图片，即非原始、非未处理的图片；多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，PHOTOSHOP的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及。

从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。

校色调色是该软件中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。而各种特效字的制作更是很多美术设计师热衷于该软件的研究的原因。

第2章总体设计

将要做的是一个珠宝展示网站，该公司专门销售珠宝的，因此建设网站的目的主要有两个：一是使浏览者或潜在的客户迅速了解公司大部分在售的产品，这就要求网站的文字要简练，尽量减少大篇幅的文字叙述，珠宝效果图要精彩，当然网页的页面效果也要漂亮，以使浏览者或潜在的客户感觉到公司的产品精美；二是使浏览者或潜在的客户迅速了解公司对购买的一般操作流程，以便能够与公司方便快捷地进行联系和沟通，减少不必要的中间环节及由此带来的麻烦。

建立公司网站要有一个清晰的网站布局。比如说，导航条要不要？很多人说那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站还要经常更新，给人以新意。

设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表现本身的风格的同时，在功能上使用户更加便利。网站的前台页面包括首页、关于我们、产品展示、新闻动态、客户留言、联系我们等。

2.1 首页设计

有了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出；

色彩可以使网页获得生命的力量；板式则是和用户沟通的核心，所以这三者缺一不可。

一般的网站都需要这样一些版块站名称（logo）、Logo区，导航区、新闻区、产品展示区、推荐产品区、最新行情区和版权等版块。这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体

的首页设计制作工作。

2.1.1 结构分析

根据需求可以知道，在页面上部要有logo和导航，中间部分的左侧显示若干个栏目，右侧显示另几个栏目，中间则显示新闻动态及产品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如下图：

2.1.2 风格定位

打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。

本网站的搭配主色为：白、银灰、黑、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。银灰色代表热情、活泼、热闹、温暖、幸福、吉祥。黑色代表崇高、坚实、严肃、刚健、端庄，充分代表了一个企业应有的气质和形象。给客户留下深刻的印象。

2.1.3 首头设计

网站的页头主要分为两个部分。一是Logo，logo使一张准备好的图片，直接放置在头部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：公司首页、关于我们、产品展示、新闻动态、今日推荐

、客户留言、联系我们。导航采用的是div布局，然后再用a标签对其他相关网页进行链接，设计和操作上都非常简单。效果与相关代码如下：