在CSS中，一個(gè)經(jīng)常被人們討論的先進(jìn)之處即背景圖像的可層疊性，并允許他們在彼此之上進(jìn)行滑動，以創(chuàng)造一些特殊的效果。根據(jù)CSS2.0當(dāng)前的規(guī)定，每一個(gè)背景圖像都需要各自的HTML元素。在許多情況下，典型的標(biāo)記已經(jīng)為一般的接口組件提供了多種元素以供我們使用。
標(biāo)簽導(dǎo)航欄就是其中的一個(gè)例子。過去，我們頻繁的使用這些標(biāo)簽，并已成為了一種非常流行的站點(diǎn)導(dǎo)航方式?，F(xiàn)今，在CSS已被廣泛支持的前景下，我們可以為我們站點(diǎn)制作出更高質(zhì)量和更好外觀的標(biāo)簽導(dǎo)航欄來。你也許知道CSS可以用來“馴服”無序的列表，或許你還曾經(jīng)看到過這種樣式的標(biāo)簽列表：
如果我們想用和以上類似的標(biāo)記，將導(dǎo)航標(biāo)簽變成這種樣式，該怎么辦呢？
經(jīng)過簡單的設(shè)計(jì)，我們是可以做到的。
創(chuàng)新于何處？
我見過的許多基于CSS的導(dǎo)航標(biāo)簽大都具有一類的特征：矩形的色塊，也許僅僅是一個(gè)輪廓，對于當(dāng)前選中的標(biāo)簽則沒有邊框，標(biāo)簽在鼠標(biāo)指針游至其上時(shí)改變顏色。這難道就是CSS所能給我們的全部嗎？一連串的小盒子和單調(diào)的色彩嗎?
在CSS被廣泛采用之前，我們已經(jīng)看到許多標(biāo)簽導(dǎo)航設(shè)計(jì)中的創(chuàng)新之處。獨(dú)創(chuàng)的外形，熟練的色彩混合，以及對真實(shí)世界中許多物理接口的模仿。但是這些設(shè)計(jì)往往過分依賴于經(jīng)過復(fù)雜制作、帶有文本的圖像，或被包裝成若干嵌套的表格。修改文本或改變標(biāo)簽的順序則需要一個(gè)復(fù)雜的過程。文本的伸縮更是不可能的，或給頁面的布局極大的影響。
純文本的導(dǎo)航欄比起文本即圖像的導(dǎo)航欄更具有持續(xù)使用性和更快的載入速度。同樣，我們甚至可以為每一個(gè)圖像加上alt屬性，對于弱視者，純文本更可以自由的改變大小。不足為奇的是，基于純文本的導(dǎo)航欄，并加以CSS樣式，又重新回到Web設(shè)計(jì)中來。但是，大多數(shù)基于CSS的導(dǎo)航欄設(shè)計(jì)，至今為止仍然是毫無意義的。一種最近被采用的技術(shù)（例如CSS）可以讓我們做的更好，同樣不失先前提到的那些表格和圖片標(biāo)簽的效果。
滑動門技術(shù)
美觀的工藝，真正靈活的接口組件，并根據(jù)文本自適應(yīng)大小，我們可用兩個(gè)獨(dú)立的背景圖像來創(chuàng)造它。一個(gè)在左邊，一個(gè)在右邊。把這兩幅圖像想象成兩扇可滑動的門，它們滑到一起并交迭，占據(jù)一個(gè)較窄的空間；或者相互滑開，占據(jù)一個(gè)較寬的空間，就像下圖所顯示的那樣：
在這個(gè)模型中,一個(gè)圖像掩蓋住另一個(gè)圖片的一部分。假設(shè)我們放置一些獨(dú)特的內(nèi)容在每個(gè)圖像的周圍，例如標(biāo)簽的圓角，我們并不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發(fā)生，我們可以將上面一副圖像（此例中的左邊那幅）控制的盡可能的窄。但仍然要保證一定的寬度來顯現(xiàn)標(biāo)簽一側(cè)的獨(dú)特性。如果外部是圓角，我們就應(yīng)該控制上面一副圖像和它的弧線部分具有一樣的寬度。
如果目標(biāo)在大小上增長，并超過了以上所顯示的寬度，歸咎于文本大小及字體的改變，圖像會被拉開，產(chǎn)生不美觀的間隙。我們需要判斷的是，預(yù)測這種可擴(kuò)展的量將有多大。如果在瀏覽器中改變字體的大小，目標(biāo)又會如果增長呢？實(shí)際來說，我們至少應(yīng)該估算到字體大小增長至300%的情況。背景圖像也得適應(yīng)這種增長。對于以上的例子，我們將下面（即右邊）的圖像設(shè)為400*150像素，上面的設(shè)為9*150像素。
在頭腦中，始終要有這樣的認(rèn)識：背景圖像只是顯示一個(gè)可供內(nèi)容填充的有效空間（即內(nèi)容區(qū)域和padding，稱為doorway）。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見部分和在一起即形成了一個(gè)具有這種標(biāo)簽形狀的空間（doorway）：
如果標(biāo)簽被撐大，圖像即滑開，doorway變寬，圖像的也將被顯露的更多：
此例中，我在photoshop中制作兩個(gè)平滑，細(xì)的3D標(biāo)簽圖像，如文章開頭所顯示的那樣。對于其一，內(nèi)部明亮，邊框暗淡些，用來表現(xiàn)當(dāng)前選中的標(biāo)簽。將這種技巧模型應(yīng)用于左右兩幅圖像中，我們需要擴(kuò)大標(biāo)簽圖像覆蓋的區(qū)域，將它裁剪成兩部分：
同樣的方式將應(yīng)用到被稱為“當(dāng)前”的標(biāo)簽中。一旦我們完成了這四幅圖像（1, 2, 3, 4），我們就可以開始用標(biāo)記和CSS來制作我們的標(biāo)簽了。
]]>
1． 在dw中新建一個(gè)空白文檔（或者打開你要添加效果的頁面）。
2． 設(shè)置好你自己的css風(fēng)格。
3． 在頁面上插入一個(gè)長500pix的表格（這里說明：插入表格的目的是為了控制層在不同分辨率下保持相對的位置不變，如果你的頁面之前沒有做相關(guān)設(shè)置，那么這一部你可能要費(fèi)點(diǎn)功夫整理一下你的頁面結(jié)構(gòu)）。
4． 將光標(biāo)置入表格內(nèi)，點(diǎn)擊菜單 [插入――層] 插入一個(gè)長500高20的圖層，并命名為layer1。
5． 然后再將光標(biāo)置入圖層layer1，點(diǎn)擊菜單 [插入――層] 再插入一個(gè)長500高130的圖層layer2；并將layer2的屬性中左邊距和上邊距都設(shè)置為0，并為它指定一個(gè)你喜歡的背景色。
6． 然后重復(fù)步驟5的方法，再插入一個(gè)圖層layer3，這個(gè)圖層沒什么特殊的用處，在我的這個(gè)教程中，我只不過是為了放置幾個(gè)按鈕而已。最后我的開起來如圖：
TIPS：這里這么做的目的是為了給你要滑動的圖層前面加一個(gè)擋板，只有當(dāng)點(diǎn)擊的時(shí)候圖層才從你的這個(gè)圖層下緩緩的滑動出來。
現(xiàn)在開始，才正式進(jìn)入到我們今天要制作的滑動菜單的制作過程中。
1.現(xiàn)在讓我們再次重復(fù)上面的步驟5，再插入一個(gè)圖層layer4,設(shè)置圖層屬性為寬500 、150高，剛好是剛才layer2和layer3的高度之和，并將圖層layer4調(diào)整到另外兩個(gè)圖層下面。如圖：
然后我們點(diǎn)擊圖層layer2前面的眼睛讓他閉合，這樣可以讓我們看到它下面的圖層layer4.
2.這時(shí)，我們點(diǎn)擊ALT + F9 打開時(shí)間軸面板，DW已經(jīng)為我們添加了默認(rèn)的時(shí)間軸Timeline1，然后，我們選中我們要滑動的圖層layer4，在上面點(diǎn)擊右鍵，選擇 [添加到時(shí)間軸] 這時(shí)我們可以在時(shí)間軸面板中看到我們剛剛制定的圖層layer4，這說明，我們已經(jīng)添加成功了！
3.然后我們點(diǎn)擊時(shí)間軸上的第15楨，將圖層layer4的屬性面板中的上邊距調(diào)整為150。到這里，一個(gè)能滑動的圖層就算做好了，你可以拖動時(shí)間軸上面的紅色方塊慢慢從1走向15，你就可以看到你的這個(gè)圖層慢慢的從layer2和layer3下面滑動出來！
4.好了，現(xiàn)在我們只需要給這個(gè)會滑動的圖層layer4設(shè)置一個(gè)可以激活他的動作就算over了：）這之前，我已經(jīng)在我添加的layer3上插入了一個(gè)表格，并為layer4設(shè)置了兩個(gè)按鈕。
5.我們先設(shè)置激活滑動圖層的動作。選擇上展開這個(gè)按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊在出來的菜單中選擇 [時(shí)間軸――播放時(shí)間軸] DW會彈出一個(gè)窗體，在上面的下拉菜單中選擇timeline1。
然后在行為面板中確認(rèn)事件為onclick
好了，到這里，你可以預(yù)覽一下，當(dāng)你點(diǎn)擊上展開按鈕時(shí)，你的圖層就會慢慢的從上而下滑動出來！
6.怎么樣，看到了吧：）我們再給圖層添加上一個(gè)簡單的關(guān)閉動作，就是點(diǎn)擊關(guān)閉按鈕后圖層隱藏。選擇上關(guān)閉按鈕，轉(zhuǎn)到行為面板，點(diǎn)擊菜單中選擇 [顯示隱藏層] ，在跳出的窗體中選擇上layer4，然后點(diǎn)擊下面的隱藏按鈕，將其設(shè)置為隱藏，如圖：
7.好了，再預(yù)覽一下，發(fā)現(xiàn)展開后點(diǎn)擊關(guān)閉圖層就沒有了：）不過，似乎有一個(gè)問題，再次點(diǎn)擊展開的時(shí)候，似乎沒什么反應(yīng)了，那是我們還有一個(gè)動作沒有設(shè)置。
重復(fù)剛才的步驟5，選擇上展開按鈕，添加動作 [時(shí)間軸――轉(zhuǎn)到時(shí)間軸楨] ，在跳出的窗體中的下拉菜單選擇timeline1，楨數(shù)添上1。
好了，這次預(yù)覽發(fā)現(xiàn)這個(gè)問題解決了。但是我們似乎還是忽略了一個(gè)問題，點(diǎn)擊關(guān)閉后這個(gè)圖層被設(shè)置為隱藏了，再點(diǎn)擊展開也沒反應(yīng)了。還是運(yùn)用老辦法，給展開按鈕添加一個(gè)動作就可以解決了！
8.重復(fù)步驟5，選擇 [顯示隱藏層] ，和剛才步驟6相反，這次我們選擇顯示，確定后，保證行為面板中顯示隱藏圖層的時(shí)間都是onclick。此刻展開按鈕的行為面板如圖：
好，再次預(yù)覽，一切正常！
至此，這個(gè)效果就算完成了，當(dāng)然，大家完全可以自我發(fā)揮制作出更好的效果來，但是萬變不離其宗，只要我們掌握好了時(shí)間軸配合動作行為的運(yùn)用，所有的效果只是操作問題：）