使用框架和滑動門技術進行網頁設計 - 網頁設計 |
|
http://webdesign.zoapcon.com
|
|
|
| 使用框架和滑動門技術進行網頁設計
以前看過一些類似的文章，但這些文章文字在理論上闡述得比較多，沒有從技術角度來分析和實現滑動門效果，前段時間心血來潮對此作了一番專門的研究，這里就把我的所得奉獻給大家。 一、什么是滑動門技術?
如上圖，簡單地說，滑動門技術就是:當點擊頁面上的導航按鈕后這個導航按鈕的CSS特性發生變化，從而區別于該組的其他導航按鈕，提示給操作者，當前瀏覽的內容就是這個CSS特性發生變化的按鈕所指向的內容。這種效果的一大好處在于，在多導航的頁面上能夠清晰地反映當前瀏覽內容隸屬于哪個欄目或者哪個類，同時給人以美觀、清晰、明了的視覺感受。滑動門技術的主角是被操作的對象，也就是這里被點擊的對象，其CSS特性主要是指該導航按鈕包括其中的其它元素的屬性發生變化，當然，這個按鈕的形式可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，它們的屬性主要是指這個元素的邊框、背景、字體的顏色、大小、粗細以及外間距和內間距等等，總之，其一切可以把自身的“地位”區別于其它屬主的屬性都可以被應用起來使用在滑動門技術上。 二、何時使用滑動門技術? 觀察發現，很多大型網站的頻道導航或者欄目導航都要出現在其內容頁面上或者終級頁面上，事實上，這些所謂的頻道導航或者欄目導航在每個內容頁面上都是一樣的，也就是說這些內容都是重復的，那么，瀏覽器客戶端每次在裝載這些內容的時候實際上都在重復下載相同內容的數據，這不僅浪費了大量的帶寬，同時也給內容頁面的裝載帶來很大的影響(因為導航的內容一般是放在頁面的開頭，頁面裝載也是按照從上到下的順序進行轉載，如果導航的部分也就是頁面的上部沒有裝載完畢是不會裝載頁面的下部的。)，因此，傳統的網頁設計(撇開對搜索引擎的支持)實際上存在很大的弊端和不科學性。當然，如果使用傳統的網頁設計方法，滑動門技術的應用實際上是沒有多大意義的，因為每個頁面都有自己的導航部分，只要在這個頁面上的導航部分稍微作些動作就可以非常明顯地達到滑動門的效果，但這只是一種偽效果，而且方法是這種處理非常低級的。現在我們要做的是讓導航組中的導航按鈕的屬性自動適應當前內容頁的顯示，也就是說:當點擊“新聞”導航按鈕之后，出現的內容頁面上的“新聞”導航按鈕自動顯示滑動門效果，而不是事先通過手動對其CSS屬性進行過修改，這種效果最好就是用框架頁來實現。 當然，也許你會反對框架頁，你會說在這個搜索引擎橫行的時代使用框架頁無疑是自尋死路，然而事實上在你說這句話的時候自己就已經處于弱勢了，真正的強者敢于藐視搜索引擎甚至敢于挑戰搜索引擎，真正優秀的網頁設計師不是最大限度地去迎合搜索引擎的需要而是要最大限度地去迎合用戶的需要，也就是說最大限度地去迎合用戶體驗，這才是我們的網頁設計真正要做的。 三、框架網頁中使用滑動門技術的好處 雖然很多人反對使用框架來對網頁進行布局，事實上，框架對網頁的布局有著最好的支持。首先，省去了重復裝載不同內容頁相同內容的時間和帶寬,提高了頁面裝載速度,給人一種無刷新頁面裝載的感受。其次，框架與滑動門技術的結合更有利于提高用戶體驗，在表面上，使用框架與滑動門技術的各個框架頁面在用戶操作的過程中都在發生變化，對導航框架而言是被操作對象的樣式發生變化，對內容頁而言是指內容的發生變化，而在深度上，導航框架中的數據還是原來的數據，沒有重新從服務器下載。 而今的Ajax技術被很多人視為高新技術的典范，誰都想去附庸風雅，實際上Ajax技術同樣是不被搜索引擎支持的，Ajax最明亮的一點就是不重復裝載重復的數據和無刷新裝載數據，事實上“無刷新”這三個字說得有些勉強，只要有數據的更新都是要刷新的，這里的“無刷新”指的是整個頁面的無刷新而不是局部內容的無刷新。使用框架來對頁面進行劃分的同時同樣實現了這一效果，因此這里我要說:在達到相同效果的前提下，框架對網頁設計的支持更容易實現Ajax想要的效果。 四、一個簡單的例子 這里我們用一個簡單的例子來闡述這一觀點。 我們要構建一個框架套框架的左右布局的網頁，也就是所謂的2層框架，第一層框架把整個頁面分成兩部分，左邊部分寬度為65%，右邊部分寬度為35%，左邊第二層把左側分為上下兩部分，上部顯示網站的固定信息，比如logo，banner，站點功能鏈接等，下部為內容顯示區;第一層右邊框架被它的第二層框架分成上、中、下三個部分，上部為導航框架，用滑動門技術武裝這里的導航按鈕，中部為文章列表顯示部分，用于顯示上部導航鏈接調用的內容列表，下部也就是整個框架頁面的最右下角的地方放置一個搜索輸入框，這個搜索頁面的搜索結果被設置顯示在左側下部的內容頁面上。 如下圖：
當然，這只是一個布局示意圖。 下面我們來討論如何實現滑動門技術: 上面已經提到:欄目導航的組成元素可以是BUTTON、A、TD甚至可以是P或者DIV這樣的閉合元素，這里我們就簡單一點，用td和A標記來實現這一效果: 首先使用表格布局把A固定在特定的位置，同時給td的背景賦予某一顏色，要實現滑動門效果，可以用JS來改變元素的CSS屬性，假設調用的JS函數是: document_onclick()，每一個鏈接被點擊的時候都要調用這個函數，這個函數的功能有兩個，第一是恢復其它被改變CSS屬性的A標記的屬性，第二是改變被點擊對象的CSS屬性。 下面給出整個文導航的源代碼，讀者可以自己推敲，這里就不再多說了。
TAG: 網頁設計 | web design |
|
留言列表
