【转】关于ECSHOP模板头部修改。。。

今天开始从头部进行修改，头部的话针对的是所有的页面，你可以把头部做成一个公用文件，不过由于调用的JS和一些样式的不同也可以分开来做，如果要做成公共头文件的话，要把所有页面都会调用的JS和CSS加载上，不过东西也不多的，下面我就做成一个公共文件来用。

先讲一下每个页面的关键字：{$keywords}，这是使用的smarty模板变量用来输出。“{}”是用来规定标签的开始与结束位置，有些类似于PHP中的“<?php ?>”，原理是一样的，中间的变量$keywords是从后台PHP文件中传输过来的变量，里面存储有值，{$keywords}就是把里面的值进行输出，由于{$keywords}和{$page_title}（页面标题的输出，在title标签间输出）是包含在head标签中的，所以我们可以不用动它们，不必把它们写进公共头文件。在head标签中还有一个{insert_scripts files='common.js,index.js'}，它是用来调用JS文件的，如所见，它调用了common.js,index.js两个JS文件，head内的我们都不做为公共头文件，不过一会在公共头文件中我们会用到这个调用JS的方式，把所有要用到的JS文件调用进来。

首先新建一个header.dwt公共头文件与其它*.dwt文件放一起，在第一行我们调用所有的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文件，或都有的页面已经在head中调用了一些需要使用的JS文件，有与我们写的JS文件重复的，没有关系，我们只是为了做一个公共文件，不用在每个页面都单独再去调用，有重复不会有任何影响。

下来我们来确定一下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>

设置它是为了防止有些页面调用JS页面时出现加载错误而无法正常运行程序。

下面是对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文件中拷贝出来的，因为我当时做头文件的时候写原来默认页面差距很大，所以我就从它原来的基础上来讲，可能大家更容易接受。如果你想换LOGO，那只要把相应的logo.gif图片换掉就可以了，下面是欢迎词与登陆注册按钮：

<ul>
   <li class="userInfo">
   {insert_scripts files='transport.js,utils.js'}
   <font id="ECS_MEMBERZONE">{* ECSHOP 提醒您：根据用户id来调用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;">

欢迎光临爱折网 

<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}为结束，意思是，如果$navigator_list.top值不为空，也就是说有定义在顶部输出的导航内容，{foreach name=nav_top_list from=$navigator_list.top item=nav}为一个循环，输出所有定义里的导航内容，{/foreach}为结束，中间为循环内容，你可以在里面进行修改，修改成你想要的样式。不过一般顶部导航不会用到，毕竟正常的导航一般是在头文件中间部分，这样即美观又容易定义。如果你不想要顶部导航可以把if判断所包含内容删除掉。接下来是正常导航输出，也是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>这个是输出首页定义，如果没有修改，它输出的是首页两个字，你可以根据实际需要进行修改，在后台进行设置就可以了。如果要修改样式你可以在这里进行修改，因为如果修改样式表里的对应样式，会导致其它调用样式的div块也会发生变化，所以最好在dwt文件中修改成你想要做的样式，直接在div上的style里写上就可以。如果你修改了样式，你会发现，点击相应页面总会出现对应导航的字有背景，而且比其它字向下走了，原因就在于{if $nav.active eq 1} class="cur"{/if}，它设置了，如果你点击导航会对应的出现.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块发生不可知变化。

再讲一点，link可以调用你想要的样式，但是你如果在head里再设置样式的话，要放在所有link后面，因为外部调用的样式在前，你写的样式在后，它会选择在后的样式，另一点在div里写style时，一定要在id和class后面，同上，样式都会掉用离自己最近的同名样式。

今天好像也没有讲什么，哈哈，如果你有什么问题或是有更好的建议的话，希望你跟我一起探讨，方式很容易，留言在这里就可以了。好了，今天就到这儿~