JadeSnow移动端化妆品网站设计与实现-毕业设计.docx

《JadeSnow移动端化妆品网站设计与实现-毕业设计.docx》由会员分享，可在线阅读，更多相关《JadeSnow移动端化妆品网站设计与实现-毕业设计.docx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、洛阳理工学院毕业设计（论文）JadeSnow移动端化妆品网站设计与实现摘 要网上购物的商业价值不断凸显，睿智的企业主跃跃欲试。一个属于移动互联网的大时代呼之欲出，手机用户正在逐渐成为企业的主要消费人群，用户大多数更倾向于使用手机，平板等终端工具浏览信息，企业如果想要获得更多用户的青睐，手机官方网站的设计与实现就显得尤为重要，手机页面的是一种基Web和PC办网站相融合的新型网站，建立手机端的网站对提高自己品牌的知名度，以及销量，提升用户体验，从而赢得更多的更多的移动客户群体等均起到了重要的推动作用，成为企业进行营销的另一种方式和途径。论文主要是完成基于HTML5的移动端网站设计与实现，以文字图片

2、等多种丰富的多媒体形式向客户展示自己的品牌及自己的产品，移动端网站的页面主要基于当前流行的HTML5的新特性，运用HTML5技术，优化网站的提示能够自动识别窗户屏幕大小，完全适用于手机、平板。网站内容精简，加载速度非常快，让手机用户更方便的浏览信息，让微官网的页面内容展示更加丰富，管理更加便捷。系统后台主要基于PHP进行程序开发，利用MySQL数据库来存储数据，同时采用HTML5技术来实现微官网的页面展示，论文主要是围绕JadeSnow移动端化妆品网站开发与设计为主题，介绍了该网站的开发所用到的核心技术，我们做这个页面主要就是前台页面，所以本篇论文主要写的就是与HTML5相关的一些技术。以及J

3、adeSnow移动端化妆品网站的一些界面的基本布局还有一些动画效果的实现原理。关键词：HTML5，CSS3，jQuery，PHP，网站美化Design And Implementation Of JadeSnow Mobile Terminal Cosmetics WebsiteABSTRACTThe commercial value of online shopping has been highlighted, and the wise business owners are eager to do so. A part of the mobile Internet era troops,

4、 mobile phone users are gradually become the main consumer groups of enterprises, most users prefer to use mobile phone, tablet and other terminal tool to browse information, if the enterprise wants to get more customers, the design and implementation of mobile phone official website is particularly

5、 important, the page is a kind of mobile phone the new website based on Web and PC to do the site integration, the establishment of mobile phone website to improve their brand awareness and sales, enhance the user experience, thereby winning more mobile customer groups are played an important role i

6、n promoting, marketing has become another way of enterprise.The thesis is completed and implementation of website design based on micro HTML5, showing their own brands and their products to customers with multimedia text images and other rich, micro official website page is mainly based on the new c

7、haracteristics of the current popular HTML5, the use of HTML5 technology, network station optimization tips can automatically identify the window screen size, completely suitable for mobile phone, tablet. Website content is streamlined, loading speed is very fast, let mobile phone users more conveni

8、ent browsing information, let micro official website content display more abundant, management more convenient.The system backstage mainly for program development based on PHP, using MySQL database to store data, and to realize the micro official website to display the page using HTML5 technology, t

9、his dissertation focuses on the design and development of JadeSnow mobile terminal cosmetics website as the theme, introduces the core technology used in the development of the site, we do the main page is the front page. So this thesis is written in HTML5 and some related technology. And JadeSnow m

10、obile terminal cosmetics site of some of the basic layout of the interface, there are some animation effect of the realization of the principle.KEY WORDS: HTML5, CSS3, jQuery,PHP,website beautification目录前言1第1章 绪论21.1研究现状21.2发展前景31.3国内外移动端网站建设状况.41.3 本章小结4第2章 开发基础及相应工具52.1 开发环境52.2 开发工具52.3 开发相关技术52.

11、3.1 Java script 简介52.3.2 Java script 基本特点62.4 CSS简介62.5 JQuery72.6 本章小结8第3章 布局分析与设计93.1 开发流程及设计93.1.1 分层开发93.1.2 代码编写93.2 设计.103.2.1模块分布103.2.2 配置颜色123.2.3 CSS元素123.3 网站结构布局及设计143.3.1 网站首页结构143.3.2 板式编排布局合理性143.4本章小结16第4章 网站详细设计174.1 用户登录模块174.2 用户注册模块19本章小结25结论26谢辞27参考文献285前言随着互联网技术的不断发展，人社会越来越离不开对

