书签 分享 收藏 举报 版权申诉 / 16

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

  • 文档编号:29056228
  • 上传时间:2023-07-20
  • 格式:DOCX
  • 页数:16
  • 大小:326.94KB

关于我们

美素微博

美素商城

Copyright©2014YanfangWang

基本框架完成之后,开始在内容部分添加页面的相关内容。

首先来制作首页,首页的中间部分共有三个大的div,先放一个focus层,用来放焦点图和点选按钮,然后放一个module1层,用来放品牌故事、优惠活动和最近动态三个板块,最后放一个module2-tt层,用来放最新产品。

其中焦点图是用javascript代码实现的四张图片的轮播效果。

由于整个页面的代码冗长,只提取了部分主要代码,代码如下:

;"class="curr">1

;">2

;">3

;">4

品牌故事

优惠活动

最近动态

最新产品

首页的导航及焦点图效果如图3-1所示,最新产品及脚部效果如图3-2所示:

图3-1首页(上)

图3-2首页(下)

至此,首页的整体框架已完成。

由于其他页面采用了相同的结构布局,内容部分分为左右两部分,左侧是菜单导航区,右侧是内容显示区。

下面主要介绍一下导航菜单的制作过程。

导航菜单是头部导航除了首页外的四个栏目,其中美肌臻品下又分为璀璨光润焕白、凝润保湿、水漾透白、美白防晒和BB霜五个系列,美素新闻下分为企业新闻和行业新闻,创世传奇下分为公益活动和品牌荣誉。

每个栏目下第一个子菜单默认为红色图片背景,鼠标经过其他菜单时,背景图由白色变为红色。

