<listing id="ddlnh"><cite id="ddlnh"><i id="ddlnh"></i></cite></listing>
<listing id="ddlnh"><cite id="ddlnh"><i id="ddlnh"></i></cite></listing>
<listing id="ddlnh"></listing>
<listing id="ddlnh"></listing>

稻殼CMS模板教程-第四節 首頁模板index.php的建立

第四節 首頁模板index.php的建立

為了方便演示,以下的教程中,我們使用“[雅風設計]稻殼cms X1.0紅色企業通用模板”的靜態頁面為例進行講解。

模板代碼編輯軟件,雅風推薦使用Dreamweaver,這里順便啰嗦幾句:如果想從事這個行業,或者認真的搞稻殼CMS模板,雅風建議您不要用那些旁門左道的軟件,Dreamweaver或者其他常用的代碼編輯器才是正道。

登錄稻殼CMS后臺,進入構建網站,選擇模板管理,選擇使用950d這個模板,然后選擇[預覽網站],打開網站首頁界面。

這時候我們看到的網頁界面應該是深喉嚨默認模板,因為我們目前制作的模板是直接復制默認模板的,如下圖:

處理模板之前,我們先把第二節中提到的靜態HTML頁面中所涉及到的CSS、JS、圖片等文件復制到模板目錄。目錄關系不要搞錯,例如原來的css文件存儲在css目錄名為css.css,那么復制后的位置相對于模板目錄,也是css目錄名為css.css,其他文件同理。

啟動Dreamweaver軟件,打開第二節中準備好的index首頁html頁面,再打開模板中的index.php首頁模板文件。

保留index.php中的head部分中編碼描述的meta代碼、title和keywords以及description的代碼,刪除原有JS和css調用代碼,處理完之后head部分的代碼應該如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $tag['seo.title']; ?></title>
<meta name="keywords" content="<?php echo $tag['seo.keywords']; ?>" />
<meta name="description" content="<?php echo $tag['seo.description'];  ?>" />
</head>

上面代碼中的等表示動態調用站點標題,關鍵字和摘要的意思,是屬于稻殼CMS的系統標簽。

然后我們把靜態首頁html頁面中的js和css調用代碼復制過來,復制后的head部分代碼如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $tag['seo.title']; ?></title>
<meta name="keywords" content="<?php echo $tag['seo.keywords']; ?>" />
<meta name="description" content="<?php echo $tag['seo.description'];  ?>" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>

接下來,我們要手動的修改一下JS和CSS鏈接路徑,需要在JS和CSS文件路徑前添加當前模板目錄的稻殼標簽,當前模板目錄的稻殼標簽是:

我們把當前模板目錄的稻殼標簽放到JS和CSS路徑前,注意尾部無需添加反斜杠“/”,手動添加好之后head部分代碼如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $tag['seo.title']; ?></title>
<meta name="keywords" content="<?php echo $tag['seo.keywords']; ?>" />
<meta name="description" content="<?php echo $tag['seo.description'];  ?>" />
<link href="<?php echo $tag['path.skin'];?>css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $tag['path.skin'];?>js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $tag['path.skin']; ?>js/functions.js"></script>
</head>

這樣,系統才會解析出所調用的JS和CSS文件的正確路徑。

接下來,我們把靜態首頁html頁面中的body部分代碼復制覆蓋index.php中的body部分代碼。

然后,我們需要將index.php中新的body部分中的代碼里的插入圖片路徑進行修改,添加好當前模板目錄的稻殼標簽 。

例如,我們想把index.php中新的body部分代碼中的img的圖片插入路徑進行修改,假定原來的插入路徑是 src="images/圖片名" ,那么修改后的插入路徑應該是 src="images/圖片名" 。

這里雅風推薦大家使用Dreamweaver的替換功能,CTRL+F打開查找替換功能面板,以上面描述為例,可以查找 "images/ 替換為 "images/,如下圖:

全部替換后,插入圖片的路徑就修改好了,同理,如果body部分中有js或css路徑,也可以用上面的方法進行批量替換。

至此,首頁index.php模板就建立好了,這時候我們選擇后臺的預覽網站,應該能看到和靜態頁面首頁相同的頁面效果了。

2016-03-14 09:22:00 來源:本站 瀏覽:1723
關閉
人妖视频在线观看专区,人妖系列网站在线看TS,人妖系列在线精品视频,人与嘼视频免费播放,人与动人物欧美网站