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