• <big id="zyphn"></big>
    1. <pre id="zyphn"><ruby id="zyphn"></ruby></pre>
      您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

      網頁設計中的常見頁面布局方式

      Web頁面布局是對頁面的整體規劃,即把頁面劃分成不同的區域,用于放置不同的頁面內容。對于整個網站,每個頁面的布局應該相對保持協調一致,不應該有大的跳躍感。大部分網頁頁面布局的內容是摘要信息列表:關鍵詞、信息短語、信息縮寫或信息前幾行內容,當客戶對某些摘要或提示信息感興趣時,就會點擊超鏈接得到其詳細內容。

      頁面布局通常被比做一個翻轉的金字塔,如圖所示。

      翻轉的金字塔頁面布局

      頁面布局格式

      網站頁面布局根據導航元素放置的方式來分類。主要根據網站內容、風格和總量來選擇布局類型。例如,通常導航元素被放置在左邊和上邊空白處。導航元素的背景通常和剩余頁面的顏色或者外觀不同,企業的徽標、網站名稱一般放置在頁面的左上角。網站版權信息、聯系信息通常放在網頁的最下面。對于頁面設計,采用通用的布局格式使頁面更具有可讀性和直觀性。

      下面是幾種常見的布局類型。

      下面兩個圖片是傳統左邊空白布局的例子,導航元素在左邊空白處。

      網頁設計中的常見頁面布局方式
      左邊空白布局格式
      網頁設計中的常見頁面布局方式

       

      左邊空白布局格式

      網頁設計中的常見頁面布局方式
      上邊空白布局格式
      網頁設計中的常見頁面布局方式

       

      上左邊空白布局格式

      網頁設計中的常見頁面布局方式
      右邊空白布局格式
      網頁設計中的常見頁面布局方式

       

      上下空白布局格式

      網頁設計中的常見頁面布局方式
      分布式布局格式
      網頁設計中的常見頁面布局方式

       

      藝術風格布局格式

      頁面布局元素

      網站開發人員在正式設計時,首要考慮網站的整體外觀和頁面結構,從視覺和技術的角度理解組成整個頁面的元素以及它們之間的相互關系,頁面布局應該具有邏輯性和易于理解性,幫助分類、簡化和闡明信息。一旦確定了頁面布局元素,應該在整個網站上貫徹所選擇的元素。

      網頁布局元素包括頁面規劃布局、邊界、字體、顏色、圖像以及表格等。

      • 框架:規劃頁面布局,允許同時顯示多個頁面。
      • 表格:規劃頁面布局,在單元格中可以放置各種網頁元素,容易排版。
      • 導航:引導用戶在網站內的移動。
      • 段落:在頁面上分組文本字符。
      • 圖像:提供視覺吸引、信息和導航。
      • 列表:組織并強調某些信息條目。
      • 顏色:提供網站整體色彩感覺,增加可讀性,易于分類。
      • 邊距:控制顯示內容距瀏覽器窗口邊界的距離。
      • 邊界:為HTML表和框架提供可見的邊界。
      • 空白:分開頁面上的元素。

      空白

      當瀏覽一個沒有空白的頁面時,用戶會感到頁面很擁擠,而造成心理的緊張,對閱讀這樣的頁面有一種厭煩的抵觸感覺。初學網頁設計的人往往會忽視“空白”元素,“空白”元素實際上與其他頁面布局元素有緊密關聯,甚至是其他元素的一部分,如行間距等??瞻自诰W頁設計中非常重要,它能夠使網頁看起來簡潔、明快,閱讀舒暢,是網頁設計中必不可缺少的元素。

      值得注意的是,用戶不欣賞在網頁上堆積無用的內容。用戶快速掃描頁面時,掃描的內容越多,錯過的信息就越多。這并不是說不能給用戶提供大量信息,只是不要在一個頁面上提供所有的信息。比如一些網站的主頁提供特大量的信息,反而會使大部分用戶忽視大部分內容,因此每一個網頁應該包括大約比同樣印刷版本少50%的信息。

      切記不要試圖將盡可能多的信息放在一個網頁中,應該有合理的、簡明的分類,不要強迫客戶從一堆信息中艱難地挑出所需要的信息,要讓客戶自己選擇是否進入更深的鏈接獲得信息。也不要只為了讓頁面變短而分割頁面,除非是在邏輯斷點處。每一個頁面都應該是獨立、完整的。只有照顧了整個頁面空間的分配,空白才能表現出一定的活力,利用空白可以使頁面布局生動活潑、松緊有度,使客戶瀏覽時有舒適、輕松和簡潔之感。

      開發設計人員可以使用表和透明GIF圖像來給頁面添加空白??梢允褂脽o邊界HTML表定位內容,提供無內容的區域來布局頁面。

      頁面布局方法

      頁面布局方法主要有兩種:紙面布局法和軟件布局法。

      1)紙面布局法

      在設計頁面布局時,設計人員需要在紙面上畫出頁面布局的草圖,將設想落實到紙        面上,查看設計效果。人們經常會瞬間產生一個好的靈感和想法,但很快又會在頭腦中消失,因此當有了好的靈感和想法時應該立即用紙面記錄下來,以備以后容納到頁面設計當中去。

      不要直接在網頁設計工具中邊設計網頁邊修改頁面布局,想到哪里,設計到哪里,這樣會浪費很多時間和精力。在開始制作網頁前,應該首先在紙上畫出頁面布局草圖,一旦確定就不要輕易修改,在頁面設計中要自始至終貫徹確定好的頁面布局。

      2)軟件布局法

      另外一種頁面布局方法是使用圖形軟件工具設計頁面布局草圖,可以使用比較熟悉的圖形軟件如Photoshop、Fireworks等。使用這些圖形工具可以方便地設計頁面布局和顏色,比紙面布局法更能查看頁面布局的整體效果和真實效果,使用圖形工具和層更容易修改和查看各種無法用紙張實現的效果。

      頁面布局技術

      常用的頁面布局方法有:層疊樣式表頁面布局、表格頁面布局、框架頁面布局、透明GIF頁面布局和Flash頁面布局。

      1)層疊樣式表頁面布局

      在HTML 4.0標準中,層疊樣式表(CSS)新技術能完全精確地定位文本和圖片,現在CSS是一個比較流行的頁面布局方法,可以實現過去無法實現的想法?,F在越來越多的瀏覽器開始支持CSS技術,但不同的瀏覽器使用方法可能略有不同,用戶使用時應該注意。

      2)表格頁面布局

      表格布局現在幾乎已成為一個頁面布局的標準,它的優勢在于它能對不同對象加以處理,而又不用擔心不同對象之間的影響。表格的每一個單元格可以放置不同文本和圖片,而且非常易于內容對齊。表格邊界設置為0,客戶就看不到表格邊框,只看到表格單元格放置的內容。表格布局在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是,當用了過多表格時,頁面下載速度會受到影響。在以后的章節中將詳細講述表格頁面布局方法。

      3)框架頁面布局

      框架可以用于頁面布局,雖然它們在導航中也扮演重要角色。

      現在使用框架技術進行頁面設計的網站越來越少,框架頁面以左上角對齊,每一個框架部分都可以獨立控制,表格單元格就不可以單獨控制。從布局上考慮,框架結構不失為一個好的布局方法??蚣芗夹g也可以設置邊框為0,瀏覽客戶也看不到框架邊框。

      在以后的章節中將詳細講述框架頁面設計技術。

      4)透明GIF頁面布局

      透明GIF圖像可以作為空白區域的占位符插入到網頁中,它們是背景透明、尺寸可變的圖像,因此,透過圖像可以看到頁面的背景,瀏覽客戶是看不到透明GIF圖片的??梢栽?lt;IMG>標記中指定高、寬屬性來創建需要的空白的尺寸。例如使段落從左面縮進20個像素,則在段落的第一個字符前插入下面的標記:

      <img src=”transparent.gif” height=”2″ width=”20″>

      也可以在表格的單元格中放置透明GIF圖像用于控制行或者列的尺寸。

      5)Flash頁面布局

      這種頁面布局采用了現在非常流行的Flash動畫用于規劃頁面的布局,Flash有強大的功能,使頁面所表達的信息更豐富,其視覺效果及聽覺效果要比其他頁面布局更加具有沖擊力,是當今最流行的一種技術,但是顯示文字信息內容比較少,另外還需要更快的機器性能和更高的網絡帶寬。例如disney網站http://www.disney.com就是Flash頁面布局的     代表。

      頁面尺寸

      由于頁面尺寸和顯示器大小及分辨率有關系,因此網頁不能超越顯示器的范圍,而且因為瀏覽器也將占去不少空間,所以留給頁面尺寸的空間就會變得越來越小。一般分辨率在800*600(推薦)的情況下,頁面的顯示尺寸為:780*428像素;分辨率在640*480的情況下,頁面的顯示尺寸為:620*311像素;分辨率在1024*768的情況下,頁面的顯示尺寸為:1007*600像素。從以上數據可以看出,分辨率越高,頁面尺寸越大。

      瀏覽器的工具欄也是影響頁面尺寸的主要原因。一般瀏覽器的工具欄都可以取消或者增加,因而造成頁面的尺寸也是不一樣的。

      在網頁設計過程中,向下拖動頁面是唯一給網頁增加更多內容(尺寸)的方法。除非需要,否則不要讓訪問者拖動很長的頁面。

      切記在網頁設計過程中,一定不要左右拖動頁面,只能上下拖動頁面,而且也不能拖動過長,客戶往往會忽視頁面下面的內容。

      [教程作者:佚名]
      免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
      本文地址:http://www.wishvarsity.com/tutorial/di2483.html
      暢游VC:用故事感做打動人心的設計
      QQ手機版 5.0“一鍵下班”設計小結
      圖趣網微信
      建議反饋
      ×
      厨房玩弄丰满人妻系列_无码一级二级三级_国产成人AV国语在线观看18_久久996RE热这里有精品