国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 建站知識(shí) > 制作準(zhǔn)備及網(wǎng)站首頁的制作

制作準(zhǔn)備及網(wǎng)站首頁的制作

時(shí)間：2022-07-13 09:54:01 | 來源：建站知識(shí)

時(shí)間：2022-07-13 09:54:01 來源：建站知識(shí)

菠蘿教你做模板之二－制作準(zhǔn)備及網(wǎng)站首頁的制作

好不容易抽點(diǎn)時(shí)間來寫教程：
今天講制作準(zhǔn)備：
硬件方面：
我們需要一臺(tái)能夠流常運(yùn)行制作軟件的機(jī)子，內(nèi)存256m以上（廢話，只有我采用這么爛的機(jī)子）
軟件方面：
我們需要如下軟件：
Dreamwaver 用來編輯html頁面
FireWorks或者Photoshop，用來做最初的模板預(yù)覽圖和切片導(dǎo)出html文件。
Flash（如果你需要你的網(wǎng)頁更炫，需要用到這個(gè)dd哦，順便緬懷一下出網(wǎng)頁三劍客的MM公司～～）

當(dāng)我們安裝解壓縮并安裝好phpcms3.0后，我們可以看到這樣的一個(gè)文件夾templates，他就是我們要操作的對象了。

第一步，認(rèn)識(shí)模板文件

打開templates目錄，會(huì)發(fā)現(xiàn)下面由一個(gè)文件夾default，這個(gè)用來放置默認(rèn)的模板文件，一個(gè)是templateprojectnames.php，這個(gè)文件是用來記錄方案的名稱的文件。

我們打開default文件夾會(huì)看到這樣的一些文件夾，從今天開始，我們就每一個(gè)文件夾模板的制作開始


