phpcms v9模板制作教程
2024-07-09 22:54:17
供稿：網友
本教程屬于初級教程，高手可以旁聽，雖然是初級教程但基礎的html語言和css是必須了解的，本教程屬于phpcms模板制作基礎篇。
第一節
1、首先下載phpcms v9的集成安裝包并安裝，這里就不詳細說明了。
2、本地調試建議大家使用APMserver，或者wampserver等，可以到PHPCMS吧官方網站首頁鏈接下載。安裝好打開v9的根目錄“phproot→phpcms→templates”文件夾把“default”文件夾復制一份起名“redu”。
3、登陸v9后臺登錄地址：http://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" "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瀏覽器 他的檢查頁面元素功能超贊！
{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}
調查問卷更多>>
更多>>友情鏈接申請鏈接
{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
提示信息: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容量:menu1Container
子菜單:submenu
邊導航圖標:sidebarIcon
注釋:note
面包屑:breadCrumb(即頁面所處位置導航提示)
容器:container
內容:content
搜索:search
登陸:login
功能區:shop(如購物車，收銀臺)
當前的current
樣式文件命名
全站標簽默認樣式：general.css或global.css
布局版式設計樣式：layout.css或container.css
通用樣式（如文字、表單等）：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、打開需要仿的站，查看頁面源代碼?。ㄔ诰W頁空白區右建就能看到）
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教程頻道。
