|
|
第一節(jié)
1、首先下載phpcms v9的集成安裝包并安裝，這里就不詳細(xì)說(shuō)明了。
2、本地調(diào)試建議大家使用APMserver，或者wampserver等，可以到PHPCMS吧官方網(wǎng)站首頁(yè)鏈接下載。安裝好打開(kāi)v9的根目錄“phproot→phpcms→templates”文件夾把“default”文件夾復(fù)制一份起名“redu”。
3、登陸v9后臺(tái)登錄地址：http://localhost/admin.php
用戶(hù)名：phpcms 密碼：phpcms
4、打開(kāi)界面→模板風(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)用底部”
所以按照從頭開(kāi)始的順序
第一步打開(kāi)heard.html
現(xiàn)在我們開(kāi)始分析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)站名稱(chē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è)是模版注釋?zhuān)〗ㄗh一定要養(yǎng)成寫(xiě)代碼加注釋的習(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}
專(zhuān)題更多>>
{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)成書(shū)寫(xiě)規(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)物車(chē)，收銀臺(tái))
當(dāng)前的current
樣式文件命名
全站標(biāo)簽?zāi)J(rèn)樣式：general.css或global.css
布局版式設(shè)計(jì)樣式：layout.css或container.css
通用樣式（如文字、表單等）：style.css
專(zhuān)欄/頻道樣式：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è)挺好用的聽(tīng)歌軟件，我每次寫(xiě)代碼都會(huì)打開(kāi)他聽(tīng)歌）
11、測(cè)試環(huán)境沒(méi)有下個(gè)phpcm v9的集成包
12、還沒(méi)想到······想到了在寫(xiě)（呵呵，為了多寫(xiě)點(diǎn)·····哈）
二、準(zhǔn)備素材
1、用網(wǎng)站下載器下載準(zhǔn)備仿的網(wǎng)站文件
2、按照目標(biāo)網(wǎng)站制作相應(yīng)尺寸的圖片（如logo）有些需要改，有些不需要改（這里也是為了多寫(xiě)點(diǎn)···）
3、還沒(méi)想到還需要準(zhǔn)備什么······想到了在寫(xiě)（呵呵，還是為了多寫(xiě)點(diǎn)·····哈）
三、開(kāi)始仿站
1、先打開(kāi)亦歌聽(tīng)音樂(lè)吧
2、打開(kāi)需要仿的站，查看頁(yè)面源代碼?。ㄔ诰W(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è)目錄放入你自己寫(xiě)好的css、js或者圖片文件{CSS_PATH}reset.css是后臺(tái)的css代碼，這里千萬(wàn)別改！改了后臺(tái)就跑偏了
4、編輯頭部文件用dwcs 5或記事本打開(kāi)v9模版目錄下header.html文件。
|
|
|小黑屋|手機(jī)版|Archiver|西安網(wǎng)站建設(shè)
發(fā)表于 2017-5-11 23:18:02
QQ好友和群
收藏
分享
支持
反對(duì)