圖片附件: Snap1.jpg (2006-7-13 10:57 PM, 46.94 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
我們首先從phpcms這個(gè)文件夾開始


圖片附件: Snap2.jpg (2006-7-13 10:57 PM, 82.18 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
這個(gè)文件夾里面存放的網(wǎng)頁模板用途如下：
footer.html  全站默認(rèn)底部模板
header.html 全站默認(rèn)頂部模板
index.html  默認(rèn)全站首頁模板
message.html  提示消息模板
search.html   默認(rèn)全站搜索模板
tag_catlist.html默認(rèn)欄目調(diào)用標(biāo)簽?zāi)０?BR>tag_slidespecial.html  默認(rèn)幻燈片展示模板
tag_slidespecial-js.html   默認(rèn)js圖片效果切換模板
tag_speciallist.html  默認(rèn)專題列表模板
uppic.html   上傳圖片模板
templatenames.php  記錄每個(gè)模板的名稱

我們制作好一張效果預(yù)覽圖之后，需要使用FW或者PS之類的切片工具將它倒成html文件
這一步網(wǎng)上有很多教程，在此就不加贅述

網(wǎng)站首頁的制作


當(dāng)我們導(dǎo)出自己的html首頁文件效果入www.qq.com所示，我們可以觀察一下
頂部這些東西是每個(gè)頁面通用的，我們可以把他做成header.html


圖片附件: Snap1.jpg (2006-7-13 11:08 PM, 90.67 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
底部這些東西是通用的，我們可以把他做成footer.html文件


圖片附件: Snap2.jpg (2006-7-13 11:08 PM, 85.94 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
其余的部分，就可以做成默認(rèn)模板的index.html 首頁文件

打開我們剛才自己制作的header.html模板，我們會(huì)發(fā)現(xiàn)里面的html就是自己切片產(chǎn)生的，這些并不是我們需要的，我們需要的，是phpcms自己認(rèn)識(shí)的代碼，那么我們現(xiàn)在就開始吧

1.模板方案的建立
新建一個(gè)文件夾，例如新建一個(gè)文件夾叫qq，這個(gè)就是我們自己制作的模板方案的文件夾

我們先在這個(gè)文件夾里面建立一個(gè)子文件夾叫phpcms，或者叫index，這個(gè)文件夾用來存放前面我們提到的哪些通用的模板，叫什么名字是無所謂的，但是記住，所有的文件夾名字都只能是英文字母或者數(shù)字，不能是中文

2.header.html文件的建立
我們把我們剛才自己切片要做頭部文件的html復(fù)制進(jìn)來，為了讓人一幕了然，我們還是命名為header.html

打開這個(gè)header.html文件，我們需要按照phpcms的方式來插入代碼

打開官方默認(rèn)模板的header.html文件，我們會(huì)發(fā)現(xiàn)下面這樣的代碼

CODE:
[Copy to clipboard]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}">
<title>{$meta_title}-{$_PHPCMS['meta_title']}-{$_PHPCMS['sitename']}</title>
<meta name="keywords" content="{$meta_keywords}">
<meta name="description" content="{$meta_description}">
<meta name="generator" content="Phpcms {$version}">
<link href="{$skindir}/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var phpcms_path = "{PHPCMS_PATH}"
//-->
</script>
<script language="javascript" src="{PHPCMS_PATH}include/js/common.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=3"></SCRIPT>
</head>

<body {if $cat['enableprotect']}oncontextmenu='return false' ondragstart='return false' on selectstart ='return false' on select='document.selection.empty()' on copy='document.selection.empty()' onbeforecopy='return false'{/if}>
****************
        <table width="980" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td height="10"></td>
          </tr>
        </table>
<link href="{$skindir}/style.css" rel="stylesheet" type="text/css">  這一行是用來定義我們模板制作過程中使用到的樣式表的路徑，當(dāng)然你也可以直接將樣式寫在html文件中，不過這樣會(huì)增大文件的大小，而且不利于css的重復(fù)使用。

<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=3"></SCRIPT>   這一行是調(diào)用的廣告代碼，可以從后臺(tái)編輯得到直接插入

<body {if $cat['enableprotect']}oncontextmenu='return false' ondragstart='return false' on selectstart ='return false' on select='document.selection.empty()' on copy='document.selection.empty()' onbeforecopy='return false'{/if}>
這一行代碼是用來保護(hù)你的頁面文件，如果你后臺(tái)選擇了保護(hù)，這一行代碼就會(huì)起作用。

以<SCRIPT LANGUAGE="JavaScript"開頭的都是js文件
在頭部中，分別使用了
<script language="JavaScript" src="{PHPCMS_PATH}include/js/time.js"></script>  時(shí)間
<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}include/js/login.js"></SCRIPT> 登錄框
<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=1"></SCRIPT>  廣告代碼等
我們可以在自己需要的地方調(diào)用這些js代碼

我們會(huì)發(fā)現(xiàn)，如果我們使用了默認(rèn)的圖片路徑為images/1.gif那么我們生成的網(wǎng)頁文件就不能正確顯示圖片，其實(shí)
這是因?yàn)樯蒱tml的時(shí)候，路徑不一致所導(dǎo)致的，那么怎么解決呢？

我們需要使用DW的查找替換功能，將自己圖片原來所有的形如“images/1.gif”換成“"{$skindir}/imahes/1.gif”這樣的路徑
這樣，我們的圖片路徑就不會(huì)出問題了

請記住，phpcms模板里面所有的if開頭的語句，都是判斷語句，loop語句都是循環(huán)語句，請大家在插入模板的時(shí)候，記得寫完整他們的大括號(hào)｛｝

{if $channelid}
        <a href="{$channelurl}rss.php?catid={$catid}"><img src="{PHPCMS_PATH}images/rss.gif" border="0"/></a>
        {/if}

這一句是用來判斷是否屬于某個(gè)欄目，如果是的話，顯示rss鏈接

      {loop $_CHANNEL $channel}
        <li {if $channelid==$channel[channelid]}id="Tabi" class="Selected"{/if}><a href="{$channel['channelurl']}" class="white">{$channel['channelname']}</a></li>{/loop}

