在寫這課前，我會寫的比較詳細，到后面就不會說的這么詳細了，都是一筆帶過，不浪費口水，后面沒有看懂的，可以回來這里在看看，或是在下面留言說明下，呵呵...
這節課，我們講的是最簡單的header介紹，等下節課在說下全自定義的店招header
===================================================================================================
【1】設計新模板，如何創建新模板，我就不說了（前面已經講過了，很簡單，開着淘寶sdk在控制台上多操作記下就熟悉了）。
創建成功以后，打開里面的header.php文件進行編輯，初次找開header.php文件是空白的。
店招和導航條是屬於淘寶店鋪開放區域的頭部。
【2】根據步驟 “布局——片區——模塊內容” 的順序，編寫header.php
<div class="layout grid-m">
<div class="J_TRegion">
<div class="box J_TBox">
模塊內容（紅色的這個div在正在做模板的時候是寫在你建立的模塊中，現在寫在header.php中會為了測試）
</div>
</div>
</div>
至此，瀏覽器預覽中可以查看到一行文字“模塊內容”。
【3】配置店招模塊，首先准備好圖片素材，950*150px大小，模塊縮略圖64*64px大小
【4】先創建模塊，模塊名稱為“dz01"，本地文件夾中，生成dz01模塊兩個文件，dz01.php和module.php；
下面上2個圖，這2個圖在這這節中會講到他的用處，同時這2個圖，也要留意下，有個印象。
下圖為創建新/編輯模塊圖（大家懂的，呵呵）
下圖為新建模塊后生成的module.xml文件（這個截圖我還截漏了點，大家莫怪）
【5】模塊內容就在dz01.php中編輯一個測試效果，看看能不能在首頁顯示效果
<div class="box J_TBox">
<div class="dz01"> //(淘寶開發文檔中講了一點，模塊內容的最外層最好再包裹一層div，例如要是這個店招和系統店招中的菜單組合，會產生一個間隙，我們可以給這個dz01的div來一個高度來消除間隙)
<img src="assets/images/dz/dz_01.png" /> //事先准備好的圖片素材（當然要是大家有興趣我會在最后面給出素材，同時這些素材不會本人做的，都是來源於網上）
</div>
</div>
【6】返回header.php文件中，要將dz01模塊中的內容顯示在header.php中，書寫如下：
<div class="layout grid-m">
<div class="J_TRegion">
<?php
echo include_local_module("dz01",dz_01); //這里的dz01就是第四步驟中圖片上（創建新/編輯模塊中的）模塊ID*，dz_01是整個首頁中的唯一domId，不能有重復，不懂的去看看淘寶官方sdk文檔
?>
</div>
</div>
【7】header.php中已經顯示了店招圖片，那接下來如何配置參數，使之實現交互性編輯的第一步，對了，大家一定想到 了module.xml我們還沒用到呢！
在寫php交互語句的時候，我們還要了解一個問題module.xml下的（<parameters>標簽），這個問題我們在看淘寶sdk官方文檔的時候，我們就要了解到，這個標簽是有結束標簽的，完整的標簽是<parameters></parameters>，好了，下面就看看我們的module.xml下的交互式代碼吧。
<?xml version="1.0" encoding="GBK" standalone="yes"?> <module xsi:noNamespaceSchemaLocation="http://www.cnblogs.com/../module.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <id>dz01</id> <name>店招</name> <file>dz01.php</file> <thumbnail>assets/images/index.png</thumbnail> <description>店招</description> <requiredCache>true</requiredCache> <parameters> <param name='dz_01' label='店招圖片鏈接' formType='text' description='店招圖片鏈接' ptype='text'> assets/images/dz/dz_01.png </param> </parameters> </module>
【8】module.xml參數配置好了，那要如何實現交互編輯的第二步？那就回頭看到dz01.php中。
把之前的<img src="assets/images/dz/dz_01.png" /> 替換成php語句，實現交互，這樣，一個店招圖片的模塊就配置好了。
dz01.php交互式代碼如下：
<div class="box J_TBox" <?php echo $_MODULE_TOOLBAR?>>
<div class="nav_layout">
<div class="dz">
<?php
if($_MODULE[dz_01]){
echo '<img src="'.$_MODULE[dz_01].'">';
}else{
echo '<img src="assets/images/dz/dz_01.png">';
}
?>
</div>
</div>
</div>
在 dz01.php中我們有3個要點：
1、<?php echo $_MODULE_TOOLBAR?>在?debug下顯示彈窗-編輯內容，這里我會在下面上傳一個圖片（黃色的店招+彈窗效果的圖片，也就是?debug模式圖片）說明下。
2、php語句if (expr) { statement1 } else { statement2 }，這個在我的博客中也有，當然你也可以看看php文檔，這個很簡單的，在上面的代碼中這個語句就是說“當$_MODULE[dz_01]接收到新圖片，就輸出新接收到的圖片，否則輸出開發者自己寫好的圖片地址”
3、這里的$_MODULE[dz_01]中的dz_01是module.xml文件中的<param>標簽中name='dz_01'屬性的值，這是重點要記住，我們以后經常用到。
這樣我們就可以進行交互了，但是我們要怎么知道交互呢？？？（迷茫啊~~~）
我們前面已經說了 ?debug模式（在你的頁面地址后面加上?debug即可查看，對了那個?debug是在英文輸入法下的，不要搞錯）
下面我們來張交互圖（?debug模式）
這樣我們可以看到這個交互式彈窗中的字和我們寫在<param></param>中的若干屬性的意義，要是不懂還可以看看淘寶sdk官方文檔。（邊做邊查看文檔，還是很能加深印象的）
【9】添加系統店招，顯示導航條。
那么，淘寶店鋪頭部可以用兩個模塊內容，一個是自定義的店招模塊（不帶菜單，就一個圖片），一個是系統的店招模塊（不顯示店招圖，我們只要它的菜單即可），將兩個用一個php數組寫在一起，放在header.php文件中，這樣就顯示了導航條~
上代碼：
<div class="layout grid-m">
<div class="HeaderModules J_TRegion">
<?
$HeaderModules=array(
array('id' => 'dz01', domId => "dz_01"),// 自定義店招模塊
array('shortname' => 'shop.pageBanner', 'version' => '1.0-common', domId => "header_02"),//系統店招模塊
);
echo include_modules('HeaderModules', $HeaderModules);//引號里是坑名(也就是這個J_TRegion坑前面新建的div名)，后面是變量名（很明顯是這個數組）
?>
</div>
</div>
但是系統店招模塊相對來說不說很方便，感覺不好用，特別是淘寶官方禁用了！important，同時他還存在一個hearder上加了一個內聯樣式height:150px，使得我們自定義的高度無效，產生一個很大的空隙，下面我上一個圖說明下：
所以我在課程上沒有用這個系統店招模塊，我是自定義的，當然要，我也在網上看了一些人的解答，不是很靠譜，打醬油的居多，太坑爹了，
好了，我也說下我在網上看的答案，
1、在php文件中寫echo輸出一個高度加上一個！important來解決這問題。（表示沒有試過不知道）
2、使用.box .shop-banner .bd .shop-header { height:34px !important;}（本地測試的時候加上！important 上傳時!important去提再打包，到線上后和本地的效果一樣。線上不需要加！important.但本地制作的時候要看效果，必須要加上!important。）
3、修改.shop-header .nav ul{margin-top:-120px;}，整個高度的150px，要是菜單你是30px，那么就設置{margin-top:-120px;}這個結果很明顯是150px-30px=120px（本人就是用這個，但是這個好像有點問題就是下拉菜單有部分會被遮擋，當然這個問題可能是在我沒有寫下面的模塊，直接被淘寶不公開的區域擋住了，要是下面加了還是擋住，我們可以給一個z-index:9999;來解決！）
4、在shop-header上層,bd上設置高度和隱藏.我隱約記得淘寶官方發布的!important限制說明里,有提到為了解決!important被禁出現的問題,解開上層css的權限,本地測試通過（本人沒有測試這個方法）。.tshop-pbsm-spb10c .shop-banner .bd{height:37px;*height:37px;_height:37px;width:950px;line-height:37px;overflow: hidden;}
我感覺用系統的模塊感覺很悲催...
【10】打開assets文件夾下的stylesheets文件夾下的global文件（全局樣式表）修改下樣式就好了，由於這個我這樣說的是系統模塊，我沒有弄，就簡單的說下。
.tshop-pbsm-spb10c .shop-header .shop-summary {display:none;} 這個是不顯示店招圖片，我們只要菜單就好了。
======================================================
好了，今天就寫到這里，要是有問題，請留言，大家一起討論，三人行必有我師焉~~~
下節課還是講header，但是全是自定義的，呵呵~~~