基于PHP的化妆品企业网站的设计与实现.docx

1、基于PHP的化妆品企业网站的设计与实现基于PHP的化妆品企业网站的设计与实现引论现在人们口中最流行的词汇就是互联网，互联网技术的发展，深刻的改变了人们生活和工作中的各个方面。借用一鲨的互联网思维六字诀：迭代、群众、精品。迭代就是互联网时代，需要快速推向市场，与用户的互动中不断完善优化从而实现不断迭代；群众就是在全流程与群众互动，利用群众的力量去完善优化，吸取群众的智慧；精品就是互联网时代少就是多，需要将优势资源集中于一点实现引爆和突破，且依靠群众的口碑效应实现快速传播。企业需要的正是这种互联网思维。所以企业互联网化将是未来的发展趋势。企业互联网化的第一步就是建立自己的企业网站。企业网站相当于企

2、业的网络名片，企业可以利用网站来进行宣传、产品资讯发布、招聘等等。企业网站不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，通过网络直接帮助企业实现产品的销售。选择做化妆品企业网站主要是因为化妆品行业是暴力行业，市场上化妆品的品牌也是多不胜数，人们通过网络可以更快速地了解化妆品的品牌及产品，也可以很方便地选购适合自己的产品。所以化妆品网站无论是在技术上还是商业利益都具有可观的发展前景。本人选择的化妆品品牌是美素，选择这个牌子的理由很简单，因为它是国产品牌。国外大牌化妆品已占据了中国高端化妆品市场，我们应该加大对国产品牌化妆品的宣传，让更多的人了解国产品牌化妆品，进而促进国产化妆品市场的

3、发展。1 开发工具的选用及介绍本设计选用的开发工具是Adobe Dreamweaver CS5、WAMP，网站中所用到的素材图片的制作和处理是通过Adobe Photoshop CS3软件完成的。1.1 Adobe Photoshop CS3Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像，是目前世界公认的权威性图形图像处理软件。1.2 Dreamweaver CS5Adobe Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的一款集网页制作和管理网站于一身的所见即所得

4、网页编辑器。1.3 WAMPWAMP是Windows下的Apache+Mysql+PHP，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，兼容度高，共同组成了一个强大的Web应用程序平台。Apache是世界使用排名第一的Web服务器软件。MySQL是一个关系型数据库管理系统。PHP是Hypertext Preprocessor的缩写，是一种主要适用于Web开发领域的通用开源脚本语言。2 网站总体分析与设计2.1网站需求分析网站的需求分析是网站开发重要的一步。需求分析的结果直接关系到项目开发的成败和质量，它是新工程项目开发的依据，所以做好需求分析非常重要。如果没有仔细、深入地

5、做需求分析，没有把用户的目标与技术实现很好的结合起来，将会导致编程工作的大量返工，这样既浪费人力、物力又拖延开发周期，最后可能会因为系统无法按期交付使用，需要赔偿用户的损失。2.1.1 网站功能分析本网站是化妆品企业展示型网站，主要功能就是向用户展示企业产品、企业形象、品牌文化及企业新闻，方便用户了解企业。通过后台的企业管理系统，对网站的页面内容进行添加、删除和修改，方便网站后期的维护和更新。2.2.2网站形象分析对于一个以销售为主的企业而言，企业的品牌形象至关重要。 特别是对于互联网技术高度发展的今天，大多用户都是通过网络来了解企业产品、企业形象及企业实力，因此，企业网站的形象往往决定了用户

6、对企业产品的信心。建立高标准的网站能够极大的提升企业的整体形象。2.2网站设计原则在网站设计之前，首先要明确以下几项设计原则：(1)设计通用页面。用户电脑的显示器分辨率各不相同，为了让大多数用户都能正常浏览网页，我们通常制作1024768像素的网页，用纯色背景或图片来填充多余的空白空间，即使在高于1024768分辨率的显示器上浏览也显得美观。(2)整体规划。在进行网页设计之前，需要做一个整体的规划，例如网站怎么布局，分布好导航栏、边栏位置，层次要划分清晰。(3)导航清晰。导航栏目分类清晰，有条理，一般不宜过多，在6-10个左右。(4)优化图片：图片可以增强网页的美感，可是图片太多或太大又会影响