這一句，是用來顯示所有的頻道名稱
我們可以將其簡化成

      {loop $_CHANNEL $channel}
        <a href="{$channel['channelurl']}" class="white">{$channel['channelname']}</a>
      {/loop}

<!--頻道下屬欄目列表-->
{if $channelid && $mod==$_CHA['module']}
      <table width="100%" align="center" cellpadding="0"  cellspacing="0">
       <tr>
        <td class="submenu">
<a href="{$_CHANNEL[$channelid][channelurl]}" class="white"> {$_CHA[channelname]}首頁</a>
{loop get_childcat(0) $cat}
| <a href="{$cat['caturl']}" class="white">{$cat['catname']}</a>
{/loop}
| <a href="{PHPCMS_PATH}{$_CHA[channeldir]}/special/" class="white">專題</a>
| <a href="{PHPCMS_PATH}guestbook/?channelid={$channelid}" class="white">留言本</a>
| <a href="{PHPCMS_PATH}{$_CHA[channeldir]}/search.php" class="white">搜索</a>
</td>
       </tr>
       </table>
{/if}

這一句，用來顯示當(dāng)前頻道下面的欄目名稱
其中{loop get_childcat(0) $cat}  這個(gè)函數(shù)是用來提取當(dāng)前的以及欄目的
我們可以將其改進(jìn)成
{loop get_childcat(1,0) $cat}取文章頻道所有子欄目
{loop get_childcat(2,0) $cat}取圖片頻道所有子欄目
其中1.2表示頻道的id  0表示取以及欄目

我們可以在自己需要的地方，調(diào)用這些代碼


3.footer.html的建立
我們打開自己制作的footer.html模板后，可以將下面調(diào)用代碼插入自己想要讓他顯示的地方

{$_PHPCMS['copyright']}  自己后臺(tái)設(shè)定的版權(quán)


