phpcms v9模板制作教程（一）

本教程属于初级教程，高手可以旁听，虽然是初级教程但基础的html语言和css是必须了解的，本教程属于基础篇。

第一节
1、先熟悉一下phpcms 模板文件目录结构
   phpcms_V9 默认模板文件目录结构介绍：http://it.sh0527.com/thread-8311-1-1.html
2、在模板目录下新建模板文件夹，打开v9的根目录“phproot→phpcms→templates”文件夹把“default”文件夹复制一份起名“dadu”。
3、将自己模板所用的相关资源分别存放到 statics/images/、statics/css/、statics/js/ 等目录的子文件夹中。
如：
statics/images/newskin/
statics/js/newskin/
statics/css/newskin/

然后在模板里用PHPCMS的几个常量加上对应目录调用。
如：
  {IMG_PATH}newskin/logo.gif
  {CSS_PATH}newskin/common.css
  {JS_PATH}newskin/common.js

说明：
{CSS_PATH} 地址替换为根目录下\statics\css
{JS_PATH}    地址替换为根目录下\statics\js
{IMG_PATH} 地址替换为根目录下\statics\images
{APP_PATH} app路径
-----------------------------------------------------------------------------------------------------------------------

今天开始讲v9模板制作的第二节课

1、首先修改首页模板index.html
修改前向大家介绍下v9的工作模式，v9和他的前身phpcms 2008是一样的都是“标签调用头部 +首页部分+ 标签调用底部”
所以按照从头开始的顺序
第一步打开heard.html
打开根目录下/phpcms/template/dahu/content/header.html文件，现在我们开始分析header.html的构造：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
上面是W3C网页标准
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />{CHARSET}" =字符集（gbk或者utf-8）
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title>
判断语句翻译：如果设置了标题并且标题不为空，则显示标题，否则显示网站名称

<meta name="keywords" content="{$SEO['keyword']}">
<meta name="description" content="{$SEO['description']}">
<link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
<link href="{CSS_PATH}default_blue.css" rel="stylesheet" type="text/css" />
上面2行是外部css的调用{CSS_PATH}
<script type="text/javascript" src="{JS_PATH}jquery.min.js"></script>
<script type="text/javascript" src="{JS_PATH}jquery.sGallery.js"></script>
<script type="text/javascript" src="{JS_PATH}search_common.js"></script>
上面3行是网页的js调用
</head>
<body>
<div class="body-top">
<div class="content">
{pc:content action="position" posid="9" order="id" num="10" cache="3600"}
<div id="announ">
<ul>
{loop $data $k $v}
<li><a href="{$v[url]}">{$v[title]}</a></li>
{/loop}
</ul>
</div>
{/pc}
<script type="text/javascript">
$(function(){
startmarquee('announ',22,1,500,3000);
})
</script>
<div class="login lh24 blue"><a href="{APP_PATH}index.php?m=content&c=rss&siteid={get_siteid()}" class="rss ib">rss</a><span class="rt"><script type="text/javascript">document.write('<iframe src="{APP_PATH}index.php?m=member&c=index&a=mini&forward='+encodeURIComponent(location.href)+'&siteid={get_siteid()}" allowTransparency="true" width="300" height="24" frameborder="0" scrolling="no"></iframe>')</script></span></div>
</div>
</div>
<div class="header">
<div class="logo"><a href="/"><img src="{IMG_PATH}v9/logo.jpg" /></a></div>

下面是搜索部分

