毕业设计移动端化妆品网站HTML.docx

毕业设计移动端化妆品网站HTML.docx

《毕业设计移动端化妆品网站HTML.docx》由会员分享，可在线阅读，更多相关《毕业设计移动端化妆品网站HTML.docx（19页珍藏版）》请在冰豆网上搜索。

毕业设计移动端化妆品网站HTML

JadeSnow移动端化妆品网站设计与实现

摘要

网上购物的商业价值不断凸显，睿智的企业主跃跃欲试。

一个属于移动互联网的大时代呼之欲出，手机用户正在逐渐成为企业的主要消费人群，用户大多数更倾向于使用手机，平板等终端工具浏览信息，企业如果想要获得更多用户的青睐，手机官方网站的设计与实现就显得尤为重要，手机页面的是一种基Web和PC办网站相融合的新型网站，建立手机端的网站对提高自己品牌的知名度，以及销量，提升用户体验，从而赢得更多的更多的移动客户群体等均起到了重要的推动作用，成为企业进行营销的另一种方式和途径。

论文主要是完成基于HTML5的移动端网站设计与实现，以文字图片等多种丰富的多媒体形式向客户展示自己的品牌及自己的产品，移动端网站的页面主要基于当前流行的HTML5的新特性，运用HTML5技术，优化网站的提示能够自动识别窗户屏幕大小，完全适用于手机、平板。

网站内容精简，加载速度非常快，让手机用户更方便的浏览信息，让微官网的页面内容展示更加丰富，管理更加便捷。

系统后台主要基于PHP进行程序开发，利用MySQL数据库来存储数据，同时采用HTML5技术来实现微官网的页面展示，论文主要是围绕JadeSnow移动端化妆品网站开发与设计为主题，介绍了该网站的开发所用到的核心技术，我们做这个页面主要就是前台页面，所以本篇论文主要写的就是与HTML5相关的一些技术。

以及JadeSnow移动端化妆品网站的一些界面的基本布局还有一些动画效果的实现原理。

关键词：

HTML5，CSS3，jQuery，PHP，网站美化

DesignAndImplementationOfJadeSnowMobileTerminalCosmeticsWebsite

ABSTRACT

Thecommercialvalueofonlineshoppinghasbeenhighlighted,andthewisebusinessownersareeagertodoso.ApartofthemobileInterneteratroops,mobilephoneusersaregraduallybecomethemainconsumergroupsofenterprises,mostusersprefertousemobilephone,tabletandotherterminaltooltobrowseinformation,iftheenterprisewantstogetmorecustomers,thedesignandimplementationofmobilephoneofficialwebsiteisparticularlyimportant,thepageisakindofmobilephonethenewwebsitebasedonWebandPCtodothesiteintegration,theestablishmentofmobilephonewebsitetoimprovetheirbrandawarenessandsales,enhancetheuserexperience,therebywinningmoremobilecustomergroupsareplayedanimportantroleinpromoting,marketinghasbecomeanotherwayofenterprise.

ThethesisiscompletedandimplementationofwebsitedesignbasedonmicroHTML5,showingtheirownbrandsandtheirproductstocustomerswithmultimediatextimagesandotherrich,microofficialwebsitepageismainlybasedonthenewcharacteristicsofthecurrentpopularHTML5,theuseofHTML5technology,networkstationoptimizationtipscanautomaticallyidentifythewindowscreensize,completelysuitableformobilephone,tablet.Websitecontentisstreamlined,loadingspeedisveryfast,letmobilephoneusersmoreconvenientbrowsinginformation,letmicroofficialwebsitecontentdisplaymoreabundant,managementmoreconvenient.

