一、什麼是滑動門技術?

滑動門技術就是:當點擊頁面上的導航按鈕後這個導航按鈕的CSS特性發生變化,從而區別於該組的其他導航按鈕,提示給操作者,當前流覽的內容就是這 個CSS特性發生變化的按鈕所指向的內容。這種效果的一大好處在於,在多導航的頁面上能夠清晰地反映當前流覽內容隸屬於哪個欄目或者哪個類,同時給人以美 觀、清晰、明瞭的視覺感受。滑動門技術的主角是被操作的物件,也就是這裏被點擊的對象,其CSS特性主要是指該導航按鈕包括其中的其他元素的屬性發生變 化,當然,這個按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素,它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大 小、粗細以及外間距和內間距等等,總之,其一切可以把自身的“地位”區別於其他屬主的屬性都可以被應用起來使用在滑動門技術上。


二、何時使用滑動門技術?

觀察發現,很多大型網站的頻道導航或者欄目導航都要出現在其內容頁面上或者終級頁面上,事實上,這些所謂的頻道導航或者欄目導航在每個內容頁面上都 是一樣的,也就是說這些內容都是重複的,那麼,流覽器用戶端每次在裝載這些內容的時候實際上都在重複下載相同內容的資料,這不僅浪費了大量的帶寬,同時也 給內容頁面的裝載帶來很大的影響(因為導航的內容一般是放在頁面的開頭,頁面裝載也是按照從上到下的順序進行轉載,如果導航的部分也就是頁面的上部沒有裝 載完畢是不會裝載頁面的下部的。),因此,傳統的 網頁設計 (撇開對搜索引擎的支援)實際上存在很大的弊端和不科學性。當然,如果使用傳統的網頁設計方法,滑動門技術的應用實際上是沒有多大意義的,因為每個頁面都 有自己的導航部分,只要在這個頁面上的導航部分稍微作些動作就可以非常明顯地達到滑動門的效果,但這只是一種偽效果,而且方法是這種處理非常低級的。現在 我們要做的是讓導航組中的導航按鈕的屬性自動適應當前內容頁的顯示,也就是說:當點擊“新聞”導航按鈕之後,出現的內容頁面上的“新聞”導航按鈕自動顯示 滑動門效果,而不是事先通過手動對其CSS屬性進行過修改,這種效果最好就是用框架頁來實現。

當然,也許你會反對框架頁,你會說在這個搜索引擎橫行的時代使用框架頁無疑是自尋死路,然而事實上在你說這句話的時候自己就已經處於弱勢了,真正的 強者敢於藐視搜索引擎甚至敢於挑戰搜索引擎,真正優秀的網頁設計師不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用戶的需要,也就是說最大限 度地去迎合用戶體驗,這才是我們的網頁設計真正要做的。


三、框架網頁中使用滑動門技術的好處

雖然很多人反對使用框架來對網頁進行佈局,事實上,框架對網頁的佈局有著最好的支持。首先,省去了重複裝載不同內容頁相同內容的時間和帶寬,提高了 頁面裝載速度,給人一種無刷新頁面裝載的感受。其次,框架與滑動門技術的結合更有利於提高用戶體驗,在表面上,使用框架與滑動門技術的各個框架頁面在用戶 操作的過程中都在發生變化,對導航框架而言是被操作物件的樣式發生變化,對內容頁而言是指內容的發生變化,而在深度上,導航框架中的資料還是原來的資料, 沒有重新從伺服器下載。

而今的Ajax技術被很多人視為高新技術的典範,誰都想去附庸風雅,實際上Ajax技術同樣是不被搜索引擎支援的,Ajax最明亮的一點就是不重複 裝載重複的資料和無刷新裝載資料,事實上“無刷新”這三個字說得有些勉強,只要有資料的更新都是要刷新的,這裏的“無刷新”指的是整個頁面的無刷新而不是 局部內容的無刷新。使用框架來對頁面進行劃分的同時同樣實現了這一效果,因此這裏我要說:在達到相同效果的前提下,框架對網頁設計的支持更容易實現 Ajax想要的效果。


四、一個簡單的例子

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

我們要構建一個框架套框架的左右佈局的網頁,也就是所謂的2層框架,第一層框架把整個頁面分成兩部分,左邊部分寬度為65%,右邊部分寬度為 35%,左邊第二層把左側分為上下兩部分,上部顯示網站的固定資訊,比如logo,banner,站點功能鏈結等,下部為內容顯示區;第一層右邊框架被它 的第二層框架分成上、中、下三個部分,上部為導航框架,用滑動門技術武裝這裏的導航按鈕,中部為文章列表顯示部分,用於顯示上部導航鏈結調用的內容列表, 下部也就是整個框架頁面的最右下角的地方放置一個搜索輸入框,這個搜索頁面的搜索結果被設置顯示在左側下部的內容頁面上。

 


轉貼來源:博客園

 http://www.piece2ec.com.tw/news.asp?ID=988


參考文獻:

1.張卿卿 (2004), 從性別差異與產品確定性高低來探討廣告框架效果, 管理評論, 23(1), 1-23.

2.邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。

3.許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例,第六屆設計學術研究果研討會論文集。








 網頁設計

arrow
arrow
    全站熱搜

    巨群資訊 發表在 痞客邦 留言(0) 人氣()