<div class="search">
<div class="tab" id="search">
{php $j=0}
{php $search_model = getcache('search_model_'.$siteid, 'search');}
{loop $search_model $k=>$v}
{php $j++;}
<a href="javascript:;" style="outline:medium none;" hidefocus="true" {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>{if $j != count($search_model)}<span> | </span>{/if}
{/loop}
{php unset($j);}
</div> <div class="bd">
<form action="{APP_PATH}index.php" method="get" target="_blank">
<input type="hidden" name="m" value="search"/>
<input type="hidden" name="c" value="index"/>
<input type="hidden" name="a" value="init"/>
<input type="hidden" name="typeid" value="{$typeid}" id="typeid"/>
<input type="hidden" name="siteid" value="{$siteid}" id="siteid"/>
<input type="text" class="text" name="q" id="q"/><input type="submit" value="搜索" class="button" />
</form>
</div>
</div>

搜索部分结束
<div class="banner"><script language="javascript" src="{APP_PATH}index.php?m=poster&c=index&a=show_poster&id=1"></script></div>
<div class="bk3"></div>
<div class="nav-bar">
<map>
{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
<ul class="nav-site">
<li><a href="{siteurl($siteid)}"><span>首页</span></a></li>
{loop $data $r}
<li class="line">|</li>
<li><a href="{$r[url]}"><span>{$r[catname]}</span></a></li>
{/loop}
</ul>
{/pc}
</map>
</div>
{if $top_parentid}
<div class="subnav">
{pc:content action="category" catid="$top_parentid" num="15" siteid="$siteid" order="listorder ASC"}
{loop $data $r}
<a href="{$r[url]}">{$r[catname]}</a><span> | </span>
{/loop}
{/pc}
{if $modelid}<a href="{APP_PATH}index.php?m=content&c=search&catid={$catid}">搜索</a>{/if}
</div>
{/if}
</div>

建议下载个opera浏览器他的检查页面元素功能超赞！
下一节继续讲主体部分

灰儿 · 发表于 2011-8-30 16:50:30

今天继续讲主体部分

{template "content","header"}

打开根目录下/phpcms/template/dahu/content/header.html文件，现在我们开始分析header.html的构造：

这个是模版注释！建议一定要养成写代码加注释的习惯

这个是div标签，不知道什么是div可以的去网上找些教程学习下，这个都不了解就没必要继续看了


{pc:content action="position" posid="2" order="listorder DESC" num="4"}



{loop $data $r}

{str_cut($r[title],36)}

{if $n==1}{/if}{str_cut($r[description],112)}

{/loop}
{/pc}




{pc:content action="position" posid="1" order="listorder DESC" thumb="1" num="5"}

{loop $data $r}

{/loop}

{/pc}

推广
{pc:block pos="index_block_1"}

{/pc}

图片新闻
{pc:content action="position" posid="12" thumb="1" order="id DESC" num="10"}
{loop $data $r}
{str_cut($r[title],20)}
{/loop}
{/pc}

{loop subcat(0,0,0,$siteid) $r}
{php $num++}
{$r[catname]}更多>>

{pc:content action="lists" catid="$r[catid]" num="1" thumb="1" order="id DESC" return="info"}
{loop $info $v}

{str_cut($v['title'],28)}
{str_cut($v['description'],100)}

{/loop}
{/pc}

{pc:content action="lists" catid="$r[catid]" num="5" order="id DESC" return="info"}
{loop $info $v}
·{str_cut($v['title'],40)}
{/loop}
{/pc}

{if $num%2==0}
{/if}
{/loop}

公告
{pc:announce action="lists" siteid="$siteid" num="2"}
{loop $data $r}
{$r['title']}
{/loop}
{/pc}

专题更多>>
{pc:special action="lists" siteid="$siteid" elite="1" listorder="3" num="2"}
{loop $data $r}
{if $n!=1}
{/if}

{str_cut($r[title],'18')}
{str_cut($r['description'],50)}

{/loop}
{/pc}

热点 | 评论 | 关注排行
{pc:content action="hits" catid="35" num="10" order="views DESC"}
{loop $data $r}

{$r[title]}
{/loop}
{/pc}

{pc:comment action="bang" num="10" cache="3600"}
{loop $data $r}

{$r[title]}
{/loop}
{/pc}

{pc:content action="hits" catid="35" num="10" order="views DESC"}
{loop $data $r}

{$r[title]}
{/loop}
{/pc}

调查问卷更多>>

更多>>友情链接申请链接

{pc:link action="type_list" siteid="$siteid" linktype="1" order="listorder DESC" num="8" return="pic_link"}
{loop $pic_link $v}
{/loop}
{/pc}

{pc:link action="type_list" siteid="$siteid" order="listorder DESC" num="10" return="dat"}

{loop $dat $v}
{if $type==0}
{$v[name]} |
{else}

{/if}
{/loop}

{/pc}

$(function(){
new slide("#main-slide","cur",310,260,1);//焦点图
new SwapTab(".SwapTab","span",".tab-content","ul","fb");//排行TAB
})

{template "content","footer"}

在学下节课之前我先讲些学前需要知道的知识

1、养成书写规范的DIV标签
目前比较规范流行的DIV标签命名规则：
http://it.sh0527.com/thread-8314-1-1.html

2、v9模版引擎工作原理图：

下节课我将演示一个模版制作的实例
第一步从仿站开始有什么需要仿的站发出来！我选一个下节课用！
第二步自己动手制作模版
第三步深度加工模版