ThesystembackstagemainlyforprogramdevelopmentbasedonPHP,usingMySQLdatabasetostoredata,andtorealizethemicroofficialwebsitetodisplaythepageusingHTML5technology,thisdissertationfocusesonthedesignanddevelopmentofJadeSnowmobileterminalcosmeticswebsiteasthetheme,introducesthecoretechnologyusedinthedevelopmentofthesite,wedothemainpageisthefrontpage.SothisthesisiswritteninHTML5andsomerelatedtechnology.AndJadeSnowmobileterminalcosmeticssiteofsomeofthebasiclayoutoftheinterface,therearesomeanimationeffectoftherealizationoftheprinciple.

KEYWORDS:

HTML5,CSS3,jQuery,PHP,websitebeautification

目　录

1.3国内外移动端网站建设状况...........................................................4

前　言

随着互联网技术的不断发展，人社会越来越离不开对互联网的运用。

互联网的技术不是漫无目的的发展，而是根据人类社会的需求指引了方向。

HTML5与Blog的孕育而生就是源于人类社会的需求而出现的互联网技术。

HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。

目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如AdobeFlash、MicrosoftSliverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。

HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

随着计算机的发展和普及，博客得到了极大的发展。

博客是Blog的音译，Blog是Weblog（网络日志）的简称。

Blog是即E-mail、BBS、ICQ之后的第四种网络交流方式。

它以个人为中心传播出版有影响力的消息、新闻、事件等，鲜明的个人特色引人瞩目，它以独特的视角、敏锐的观察力，不断的冲击传统媒体。

第1章绪论

1.1研究现状

依据中国网络发展现状调查得出，我国手机上网的人数已达6亿多，2014与2015年相比，人数上增了6303万人如图1-1所示。

可见，手已经成为每个人不可或缺的部分，移动互联网成为一种方便快捷的信息获取手段和沟通交流方式，他已经深深融入手机用户群体的日常生活之中,如图1.1所示。

图1.1中国手机网民规模及其占网民比例

在移动网络发展中，特别是4G的产生，移动网络的优越性愈发凸显，使得人们与移动设备和移动互联网的接触越来越频繁。

随着手机的智能化发展，安装不同作系统的手机，具备了功能强大的浏览器后，使得它的功能跟电脑操作显示的效果更加接近。

手机的换代也使得手机的浏览器随着不断的优化和升级，这也为HTML5技术在移动移动网络方向的发展提供源源不断的动力。

由此，用户大多使用手机进行信息浏览。

但是，很多的网站在手机上的显示效果并不好。

网站的设计因此出现了新的要求，就是网站必须要适应移动设备显示，这使得手机网站由此诞生。

运用HTML5技术，优化网站的显示，让手机用户更方便的浏览信息手机网站可以图文并茂的展现企业的信息，从而为企业的营销市场开拓了一条宽阔的道路。

目前很多商家建立起了自己的网站

这些网站的建立使得商家可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。

网络具有超时空性。

网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。

超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。

网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改

变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。

网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。

此次设计的JadeSnow化妆品网站的海量存储特性可以从横向和纵向两方面分析：

横向看化妆品往往设置多个板块，分别放置相关内容。

不同板块的信息相互独立，共同构成网站的内容。

纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。

大量的信息使得此次设计的化妆品网站成为一个巨大的数据库。

网站前端设计最基本的三个技能：

HTML，CSS，JavaScript，PS矢量图像编辑技术

。

这个是前端开发中最基本也是最必须的三个技能。

前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。

在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。

1.2发展前景

如今，层出不穷的现代信息技术服务模式，对传统信息化服务系统产生一定的影响。

用户大多使用手机浏览信息，而企业要想获得手机用户的青睐，手机网站的搭建就必不可少。

移动端网站靠着移动网络和手机网站的支持，成为企业进行营销的另一种方式和途径。

在现在手机用户居多的情况下，建立微官网将能够是用户有更好的体验，从而提升企业的形象，赢得更多的移动客户群体，推动企业的发展。

移动端网站是一种基于Web和传统PC版网站相融合的新型网站。

移动端网站比电脑版网站更有优势。

它是应移动互联网的大环境而生的，移动互联网为微官网搭建了一个随时可供浏览的大平台。

