phpcms v9模板制作教程
本教程属于初级教程,高手可以旁听,虽然是初级教程但基础的html语言和css是必须了解的,本教程属于基础篇,以后phpcms吧将会推出晋级篇。
第一节
1、首先下载phpcms v9的集成安装包并安装,在官方论坛里很显眼的位置,这里就不详细说明了。
2、本地调试建议大家使用APMserver,或者wampserver等,可以到PHPCMS吧首页链接下载。安装好打开v9的根目录“phproot→phpcms→templates”文件夹把“default”文件夹复制一份起名“redu”。
3、登陆v9后台登录地址:localhost/admin.php
用户名:phpcms 密码:phpcms
4、打开界面→模板风格→风格标识redu下的详细列表下的content文件夹
1、首先修改首页模板index.html
修改前向大家介绍下v9的工作模式,v9和他的前身phpcms 2008是一样的都是“标签调用头部 +首页部分+ 标签调用底部”
所以按照从头开始的顺序
第一步打开heard.html
现在我们开始分析header.html的构造:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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"></ifram
e>')</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:;" 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浏览器 他的检查页面元素功能超赞!
{template "content","header"}
调用根目录下phpcms/template/content/header文件
<!--main-->这个是模版注释!建议一定要养成写代码加注释的习惯
这个是div标签,不知道什么是div可以的去网上些教程学习下,这个都不了解就没必要继续看了
<!--这里是pc标签{pc:content 参数名="参数值" 参数名="参数值" 参数名="参数值"}-->
{pc:content action="position" posid="2" order="listorder DESC" num="4"}
<!--显示PC标签中的数据-->
{loop $data $r}
{str_cut($r[title],36)}
{if $n==1}{/if}{str_cut($r[description],112)}
{/loop}
{/pc}
<!--结束标签-->
<!--这里还是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}
调查问卷更多>>
更多>>友情链接申请链接
dom4j转换字符串{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"}
养成书写规范的DIV标签
搜索引擎优化(seo)中,对代码的优化也是一个很关键的步骤。为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则:
DIV ID命名
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
jquery下载超大文件提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight
CSS ID的命名
外套:wrap
主导航:mainNav(globalNav)
子导航:subNav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
顶导航:topNav
边导航:sideBar
左导航:leftsideBar
右导航:rightsideBar
标识:logo
标语:banner
菜单1内容:menu1Content
菜单1容量:menu1Containerla scala
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功
能区:shop(如购物车,收银台)
当前的current
样式文件命名
全站标签默认样式:general.css或global.css
布局版式设计样式:layout.css或container.css
mysql怎么读音发音通用样式(如文字、表单等):style.css
专栏/频道样式:columns.css
打印输出样式:print.css
主题模板样式:themes.css
如何利用v9仿制一个网站
一、准备工具1、
css手册
2、phpcms手册
3、dw cs5 没有的可以用记事本
4、ps
5、屏幕尺子
6、好鬼
7、网站下载器
8、各种浏览器 ie6 ie7 ie8 ie9 火狐 谷歌 Opera Safari 用ie 和火狐基本就够了
9、有条件的可以准备个php手册和html手册
10、亦歌(这个挺好用的听歌软件,我每次写代码都会打开他听歌)
11、测试环境没有下个phpcm v9的集成包
12、还没想到??????想到了在写(呵呵,为了多写点?????哈)
二、准备素材
1、用网站下载器下载准备仿的网站文件
2、按照目标网站制作相应尺寸的图片(如logo)有些需要改,有些不需要改(这里也是为了多写点???)
3、还没想到还需要准备什么??????想到了在写(呵呵,还是为了多写点?????哈)
三、开始仿站
1、先打开亦歌听音乐吧
2、打开需要仿的站,查看页面源代码!(在网页空白区右建就能看到)
3、先到网页的css文件(下载下来放到根目录\statics\css下改名reset.css)为什么这么做<link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
{CSS_PATH}reset.css等于根目录\statics\css下reset.css文件(如果用网站下载器下载了那么在下载文件里到css文件复制过去会更方便)
注:statics目录下的文件部分是属于后台模版的,所以建议新建个目录放入你自己写好的css、js或者图片文件{CSS_PATH}reset.css是后台的css代码,这里千万别改!改了后台就跑偏了
4、编辑头部文件用dwcs 5或记事本打开v9模版目录下header.html文件。
phpcms v9实现类别列表的栏目调用
phpcms v9在对应的栏目列表里,调出该栏目所属的所有类别,形成一个类别列表的调用方法比较简单.如下:
<?php
$arrtype = explode(',',$usable_type);
?>
{loop $arrtype $t}
<a href="index.php?m=content&c=type&catid={$catid}&typeid={$t}">{$TYPE[$t][name]}</a>
{/loop}
效果就类似:
<a href="index.php?m=content&c=type&catid=9&typeid=54">转载</a>
<a href="index.php?m=content&c=type&catid=9&typeid=53">原创</a>
需要注意的是,在上面给出的代码开始之前,必须引入
<?php $TYPE = getcache('type_content','commons');?>
这一句代码.否则 $TYPE 没有定义,就是空白的.另外类别的链接也需要上面那个帖子的辅助.
phpcms教程_标签调用代码详解
相对于其它CMS来说,phpcms更为专业,功能也更为强大。但,对于站长的入门要求也就稍微的高了一些。 特别是对根基比较差的站长,写下一些
使用过程中的心得,以方便广大新手站长能够轻松入门,并打造出属于自己的网站。
一。模板制作之标签篇
1. 内容标签
在官方模板页里边,我们可以看到如 {tag_网站首页头条} 这样的标签。
这种标签就是“内容标签”,可以在后台的“模板风格”->的“内容标签管理”里进行查看和修改。
这种标签属于模块化的标签,也就是说它通过SQL语句查询配合数据调用条件赋值到模板通过模板引擎来进行读取和生成的。 大家编辑一下模板基本上就能看出来。 【如果打算做出一个个性化的网站,我不太推崇过多的使用这种方式,当然,很多重复调用的部分,用这种方式还是不错的。 或许是因为个人喜好,我个人不太常用这种方式,所以这里就不多讲,我们今天主要要讲一下get】
2. get常用调用方式
我觉得这种方式的灵活性很强大。个人推荐。下面将重点说一下,get的几种常用调用方式,个人认为,做phpcms的模板,了解了get基本上就够用了。
(1)调用一个栏目下的最新,带缩略图的文章,同时调用出起内容简介(多个栏目ID调用)
以下为模板中的标签:
<div class="oz_z1" id="tt_index">
{get sql="select*from content where catid>=79 and catid<=85 and status=99 and posids=1 and `thumb`!='' order by updatetime desc" rows="1"}
<li><A href="{$r[url]}" target="_blank">{str_cut($r[title], 40)}</A></li><br />
<div id="tit_z1">
<dt><A href="{$r[url]}" title="{str_cut($r[title], 50)}" target="_blank"><img src="{thumb($r[thumb], 110, 75)}" /></A></dt>
<dl><A href="{$r[url]}" target="_blank">{str_cut($r[description],100)}</A></dl>
</div>
{/get}
transferfrom充币在使用get的时候注意一点就是{/get} get的结束标签。
说明: content 这是数据库里边数据表的名称,如果你的数据表前缀进行了修改,这里也必须进行修改。如果你在安装phpcms的时候设置的为woshi_. 那么这里就应该是woshi_content
catid>=79 and catid<=85 栏目ID大于等于75并且栏目id小于等于85. 也就是调用栏目ID75 76 77 78 79 80 81 82 83 84 85的文章。
posids=1 文章类型为首页推荐
status=99 文章已经通过审核
`thumb`!='' 缩略图不为空,也就是必须要有缩略图
{$r[url]} 内容页的地址
{str_cut($r[title], 40)} 文章标题,长度限制为40
{thumb($r[thumb], 110, 75)} 缩略图地址 缩略图大小限制为width=110px height=75px
{str_cut($r[description],100) 文章简介调用 简介长度为100
通过上面的调用及模板语句(div li ),我通过css的控制可得出如下test.gif。 具体的css部分,我们后面
在讲。
(2)调用多个栏目ID,(栏目ID为不连续ID) 也就是说我们在栏目建立初期有栏目ID75 76 77 78 79 80 81 82 83 84 85。 而在建立了其它栏目之后,我们有在这个栏目添加了一个新的栏目,产生了一个新的ID
。比如ID 95. 那么我们应该怎么样使用get来调用啦?
在(1)中我们使用了catid>=XX and catid<=XX 如果说现在要加入catid95 那么就不能在用and了 而应该使用 or 。 具体方式如下
{get sql="select*from content where catid>=79 and catid<=85 or catid=95 order by updatetime desc" rows="6"}
{/get}
如果说我们这里调用的是文章标题列表 数量为6 那么我们要在div中循环的就应该是li了。具体如下
<div class="oz_z2">
{get sql="select*from content where catid>=79 and catid<=85 or catid=95 order by updatetime desc" rows="6"}
<li><A href="{$r[url]}" target="_blank">{str_cut($r[title], 38)}</A></li>
{/get}
</div>
这里说明一点updatetime 的排序方式。 比如说我们想按照文章录入的时间来进行降序排列(也就是吧最新的排前面),在使用updatetime之后,我们会发现,编辑一前的文章之后,这篇文章被调用到了列表的最前面。所以updatetime是文章编辑或修改时间,如果我们不想以这种方式进行排序,而是想以文章录入时间进行降序排列,可以吧这里的updatetime改为inputtime(3)使用get调用 栏目名及其相对应的栏目地址
在使用get 的sql查询时,我们通常都会查询content这个表,在这个表里边包括了所有的文章及下载等内容信息,但栏目只有id却没有栏目名,所有的栏目信息都在 category 这个表里边,其实打开数据库一看,我们就一目了然了。所以在调用栏目名及其地址的时候我们需要借助 {str_cut($CATEGORY[$r[catid]][catname],4)} 这种方式来进行参数传递,呵呵,我索性连栏目名长度截取也加上,方便大家吧。呵呵。 有够BT ,呵呵 具体示例如下:
<div class="oz_z2">
{get sql="select*from content where catid>=52 and catid<=55 or catid=50 or catid=77 or catid=78 order by updatetime desc" rows="6"}
<li><p>[<a href="{$CATEGORY[$r[catid]][url]}" target="_blank">{str_cut($CATEGORY[$r[catid]][catname],4)}</a>]</p><A href="{$r[url]}" target="_blank">{str_cut($r[title], 38)}</A></li>
{/get}
</div>
这个get调用的栏目ID分别为52 53 54 55 77 78 活学活用 呵呵!
{$CATEGORY[$r[catid]][url]} 栏目地址
{str_cut($CATEGORY[$r[catid]][catname],4)} 栏目名 长度为4 根据自己需要调整吧~
其他参数前面介绍了! 这里就不多说了 继续下一个问题。
(4)如何调用后台设置的标题颜
其实这个并不神秘。 只是个<span></span>而已! 呵呵 接下来就直接示例吧!
<div id="hdlist">
<ul>
{get sql="select*from 99inet_content where catid=40 and status=99 order by updatetime desc" rows="7"}
<li> [{date('m-d', $r <A href="{$r[url]}" target="_blank">{if $r[style]}<span class="{$r[style]}"> {str_cut($r[title], 22)}</span>{else}{str_cut($r[title], 22)}{/if}</A></li>
{/get}</ul>
</div>
{get}部分俺就不说了,上面基本上都说了~ [{date('m-d', $r[updatetime])}]
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论