網頁如何布局?一直是網站設計網站製作中一個常會談到的話題,總結起來就是頭部、內容、側欄、底部幾個“盒子(Box)”的(de)集(ji)合(he)等(deng)。看(kan)似(si)一(yi)個(ge)簡(jian)單(dan)的(de)問(wen)題(ti)在(zai)網(wang)頁(ye)設(she)計(ji)中(zhong)會(hui)隨(sui)著(zhe)網(wang)站(zhan)越(yue)來(lai)越(yue)龐(pang)大(da)交(jiao)錯(cuo),而(er)變(bian)得(de)越(yue)來(lai)越(yue)複(fu)雜(za)。所(suo)以(yi)網(wang)站(zhan)設(she)計(ji)師(shi)在(zai)工(gong)作(zuo)中(zhong)也(ye)要(yao)按(an)照(zhao)正(zheng)確(que)的(de)規(gui)範(fan)來(lai)進(jin)行(xing),否(fou)則(ze)可(ke)以(yi)會(hui)因(yin)為(wei)不(bu)符(fu)合(he)現(xian)行(xing)的(de)規(gui)範(fan),而(er)造(zao)成(cheng)一(yi)些(xie)邏(luo)輯(ji)不(bu)正(zheng)確(que),或(huo)是(shi)設(she)計(ji)元(yuan)素(su)無(wu)法(fa)使(shi)用(yong)的(de)問(wen)題(ti)。
為什麼要規範網頁布局的標簽使用及命名?
首先,html5提出了標簽邏輯化,在標簽本身已經規範了內容的使用,無論在頁麵體驗還是搜索引擎親和方麵都是大勢所趨。
其次,對於一個網站的代碼編寫,尤其是結構複雜的大項目難免涉及到多人合作、接替的工作內容,因此規範化的使用標簽及命名能更好的讓多人“兼容”在一起,減少因工作交接而耽擱的工作進程時間。

結合HTML5標簽介紹網頁布局方式的規範
規範一,為整個頁麵添加“容器”標簽
這是一種形象的比喻,將整個頁麵比做一個房間,那麼我們需要為這個房間起一個名稱標簽,以便罩住、囊括裏麵所有的頁麵元素。簡單的說就是在body內設置一個最外層“div”,有了它我們可以控製整張網頁的位置——居左、居右、居中。在名稱標簽的命名上可以最直觀的標寫<div id=”page”>。
規範二,用<Header>定義頁麵的“頁眉”部分
在網站設計網站製作中“頁眉”部指的就是網頁的頂部部分,又稱為head或header。這部分內容包括:網站名稱、LOGO、主導航、Banner內容。在代碼編寫時,統的做法是:使用 <div id=”header”> 來定義網頁的頭文件部分。
HTML5直接提出了用<header>標簽來更直觀的告訴web開發者與搜索引擎:這裏是相對父級的頭部/頂部/頁眉部分。header標簽可以在頁麵裏重複出現,我們可以將作為頁麵布局的header標簽命名為 id=”masthead”或其他。
規範三,用“Content”命名頁麵的主要內容部分
企業網站中每個頁麵都有它的主要部分,如文章頁裏麵的文章、列表頁的文章標題列表。html5對於這部分內容提供了<article>標簽,但在實際工作中,主要內容頁麵還麵包屑、廣告位、評論等內容,這時我們可以單獨設置一個<div=”content”> 來定義它為頁麵內容部分。
頁麵的主要內容依據不同層次的頁麵,其內容各自不同,如網站首頁內部則由多個“部分”組成。每一塊內容我們可以使用 <section> 標簽定義。而<article> 標簽我們用於定義頁麵內的主題內容。
規範四,用 “Sidebar”命名頁麵的輔助信息部分
Sidebar是頁麵布局中稱為“側欄”或“邊欄”,它往往是頁麵的可選部分。Sidebar內放置的是相對於Content的相關內容或輔助內容,如“最新文章”、“熱門文章”等。html5的新標簽<aside>代表與頁麵內容相關、有別於主要內容的部分。
規範五,用<Footer>定義頁麵的頁腳部分
了解了header標簽之後我們就不難了解footer標簽了,它是相對於父級的底部/頁腳部分。由於網站底部內容主要是體現版權類信息,所以我們可以為footer標簽命名為“colophon”。












