位置:設計主頁 > 網站制作 > 前端開發 >

提升網頁設計中的布局問題

來源:設計前沿收集 作者:枯藤看世界 時間:2018-03-20 09:00

今天我們再來講解一下在網頁設計基礎知識中另外一個重要的知識點,那就是布局問題。

網頁布局指的是將一個網頁的篇幅進行合理的分割用于安排文字,圖像的位置。

在大多數時候,我們去判斷一個網頁是否精致,不僅要看它的文字,顏色,更重要的一點就是它的布局,如果布局不合理,那么這個網頁無疑就是失敗的。

互聯網環境下技能提升之網頁設計中的布局問題

優秀網頁

網頁布局類型

網頁布局一般有5種類型,分別是“國”字型布局、“廠”字型布局、“框架”型布局、“封面”型布局、“flash”型布局,接下來我們一起來看一下。

“國”字型布局:最上面是網站的標題以及橫幅廣告條,接下來是網站的主要內容,左右分別列出一些欄目,中間是主要部分,最下面是網站的一些基本信息、聯系方式、版權聲明等,這種結構是一些大中型網站常用的布局類型。

互聯網環境下技能提升之網頁設計中的布局問題

國字型布局

“廠”字型布局:頁面頂部為橫條網站標志+廣告條,下方左面為主菜單,右面顯示內容的布局,因為菜單條背景較深,整體效果類似英文字母“T”。

互聯網環境下技能提升之網頁設計中的布局問題

廠字型布局

“框架”型布局:一般左面是導航鏈接,有時最上面會有一個小的標題或標志,右面是正文。

互聯網環境下技能提升之網頁設計中的布局問題

框架型布局

“封面”型布局:。這種類型基本上是出現在一些網站的首頁,大部分為一些精美的平面設計結合一些小的動畫,放上幾個簡單的鏈接或者僅是一個“進入”的鏈接。這種類型大部分出現在企業網站和個人主頁。

互聯網環境下技能提升之網頁設計中的布局問題

封面型布局

“flash”型布局:。其實這與封面型結構是類似的,只是這種類型采用了目前非常流行的Flash,與封面型不同的是,由于Flash 強大的功能,頁面所表達的信息更豐富。

互聯網環境下技能提升之網頁設計中的布局問題

flash型布局

網頁布局技術

網頁布局技術一般有以下幾種(1)表格布局(2)框架布局(3)div+css布局,我們就利用最近最常用的div+css布局簡單的講解以下:

DIV是HTML 中的一個元素,是容器性質的,DIV 元素是用來為HTML文檔內大塊的內容提供結構和背景的,不用CSS 技術,可以有效地頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。簡單地說,DIV 用于搭建網站 結構(框架)、CSS用于創建網站表現(樣式/美化)。

腾讯欢乐捕鱼宝珠怎么获得