7、网页下载速度，用户体验不好。因此我们要尽量控制图片的大小，在10k以下为宜。(5)内容有吸引力：内容是一个网站的灵魂，应该对用户有吸引力，才能引来用户，留住用户。标题切忌太长平庸，应该简洁明了，有创意。(6)经常更新：网站内容只有不断更新，才能保持用户对网站的新鲜感。有时我们也要对网站进行改版升级，以免用户对旧版网页产生了厌倦的心态。2.3网站设计构思2.3.1网站的布局设计网站之前，最先想到的是网站的页面布局，即网站中的图文如何搭配位置最恰当。网站的布局确定以后，网站的基本框架就完成了，框架完成以后就可以在里面添加想要展示的内容了。网页的布局一般包括上文下图，上图下文，左图右文，左文右图几种

8、形式，为了使网站的页面简洁整齐，我选择了所有页面的头部和脚部采用相同的布局，并且所有二级页面采用左右两部分，左边是相同的菜单导航，右边是内容部分。首页的中间部分则分为banner、企业动态和最新产品三部分。为了增加网站的动感，banner采用四张轮播的图片。这样网站的整体感觉简洁明了。2.3.2 网站色调的选择网站的主色调是用户整体的视觉感官，若一个网站色调能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。在网站建设中，选择网站的主色调也是网站制作的重要工作。用户在浏览网站时，首先看到的就是网站的色调，网站的色调直接影响用户想不想观看你的网站。在色调选择中

9、不仅要考虑要做的是什么类型的网站，也要考虑主色调给人的视觉感受。不同的颜色能够引起人们不同的心理感受，色彩的美感能提供给人精神、心理方面的享受，让人们愿意浏览这样的网站。网站的色调选择是在确定网站主题后首先要考虑的问题，网站色调的选择直接影响整个网站制作出来的效果。本网站是一个关于化妆品的企业展示型网站，化妆品主要是针对的广大女性，因此选用了红色作为主色调，给人一种活力、热情的感觉，同时也体现了中国风。网站中着重突出和装饰的部分采用深浅不同的红色系，使网站有一定的层次感。由于网站的主色调是红色的，而网站中的文字颜色主要以黑色为主，所以网站背景采用白色，这样使网站中的文字信息更突出和明了，也使用

10、户感到网站很清晰。2.3.3 网站的结构图 网站的结构如图2-1所示：图 2-1网站结构3 网站页面的实现3.1前台页面的制作在制作网站之前，首先应该新建一个名为maysu的文件夹，然后在其下级分别新建名为html的文件夹用来存放html文件，名为css的文件夹用来存放css文件，名为images的文件夹用来存放素材图片，名为js的文件夹用来存放js文件。前期准备完成后，开始制作页面。为了实现内容和表现相分离，要使用语义化代码构建页面。首先通过HTML搭建好网站各个页面的结构框架，然后再通过CSS为页面布局。3.1.1 页面结构本网站导航共分为五个栏目：首页、美肌臻品、美素新闻、美素闺蜜和创世

11、传奇。其中美肌臻品页面以及其下的各个子页面的结构相同，美素新闻页面以及其下的子页面和创世传奇页面以及其下的子页面的结构相同，所以相同的结构只需要制作一个页面框架，具体页面内容从数据库中读取以实现不同的页面效果。由于网站各个页面的头部和脚部是相同的，所以，先来制作网站页面的整体框架。具体的HTML代码如下： 无标题文档 首  页 美肌臻品 美素新闻 美素闺蜜 创世传奇 关于我们 美素微博 美素商城 Copyright 2014 Yanfang Wang 基本框架完成之后，开始在内容部分添加页面的相关内容。首先来制作首页，首页的中间部分共有三个大的div，先放一个focus层，