12、互联网的运用。互联网的技术不是漫无目的的发展，而是根据人类社会的需求指引了方向。HTML5与Blog的孕育而生就是源于人类社会的需求而出现的互联网技术。HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Sliverlight，与Oracle Ja

13、va FX的需求，并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。随着计算机的发展和普及，博客得到了极大的发展。博客是Blog的音译，Blog是Weblog(网络日志)的简称

14、。Blog是即E-mail、BBS、ICQ之后的第四种网络交流方式。它以个人为中心传播出版有影响力的消息、新闻、事件等，鲜明的个人特色引人瞩目，它以独特的视角、敏锐的观察力，不断的冲击传统媒体。 第1章 绪论1.1研究现状依据中国网络发展现状调查得出，我国手机上网的人数已达6亿多，2014与2015年相比，人数上增了6303万人如图1-1所示。可见，手已经成为每个人不可或缺的部分，移动互联网成为一种方便快捷的信息获取手段和沟通交流方式，他已经深深融入手机用户群体的日常生活之中,如图1.1所示。图 1.1 中国手机网民规模及其占网民比例在移动网络发展中，特别是4G的产生，移动网络的优越性愈发凸显

15、，使得人们与移动设备和移动互联网的接触越来越频繁。随着手机的智能化发展，安装不同作系统的手机，具备了功能强大的浏览器后，使得它的功能跟电脑操作显示的效果更加接近。手机的换代也使得手机的浏览器随着不断的优化和升级，这也为HTML5技术在移动移动网络方向的发展提供源源不断的动力。 由此，用户大多使用手机进行信息浏览。但是，很多的网站在手机上的显示效果并不好。网站的设计因此出现了新的要求，就是网站必须要适应移动设备显示，这使得手机网站由此诞生。运用HTML5技术，优化网站的显示，让手机用户更方便的浏览信息手机网站可以图文并茂的展现企业的信息，从而为企业的营销市场开拓了一条宽阔的道路。 目前很多商家建

16、立起了自己的网站这些网站的建立使得商家可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。此次设计的JadeSnow化妆品网站的海量存

17、储特性可以从横向和纵向两方面分析：横向看化妆品往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得此次设计的化妆品网站成为一个巨大的数据库。网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前

18、，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。1.2发展前景如今，层出不穷的现代信息技术服务模式，对传统信息化服务系统产生一定的影响。用户大多使用手机浏览信息，而企业要想获得手机用户的青睐，手机网站的搭建就必不可少。移动端网站靠着移动网络和手机网站的支持，成为企业进行营销的另一种方式和途径。在现在手机用户居多的情况下，建立微官网将能够是用户有更好的体验，从而提升企业的形象，赢得更多的移动客户群体，推动企业的发展。移动端网站是一种基于Web和传统PC版网站相融合的新型网站。移动端网站比电脑版网站更有优势。它是应移动互联网的大环境而生的，移动互联网为微官网搭建了一个随时可供浏览的

19、大平台。而相对于电脑版的官网，移动端网站省去了很多的操作步骤，符合现代的快节奏生活环境，让用户有更方便快捷的体验。微官网不仅仅实现了电脑版网页应该有的功能，而且能够以更完美的显示效果呈现给手机用户。移动端网站具有网站内容精简，页面资源小，加载速度非常快，可以和微信公共平台完美结合的特点。移动端网站作为展示、营销、互动和服务的载体，可以包罗绝大部分功能的实现，它将成为各种企业必不可少的重要部分。现在的移动网络社会中，出现越来越多的借助微信浏览器而开发的新型网站，而移动端网站的设计与实现将对企业的营销能够起到一定的作用。1.3国内外移动端网站建设状况(1)截至 2015，有 80%的移动端的网站将