圖片附件: Snap1.jpg (2006-7-13 11:38 PM, 248.71 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">

{$showdefinedpage(0)}<a href="{PHPCMS_PATH}guestbook/?channelid={$channelid}">留言本</a> 自己后臺(tái)定義的單網(wǎng)頁



圖片附件: Snap2.jpg (2006-7-13 11:38 PM, 245.33 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
Processed in {$debuginfo[time]} second(s), {$debuginfo[queries]} queries<!--{if $gzipcompress}-->, Gzip enabled 顯示運(yùn)行信息

<Script Language=Javascript Src="{PHPCMS_PATH}include/js/Std_StranJF.Js"></Script>   簡繁體轉(zhuǎn)換代碼，如果你的網(wǎng)頁沒有使用這個(gè)功能，這個(gè)js文件可以去掉

{$copyright()}  phpcms的版權(quán)，強(qiáng)烈建議大家保留

4.網(wǎng)站首頁index.html的建立
我們打開index.html文件,會(huì)發(fā)現(xiàn)頭部和底部有這樣的代碼
{template 'phpcms','header'}
{template 'phpcms','footer'}

這兩句是對于頭部和尾部的調(diào)用，phpcms表示的是他們的文件夾名稱，也就是我們剛才在方案文件夾QQ先面建立的子文件夾phpcms或者（index） 后面的header和footer是模板的頭尾文件的名稱，如果我們需要實(shí)現(xiàn)不同頁面不同的頭尾文件，那么，我們可以將這個(gè)改成
{template 'phpcms','artheader'}
{template 'phpcms','artfooter'}   其中artheader和artfooter是我們?yōu)槲恼骂l道單獨(dú)建立的頭尾文件，當(dāng)然了，這個(gè)文件也是需要存在在phpcms這個(gè)文件夾中的。

index文件里面涉及到的js代碼

<!--搜索框-->
<script language="Javascript" src="{PHPCMS_PATH}data/js/search.js"></script>    搜索框
<SCRIPT LANGUAGE="JavaScript" src="{PHPCMS_PATH}ads/ads.php?id=2"></SCRIPT> banner廣告

index里面涉及到的標(biāo)簽

在index文件里面我們可以看到這樣的以｛｝開頭結(jié)尾的代碼，這就是phpcms的標(biāo)簽了，phpcms的標(biāo)簽我們可以從后臺(tái)相應(yīng)的地方選擇自己想要的效果插入，


圖片附件: Snap1.jpg (2006-7-14 01:50 PM, 373.57 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">


圖片附件: Snap2.jpg (2006-7-14 01:50 PM, 302.43 K)

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='點(diǎn)擊在新窗口查看全圖/nCTRL+鼠標(biāo)滾輪放大或縮小';}" mousewheel="return imgzoom(this);">
phpcms的標(biāo)簽有3種
短標(biāo)簽  長標(biāo)簽 js調(diào)用

標(biāo)簽調(diào)用：
優(yōu)點(diǎn)：在調(diào)用頁產(chǎn)生html，有利于搜索收錄，下載速度快
缺點(diǎn)：如果您設(shè)置了生成html，html生成速度慢，需要經(jīng)常更新頁面才能保持最新，不能跨站或者跨頻道調(diào)用
短標(biāo)簽和長標(biāo)簽有什么區(qū)別？
1、短標(biāo)簽更加簡短，在進(jìn)行模板編輯的時(shí)候不會(huì)讓模板變形，通過短標(biāo)簽的英文名很容易知道該標(biāo)簽的意義；
2、短標(biāo)簽一旦插入到模板就可以通過后臺(tái)修改標(biāo)簽參數(shù)來控制前臺(tái)顯示了；
3、短標(biāo)簽和后臺(tái)有關(guān)聯(lián)，因此不能在后臺(tái)刪除正在使用的短標(biāo)簽，否則會(huì)導(dǎo)致短標(biāo)簽無法調(diào)出數(shù)據(jù)并顯示空白。
4、長標(biāo)簽是phpcms 2.4版本開始采用的標(biāo)簽方式，3.0仍然支持這種標(biāo)簽。
5、長標(biāo)簽插入模板后如果要修改參數(shù)則需要找到模板中該標(biāo)簽位置，并找到對應(yīng)的參數(shù)進(jìn)行修改，沒有短標(biāo)簽方便。
建議：如果您希望更好地控制標(biāo)簽參數(shù)，請使用短標(biāo)簽；如果您打算發(fā)布您的模板，請使用長標(biāo)簽（因?yàn)槎虡?biāo)簽還和標(biāo)簽數(shù)據(jù)關(guān)聯(lián)，不方便發(fā)布）

JS調(diào)用：
優(yōu)點(diǎn)：可以跨站調(diào)用，自動(dòng)更新，html生成速度快
缺點(diǎn)：搜索收錄差，速度相對html要慢一點(diǎn)（相差不大）

我們的建議：
在首頁、欄目首頁、專題首頁使用標(biāo)簽調(diào)用；
欄目信息列表、信息具體頁中的推薦信息、熱點(diǎn)信息等使用JS調(diào)用

index中涉及到的循環(huán)

{loop $cha_articles $i $cha}{/loop} 文章頂級(jí)顯示頻道的循環(huán)
{loop $cha_pictures $i $cha}{/loop}圖片頂級(jí)顯示頻道的循環(huán)
{loop $cha_downs $i $cha}{/loop}下載頂級(jí)顯示頻道的循環(huán)

使用這些循環(huán)，是可以實(shí)現(xiàn)調(diào)用每個(gè)頻道需要在首頁顯示的欄目名稱及文章列表的

其他的標(biāo)簽
{$user_itemstop(10)}  top10用戶
{$voteshow(0,0)}     網(wǎng)站的全站投票
{$linklist(0,0,1,0,10,2)}  友情鏈接的圖片鏈接
{$linklist(0,0,0,0,10,2)} 友情鏈接的文字鏈接

關(guān)鍵詞：

74
73
25
news

版權(quán)所有? 億企邦 1997-2022 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