以前看過(guò)一些類(lèi)似的文章，但這些文章文字在理論上闡述得比較多，沒(méi)有從技術(shù)角度來(lái)分析和實(shí)現(xiàn)滑動(dòng)門(mén)效果，前段時(shí)間心血來(lái)潮對(duì)此作了一番專(zhuān)門(mén)的研究，這里就把我的所得奉獻(xiàn)給大家。

一、什么是滑動(dòng)門(mén)技術(shù)?

簡(jiǎn)單地說(shuō)，滑動(dòng)門(mén)技術(shù)就是:當(dāng)點(diǎn)擊頁(yè)面上的導(dǎo)航按鈕后這個(gè)導(dǎo)航按鈕的CSS特性發(fā)生變化，從而區(qū)別于該組的其他導(dǎo)航按鈕，提示給操作者，當(dāng)前瀏覽的內(nèi)容就是這個(gè)CSS特性發(fā)生變化的按鈕所指向的內(nèi)容。這種效果的一大好處在于，在多導(dǎo)航的頁(yè)面上能夠清晰地反映當(dāng)前瀏覽內(nèi)容隸屬于哪個(gè)欄目或者哪個(gè)類(lèi)，同時(shí)給人以美觀、清晰、明了的視覺(jué)感受?；瑒?dòng)門(mén)技術(shù)的主角是被操作的對(duì)象，也就是這里被點(diǎn)擊的對(duì)象，其CSS特性主要是指該導(dǎo)航按鈕包括其中的其它元素的屬性發(fā)生變化，當(dāng)然，這個(gè)按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個(gè)元素的邊框、背景、字體的顏色、大小、粗細(xì)以及外間距和內(nèi)間距等等，總之，其一切可以把自身的“地位”區(qū)別于其它屬主的屬性都可以被應(yīng)用起來(lái)使用在滑動(dòng)門(mén)技術(shù)上。

二、何時(shí)使用滑動(dòng)門(mén)技術(shù)?

觀察發(fā)現(xiàn)，很多大型網(wǎng)站的頻道導(dǎo)航或者欄目導(dǎo)航都要出現(xiàn)在其內(nèi)容頁(yè)面上或者終級(jí)頁(yè)面上，事實(shí)上，這些所謂的頻道導(dǎo)航或者欄目導(dǎo)航在每個(gè)內(nèi)容頁(yè)面上都是一樣的，也就是說(shuō)這些內(nèi)容都是重復(fù)的，那么，瀏覽器客戶端每次在裝載這些內(nèi)容的時(shí)候?qū)嶋H上都在重復(fù)下載相同內(nèi)容的數(shù)據(jù)，這不僅浪費(fèi)了大量的帶寬，同時(shí)也給內(nèi)容頁(yè)面的裝載帶來(lái)很大的影響(因?yàn)閷?dǎo)航的內(nèi)容一般是放在頁(yè)面的開(kāi)頭，頁(yè)面裝載也是按照從上到下的順序進(jìn)行轉(zhuǎn)載，如果導(dǎo)航的部分也就是頁(yè)面的上部沒(méi)有裝載完畢是不會(huì)裝載頁(yè)面的下部的。)，因此，傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)(撇開(kāi)對(duì)搜索引擎的支持)實(shí)際上存在很大的弊端和不科學(xué)性。當(dāng)然，如果使用傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)方法，滑動(dòng)門(mén)技術(shù)的應(yīng)用實(shí)際上是沒(méi)有多大意義的，因?yàn)槊總€(gè)頁(yè)面都有自己的導(dǎo)航部分，只要在這個(gè)頁(yè)面上的導(dǎo)航部分稍微作些動(dòng)作就可以非常明顯地達(dá)到滑動(dòng)門(mén)的效果，但這只是一種偽效果，而且方法是這種處理非常低級(jí)的。現(xiàn)在我們要做的是讓導(dǎo)航組中的導(dǎo)航按鈕的屬性自動(dòng)適應(yīng)當(dāng)前內(nèi)容頁(yè)的顯示，也就是說(shuō):當(dāng)點(diǎn)擊“新聞”導(dǎo)航按鈕之后，出現(xiàn)的內(nèi)容頁(yè)面上的“新聞”導(dǎo)航按鈕自動(dòng)顯示滑動(dòng)門(mén)效果，而不是事先通過(guò)手動(dòng)對(duì)其CSS屬性進(jìn)行過(guò)修改，這種效果最好就是用框架頁(yè)來(lái)實(shí)現(xiàn)。

當(dāng)然，也許你會(huì)反對(duì)框架頁(yè)，你會(huì)說(shuō)在這個(gè)搜索引擎橫行的時(shí)代使用框架頁(yè)無(wú)疑是自尋死路，然而事實(shí)上在你說(shuō)這句話的時(shí)候自己就已經(jīng)處于弱勢(shì)了，真正的強(qiáng)者敢于藐視搜索引擎甚至敢于挑戰(zhàn)搜索引擎，真正優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師不是大限度地去迎合搜索引擎的需要而是要大限度地去迎合用戶的需要，也就是說(shuō)大限度地去迎合用戶體驗(yàn)，這才是我們的網(wǎng)頁(yè)設(shè)計(jì)真正要做的。

