滑動門技術(shù)在自適應(yīng)寬度導(dǎo)航條中的應(yīng)用

許煒熔

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

【關(guān)鍵詞】網(wǎng)頁 滑動門技術(shù) 綜合素質(zhì) 中職 信息專業(yè)

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

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

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

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

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

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

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

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