phpcms v9模板制作教程(转载)
第一節(jié)
1、首先下載phpcms v9的集成安裝包并安裝，這里就不詳細說明了。
2、本地調(diào)試建議大家使用APMserver，或者wampserver等，可以到PHPCMS吧官方網(wǎng)站首頁鏈接下載。安裝好打開v9的根目錄“phproot→phpcms→templates”文件夾把“default”文件夾復制一份起名“redu”。
3、登陸v9后臺登錄地址：http://localhost/admin.php
用戶名：phpcms 密碼：phpcms
4、打開界面→模板風格→風格標識redu下的詳細列表下的content文件夾
1、首先修改首頁模板index.html
修改前向大家介紹下v9的工作模式，v9和他的前身phpcms 2008是一樣的都是“標簽調(diào)用頭部 +首頁部分+ 標簽調(diào)用底部”
所以按照從頭開始的順序
第一步打開heard.html
現(xiàn)在我們開始分析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網(wǎng)頁標準
<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>
判斷語句 翻譯：如果設置了標題并且標題不為空，則顯示標題，否則顯示網(wǎng)站名稱
<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的調(diào)用{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行是網(wǎng)頁的js調(diào)用
</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瀏覽器 他的檢查頁面元素功能超贊！
{template "content","header"}
調(diào)用根目錄下phpcms/template/content/header文件
<!--main-->這個是模版注釋！建議一定要養(yǎng)成寫代碼加注釋的習慣
這個是div標簽，不知道什么是div可以的去網(wǎng)上找些教程學習下，這個都不了解就沒必要繼續(xù)看了
<!--這里是pc標簽{pc:content 參數(shù)名="參數(shù)值" 參數(shù)名="參數(shù)值" 參數(shù)名="參數(shù)值"}-->
{pc:content action="position" posid="2" order="listorder DESC" num="4"}
<!--顯示PC標簽中的數(shù)據(jù)-->
{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}
?
?
?
調(diào)查問卷更多>>
?
?
?
更多>>友情鏈接申請鏈接
?
{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"}
養(yǎng)成書寫規(guī)范的DIV標簽
搜索引擎優(yōu)化(seo)中，對代碼的優(yōu)化也是一個很關鍵的步驟。為了更加符合SEO的規(guī)范，下面是目前流行的CSS+DIV的命名規(guī)則：
DIV ID命名
頁頭:header
登錄條:loginBar
標志:logo
側(cè)欄:sideBar
廣告:banner
導航:nav
子導航:subNav
菜單:menu
子菜單:subMenu
搜索:search
滾動:scroll
頁面主體:main
內(nèi)容:content
標簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
友情鏈接:friendLink
頁腳:footer
加入:joinus
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權:copyRight
CSS ID的命名
外套:wrap
主導航:mainNav(globalNav)
子導航:subNav
頁腳:footer
整個頁面:content
頁眉:header
頁腳:footer
商標:label
標題:title
頂導航:topNav
邊導航:sideBar
左導航:leftsideBar
右導航:rightsideBar
標識:logo
標語:banner
菜單1內(nèi)容:menu1Content
菜單1容量:menu1Container
子菜單:submenu
邊導航圖標:sidebarIcon
注釋:note
面包屑:breadCrumb(即頁面所處位置導航提示)
容器:container
內(nèi)容:content
搜索:search
登陸:login
功能區(qū):shop(如購物車，收銀臺)
當前的current
樣式文件命名
全站標簽默認樣式：general.css或global.css
布局版式設計樣式：layout.css或container.css
通用樣式（如文字、表單等）：style.css
專欄/頻道樣式：columns.css
打印輸出樣式：print.css
主題模板樣式：themes.css
如何利用v9仿制一個網(wǎng)站
一、準備工具1、
css手冊
2、phpcms手冊
3、dw cs5 沒有的可以用記事本
4、ps
5、屏幕尺子
6、好色鬼
7、網(wǎng)站下載器
8、各種瀏覽器 ie6 ie7 ie8 ie9 火狐 谷歌 Opera Safari 用ie 和火狐基本就夠了
9、有條件的可以準備個php手冊和html手冊
10、亦歌（這個挺好用的聽歌軟件，我每次寫代碼都會打開他聽歌）
11、測試環(huán)境沒有下個phpcm v9的集成包
12、還沒想到······想到了在寫（呵呵，為了多寫點·····哈）
二、準備素材
1、用網(wǎng)站下載器下載準備仿的網(wǎng)站文件
2、按照目標網(wǎng)站制作相應尺寸的圖片（如logo）有些需要改，有些不需要改（這里也是為了多寫點···）
3、還沒想到還需要準備什么······想到了在寫（呵呵，還是為了多寫點·····哈）
三、開始仿站
1、先打開亦歌聽音樂吧
2、打開需要仿的站，查看頁面源代碼！（在網(wǎng)頁空白區(qū)右建就能看到）
3、先找到網(wǎng)頁的css文件（下載下來放到根目錄\statics\css下改名reset.css）為什么這么做<link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" />
{CSS_PATH}reset.css等于根目錄\statics\css下reset.css文件（如果用網(wǎng)站下載器下載了那么在下載文件里找到css文件復制過去會更方便）
注：statics目錄下的文件部分是屬于后臺模版的，所以建議新建個目錄放入你自己寫好的css、js或者圖片文件{CSS_PATH}reset.css是后臺的css代碼，這里千萬別改！改了后臺就跑偏了
4、編輯頭部文件用dwcs 5或記事本打開v9模版目錄下header.html文件。
總結
以上是生活随笔為你收集整理的phpcms v9模板制作教程(转载)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： uploadify上传插件完整Demo（
- 下一篇： uploadify php 重命名,自定