三、框架網(wǎng)頁(yè)中使用滑動(dòng)門(mén)技術(shù)的好處

雖然很多人反對(duì)使用框架來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局，事實(shí)上，框架對(duì)網(wǎng)頁(yè)的布局有著最好的支持。首先，省去了重復(fù)裝載不同內(nèi)容頁(yè)相同內(nèi)容的時(shí)間和帶寬,提高了頁(yè)面裝載速度,給人一種無(wú)刷新頁(yè)面裝載的感受。其次，框架與滑動(dòng)門(mén)技術(shù)的結(jié)合更有利于提高用戶體驗(yàn)，在表面上，使用框架與滑動(dòng)門(mén)技術(shù)的各個(gè)框架頁(yè)面在用戶操作的過(guò)程中都在發(fā)生變化，對(duì)導(dǎo)航框架而言是被操作對(duì)象的樣式發(fā)生變化，對(duì)內(nèi)容頁(yè)而言是指內(nèi)容的發(fā)生變化，而在深度上，導(dǎo)航框架中的數(shù)據(jù)還是原來(lái)的數(shù)據(jù)，沒(méi)有重新從服務(wù)器下載。

而今的Ajax技術(shù)被很多人視為高新技術(shù)的典范，誰(shuí)都想去附庸風(fēng)雅，實(shí)際上Ajax技術(shù)同樣是不被搜索引擎支持的，Ajax最明亮的一點(diǎn)就是不重復(fù)裝載重復(fù)的數(shù)據(jù)和無(wú)刷新裝載數(shù)據(jù)，事實(shí)上“無(wú)刷新”這三個(gè)字說(shuō)得有些勉強(qiáng)，只要有數(shù)據(jù)的更新都是要刷新的，這里的“無(wú)刷新”指的是整個(gè)頁(yè)面的無(wú)刷新而不是局部?jī)?nèi)容的無(wú)刷新。使用框架來(lái)對(duì)頁(yè)面進(jìn)行劃分的同時(shí)同樣實(shí)現(xiàn)了這一效果，因此這里我要說(shuō):在達(dá)到相同效果的前提下，框架對(duì)網(wǎng)頁(yè)設(shè)計(jì)的支持更容易實(shí)現(xiàn)Ajax想要的效果。

四、一個(gè)簡(jiǎn)單的例子

這里我們用一個(gè)簡(jiǎn)單的例子來(lái)闡述這一觀點(diǎn)。

我們要構(gòu)建一個(gè)框架套框架的左右布局的網(wǎng)頁(yè)，也就是所謂的2層框架，第一層框架把整個(gè)頁(yè)面分成兩部分，左邊部分寬度為65%，右邊部分寬度為35%，左邊第二層把左側(cè)分為上下兩部分，上部顯示網(wǎng)站的固定信息，比如logo，banner，站點(diǎn)功能鏈接等，下部為內(nèi)容顯示區(qū);第一層右邊框架被它的第二層框架分成上、中、下三個(gè)部分，上部為導(dǎo)航框架，用滑動(dòng)門(mén)技術(shù)武裝這里的導(dǎo)航按鈕，中部為文章列表顯示部分，用于顯示上部導(dǎo)航鏈接調(diào)用的內(nèi)容列表，下部也就是整個(gè)框架頁(yè)面的最右下角的地方放置一個(gè)搜索輸入框，這個(gè)搜索頁(yè)面的搜索結(jié)果被設(shè)置顯示在左側(cè)下部的內(nèi)容頁(yè)面上。

下面我們來(lái)討論如何實(shí)現(xiàn)滑動(dòng)門(mén)技術(shù):

上面已經(jīng)提到:欄目導(dǎo)航的組成元素可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，這里我們就簡(jiǎn)單一點(diǎn)，用td和A標(biāo)記來(lái)實(shí)現(xiàn)這一效果:

首先使用表格布局把A固定在特定的位置，同時(shí)給td的背景賦予某一顏色，要實(shí)現(xiàn)滑動(dòng)門(mén)效果，可以用JS來(lái)改變?cè)氐腃SS屬性，假設(shè)調(diào)用的JS函數(shù)是: document_onclick()，每一個(gè)鏈接被點(diǎn)擊的時(shí)候都要調(diào)用這個(gè)函數(shù)，這個(gè)函數(shù)的功能有兩個(gè)，第一是恢復(fù)其它被改變CSS屬性的A標(biāo)記的屬性，第二是改變被點(diǎn)擊對(duì)象的CSS屬性。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前文章：使用框架和滑動(dòng)門(mén)技術(shù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)
瀏覽路徑：http://www.rwnh.cn/news42/320842.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)