12、用来放焦点图和点选按钮，然后放一个module1层，用来放品牌故事、优惠活动和最近动态三个板块，最后放一个module2-tt层，用来放最新产品。其中焦点图是用javascript代码实现的四张图片的轮播效果。由于整个页面的代码冗长，只提取了部分主要代码，代码如下： 1 2 3 4 品牌故事 优惠活动 最近动态 最新产品首页的导航及焦点图效果如图3-1所示，最新产品及脚部效果如图3-2所示：图 3-1首页（上）图 3-2首页（下）至此，首页的整体框架已完成。由于其他页面采用了相同的结构布局，内容部分分为左右两部分，左侧是菜单导航区，右侧是内容显示区。下面主要介绍一下导航菜单的制作过程。导航菜单

13、是头部导航除了首页外的四个栏目，其中美肌臻品下又分为璀璨光润焕白、凝润保湿、水漾透白、美白防晒和BB霜五个系列，美素新闻下分为企业新闻和行业新闻，创世传奇下分为公益活动和品牌荣誉。每个栏目下第一个子菜单默认为红色图片背景，鼠标经过其他菜单时，背景图由白色变为红色。具体框架的代码如下： 美肌臻品 璀璨光润焕白系列 凝润保湿系列 水漾透白系列 美白防晒系列 BB霜系列 美素新闻 企业新闻 行业新闻 美素闺蜜 创世传奇 公益活动 品牌荣誉 二级页面左侧的菜单导航效果及产品展示如图3-3所示：图 3-3产品页面3.1.2页面布局页面框架完成之后，就要为页面做整体的布局了。首先要考虑网站的整体样式，比如

14、页面的宽度为948px，上边距为16px，左右边距为auto（取计算机值），下边距为0；body部分背景色为白色，字体为12px大小的微软雅黑或黑体。然后开始定义页面每个模块的样式。下面以页面的头部为例，通过CSS为头部布局。menu类定义的是整个头部的样式，logo类是网站logo的样式，menu-bar类是导航栏的样式，menu-bar a是导航菜单的样式，menu-bar a.home是导航中首页的样式。具体头部样式代码如下：.menu position:relative; width:953px; height:54px; padding:4px 3px 3px; margin:0 0

15、 16px -3px; background:url(./images/nenu-bg.png) no-repeat;.logo display:block; width:155px; height:0; position:absolute; left:37px; top:6px;.menu-bar width:665px; height:40px; position:absolute; left:267px; top:11px;.menu-bar a display:inline-block; width:133px; font-size:18px; font-weight:bold; co

16、lor:#fff; text-align:center; line-height:35px; margin-top:3px; background:url(./images/line.jpg) repeat-y right top;.menu-bar a.homewidth:117px;3.2 数据库的设计页面完成后的首要任务就是设计数据库。本网站所用的是MySQL数据库，首先通过命令：mysql -u root -p连接MySQL，然后通过命令：create database maysu;创建名为maysu的数据库，创建完成后可以通过命令：show databases;查看MySQL中的数据

