|
知識普及 ? 使用框架和滑動門技術(shù)進行網(wǎng)頁設(shè)計
|
|
使用框架和滑動門技術(shù)進行網(wǎng)頁設(shè)計
|
|
奈薇網(wǎng)頁設(shè)計
|
于2019-09-27 17:09發(fā)表
|
|
閱讀次數(shù)
|
2681次
|
|
使用框架和滑動門技術(shù)進行網(wǎng)頁設(shè)計
以前看過一些類似的文章，但這些文章文字在理論上闡述得比較多，沒有從技術(shù)角度來分析和實現(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這樣的閉合元素，它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大小、粗細以及外間距和內(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)容一般是放在頁面的開頭，頁面裝載也是按照從上到下的順序進行轉(zhuǎn)載，如果導(dǎo)航的部分也就是頁面的上部沒有裝載完畢是不會裝載頁面的下部的。)，因此，傳統(tǒng)的網(wǎng)頁設(shè)計(撇開對搜索引擎的支持)實際上存在很大的弊端和不科學(xué)性。當(dāng)然，如果使用傳統(tǒng)的網(wǎng)頁設(shè)計方法，滑動門技術(shù)的應(yīng)用實際上是沒有多大意義的，因為每個頁面都有自己的導(dǎo)航部分，只要在這個頁面上的導(dǎo)航部分稍微作些動作就可以非常明顯地達到滑動門的效果，但這只是一種偽效果，而且方法是這種處理非常低級的?，F(xiàn)在我們要做的是讓導(dǎo)航組中的導(dǎo)航按鈕的屬性自動適應(yīng)當(dāng)前內(nèi)容頁的顯示，也就是說:當(dāng)點擊“新聞”導(dǎo)航按鈕之后，出現(xiàn)的內(nèi)容頁面上的“新聞”導(dǎo)航按鈕自動顯示滑動門效果，而不是事先通過手動對其CSS屬性進行過修改，這種效果最好就是用框架頁來實現(xiàn)。
當(dāng)然，也許你會反對框架頁，你會說在這個搜索引擎橫行的時代使用框架頁無疑是自尋死路，然而事實上在你說這句話的時候自己就已經(jīng)處于弱勢了，真正的強者敢于藐視搜索引擎甚至敢于挑戰(zhàn)搜索引擎，真正優(yōu)秀的網(wǎng)頁設(shè)計師不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用戶的需要，也就是說最大限度地去迎合用戶體驗，這才是我們的網(wǎng)頁設(shè)計真正要做的。
三、框架網(wǎng)頁中使用滑動門技術(shù)的好處
雖然很多人反對使用框架來對網(wǎng)頁進行布局，事實上，框架對網(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ù)，事實上“無刷新”這三個字說得有些勉強，只要有數(shù)據(jù)的更新都是要刷新的，這里的“無刷新”指的是整個頁面的無刷新而不是局部內(nèi)容的無刷新。使用框架來對頁面進行劃分的同時同樣實現(xiàn)了這一效果，因此這里我要說:在達到相同效果的前提下，框架對網(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)容頁面上。
如下圖：
當(dāng)然，這只是一個布局示意圖。
下面我們來討論如何實現(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屬性。
|