基于html的珠宝展示网站前台设计与开发(含源文件)
欢迎添加微信互相交流学习哦！
项目源码：https://gitee.com/oklongmm/biye
摘 要
新的世纪，互联网进入一个崭新的阶段，信息化的发展带动其它产业的发展，各行业都将与进行更深入的融合和渗透。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。为了适应知识经济社会的需要，促进学习与交流。网上交流和协作的功能比较普遍；技术管理和资源管理受到重视。随着互联网的普及和发展，必将有越来越多的企业及个人在Internet上拥有自己的网站。网站建设成为企事业形象宣传、产品展示推广、客户沟通的最新最快捷的桥梁；成为个人展示自我，与世界交流的重要平台。越来越多的人已开始对互联网的认知阶段进入到认同和行动阶段。
Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的协作，更多的与外界交流新的信息，和人共享信息，特构建珠宝网站。
新的技术总是带来新机遇。企业迫切需要充分利用网络，加速培养自身的学习能力，捕捉市场变化的机遇，积极吸取新知识并制定相应的战略，重组资源，调整自己的行动。这样企事业才能应变灵活，不断提高竞争优势。
关键字： Flash； Photoshop；Dream weaver；珠宝展示网站
目录
摘 要 I
第1章 绪论 - 1 -
1.1网站建设概述 - 1 -
1.2网站需求分析 - 1 -
1.3系统概述 - 1 -
1.4 Adobe Dream weaver简介 - 1 -
1.5 Flash 简介 - 3 -
1.6 Photoshop 简介 - 3 -
第2章 总体设计 - 5 -
2.1 利用Flash制作动画 - 5 -
2.1.1 主页动画 - 5 -
2.1.2 产品中心动画 - 6 -
2.1.3 销售网点动画 - 7 -
2.1.４ 产品特征动画 - 8 -
2.1.５专题活动动画 - 9 -
2.2 利用Photoshop整修图片 - 10 -
2.3 实现网页设计 - 10 -
2.3.1主页 - 12 -
2.3.2品牌介绍 - 15 -
2.3.3产品中心 - 18 -
2.3.4新闻资讯 - 18 -
2.3.5尊贵服务 - 20 -
2.3.6珠宝文化 - 21 -
第3章 结论 - 24 -
参考文献 - 25 -
致 谢 - 26 -
指导教师评语 - 27 -
答辩委员会评语 - 27 -
第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 简介
Phtotshop LOGO
Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。
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标签对其他相关网页进行链接，设计和操作上都非常简单。效果与相关代码如下：
2.1.4 中间内容设计
根据 浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将重要促销内容靠左边放，这样能更好地吸引浏览者的眼球，同时也体现公司的专业、能力等。中间部分主要包括以下几个模块：今日推荐、新闻动态、促销产品、产品展示，今日行情，友情链接等。
2.1.5页脚设计
页脚主要为显示版权信息等，为了使四个DIV能居中对齐，在网页中用了margin:0 auto来实现。
2.2 利用Photoshop整修图片
在制作网页过程中需要对一些图片（比如一些截图）做修整，这些都是通过用Photoshop来实现的，经过用到的工具有剪裁工具、切片工具、仿制图章工具、橡皮擦工具等，如下图：
图 10 PS常用工具
对图片进行整修后再导入Flash和Dream weaver中使用，使其变得更加美观。
2.3 子页设计
整个网站主要是利用Dream weaver来完成。其中主要包括7个页面，分别是：网站首页、关于我们、产品展示、新闻动态、客户留言、今日推荐、联系我们，其连接关系如下所示：
2.3.1关于我们
关于我们主要简介公司基本情况，对品牌进行介绍。在Dream weaver里插入相应的div布局，进行设计和调整，关于我们子页效果如下图：
2.3.2产品展示
在产品展示页，主要用于显示公司的产品与产品相关的参数，价格等，让客户更好的了解产品。该页应用分页技术，可以查看到公司所有的产品信息。
2.3.3新闻动态
新闻动态页以列表的方式按时间顺序列出公司的所有新闻，也使用分页的方式。
2.3.4今日推荐
今日推荐每天推荐一款最好的产品，其本质就是一个单件产品介绍模板。
2.3.5客户留言
客户留言主要是给客户和企业之类一个沟通的渠道，使客户信息能反馈给企业。
此页面其主要代码如下：
2.3.6联系我们
联系我们页面主要用来列出企业的联系方式
其他几个页面的设计方法均与以上页面的设计方法相似，此处不再重复说明解释。
第3章 网站的测试
编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节。
测试的目的是为了尽可能的发现程序中存在的错误，其任务就是消除网站故障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。一般来说在每个模块完成之后就要对它作必要的测试，这种测试被称为单元测试，模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶段结束之后，对网站系统还应该进行各种综合测试，这是网站生命周期的另一个独立的阶段，由专门的测试人员承担。
在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶段我分别安装了IE8、火狐等浏览器，并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV浮动问题，但是最后还是在老师的指导和书籍查阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常。
第4章 后续工作
本网站以前台静态HTML为主，其中关键是描述DIV+CSS在网页布局中的妙用、巧用。但要真正的去完善一个网站，还需要更多的专业知识，比如说，数据库、其他后台相关语言，网站的安全，网站的发布，日常维护和更新，等等一系列问题，更是还有关于网站后台管理的拓展分布，想要完成一个网站，每一项必不可少的步骤。完成网站后，还要多网站进行整体优化和宣传推广，这样，才能让网站增加人气和点击率。但是由于时间、精力和专业知识的关系。就把这一系列事情归纳为后续工作。在以后的时间里不断的去学习、摸索，然后慢慢的去完善这个网站。
第5章 结论
将近几周的网站设计，终于完成了，虽然有些疲惫，但还是有很多的收获的，我又一次巩固了所学到的知识，之前的学习只是停留在理论基础上，现在自己动手操作试验后，才是真正的理解及体会。当初选择网站设计这个专业的时候脑海里对这些网页设计网站规划只是一个模糊的印象，感性的认知，很朦胧的理解。我曾以为制作页面建立网站会是很难很艰涩的数据，通过这个学期的进一步学习，了解了网页制作网站创建的一般过程，也明白了这些并非我想象的那么难，事实上它有趣，易学，还可以自由发挥。
这次设计我明白一个道理“思路很重要”，还记得设计开始的第一周我盲目的在网上搜图片，但是脑子里一点思路都没有，以至于设计的第一周我什么都没做出来，直到第二周我觉得有思路了才开始做设计，果然当有了思路之后做起东西来也感觉很动力和信心，不再那么漫无目的的到处搜图片了。所以我给自己以后做东西总结了一个道理就是：“思路很重要”。
通过本次设计，在制作网页的过程中我感受到了网页三剑客功能的强大，运用的灵活多变，不拘一格。它可以让你在其平台上驰骋你的想象，真的是没有做不到的，只有想不到的。它可以让你在这舞台上尽情发挥自己的风格，真的是海阔凭鱼跃，天高任鸟飞！总之你就是这个舞台的“导演”！
以上就是我们这个学期的设计的论文总结，我觉得自己真的又学会了很多东西，比如做事的态度，由于知识和经验的不足，这个网站做的不是很尽如人意，但是融合了自己的心血，就觉得是最好的，所以在以后还是需要较多的努力的，还是会在以后的学习过程中不断地提高和改进的。
参考文献
[1]. 唐守国主编，创意+：Photoshop cs4网页设计、配色与特效案例精粹，清华大学出版社，2010年7月第一版
[2]. 王征主编，JavaScript网页特效实例大全，清华大学出版社，2006年9月第一版
[3]. 史晓燕、苏萍编著，网页设计基础（HTML，CSS和JavaScript），清华大学出版社，北京交通大学出版社，2006年10月第一版
[4]. 张景峰等.HTML程序设计.高等教育出版社.2005年9月
[5]. 项宇峰等.HTML网络编程从入门到精通.清华大学出版社.2006年
致 谢
这个学期我们学了dream weaver、flash、photoshop，开始学的时候根本就是一知半解的，但是在后来的学习中我渐渐投入到这些课程里，学到了很多东西，这要谢谢老师们总是不厌其烦的一遍遍地给我们讲解，在遇到难理解的问题上老师还会给我们举一些常见和容易理解的实例来帮助我理解，直到我们听明白为止。感谢老师这一学期以来对我们的耐心教导。
还要感谢在这个寒冷的冬天，一直陪着我们在机房做课设的老师，谢谢他们的陪伴和耐心指导。
最后感谢我的导师们，他们严谨细致、一丝不苟的作风一直是我工作、学习中的榜样；他们循循善诱的教导和不拘一格的思路给予我无尽的启迪。是你们帮助我能够很快的融入这个全新的设计中。