基于PHP的化妆品企业网站的设计与实现.docx
《基于PHP的化妆品企业网站的设计与实现.docx》由会员分享,可在线阅读,更多相关《基于PHP的化妆品企业网站的设计与实现.docx(16页珍藏版)》请在冰豆网上搜索。
基于PHP的化妆品企业网站的设计与实现
基于PHP的化妆品企业网站的设计与实现
引论
现在人们口中最流行的词汇就是互联网,互联网技术的发展,深刻的改变了人们生活和工作中的各个方面。
借用一鲨的互联网思维六字诀:
迭代、群众、精品。
迭代就是互联网时代,需要快速推向市场,与用户的互动中不断完善优化从而实现不断迭代;群众就是在全流程与群众互动,利用群众的力量去完善优化,吸取群众的智慧;精品就是互联网时代少就是多,需要将优势资源集中于一点实现引爆和突破,且依靠群众的口碑效应实现快速传播。
企业需要的正是这种互联网思维。
所以企业互联网化将是未来的发展趋势。
企业互联网化的第一步就是建立自己的企业网站。
企业网站相当于企业的网络名片,企业可以利用网站来进行宣传、产品资讯发布、招聘等等。
企业网站不但对企业的形象是一个良好的宣传,同时可以辅助企业的销售,通过网络直接帮助企业实现产品的销售。
选择做化妆品企业网站主要是因为化妆品行业是暴力行业,市场上化妆品的品牌也是多不胜数,人们通过网络可以更快速地了解化妆品的品牌及产品,也可以很方便地选购适合自己的产品。
所以化妆品网站无论是在技术上还是商业利益都具有可观的发展前景。
本人选择的化妆品品牌是美素,选择这个牌子的理由很简单,因为它是国产品牌。
国外大牌化妆品已占据了中国高端化妆品市场,我们应该加大对国产品牌化妆品的宣传,让更多的人了解国产品牌化妆品,进而促进国产化妆品市场的发展。
1开发工具的选用及介绍
本设计选用的开发工具是AdobeDreamweaverCS5、WAMP,网站中所用到的素材图片的制作和处理是通过AdobePhotoshopCS3软件完成的。
1.1AdobePhotoshopCS3
AdobePhotoshop,简称“PS”,是由AdobeSystems开发和发行的图像处理软件。
Photoshop主要处理以像素所构成的数字图像,是目前世界公认的权威性图形图像处理软件。
1.2DreamweaverCS5
AdobeDreamweaver,简称“DW”,是美国MACROMEDIA公司开发的一款集网页制作和管理网站于一身的所见即所得网页编辑器。
1.3WAMP
WAMP是Windows下的Apache+Mysql+PHP,一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,兼容度高,共同组成了一个强大的Web应用程序平台。
Apache是世界使用排名第一的Web服务器软件。
MySQL是一个关系型数据库管理系统。
PHP是HypertextPreprocessor的缩写,是一种主要适用于Web开发领域的通用开源脚本语言。
2网站总体分析与设计
2.1网站需求分析
网站的需求分析是网站开发重要的一步。
需求分析的结果直接关系到项目开发的成败和质量,它是新工程项目开发的依据,所以做好需求分析非常重要。
如果没有仔细、深入地做需求分析,没有把用户的目标与技术实现很好的结合起来,将会导致编程工作的大量返工,这样既浪费人力、物力又拖延开发周期,最后可能会因为系统无法按期交付使用,需要赔偿用户的损失。
2.1.1网站功能分析
本网站是化妆品企业展示型网站,主要功能就是向用户展示企业产品、企业形象、品牌文化及企业新闻,方便用户了解企业。
通过后台的企业管理系统,对网站的页面内容进行添加、删除和修改,方便网站后期的维护和更新。
2.2.2网站形象分析
对于一个以销售为主的企业而言,企业的品牌形象至关重要。
特别是对于互联网技术高度发展的今天,大多用户都是通过网络来了解企业产品、企业形象及企业实力,因此,企业网站的形象往往决定了用户对企业产品的信心。
建立高标准的网站能够极大的提升企业的整体形象。
2.2网站设计原则
在网站设计之前,首先要明确以下几项设计原则:
(1)设计通用页面。
用户电脑的显示器分辨率各不相同,为了让大多数用户都能正常浏览网页,我们通常制作1024×768像素的网页,用纯色背景或图片来填充多余的空白空间,即使在高于1024×768分辨率的显示器上浏览也显得美观。
(2)整体规划。
在进行网页设计之前,需要做一个整体的规划,例如网站怎么布局,分布好导航栏、边栏位置,层次要划分清晰。
(3)导航清晰。
导航栏目分类清晰,有条理,一般不宜过多,在6-10个左右。
(4)优化图片:
图片可以增强网页的美感,可是图片太多或太大又会影响网页下载速度,用户体验不好。
因此我们要尽量控制图片的大小,在10k以下为宜。
(5)内容有吸引力:
内容是一个网站的灵魂,应该对用户有吸引力,才能引来用户,留住用户。
标题切忌太长平庸,应该简洁明了,有创意。
(6)经常更新:
网站内容只有不断更新,才能保持用户对网站的新鲜感。
有时我们也要对网站进行改版升级,以免用户对旧版网页产生了厌倦的心态。
2.3网站设计构思
2.3.1网站的布局
设计网站之前,最先想到的是网站的页面布局,即网站中的图文如何搭配位置最恰当。
网站的布局确定以后,网站的基本框架就完成了,框架完成以后就可以在里面添加想要展示的内容了。
网页的布局一般包括上文下图,上图下文,左图右文,左文右图几种形式,为了使网站的页面简洁整齐,我选择了所有页面的头部和脚部采用相同的布局,并且所有二级页面采用左右两部分,左边是相同的菜单导航,右边是内容部分。
首页的中间部分则分为banner、企业动态和最新产品三部分。
为了增加网站的动感,banner采用四张轮播的图片。
这样网站的整体感觉简洁明了。
2.3.2网站色调的选择
网站的主色调是用户整体的视觉感官,若一个网站色调能有一致性,不仅会使网站看起来美观,更能让浏览者对内容不易混淆,增加了浏览的简洁与方便。
在网站建设中,选择网站的主色调也是网站制作的重要工作。
用户在浏览网站时,首先看到的就是网站的色调,网站的色调直接影响用户想不想观看你的网站。
在色调选择中不仅要考虑要做的是什么类型的网站,也要考虑主色调给人的视觉感受。
不同的颜色能够引起人们不同的心理感受,色彩的美感能提供给人精神、心理方面的享受,让人们愿意浏览这样的网站。
网站的色调选择是在确定网站主题后首先要考虑的问题,网站色调的选择直接影响整个网站制作出来的效果。
本网站是一个关于化妆品的企业展示型网站,化妆品主要是针对的广大女性,因此选用了红色作为主色调,给人一种活力、热情的感觉,同时也体现了中国风。
网站中着重突出和装饰的部分采用深浅不同的红色系,使网站有一定的层次感。
由于网站的主色调是红色的,而网站中的文字颜色主要以黑色为主,所以网站背景采用白色,这样使网站中的文字信息更突出和明了,也使用户感到网站很清晰。
2.3.3网站的结构图
网站的结构如图2-1所示:
图2-1网站结构
3网站页面的实现
3.1前台页面的制作
在制作网站之前,首先应该新建一个名为maysu的文件夹,然后在其下级分别新建名为html的文件夹用来存放html文件,名为css的文件夹用来存放css文件,名为images的文件夹用来存放素材图片,名为js的文件夹用来存放js文件。
前期准备完成后,开始制作页面。
为了实现内容和表现相分离,要使用语义化代码构建页面。
首先通过HTML搭建好网站各个页面的结构框架,然后再通过CSS为页面布局。
3.1.1页面结构
本网站导航共分为五个栏目:
首页、美肌臻品、美素新闻、美素闺蜜和创世传奇。
其中美肌臻品页面以及其下的各个子页面的结构相同,美素新闻页面以及其下的子页面和创世传奇页面以及其下的子页面的结构相同,所以相同的结构只需要制作一个页面框架,具体页面内容从数据库中读取以实现不同的页面效果。
由于网站各个页面的头部和脚部是相同的,所以,先来制作网站页面的整体框架。
具体的HTML代码如下:
无标题文档
首 页
美肌臻品
美素新闻
美素闺蜜
创世传奇