《PHP》课件7.1 首页的框架设计

本节主要内容使用网页布局技术来规范和统一网站页面的布局三种常用的网页布局技术的比较使用DIV+CSS技术来进行网页布局网站首页的设计网站的首页是用户访问网站的起点，用户通过访问首页可以访问网站提供的主要功能，对于不在首页上提供的功能，也需要提供链接跳转功能使得用户能否进行访问，因此网站首页相对来说都是一个汇聚了众多功能的网页，同时首页的布局风格也影响到网站其他页面的布局风格。PHP新闻管理系统首页的功能设计新闻信息的快速搜索：支持模糊查询，同时可以按照新闻标题和新闻内容进行检索。推荐新闻模块：显示所有网站管理员置顶的新闻，按照发布时间先后顺序展示。最热新闻模块：显示所有网站管理员加热垫的新闻，按照发布时间先后顺序展示。新闻分类导航：导航栏方式显示所有新闻分类信息，实现对新闻的分类搜索。用户中心模块：实现各种用户相关的操作。网站版权信息：在网站的页脚部分布置了版权信息。PHP新闻管理系统首页的结构设计网站布局采用二分栏结构布局在网页的页眉部分包含网站的logo、新闻搜索和新闻导航等功能在网页的页脚部分包含网站的版权信息、作者信息等网页的左边栏实现推荐新闻和最热新闻在网页的右边主体部分区域中，分为上下两分栏结构，主体部分顶部实现用户中心功能。三种常用的网页布局技术表格布局框架布局CSS+DIV布局表格布局技术介绍表格即<table>…</table>标签本来是对数据输出格式进行控制，后来被用于网页布局，表格由于使用简单而且灵活，是最早也是使用最广泛的网页布局技术。优点：容易上手、布局比较简单。缺点：当设计者使用了过多的表格时，会影响页面的下载速度；使用表格布局，不利于搜索引擎抓取信息，直接影响到网站的排名。框架布局技术介绍框架即<frame>…</frame>标签，它可以把屏幕分割成不同的区域。缺点：由于框架技术的兼容性问题，框架结构的页面不太受欢迎。CSS+DIV布局技术介绍CSS+DIV是网站标准（或称web标准）中常用的技术。CSS是用于控制网页样式，并允许将样式信息与网页内容分离的一种标记语言；DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。优点：CSS+DIV技术进行网页布局符合W3C标准；页面体积变小，浏览器速度变快；更好的可维护性；网页中代码更加简洁，正文部分更加突出明显，便于被搜索引擎采集收录。网站母版页的结构设计<divid="header"><?phpinclude'header.php';?></div><hr/><divid="wrapper"><divid="tableContainer"><divid="newRow"><divid="left"> <?phpinclude'left.php';?></div><divid="main"><divid="main_top"><?phpinclude"main_top.php";?></div><divid="main_content"></div></div><!--endofmain--></div><!--endofnewrow--></div><!--endoftablecontainer--></div><!--endofwrapper--><divid="footer"><?phpinclude'bottom.php';?></div>网站母版页的样式设计*{margin:0;padding:0;font-size:13px;color:#757575;}#header{width:980px;

margin:0auto;} #wrapper{width:980px;margin:0auto;

background:#FFFFFFurl(../images/img01.jpg)repeat-xtopleft}#footer{clear:both;

width:980px;height:50px;

margin:0auto;

background:#FFFFFFurl(../images/img01.jpg)repeat-xtopleft;}#tableContainer{display:table;border-spacing:10px;}#newRow{display:table-row;}#left{display:table-cell;width:25%;}#main{display:table-cell;}网站母版页运行效果页眉部分设计效果页眉部分header.php页面的设计<divid="logo"><h1>PHP新闻管理系统</h1><h2>PHPXINWENGUANLIXITONG</h2></div><divid="search"><formaction="index.php"method="get">

新闻查询：<selectname="search_field"><optionvalue="title">按标题</option><optionvalue="content">按内容</option><optionvalue="all">两者均可</option></select><inputtype="text"name="keyword"placeholder="请输入查询内容"><inputtype="submit"value="查

询"class="form-btn"></form></div>

<divid="nav"><ul><li><ahref="index.php?classid=all">全部</a></li><?php

require_once("common/newsclass.dao.php");$category=findNewsClass();

if(!empty($category)){

foreach($categoryas$v):?> <li><ahref="index.php?classid=<?phpecho$v['classid'];?>"><?phpecho$v['classname'];?></a></li><?phpendforeach;}?></ul><divstyle=“clear:both”></div></div>页脚部分bottom.php<style>.legal{float:left;}.credit{float:right;}</style><pclass="legal">版权所有Copyright©2018NewMediaLimitedAllRightsReserved.</p><pclass="credit">Designedby<ahref="#">xxxx</a>.</p>左边栏left.php<h2>推荐新闻</h2><ul><?php

//在左边栏显示3条最新的置顶新闻

$recommond_news=findTopNews(3); if(!empty($recommond_news)){ foreach($recommond_newsas$row){ echo"<li><ahref='newsdetail.php?newsid=".$row['newsid']."'>".$row['title']."</a></li>";}}?> <li><ahref="recommendNewsList.php">更多>>></a></li></ul><h2>最热新闻</h2><ul><?php//在左边栏显示3条最新的热点新闻

$hot_news=findHotNews(3);if(!empty($hot_news)){

foreach($hot_newsas$row){echo"<li><ahref='newsdetail.php?newsid=".$row['newsid']."'>".$row['title']."</a></li>";

}

}?>

<li><ahref="hotNewsList.php">更多>>></a></li></ul>主体顶部main_top.php<divclass="box">

<?phpif($login){?>

<divclass="welcome">"<span><?phpecho$userinfo['username'];?></span>"您好，欢迎到访。  <ahref="updateUser.php">修改资料</a>  <ahref="updatePass.php">修改密码</a>  <ahref="?action=logout">注销登录</a></div><?php}else{?>

<divclass="error-box">

您尚未登录，<ahref="login.php">登录</a>或<ahref="register.php">注册新用户</a> </div>

<?php}?></div>主体顶部main_top.php页面的功能设计@session_start();//启动sessionif(isset($_SESSION['userinfo'])){

$login=true;//保存用户登录状态 $userinfo=$_SESSION['userinfo'];//获取用户信息}else{ //用户信息不存在，说明用户没