20、全部或部分基于 HTML5。这意味着大部分移动端的内容都将是以网页的形式呈现，典型的例子包括微信、 Facebook、Twitter 等。 (2)浏览量最高的1000个H5作品中，42%是心灵鸡汤，最高17,358,480 uv;27% 是测试题，最高 49,940,339 uv;15% 是社交互动游戏，最高 2,892,047 uv; 5% 是大型品牌宣传，最高 551,195 uv。 (3)谷歌浏览器于9月1日起不再自动播放 Flash亚马逊宣布旗下网络 (包 括 A门户在内 ) 的所有广告将不再使用 Flash。在可预见的未来，Flash广告将被 HTML5广告所替代。(4)目前支持 H

21、5 分享的平台：国内的微信、微博，国外有 Facebook、Twitter 、LinkedIn ，当然每个平台分享的形式略有差异。各大主流 社交平台对H5分享的支持都是比较友好的，只不过每个平台的分享接口都需要 单独的定制。当然这也在暗示 HTML5的推广渠道其实可以更加多元化，并且其在内容营销中有着极大的应用潜力。 事实上随着技术的成熟和各种 H5工具的涌现H5制作已经渐渐走向标准化，成本问题也随着一些工具的出现有了极大的 改善。或许H5技术的发展已经超出你的想象，很多问题已经有了不错的解决方案。1.4本章小结本章阐述了现在移动端用户的使用量占网络的大多数，所以移动端网站的建设有很大的发展前

22、景，所以我们就选择做了一个移动端的网站。 第2章 开发基础及相应工具2.1 开发环境网站前端开发，即网页架构设计。主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。用编译器Sublime Text，完成CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台程序的整合工作。另外，要对网站做一些相应的更新，维护及优化。整个网站开发的流程在后面有具体介绍。前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合。2.2 开发工具(1) Sublime Text3 是一个代码编辑器（Subl

23、ime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作

24、系统。(2) Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。2.3 开发相关技术2.3.1 HTML5HTML5（简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，

25、潜力巨大。3 HTML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。HTML5最大的好处在于它是一个开放的技术,而且具有基于Webkit4内核的浏览器这个最大的特点，将会是未来移动开发技术的发展趋势。当今主流浏览器都支持HTML5，HTML5在未来的5-10年中，将成为移动发展的一个重要因素。 HTML5以开放的Web标准为基础，开发出来的较为完备的新的编程规范。它具有视频和音乐的展示以及动态的效果，具备强大的离线存储功能等等的特点。运用HTML5技术进行设计，简单易懂易用，它可以实现让同一张网页自动适应不同大小的屏幕，再根据屏幕宽度，自动调整进行页面布局。HTML5技术能够在移动设备上

26、支持多媒体。它具有新的语法特征，也能够实现一些新的功能，用户与文档的交互方式受到了本质性的改变。从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。 2.3.2CSS简介CSS(层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，

27、就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。(1)内联式样式表；(2)嵌入式样式表；(3)外部式样式表；CSS的特点：CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将

28、样式分类使用。 2.3.3 PHPPHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行

29、更快。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)快捷性：程序开

30、发快，运行快，技术本身学习快。嵌入于HTML：因为PHP可以被嵌入于HTML语言，它相对于其他语言。编辑简单，实用性强，更适合初学者。(4)跨平台性强：由于PHP是运行在服务器端的脚本，可以运行在UNIX、LINUX、(5)WINDOWS、Mac OS、Android等平台(6)效率高：PHP消耗相当少的系统资源。(7)图像处理：用PHP动态创建图像,PHP图像处理默认使用GD2。且也可以配置为使用imagemagick进行图像处理。(8)面向对象：在php4,php5 中，面向对象方面都有了很大的改进，php完全可以用来开发大型商业程序。(9)专业专注：PHP支持脚本语言为主，同为类C语言。

31、2.3.4 MySQLMySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于Oracle旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件。MySQL是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其

32、体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。2.4 本章小结本章介绍了开发数字媒体技术系网站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如：HTML、PHP、MySQL等。以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。 第3章 布局分析与设计3.1 开发流程及设计JadeSnow移动端化妆品网站的开发，在刚开始的时候我和我的组员讨论一下网站的布局，到底写几个页面，以及网站的页面的分配，在分配好以后我们开始讨论网站的页面的大体颜色，因为我们想做一个颜色比较鲜明的网站，所以我们就用了红黑两种颜色

