今天開始從頭部進行修改，頭部的話針對的是所有的頁面，你可以把頭部做成一個公用文件，不過由于調(diào)用的JS和一些樣式的不同也可以分開來做，如果要做成公共頭文件的話，要把所有頁面都會調(diào)用的JS和CSS加載上，不過東西也不多的，下面我就做成一個公共文件來用。
先講一下每個頁面的關(guān)鍵字：{$keywords}，這是使用的smarty模板變量用來輸出?！皗}”是用來規(guī)定標(biāo)簽的開始與結(jié)束位置，有些類似于PHP中的“<?php ?>”，原理是一樣的，中間的變量$keywords是從后臺PHP文件中傳輸過來的變量，里面存儲有值，{$keywords}就是把里面的值進行輸出，由于{$keywords}和{$page_title}（頁面標(biāo)題的輸出，在title標(biāo)簽間輸出）是包含在head標(biāo)簽中的，所以我們可以不用動它們，不必把它們寫進公共頭文件。在head標(biāo)簽中還有一個{insert_scripts files='common.js,index.js'}，它是用來調(diào)用JS文件的，如所見，它調(diào)用了common.js,index.js兩個JS文件，head內(nèi)的我們都不做為公共頭文件，不過一會在公共頭文件中我們會用到這個調(diào)用JS的方式，把所有要用到的JS文件調(diào)用進來。
首先新建一個header.dwt公共頭文件與其它*.dwt文件放一起，在第一行我們調(diào)用所有的JS文件：
{insert_scripts files='common.js,index.js,auto_complete.js,compare.js,global.js,lefttime.js,myship.js,region.js,shopping_flow.js,showdiv.js,utils.js,user.js,transport.js,tagbox.js'}
JS文件很多，但不是每個頁面都會用到所有的JS文件，或都有的頁面已經(jīng)在head中調(diào)用了一些需要使用的JS文件，有與我們寫的JS文件重復(fù)的，沒有關(guān)系，我們只是為了做一個公共文件，不用在每個頁面都單獨再去調(diào)用，有重復(fù)不會有任何影響。
下來我們來確定一下header.dwt的字符集設(shè)置：
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
我使用的是gbk字符集，如果你使用的是utf-8的話，就要把字符集進行相應(yīng)設(shè)置。
下面是一段JS代碼：
<script type="text/javascript">
var process_request = "{$lang.process_request}";
</script>
設(shè)置它是為了防止有些頁面調(diào)用JS頁面時出現(xiàn)加載錯誤而無法正常運行程序。
下面是對LOGO圖片的設(shè)置：
<div class="block clearfix">
<div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div>
<div class="f_r log">
這些代碼是從page_header.lib文件中拷貝出來的，因為我當(dāng)時做頭文件的時候?qū)懺瓉砟J頁面差距很大，所以我就從它原來的基礎(chǔ)上來講，可能大家更容易接受。如果你想換LOGO，那只要把相應(yīng)的logo.gif圖片換掉就可以了，下面是歡迎詞與登陸注冊按鈕：
<ul>
<li class="userInfo">
{insert_scripts files='transport.js,utils.js'}
<font id="ECS_MEMBERZONE">{* ECSHOP 提醒您：根據(jù)用戶id來調(diào)用member_info.lbi顯示不同的界面 *}{insert name='member_info'} </font>
</li>
{insert name='member_info'} 輸出歡迎詞與登陸注冊按鈕，如果你想改變樣式的話可以把它刪掉，然后自己做樣式，如：
<li style="width:210px; float:right; list-style-type:none; color:#808080;">
歡迎光臨愛折網(wǎng)
<a href="../user.php"><img src="images/dl.jpg" border="0" style="vertical-align:middle;"></a>
<a href="../user.php?act=register"><img src="images/zc.jpg" border="0" style="vertical-align:middle;"></a>
</li>
這是我在自己用的頁面上修改的，你也可以有別的修改。下面是輸出導(dǎo)航欄定義在頂部的部分：
<!--{if $navigator_list.top}-->
<li id="topNav" class="clearfix">
<!-- {foreach name=nav_top_list from=$navigator_list.top item=nav} -->
<a href="{$nav.url}" <!-- {if $nav.opennew eq 1} --> target="_blank" <!-- {/if} -->>{$nav.name}</a>
<!-- {if !$smarty.foreach.nav_top_list.last} -->
|
<!-- {/if} -->
<!-- {/foreach} -->
<div class="topNavR"></div>
</li>
<!-- {/if} -->
</ul>
</div>
</div>
<div class="blank"></div>
{if $navigator_list.top}是if判斷的開始，{/if}為結(jié)束，意思是，如果$navigator_list.top值不為空，也就是說有定義在頂部輸出的導(dǎo)航內(nèi)容，{foreach name=nav_top_list from=$navigator_list.top item=nav}為一個循環(huán)，輸出所有定義里的導(dǎo)航內(nèi)容，{/foreach}為結(jié)束，中間為循環(huán)內(nèi)容，你可以在里面進行修改，修改成你想要的樣式。不過一般頂部導(dǎo)航不會用到，畢竟正常的導(dǎo)航一般是在頭文件中間部分，這樣即美觀又容易定義。如果你不想要頂部導(dǎo)航可以把if判斷所包含內(nèi)容刪除掉。接下來是正常導(dǎo)航輸出，也是ECSHOP默認輸出形式：
<div id="mainNav" class="clearfix">
<a href="../index.php"{if $navigator_list.config.index eq 1} class="cur"{/if}>{$lang.home}<span></span></a>
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
<a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if} {if $nav.active eq 1} class="cur"{/if}>{$nav.name}<span></span></a>
<!-- {/foreach} -->
</div>
跟上面一樣，<a href="../index.php"{if $navigator_list.config.index eq 1} class="cur"{/if}>{$lang.home}<span></span></a>這個是輸出首頁定義，如果沒有修改，它輸出的是首頁兩個字，你可以根據(jù)實際需要進行修改，在后臺進行設(shè)置就可以了。如果要修改樣式你可以在這里進行修改，因為如果修改樣式表里的對應(yīng)樣式，會導(dǎo)致其它調(diào)用樣式的div塊也會發(fā)生變化，所以最好在dwt文件中修改成你想要做的樣式，直接在div上的style里寫上就可以。如果你修改了樣式，你會發(fā)現(xiàn)，點擊相應(yīng)頁面總會出現(xiàn)對應(yīng)導(dǎo)航的字有背景，而且比其它字向下走了，原因就在于{if $nav.active eq 1} class="cur"{/if}，它設(shè)置了，如果你點擊導(dǎo)航會對應(yīng)的出現(xiàn).cur樣式，你可以把它刪除掉，并把它修改成你想要的樣式就可以了。最后是搜索：
<div id="search" class="clearfix">
<div class="keys f_l">
<script type="text/javascript">
{literal}
<!--
function checkSearchForm()
{
if(document.getElementById('keyword').value)
{
return true;
}
else
{
alert("{$lang.no_keywords}");
return false;
}
}
-->
{/literal}
</script>
{if $searchkeywords}
{$lang.hot_search} ：
{foreach from=$searchkeywords item=val}
<a href="search.php?keywords={$val|escape:url}">{$val}</a>
{/foreach}
{/if}
</div>
<form id="searchForm" name="searchForm" method="get" action="search.php" onSubmit="return checkSearchForm()" class="f_r" style="_position:relative; top:5px;">
<select name="category" id="category" class="B_input">
<option value="0">{$lang.all_category}</option>
{$category_list}
</select>
<input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" class="B_input" style="width:110px;"/>
<input name="imageField" type="submit" value="" class="go" style="cursor:pointer;" />
<a href="search.php?act=advanced_search">{$lang.advanced_search}</a>
</form>
</div>
這個也沒有什么要講的，你只要在div中加入style樣式就可以修改樣式了。我個人修改的時候都是這樣的，沒有去修改樣式表，因為怕別的div塊發(fā)生不可知變化。
再講一點，link可以調(diào)用你想要的樣式，但是你如果在head里再設(shè)置樣式的話，要放在所有l(wèi)ink后面，因為外部調(diào)用的樣式在前，你寫的樣式在后，它會選擇在后的樣式，另一點在div里寫style時，一定要在id和class后面，同上，樣式都會掉用離自己最近的同名樣式。
今天好像也沒有講什么，哈哈，如果你有什么問題或是有更好的建議的話，希望你跟我一起探討，方式很容易，留言在這里就可以了。好了，今天就到這兒~
