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