具体框架的代码如下:

  • 美肌臻品

    璀璨光润焕白系列

    凝润保湿系列

    水漾透白系列

    美白防晒系列

    BB霜系列

  • 美素新闻

    企业新闻

    行业新闻

  • 美素闺蜜
  • 创世传奇

    公益活动

    品牌荣誉

  • 二级页面左侧的菜单导航效果及产品展示如图3-3所示:

    图3-3产品页面

    3.1.2页面布局

    页面框架完成之后,就要为页面做整体的布局了。

    首先要考虑网站的整体样式,比如页面的宽度为948px,上边距为16px,左右边距为auto(取计算机值),下边距为0;body部分背景色为白色,字体为12px大小的微软雅黑或黑体。

    然后开始定义页面每个模块的样式。

    下面以页面的头部为例,通过CSS为头部布局。

    menu类定义的是整个头部的样式,logo类是网站logo的样式,menu-bar类是导航栏的样式,menu-bara是导航菜单的样式,menu-bara.home是导航中首页的样式。

    具体头部样式代码如下:

    .menu{

    position:

    relative;

    width:

    953px;

    height:

    54px;

    padding:

    4px3px3px;

    margin:

    0016px-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-bara{

    display:

    inline-block;

    width:

    133px;

    font-size:

    18px;

    font-weight:

    bold;

    color:

    #fff;

    text-align:

    center;

    line-height:

    35px;

    margin-top:

    3px;

    background:

    url(../images/line.jpg)repeat-yrighttop;

    }

    .menu-bara.home{width:

    117px;}

    3.2数据库的设计

    页面完成后的首要任务就是设计数据库。

    本网站所用的是MySQL数据库,首先通过命令:

    mysql-uroot-p连接MySQL,然后通过命令:

    createdatabasemaysu;创建名为maysu的数据库,创建完成后可以通过命令:

    showdatabases;查看MySQL中的数据库,接着就可以通过命令:

    usemaysu;使用刚才创建的maysu数据库了。

    下一步就是创建表,根据网站要实现的功能分析得到数据库中需要建立的表包括焦点图表、优惠活动表、最近动态表、产品表、新闻表、公益活动表和品牌荣誉表。

    下面就以产品表为例来介绍一下表的设计。

    通过分析知道,产品表应该包含的字段有图片地址、产品名称、产品类别、产品价格、产品简介和产品特点。

    分析完成后开始创建产品表,具体命令如下:

    CREATETABLE`product`(

    `id`int(11)UNSIGNEDNOTNULLAUTO_INCREMENTCOMMENT'索引',

    `pic`varchar(50)CHARACTERSETutf8COLLATEutf8_general_ciNOTNULLCOMMENT'图片地址',

    `name`varchar(255)CHARATERSETutf8COLLATEutf8_general_ciNOTNULLCOMMENT'产品名称',

    `type`tinyint

    (1)NOTNULLDEFAULT1COMMENT'产品类别,1代表璀璨光润焕白系列,2代表凝润保湿系列,3代表水漾透白系列,4代表美白防晒系列,5代表BB霜系列',

    `price`int(11)UNSIGNEDNOTNULLCOMMENT'产品价格',

    `intro`textCHARATERSETutf8COLLATEutf8_general_ciNOTNULLCOMMENT'产品简介',

    `feature`varchar(255)CHARACTERSETutf8COLLATEutf8_general_ciNOTNULLCOMMENT'产品特点',

    `status`tinyint

    (1)UNSIGNEDNOTNULLDEFAULT1COMMENT'状态1正常0删除',

    `ctime`int(10)NOTNULLCOMMENT'创建时间',

    PRIMARYKEY(`id`)

    )ENGINE=InnoDB

    DEFAULTCHARACTERSET=utf8COLLATE=utf8_general_ci

    COMMENT='产品表'

    AUTO_INCREMENT=5

    ROW_FORMAT=COMPACT

    ;

    产品表设计效果如图3-4所示:

    图3-4产品表

    表创建完成后通过命令:

    showtables;查看已创建的表,然后用相同的设计思路创建其他的表。

    3.3后台程序的开发

    后台程序开发选用的语言是PHP,下面还以产品为例,介绍后台程序的开发过程。

    产品要实现的功能有添加产品和查询产品。

    首先是后台添加产品,页面上使用form表单的菜单选择所添加产品的类别,以post方式提交数据,通过php中定义的变量接收数据,实现语句如下:

    $pic=$_POST['pic'];

    $name=$_POST['name'];

    $type=$_POST['type'];

    $price=$_POST['price'];

    $intro=$_POST['intro'];

    $feature=$_POST['feature'];

    $ctime=time();

    然后连接本地数据库,账号为root,密码为空,连接成功后选择数据库,创建插入数据的spl语句,执行该spl语句,最后关闭连接,实现语句如下:

    $con=mysql_connect('localhost','root','');

    mysql_select_db('maysu',$con);

    $sql='insertintoproduct(pic,name,type,price,intro,feature,ctime)values("$pic","$name","$type","$price","$intro","$feature","$ctime")';

    mysql_query($sql);

    mysql_close($con);

    查询产品是为了添加的产品能在前台分页显示。

    要实现分页,首先要获取当前页码,然后设置分页数。

    接着是连接数据库,选择数据库,然后按照id排序开始查询第几页第几条数据,执行spl语句,通过循环获取数据,组成数组,就可以得到产品数据了。

    实现语句如下:

    $page=isset($_GET['page'])?

    $_GET['page']:

    1;

    $limit=12;

    $con=mysql_connect('localhost','root','');

    mysql_select_db('maysu',$con);

    $sql="select*fromproductwherestatus=1limit$page,$limitorderbyiddesc";

    $res=mysql_query($sql);

    $list=array();

    while($row=mysql_fetch_array($res,MYSQL_ASSOC)){

    $list[]=$row;

    }

    4测试与总结

    网站测试是网站开发的最后一步,是对前面所有工作的检测。

    首先要把站点文件夹maysu放在WAMP下的WWW文件夹下,然后启动WAMP,再通过命令连接数据库maysu,接着启动NavicatforMySQL,查看数据库中的表,最后在浏览器地址栏输入http:

    //locahost/maysu查看各个页面的色调风格以及布局样式是否一致,然后点击各个链接,检查页面是否能够正常跳转。

    在浏览器地址栏中输入http:

    //locahost/admin/登录后台管理,对数据进行相应操作。

    在网站的开发过程中,遇到了很多问题。

    比如在设计网页结构时,要考虑网页结构的规范性,怎样才能满足W3C标准,特别是CCS布局,既要考虑布局的合理性、易用性,又要考虑兼容性问题。

    在CCS布局过程中遇到的最大的问题就是,定义好了类和ID,页面结构错乱,不能按预期的效果显示,然后就要一点一点的尝试着修改属性和属性值,直到页面达到想要的效果。

    后台程序开发过程中,出现无法正常读取数据库信息的问题。

    冗长的代码看着让人眼花缭乱,实在不知道该从何下手的时候,真的想放弃,但是又不能放弃,只能硬着头皮慢慢地寻找解决的办法。

    当最后修改成功的时候,那种成就感真的无法形容。

    通过这次网站开发,我认识到编写程序需要的是耐心和细心,每一个单词,甚至一个标点符号的错误,都可能出现很大问题,而且这种问题很难找出来,所以在编写过程中

    举报
    举报
    版权申诉
    版权申诉
    word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载
    配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    基于 PHP 化妆品 企业 网站 设计 实现
    提示  冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:基于PHP的化妆品企业网站的设计与实现.docx
    链接地址:https://www.bdocx.com/doc/29056228.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    展开