17、库，接着就可以通过命令：use maysu;使用刚才创建的maysu数据库了。下一步就是创建表，根据网站要实现的功能分析得到数据库中需要建立的表包括焦点图表、优惠活动表、最近动态表、产品表、新闻表、公益活动表和品牌荣誉表。 下面就以产品表为例来介绍一下表的设计。通过分析知道，产品表应该包含的字段有图片地址、产品名称、产品类别、产品价格、产品简介和产品特点。分析完成后开始创建产品表，具体命令如下：CREATE TABLE product (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 索引 ,pic varchar(50) CHARACT

18、ER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 图片地址 ,name varchar(255) CHARATER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 产品名称,type tinyint(1) NOT NULL DEFAULT 1 COMMENT 产品类别,1代表璀璨光润焕白系列,2代表凝润保湿系列,3代表水漾透白系列,4代表美白防晒系列,5代表BB霜系列 ,price int(11) UNSIGNED NOT NULL COMMENT 产品价格,intro text CHA

19、RATER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 产品简介,feature varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 产品特点 ,status tinyint(1) UNSIGNED NOT NULL DEFAULT 1 COMMENT 状态1正常0删除 ,ctime int(10) NOT NULL COMMENT 创建时间 ,PRIMARY KEY (id)ENGINE=InnoDBDEFAULT CHARACTER SET=

20、utf8 COLLATE=utf8_general_ciCOMMENT=产品表AUTO_INCREMENT=5ROW_FORMAT=COMPACT ;产品表设计效果如图3-4所示：图 3-4产品表表创建完成后通过命令：show tables;查看已创建的表，然后用相同的设计思路创建其他的表。3.3后台程序的开发后台程序开发选用的语言是PHP，下面还以产品为例，介绍后台程序的开发过程。产品要实现的功能有添加产品和查询产品。首先是后台添加产品，页面上使用form表单的菜单选择所添加产品的类别，以post方式提交数据，通过php中定义的变量接收数据，实现语句如下：$pic = $_POSTpic;

21、$name = $_POSTname; $type = $_POSTtype;$price = $_POSTprice;$intro = $_POSTintro; $feature = $_POSTfeature; $ctime = time();然后连接本地数据库，账号为root，密码为空，连接成功后选择数据库，创建插入数据的spl语句，执行该spl语句，最后关闭连接，实现语句如下：$con = mysql_connect(localhost,root,); mysql_select_db(maysu,$con); $sql=insert into product(pic,name,type

22、,price,intro,feature,ctime) values($pic,$name,$type,$price,$intro,$feature,$ctime); mysql_query($sql);mysql_close($con);查询产品是为了添加的产品能在前台分页显示。要实现分页，首先要获取当前页码，然后设置分页数。接着是连接数据库，选择数据库，然后按照id排序开始查询第几页第几条数据，执行spl语句，通过循环获取数据，组成数组，就可以得到产品数据了。实现语句如下：$page = isset($_GETpage)?$_GETpage:1; $limit = 12; $con = m

23、ysql_connect(localhost,root,); mysql_select_db(maysu,$con); $sql = select * from product where status=1 limit $page,$limit order by id desc;$res = mysql_query($sql);$list = array();while($row = mysql_fetch_array($res,MYSQL_ASSOC) $list = $row; 4 测试与总结网站测试是网站开发的最后一步，是对前面所有工作的检测。首先要把站点文件夹maysu放在WAMP下的

24、WWW文件夹下，然后启动WAMP，再通过命令连接数据库maysu，接着启动Navicat for MySQL，查看数据库中的表，最后在浏览器地址栏输入http:/locahost/maysu查看各个页面的色调风格以及布局样式是否一致，然后点击各个链接，检查页面是否能够正常跳转。在浏览器地址栏中输入http:/locahost/admin/登录后台管理，对数据进行相应操作。在网站的开发过程中，遇到了很多问题。比如在设计网页结构时，要考虑网页结构的规范性，怎样才能满足W3C标准，特别是CCS布局，既要考虑布局的合理性、易用性，又要考虑兼容性问题。在CCS布局过程中遇到的最大的问题就是，定义好了类和ID，页面结构错乱，不能按预期的效果显示，然后就要一点一点的尝试着修改属性和属性值，直到页面达到想要的效果。后台程序开发过程中，出现无法正常读取数据库信息的问题。冗长的代码看着让人眼花缭乱，实在不知道该从何下手的时候，真的想放弃，但是又不能放弃，只能硬着头皮慢慢地寻找解决的办法。当最后修改成功的时候，那种成就感真的无法形容。通过这次网站开发，我认识到编写程序需要的是耐心和细心，每一个单词，甚至一个标点符号的错误，都可能出现很大问题，而且这种问题很难找出来，所以在编写过程中