而相对于电脑版的官网，移动端网站省去了很多的操作步骤，符合现代的快节奏生活环境，让用户有更方便快捷的体验。

微官网不仅仅实现了电脑版网页应该有的功能，而且能够以更完美的显示效果呈现给手机用户。

移动端网站具有网站内容精简，页面资源小，加载速度非常快，可以和微信公共平台完美结合的特点。

移动端网站作为展示、营销、互动和服务的载体，可以包罗绝大部分功能的实现，它将成为各种企业必不可少的重要部分。

现在的移动网络社会中，出现越来越多的借助微信浏览器而开发的新型网站，而移动端网站的设计与实现将对企业的营销能够起到一定的作用。

1.3国内外移动端网站建设状况

（1）截至2015，有80%的移动端的网站将全部或部分基于HTML5。

这意味着大部分移动端的内容都将是以网页的形式呈现，典型的例子包括微信、Facebook、Twitter等。

（2）浏览量最高的1000个H5作品中，42%是心灵鸡汤，最高17,358,480uv;27%是测试题，最高49,940,339uv;15%是社交互动游戏，最高2,892,047uv;5%是大型品牌宣传，最高551,195uv。

（3）谷歌浏览器于9月1日起不再自动播放Flash亚马逊宣布旗下网络（包括A门户在内）的所有广告将不再使用Flash。

在可预见的未来，Flash广告将被HTML5广告所替代。

（4）目前支持H5分享的平台：

国内的微信、微博，国外有Facebook、Twitter、LinkedIn，当然每个平台分享的形式略有差异。

各大主流社交平台对H5分享的支持都是比较友好的，只不过每个平台的分享接口都需要单独的定制。

当然这也在暗示HTML5的推广渠道其实可以更加多元化，并且其在内容营销中有着极大的应用潜力。

事实上随着技术的成熟和各种H5工具的涌现H5制作已经渐渐走向标准化，成本问题也随着一些工具的出现有了极大的改善。

或许H5技术的发展已经超出你的想象，很多问题已经有了不错的解决方案。

1.4本章小结

本章阐述了现在移动端用户的使用量占网络的大多数，所以移动端网站的建设有很大的发展前景，所以我们就选择做了一个移动端的网站。

第2章开发基础及相应工具

2.1开发环境

网站前端开发，即网页架构设计

。

主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。

用编译器SublimeText，完成CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台

程序的整合工作。

另外，要对网站做一些相应的更新，维护及优化。

整个网站开发的流程在后面有具体介绍

。

前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合。

2.2开发工具

（1）SublimeText3是一个代码编辑器（SublimeText2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。

SublimeText是由程序员JonSkinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

SublimeText具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。

还可自定义键绑定，菜单和工具栏。

SublimeText的主要功能包括：

拼写检查，书签，完整的PythonAPI，Goto功能，即时项目切换，多选择，多窗口等等。

SublimeText是一个跨平台的编辑器，同时支持Windows、Linux、MacOSX等操作系统。

（2）AdobePhotoshop，简称“PS”，是一个由AdobeSystems开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。

使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。

在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop制作矢量图形用作网站页面的修饰按钮。

2.3开发相关技术

2.3.1HTML5

HTML5（简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。

[3]HTML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。

HTML5最大的好处在于它是一个开放的技术,而且具有基于Webkit[4]内核的浏览器这个最大的特点，将会是未来移动开发技术的发展趋势。

当今主流浏览器都支持HTML5，HTML5在未来的5-10年中，将成为移动发展的一个重要因素。

HTML5以开放的Web标准为基础，开发出来的较为完备的新的编程规范。

它具有视频和音乐的展示以及动态的效果，具备强大的离线存储功能等等的特点。

运用HTML5技术进行设计，简单易懂易用，它可以实现让同一张网页自动适应不同大小的屏幕，再根据屏幕宽度，自动调整进行页面布局。

HTML5技术能够在移动设备上支持多媒体。

它具有新的语法特征，也能够实现一些新的功能，用户与文档的交互方式受到了本质性的改变。