33、。颜色设置好以后我们就开始铺页面，在铺页面的过程中我们会进行交流，尽量做到页面的对称。页面铺好以后我们就开始实现其中的一些所必须的功能，以及数据的添加，后台编写，以及数据库的创建。最后合到一起，改一下布局，最后就是修改bug。3.1.1 分层开发分层模式是最常见的一种架构模式，将解决方案的组件分割到分隔到不同层中大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图3.1所示。总体结构搭建模块制作页面制作分层开发底层JS搭建JS交互效果代码优化内部测试图3.1分层开发模型这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安排时间，在有限的时间

34、内做出很多模块和功能。降低开发成本，提高开发效率。3.1.2 代码编写前期工作准备好后，就开始进入代码编写阶端，在刚开始的时候我们把做项目所需要的图片都给准备好，是我们在写页面的时候不用再去找图片，缩减了项目所需的时间，然后就开始写代码，我们会事先判定那些模块是需要用到很多次的，一般情况下如果用到很多次我们会把它另外写在一个文件里，灯影到这个米快的时候我们会把它引用过来，这样就大大的精简了代码，网页加载的速度也就快了很多。在这些都写完了以后，我们就开始页面的搭建，我们会根据之前确定好的样式来进行编写，做到最大程度的还原，而且确保页面的美观度。在代码的编写过程中，最重要的是标准和规范的执行遵守，

35、在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要页面设计，编写HTML 编写样式CSS，页面逻辑JavaScript，提交开发 如图3-2所示。开始 页面设计 编写页面 编写样式 页面逻辑 提交开发 结束 图 3-2 编写流程图3.2页面设计3.2.1模块分布最初的设计是整个项目中最重要的事情，它确定了整个页面的格调，以及页面的美观度，现在的购物页面都写的很漂亮，用户在购物的时候看到很漂亮的页面购物的欲望也会大很多。我们两个在设计页面的时候发生了很多分歧，因为每个人的审美观不同，但是我们不断的修改最中确定了页面的布局。3.2.2 配置颜色产生丰富色彩的三原色是红，绿，蓝，也就是RG

36、B，十六进制是00 00 00，例如经常写的red，color:#FF0000； 缩写color:#F00；color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是化妆品网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。3.2.3 CSS元素CSS分为

37、块级元素、行内元素、内联块状元素。说到CSS肯定会想到盒模型网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。Display: inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。(1)CSS间距:相应的设置大小，行高，首行缩进，间距（paddin

38、g，margin）,内边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px; 上右左下padding:10px 15px;上右下左(2)浮动:浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2

39、从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。3.3 网站结构布局及设计3.3.1 网站首页结构实际内容占据网页的大部分空间，为50%80%，导航部分不超过20%。颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读。网站主要用来进行消费者进店浏览需要的商品。作为一个网站，应该由一些相关及相对独立的模块整合

40、而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。3.3.2 板式编排布局合理性网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、

41、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。网页设计主要以Adobe产品为主，常见的工具包括FW、PS、FL、DW、CDR、AI等，

42、其中DW是代码工具，其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。专业的网页设计，需要经历以下几个阶段：(1)需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。(2)以业务目标为中心进行功能策划，制作出栏目结构关系图。(3)以满足用户体验设计为目标，使用

43、axure rp或同类软件进行页面策划，制作出交互用例。(4)以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。根据用户反馈，进行页面设计调整，以达到最优效果。3.4本章小结本章主要介绍了数字媒体技术系网站的具体布局，具体结构。也说明了设计前端的工作流程，还讲述了界面设计，交互设计中的一些理理念设计思想，并用图片的形式展现了设计以后的效果图。 第4章 网站详细设计4.1 用户登录模块用户登录模块：只需要输入用户名和密码就可以，在用户输入以后，后台会判断数据库里边是否有这个用户，以及用户名和密码是否匹配。用户登录成功以后可以看到自己购物车里的

44、东西，一及自己的一些信息，这些用户的信息都会存在数据库中用户在将东西加入到购物车的时候会判断有没有登录，如果没登录hi跳到登录界面，登录界面效果图如图4.1所示。图4.1 用户登录界面登录主要代码：form role=form novalidate name=f class=form action=login-do.php?gs= method=post*公共场所不建议自动登录，以防账号丢失手机号密码登录我还没有账号,立即注册4.2 用户注册模块用户注册：在用户想要买东西或将东西加入购物车的时候需要登录，如果没有注册账号，可以点击跳到注册界面，这个时候用户填写自己的基本信息就可以注册，用户的信息