今天開始從頭部進(jìn)行修改，頭部的話針對的是所有的頁面，你可以把頭部做成一個公用文件，不過由于調(diào)用的JS和一些樣式的不同也可以分開來做，如果要做成公共頭文件的話，要把所有頁面都會調(diào)用的JS和CSS加載上，不過東西也不多的，下面我就做成一個公共文件來用。

先講一下每個頁面的關(guān)鍵字：{$keywords}，這是使用的smarty模板變量用來輸出?！皗}”是用來規(guī)定標(biāo)簽的開始與結(jié)束位置，有些類似于PHP中的“<?php ?>”，原理是一樣的，中間的變量$keywords是從后臺PHP文件中傳輸過來的變量，里面存儲有值，{$keywords}就是把里面的值進(jìn)行輸出，由于{$keywords}和{$page_title}（頁面標(biāo)題的輸出，在title標(biāo)簽間輸出）是包含在head標(biāo)簽中的，所以我們可以不用動它們，不必把它們寫進(jìn)公共頭文件。在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)用進(jìn)來。

首先新建一個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)系，我們只是為了做一個公共文件，不用在每個頁面都單獨(dú)再去調(diào)用，有重復(fù)不會有任何影響。

下來我們來確定一下header.dwt的字符集設(shè)置：

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

我使用的是gbk字符集，如果你使用的是utf-8的話，就要把字符集進(jìn)行相應(yīng)設(shè)置。

下面是一段JS代碼：

<script type="text/javascript">
var process_request = "{$lang.process_request}";
</script>

設(shè)置它是為了防止有些頁面調(diào)用JS頁面時出現(xiàn)加載錯誤而無法正常運(yù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文件中拷貝出來的，因?yàn)槲耶?dāng)時做頭文件的時候?qū)懺瓉砟J(rèn)頁面差距很大，所以我就從它原來的基礎(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)容，你可以在里面進(jìn)行修改，修改成你想要的樣式。不過一般頂部導(dǎo)航不會用到，畢竟正常的導(dǎo)航一般是在頭文件中間部分，這樣即美觀又容易定義。如果你不想要頂部導(dǎo)航可以把if判斷所包含內(nèi)容刪除掉。接下來是正常導(dǎo)航輸出，也是ECSHOP默認(rèn)輸出形式：

<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í)際需要進(jìn)行修改，在后臺進(jìn)行設(shè)置就可以了。如果要修改樣式你可以在這里進(jìn)行修改，因?yàn)槿绻薷臉邮奖砝锏膶?yīng)樣式，會導(dǎo)致其它調(diào)用樣式的div塊也會發(fā)生變化，所以最好在dwt文件中修改成你想要做的樣式，直接在div上的style里寫上就可以。如果你修改了樣式，你會發(fā)現(xiàn)，點(diǎn)擊相應(yīng)頁面總會出現(xiàn)對應(yīng)導(dǎo)航的字有背景，而且比其它字向下走了，原因就在于{if $nav.active eq 1} class="cur"{/if}，它設(shè)置了，如果你點(diǎn)擊導(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樣式就可以修改樣式了。我個人修改的時候都是這樣的，沒有去修改樣式表，因?yàn)榕聞e的div塊發(fā)生不可知變化。

再講一點(diǎn)，link可以調(diào)用你想要的樣式，但是你如果在head里再設(shè)置樣式的話，要放在所有l(wèi)ink后面，因?yàn)橥獠空{(diào)用的樣式在前，你寫的樣式在后，它會選擇在后的樣式，另一點(diǎn)在div里寫style時，一定要在id和class后面，同上，樣式都會掉用離自己最近的同名樣式。

今天好像也沒有講什么，哈哈，如果你有什么問題或是有更好的建議的話，希望你跟我一起探討，方式很容易，留言在這里就可以了。好了，今天就到這兒~