滑動門技術在自適應寬度導航條中的應用

許煒熔

【摘要】當前在中等職業教育中，網頁設計課程已成為信息專業學生專業課程中重要的一部分。然而，學生的網頁制作技能掌握程度和網頁設計作品卻不容樂觀。究其原因有生源自身綜合素質的影響因素，更有學校專業課堂教學的不足、專業課程設置的影響。因此，提高學生的綜合素質和優化課程、鉆研專業課程也應成為學校專業教學中的重要組成部分。

【關鍵詞】網頁 滑動門技術 綜合素質 中職 信息專業

【中圖分類號】TP393.092-4；G642 【文獻標識碼】A 【文章編號】2095-3089（2017）04-0251-01

目前，在網頁布局方面多數采用CSS+DIV的布局方式，使用CSS層疊式樣式表來實現頁面的外觀。CSS+DIV代替了傳統的用表格布局，因為它在網頁布局中具有了更多的優勢，如修改設計更高效，降低流量成本，更好的被收錄在搜索引擎中，使頁面加載速度更快，最重要的是對瀏覽器更具親和力。除此之外，CSS+DIV還可以做出很多其他意想不到的效果，給開發人員和設計師更大的設計制作空間。比如，CSS+DIV網頁制作中有一種著名的技術叫滑動門技術，就是DIV標簽像滑動門一樣，可以根據內容的多少在另一個DIV標簽上滑動，就像一扇滑動門，可以將一部分展現或隱藏起來。這種技術應用在很多方面，典型的有圖片陰影制作和自適應寬度導航條上。現在很多網站都使用了美觀大方的導航條，比如帶有背景圖案的圓角導航條，但有些導航條中的每個導航項并不是等寬的，這樣就不能用一張圓角圖片做所有導航項的背景了。但使用滑動門技術就能實現：當導航項中的文字增多時，圓角圖片就能夠自動伸展（當然不是通過對圖片進行拉伸實現的），這樣就能用一張很寬的圓角圖片給所有導航項做背景了。滑動門技術的主角就是被點擊的操作對象，它的CSS屬性是指這個導航條上的按鈕以及在按鈕上的元素屬性發生變化，屬性主要是指這個元素的背景、字體顏色、大小、粗細、邊框、以及padding內間距和margin外間距等等。

1、滑動門的原理：把背景圖片分成左右兩部分，左邊圖片窄一點，放在a標簽的background背景標簽中，固定不變。而右邊圖片要根據內容估計做的盡量長一些，包含在b標簽中的background中，放在標簽的右上角，在左邊留出左邊圖片的寬度，以便顯示出左邊圖片。這樣，因為右邊圖片比較寬，隨著導航文字的增加，向右移動，不會超出右邊圖片的長度，那就好像導航背景圖片可以隨著文字多少而變化一樣。

2、具體的操作：a元素的盒子放圓角圖片的左邊部分，這可以通過設置盒子寬度比圓角圖片窄，讓圓角圖片作為背景從左邊開始平鋪盒子。b元素盒子放圓角圖片的右邊部分，由于盒子寬度小于圓角圖片寬，讓圓角圖片作為背景從右邊開始平鋪盒子。再把b元素插入到a元素中，這時a元素的盒子為了容納b的盒子會被撐大，這樣里面盒子的背景就位于外面盒子背景的上方，通過設置a元素的左填充值使b的盒子不會擋住a盒子左邊的圓角，而b盒子右邊的圓角則擋住了a盒子右邊的背景，這樣左右兩邊的圓角就都出現了。同時，導航中文本數量的多少，可以讓導航條自動伸展以適應文字的多少，而圓角圖片位于DIV框的填充屬性中，不會受到影響。

3、需要注意點：如果導航文字多少的增長，超過了以上所顯示的圖片的長度，歸因于文字大小及字體的改變，會拉伸圖像，產生圖片間不漂亮的間隙。所以在制作之前我們要預測這種可拉伸的量有多長。如果在制作時改變字體的多少，圖片又會怎么增長呢？事實上，我們必須至少要預計到字體增長到百分之三百的情況，圖片要能適應這種字體的增長。

4、知識點拓展：滑動門技術不僅可以應用在自適應寬度導航條上，還可以制作三維立體的陰影樣式、有角的邊沿部分和具備特色的左側部分。也可以發揮想像力改變左右兩幅圖形的位置，用這種巧妙的圖形控制方法和細致周到的布局方式，去掉導航條按鈕的下邊框，以便讓標簽圖形可以更好地去適應背景圖像。假如瀏覽器能夠支持不同樣式表之間的切換，那就可以依靠這個技術在不同版本的導航條之間進行自由地切換。

滑動門技術實際上是一種背景圖片的高級運用技巧，主要是通過兩個盒子背景的重疊和控制背景圖片的定位來實現的。使用CSS+DIV網頁設計的滑動門技術還可以完成許多其他效果，比如改變鼠標懸停的文本色彩、制作圖像陰影等，所以不斷地研究，就可以不斷地創造奇跡。

在CSS+DIV網頁布局設置中，除了滑動門技術，還可以制作出很多功能很強大的導航條，比如利用相對定位和絕對定位制作的缺角的導航條，利用項目列表制作的具有動態立體感的變色導航條等等。我們中職學生對于程序代碼普遍有畏難情緒，所以我們教師要抓住課堂教學時間，好好引導，用心鉆研，從滑動門技術來控制導航條的寬度就可以看到代碼的強大，所以在CSS+DIV的網頁設計中會找到代碼操控網頁的樂趣。