从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。

从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。

2.3.2CSS简介

CSS（层叠样式表）是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。

在制作网页时采用CSS技术

，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS中，Cascading是“层叠”的意思，

也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。

从样式表插入的形式看可以分为3种。

（1）内联式样式表

；

（2）嵌入式样式表

；

（3）外部式样式表

；

CSS的特点：

CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。

除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：

减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。

2.3.3PHP

PHP（外文名:

PHP:

HypertextPreprocessor，中文名：

“超文本预处理器”）是一种通用开源脚本语言。

语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。

PHP独特的语法混合了C、Java、Perl以及PHP自创的语法。

它可以比CGI或者Perl更快速地执行动态网页。

用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。

PHP的特性包括：

（1）PHP独特的语法混合了C、Java、Perl以及PHP自创新的语法。

（2）PHP可以比CGI或者Perl更快速的执行动态网页——动态页面方面，与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP具有非常强大的功能，所有的CGI的功能PHP都能实现。

（4）PHP支持几乎所有流行的数据库以及操作系统。

（5）最重要的是PHP可以用C、C++进行程序的扩展！

PHP优势：

（1）开放源代码：

所有的PHP源代码事实上都可以得到。

（2）免费性：

和其它技术相比，PHP本身免费且是开源代码。

（3）快捷性：

程序开发快，运行快，技术本身学习快。

嵌入于HTML：

因为PHP可以被嵌入于HTML语言，它相对于其他语言。

编辑简单，实用性强，更适合初学者。

（4）跨平台性强：

由于PHP是运行在服务器端的脚本，可以运行在UNIX、LINUX、（5）WINDOWS、MacOS、Android等平台

（6）效率高：

PHP消耗相当少的系统资源。

（7）图像处理：

用PHP动态创建图像,PHP图像处理默认使用GD2。

且也可以配置为使用imagemagick进行图像处理。

（8）面向对象：

在php4,php5中，面向对象方面都有了很大的改进，php完全可以用来开发大型商业程序。

（9）专业专注：

PHP支持脚本语言为主，同为类C语言。

2.3.4MySQL

MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发，目前属于 Oracle 旗下产品。

MySQL是最流行的关系型数据库管理系统之一，在WEB应用方面，MySQL是最好的RDBMS（RelationalDatabaseManagementSystem，关系数据库管理系统）应用软件。

MySQL是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。

MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。

MySQL软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。

2.4本章小结

本章介绍了开发数字媒体技术系网站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如：

HTML、PHP、MySQL等。

以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。

第3章布局分析与设计

3.1开发流程及设计

JadeSnow移动端化妆品网站的开发，在刚开始的时候我和我的组员讨论一下网站的布局，到底写几个页面，以及网站的页面的分配，在分配好以后我们开始讨论网站的页面的大体颜色，因为我们想做一个颜色比较鲜明的网站，所以我们就用了红黑两种颜色。

颜色设置好以后我们就开始铺页面，在铺页面的过程中我们会进行交流，尽量做到页面的对称。

页面铺好以后我们就开始实现其中的一些所必须的功能，以及数据的添加，后台编写，以及数据库的创建。

最后合到一起，改一下布局，最后就是修改bug。

3.1.1分层开发

分层模式是最常见的一种架构模式，将解决方案的组件分割到分隔到不同层中大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。

如图3.1所示。

图3.1分层开发模型

这样做的好处是能根据项目的不同

，划分出不同的功能模块，合理的安排时间，在有限的时间内做出很多模块和功能。

降低开发成本，提高开发效率。

3.1.2代码编写

前期工作准备好后，就开始进入代码编写阶端

，在刚开始的时候我们把做项目所需要的图片都给准备好，是我们在写页面的时候不用再去找图片，缩减了项目所需的时间，然后就开始写代码，我们会事先判定那些模块是需要用到很多次的，一般情况下如果用到很多次我们会把它另外写在一个文件里，灯影到这个米