8.2 网站后台首页设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
码、用户提权、用户降级等功能。 – 新闻类别管理模块：显示所有的新闻类别、删除新闻类别、编辑新
闻类别以及添加新闻类别等功能。 – 新闻管理模块：显示所有的新闻列表、编辑新闻、删除新闻、添加
新闻、新闻置顶、新闻热点等功能。 – 用户评论管理模块： 显示所有用户的评论信息、删除评论以及对
评论中包含的敏感字符过滤等功能。
if(isset($<_/GdEivT>['action']) && $_GET['action']=='logout'){
</divu>nset($_SESSION['back_userinfo']);
6
页眉部分运行效果
7
页眉部分top.php页面的样式设计
<style type="text/css"> .top-box{width:90%;} .top{background: #358edd;height:40px;} .top-box{margin:0 auto; position: relative;min-width:390px;} .top-box-logo{font-size:18px;fontweight:normal;color:#fff;position:absolute;left:0;top:7px;letter-spacing:1px;} .top-box-nav{ text-align:right; color: #fff;line-height:40px;fontsize:13px;letter-spacing:3px;} .top-box-nav a{color: #fff;margin-left: 5px;text-decoration: none;} </style>
8
页眉部分top.php页面的功能设计
………
<ifd(isivsectl(a$s_sS=E"StSoIpO"N>['back_userinfo'])){ <div $clloagsisn=="ttorupe-;bo//x保">存用户登录状态 <$uhs1ecrilnafsos=="$t_oSpE-SbSoIxO-Nlo['gboac">k_PuHsPer新in闻fo'管]; 理系统管理后台</h1>
5源自文库
后台网页母版的样式设计
/* 后定意台义味页了着面i页d的属眉C性部S为分Sh内Deo容acd将uemr居元e中n素t显的*/示样在式浏，览元器素上的。width为980px，margin:0 auto * { mar高gin度:0为; p60a0dpdxin，g当:0;垂fo直n方t-s向iz超e:过15高px度; 定co义lo时r: ，#7将57自57动5;出}现滚动条。 body{color:#555;minwidth:592px;overflow:hidden;background:#eee;background-image: url(img/bg.png); font-family:Verdana, Geneva, sans-serif;} #header { width: 980px; margin: 0 auto; } #wrapper { width: 980px; margin: 0 auto; height:600px;overflow-y:auto;} #tableContainer {display: table; border-spacing: 10px; } #newRow {displa将y:以tatabblele-r样ow式;}显示，单元格间距为10px。 #left { display: table-cell;width:135px; vertical-align:top;} #main{ display:table-cell; padding-left:20px; vertical-align:top; }
《 PHP Web开发实战》
8.2 任务2:网站后台首页设计
本节主要内容
使用网页页面布局技术统一网站后台页面风格。 后台网页布局母版的设计 后台首页页面的设计
2
PHP新闻管理系统网站后台管理功能
在PHP新闻管理系统网站中，后台主要包括以下内容：
– 系统管理：可以修改当前管理员密码、注销登录。 – 用户管理模块：显示所有网站用户的列表、删除用户、重置用户密
3
后台统一风格模板结构设计
网站后台布局采用二分栏结构布局：
– 在网页的页眉部分包含网站的logo和登录管理员用户信息 – 网页的左边栏实现各种管理模块的导航功能
4
后台网页母版的结构设计
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="style/backSTyle.css" type="text/css" rel="stylesheet"> </head> <body> <div id="header"><?php require_once 'top.php';?></div> <div id="wrapper">
<div id="tableContainer"> <div id="left"><?php require_once 'mainleft.php';?></div> <div id="main"></div><!--end of main-->
</div><!--end of tableContainer--> </div><!--end of wrapper--> </body> </html>
$}}eulssee{rinf<$ho欢ldeo[ai'gvu迎disenc您erl=(ar'L，nsfaoasl<cms=aae"te;tihoo'/]/rn;p若e:?-f用ba=>do"<户m#x/a"-没inn>>有La<！ov?登g"p<>i录hna.p，phher直epcf'h接)=;o"跳u转pd到at后ep台a登ss录.p页h面p">密码修改 <//用/a>户<退a出href="?action=logout">安全退出</a>
闻类别以及添加新闻类别等功能。 – 新闻管理模块：显示所有的新闻列表、编辑新闻、删除新闻、添加
新闻、新闻置顶、新闻热点等功能。 – 用户评论管理模块： 显示所有用户的评论信息、删除评论以及对
评论中包含的敏感字符过滤等功能。
if(isset($<_/GdEivT>['action']) && $_GET['action']=='logout'){
</divu>nset($_SESSION['back_userinfo']);
6
页眉部分运行效果
7
页眉部分top.php页面的样式设计
<style type="text/css"> .top-box{width:90%;} .top{background: #358edd;height:40px;} .top-box{margin:0 auto; position: relative;min-width:390px;} .top-box-logo{font-size:18px;fontweight:normal;color:#fff;position:absolute;left:0;top:7px;letter-spacing:1px;} .top-box-nav{ text-align:right; color: #fff;line-height:40px;fontsize:13px;letter-spacing:3px;} .top-box-nav a{color: #fff;margin-left: 5px;text-decoration: none;} </style>
8
页眉部分top.php页面的功能设计
………
<ifd(isivsectl(a$s_sS=E"StSoIpO"N>['back_userinfo'])){ <div $clloagsisn=="ttorupe-;bo//x保">存用户登录状态 <$uhs1ecrilnafsos=="$t_oSpE-SbSoIxO-Nlo['gboac">k_PuHsPer新in闻fo'管]; 理系统管理后台</h1>
5源自文库
后台网页母版的样式设计
/* 后定意台义味页了着面i页d的属眉C性部S为分Sh内Deo容acd将uemr居元e中n素t显的*/示样在式浏，览元器素上的。width为980px，margin:0 auto * { mar高gin度:0为; p60a0dpdxin，g当:0;垂fo直n方t-s向iz超e:过15高px度; 定co义lo时r: ，#7将57自57动5;出}现滚动条。 body{color:#555;minwidth:592px;overflow:hidden;background:#eee;background-image: url(img/bg.png); font-family:Verdana, Geneva, sans-serif;} #header { width: 980px; margin: 0 auto; } #wrapper { width: 980px; margin: 0 auto; height:600px;overflow-y:auto;} #tableContainer {display: table; border-spacing: 10px; } #newRow {displa将y:以tatabblele-r样ow式;}显示，单元格间距为10px。 #left { display: table-cell;width:135px; vertical-align:top;} #main{ display:table-cell; padding-left:20px; vertical-align:top; }
《 PHP Web开发实战》
8.2 任务2:网站后台首页设计
本节主要内容
使用网页页面布局技术统一网站后台页面风格。 后台网页布局母版的设计 后台首页页面的设计
2
PHP新闻管理系统网站后台管理功能
在PHP新闻管理系统网站中，后台主要包括以下内容：
– 系统管理：可以修改当前管理员密码、注销登录。 – 用户管理模块：显示所有网站用户的列表、删除用户、重置用户密
3
后台统一风格模板结构设计
网站后台布局采用二分栏结构布局：
– 在网页的页眉部分包含网站的logo和登录管理员用户信息 – 网页的左边栏实现各种管理模块的导航功能
4
后台网页母版的结构设计
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="style/backSTyle.css" type="text/css" rel="stylesheet"> </head> <body> <div id="header"><?php require_once 'top.php';?></div> <div id="wrapper">
<div id="tableContainer"> <div id="left"><?php require_once 'mainleft.php';?></div> <div id="main"></div><!--end of main-->
</div><!--end of tableContainer--> </div><!--end of wrapper--> </body> </html>
$}}eulssee{rinf<$ho欢ldeo[ai'gvu迎disenc您erl=(ar'L，nsfaoasl<cms=aae"te;tihoo'/]/rn;p若e:?-f用ba=>do"<户m#x/a"-没inn>>有La<！ov?登g"p<>i录hna.p，phher直epcf'h接)=;o"跳u转pd到at后ep台a登ss录.p页h面p">密码修改 <//用/a>户<退a出href="?action=logout">安全退出</a>