使用框架和滑動門技術(shù)進(jìn)行網(wǎng)頁設(shè)計

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

一、什么是滑動門技術(shù)?

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

二、何時使用滑動門技術(shù)?

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

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

三、框架網(wǎng)頁中使用滑動門技術(shù)的好處

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

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

四、一個簡單的例子

這里我們用一個簡單的例子來闡述這一觀點。

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

下面我們來討論如何實現(xiàn)滑動門技術(shù):

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

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

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

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

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

廣告

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