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

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

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

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

我使用的是gbk字符集，如果你使用的是utf-8的話，就要把字符集進行相應設置。

下面是一段JS代碼：

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

設置它是為了防止有些頁面調(diào)用JS頁面時出現(xiàn)加載錯誤而無法正常運行程序。

下面是對LOGO圖片的設置：

<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文件中拷貝出來的，因為我當時做頭文件的時候?qū)懺瓉砟J頁面差距很大，所以我就從它原來的基礎上來講，可能大家更容易接受。如果你想換LOGO，那只要把相應的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>

這是我在自己用的頁面上修改的，你也可以有別的修改。下面是輸出導航欄定義在頂部的部分：

<!--{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值不為空，也就是說有定義在頂部輸出的導航內(nèi)容，{foreach name=nav_top_list from=$navigator_list.top item=nav}為一個循環(huán)，輸出所有定義里的導航內(nèi)容，{/foreach}為結(jié)束，中間為循環(huán)內(nèi)容，你可以在里面進行修改，修改成你想要的樣式。不過一般頂部導航不會用到，畢竟正常的導航一般是在頭文件中間部分，這樣即美觀又容易定義。如果你不想要頂部導航可以把if判斷所包含內(nèi)容刪除掉。接下來是正常導航輸出，也是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ù)實際需要進行修改，在后臺進行設置就可以了。如果要修改樣式你可以在這里進行修改，因為如果修改樣式表里的對應樣式，會導致其它調(diào)用樣式的div塊也會發(fā)生變化，所以最好在dwt文件中修改成你想要做的樣式，直接在div上的style里寫上就可以。如果你修改了樣式，你會發(fā)現(xiàn)，點擊相應頁面總會出現(xiàn)對應導航的字有背景，而且比其它字向下走了，原因就在于{if $nav.active eq 1} class="cur"{/if}，它設置了，如果你點擊導航會對應的出現(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里再設置樣式的話，要放在所有l(wèi)ink后面，因為外部調(diào)用的樣式在前，你寫的樣式在后，它會選擇在后的樣式，另一點在div里寫style時，一定要在id和class后面，同上，樣式都會掉用離自己最近的同名樣式。

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