misstina婚纱摄影网站的设计与实现
本课题完成的是Miss Tina婚纱摄影的网站设计与实现,通过建立婚纱摄影公司网站在Internet上展示公司形象及互动交流,进行网上销售业务,以成功网站平台营销,打造强势的网络形象及促进销售,网站的具体实现过程中使用Photoshop软件,在借鉴相关网站的设计风格的基础上,融入Miss Tina摄影公司的企业文化特色 ,设计出网页的具体效果,运用Dreamweaver网站编辑软件,实现HTML5和CSS3的代码编写,运用Java script添加网页特效,增强网页的整体效果,最终进行三大主流浏览器的兼容性测试,实现的网站将进一步方便顾客对公司的产品以及销售的了解,能够极大地拓展客户渠道,本文从网站界面设计、CSS布局、JavaScript网页特效和网站兼容性测试等方面进行了详细阐述。
目 录
一、引言 1
（一）Miss Tina婚纱网站的背景 1
（二）Miss Tina婚纱网站的目标 1
二、网站的需求分析 1
三、网站开发工具的介绍 1
（一）Photoshop软件 1
（二）Dreamweaver软件 1
四、网站的界面设计 2
（一）Logo设计 2
1. 创意来源 2
2. 具体效果 2
(二)首页效果设计 2
1. jQuery图片全屏滑动轮播 2
2. 鼠标移到图片出现图片变色说明 2
（三）子页效果设计 4
1.“关于我们”的设计 4
2.“最新作品”的设计 4
五、 网站的具体实现 5
（一）DIV+CSS布局 5
（二）首页的实现 6
1.“主页特效”的实现 6
2.主页排版的实现 8
（三）子页的实现 8
1. “关于我们”的实现 8
2. “服务套系”的实现 8
3. “最新客片”的实现 9
4.“立即抢订”的实现 9
5.“婚纱礼服小贴士”的实现 9
（四）特效的实现 10
1. 鼠标移到图片出现图片变色 10
*好棒文|www.hbsrm.com +Q: ^351916072*
2. 滑动至顶部的特效 11
六、网站的兼容性测试 11
七、总结 12
参考文献 14
附录 15
一、引言
（一）Miss Tina婚纱网站的背景
中国，一个人口众多的文明古国，每年将近会有1000多万对新人结婚，而结婚的新人里约89%需要拍摄婚纱照，婚纱摄影艺术已经成为了一个巨大的贸易市场。在这个网络信息技术日益蓬勃兴起的时代，愈来愈多的婚纱摄影公司都纷纷建立起属于自己的门户网站,在成千上万风格迥异的网站中，要在竞争对手中，脱颖而出，并不是十分容易的一件事，拒绝商业化雷同和模式化的安排，满足高品质消费人群的需求，对于消费者来说，他不仅仅是一次简简单单的消费，更多的是在这个过程中感受到的一种精致生活体验，一种享受。
（二）Miss Tina婚纱网站的目标
通过建立Miss Tina婚纱摄影公司网站在Internet上展示公司形象及互动交流，进行网上销售业务，以成功网站平台营销，打造强势的网络形象及促进销售，通过展示公司实力，吸引消费者眼球，让客户通过网站了解企业的各个方面，开拓市场。全面介绍展示本公司的各种人性化服务，得到客户最真实的反馈，查漏补缺，加以改善。现如今，电子商务蒸蒸日上，同时给消费者带来了许多的方便，以此作为一个与客户交流的平台，使客户足不出户就能实时了解自己所需商品的详细信息，让客户更加的直观了解。网站成为商家与用户的沟通桥梁，建立网站树立公司形象，进行更好的宣传。
二、网站的需求分析
随着电子商务愈来愈成熟，许多商户纷纷建立起属于自己的交易平台，网站的宣传和推广成为企业必不可少的一部分，通过平台的宣传能够更快提高企业的知名度，提升自己的品牌价值，从而能够吸引更多的顾客。因此建立一个电子商务网站是极为重要和关键的。在网站上及时更新和提供最新，最有用的消息，更能打动顾客，讨得顾客欢心，因此企业建立网站是为了尽快提高企业的知名度，也是企业营销策略之一。
三、网站开发工具的介绍
（一）Photoshop软件
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图片处理软件。Photoshop主要处理以像素所构成的数字图像，可以有效地进行图片编辑工作，在图像、图形、文字、视频、出版等各方面都有涉及,可以进行复制，去除斑点，修补，修饰图像残损等。Photoshop在专业测评、平面设计、广告摄影、影像创意、网页制作、后期修饰、视觉创意、界面设计等方面都发挥着极大的作用。主要由标题栏、菜单栏 、图像编辑窗口、文本行、缩放栏、预览框组成。
（二）Dreamweaver软件
Dreamweaver CS6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站的移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时试图等多种方式来创作、编写和修改网页（通常是标准用标记语言下的一个应用HTML）,对于初级人员，可以无需编写任何代码就能快速创建web页面。
四、网站的界面设计
（一）Logo设计
1. 创意来源
Miss Tina的logo创意就是将Miss Tina这两个英文单词构成，利用Photoshop简单加以修饰，赋予一些感性色彩,在此基础上创造个性成分，以简洁明快的图形化语言与社会大众沟通，使企业文化和关键信息得以快速传播，并形成品牌信息文化的沉淀。可延伸性理解度很广，是为公司核心理念的延伸，该logo与Miss Tina企业文化紧密相连，使人们牢记它的名字。标志饱满大方，表达了Miss Tina将更稳健地发展，更加国际化、职业化。
2. 具体效果
具体效果，如图41所示。
图41 LOGO效果图
(二)首页效果设计
1. jQuery图片全屏滑动轮播
基于jQuery的一款图片展示特效代码，用于实现左右滑动切换图片全屏滑动轮播的效果，在这里stage height：472，代表舞台的高度像素为472px,slidestart：first为由HTML代码中第一张图片开始顺序滑动播放，slide position: center,表示滑动定位部分是中心，部分代码如下：
jQuery(function ($) {
var slider = $(.misstage).miSlider({
//阶段的高度px。选择:虚假或正整数。假=身高计算最大高度。默认值:假
stageHeight: 472,
// 数量的幻灯片可见。选择:虚假或正整数。假=适合尽可能多。默认值:1
slidePosition: center,
// 幻灯片开始。选项:“乞求”、“中期”,“结束”或幻灯片数量从1 1 , 2 , 3 ,等等。Defualt:“乞求”
slideStart: first,
offsetV: 5,
//中心垂直幻灯片内容——布尔。默认值:假
centerV: true,
目 录
一、引言 1
（一）Miss Tina婚纱网站的背景 1
（二）Miss Tina婚纱网站的目标 1
二、网站的需求分析 1
三、网站开发工具的介绍 1
（一）Photoshop软件 1
（二）Dreamweaver软件 1
四、网站的界面设计 2
（一）Logo设计 2
1. 创意来源 2
2. 具体效果 2
(二)首页效果设计 2
1. jQuery图片全屏滑动轮播 2
2. 鼠标移到图片出现图片变色说明 2
（三）子页效果设计 4
1.“关于我们”的设计 4
2.“最新作品”的设计 4
五、 网站的具体实现 5
（一）DIV+CSS布局 5
（二）首页的实现 6
1.“主页特效”的实现 6
2.主页排版的实现 8
（三）子页的实现 8
1. “关于我们”的实现 8
2. “服务套系”的实现 8
3. “最新客片”的实现 9
4.“立即抢订”的实现 9
5.“婚纱礼服小贴士”的实现 9
（四）特效的实现 10
1. 鼠标移到图片出现图片变色 10
*好棒文|www.hbsrm.com +Q: ^351916072*
2. 滑动至顶部的特效 11
六、网站的兼容性测试 11
七、总结 12
参考文献 14
附录 15
一、引言
（一）Miss Tina婚纱网站的背景
中国，一个人口众多的文明古国，每年将近会有1000多万对新人结婚，而结婚的新人里约89%需要拍摄婚纱照，婚纱摄影艺术已经成为了一个巨大的贸易市场。在这个网络信息技术日益蓬勃兴起的时代，愈来愈多的婚纱摄影公司都纷纷建立起属于自己的门户网站,在成千上万风格迥异的网站中，要在竞争对手中，脱颖而出，并不是十分容易的一件事，拒绝商业化雷同和模式化的安排，满足高品质消费人群的需求，对于消费者来说，他不仅仅是一次简简单单的消费，更多的是在这个过程中感受到的一种精致生活体验，一种享受。
（二）Miss Tina婚纱网站的目标
通过建立Miss Tina婚纱摄影公司网站在Internet上展示公司形象及互动交流，进行网上销售业务，以成功网站平台营销，打造强势的网络形象及促进销售，通过展示公司实力，吸引消费者眼球，让客户通过网站了解企业的各个方面，开拓市场。全面介绍展示本公司的各种人性化服务，得到客户最真实的反馈，查漏补缺，加以改善。现如今，电子商务蒸蒸日上，同时给消费者带来了许多的方便，以此作为一个与客户交流的平台，使客户足不出户就能实时了解自己所需商品的详细信息，让客户更加的直观了解。网站成为商家与用户的沟通桥梁，建立网站树立公司形象，进行更好的宣传。
二、网站的需求分析
随着电子商务愈来愈成熟，许多商户纷纷建立起属于自己的交易平台，网站的宣传和推广成为企业必不可少的一部分，通过平台的宣传能够更快提高企业的知名度，提升自己的品牌价值，从而能够吸引更多的顾客。因此建立一个电子商务网站是极为重要和关键的。在网站上及时更新和提供最新，最有用的消息，更能打动顾客，讨得顾客欢心，因此企业建立网站是为了尽快提高企业的知名度，也是企业营销策略之一。
三、网站开发工具的介绍
（一）Photoshop软件
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图片处理软件。Photoshop主要处理以像素所构成的数字图像，可以有效地进行图片编辑工作，在图像、图形、文字、视频、出版等各方面都有涉及,可以进行复制，去除斑点，修补，修饰图像残损等。Photoshop在专业测评、平面设计、广告摄影、影像创意、网页制作、后期修饰、视觉创意、界面设计等方面都发挥着极大的作用。主要由标题栏、菜单栏 、图像编辑窗口、文本行、缩放栏、预览框组成。
（二）Dreamweaver软件
Dreamweaver CS6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站的移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时试图等多种方式来创作、编写和修改网页（通常是标准用标记语言下的一个应用HTML）,对于初级人员，可以无需编写任何代码就能快速创建web页面。
四、网站的界面设计
（一）Logo设计
1. 创意来源
Miss Tina的logo创意就是将Miss Tina这两个英文单词构成，利用Photoshop简单加以修饰，赋予一些感性色彩,在此基础上创造个性成分，以简洁明快的图形化语言与社会大众沟通，使企业文化和关键信息得以快速传播，并形成品牌信息文化的沉淀。可延伸性理解度很广，是为公司核心理念的延伸，该logo与Miss Tina企业文化紧密相连，使人们牢记它的名字。标志饱满大方，表达了Miss Tina将更稳健地发展，更加国际化、职业化。
2. 具体效果
具体效果，如图41所示。
图41 LOGO效果图
(二)首页效果设计
1. jQuery图片全屏滑动轮播
基于jQuery的一款图片展示特效代码，用于实现左右滑动切换图片全屏滑动轮播的效果，在这里stage height：472，代表舞台的高度像素为472px,slidestart：first为由HTML代码中第一张图片开始顺序滑动播放，slide position: center,表示滑动定位部分是中心，部分代码如下：
jQuery(function ($) {
var slider = $(.misstage).miSlider({
//阶段的高度px。选择:虚假或正整数。假=身高计算最大高度。默认值:假
stageHeight: 472,
// 数量的幻灯片可见。选择:虚假或正整数。假=适合尽可能多。默认值:1
slidePosition: center,
// 幻灯片开始。选项:“乞求”、“中期”,“结束”或幻灯片数量从1 1 , 2 , 3 ,等等。Defualt:“乞求”
slideStart: first,
offsetV: 5,
//中心垂直幻灯片内容——布尔。默认值:假
centerV: true,
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/702.html
