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

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客户留言
客户留言主要是给客户和企业之类一个沟通的渠道，使客户信息能反馈给企业。
 
此页面其主要代码如下：
style=”PADDING-BOTTOM: 1px; PADDING-TOP: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px”> rel=stylesheet type=text/css href=”images/comment.css”>
 
 

第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，开始学的时候根本就是一知半解的，但是在后来的学习中我渐渐投入到这些课程里，学到了很多东西，这要谢谢老师们总是不厌其烦的一遍遍地给我们讲解，在遇到难理解的问题上老师还会给我们举一些常见和容易理解的实例来帮助我理解，直到我们听明白为止。感谢老师这一学期以来对我们的耐心教导。
还要感谢在这个寒冷的冬天，一直陪着我们在机房做课设的老师，谢谢他们的陪伴和耐心指导。
最后感谢我的导师们，他们严谨细致、一丝不苟的作风一直是我工作、学习中的榜样；他们循循善诱的教导和不拘一格的思路给予我无尽的启迪。是你们帮助我能够很快的融入这个全新的设计中。 

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览93886 人正在系统学习中