網(wǎng)頁(yè)設(shè)計(jì)中的黃金分割與網(wǎng)格

《網(wǎng)頁(yè)設(shè)計(jì)中的黃金分割與網(wǎng)格》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、網(wǎng)頁(yè)設(shè)計(jì)中的黃金分割與網(wǎng)格網(wǎng)頁(yè)骨架這些是web頁(yè)面的主要元素。有很多不同的方法去紐織它們，但是這種布局也許是最常用的。Container所有的web頁(yè)面都用一個(gè)container,主耍是為了同一個(gè)H的：去包含一些頁(yè)面元素，然而這個(gè)方法實(shí)現(xiàn)各冇不同。例如，body標(biāo)簽或者是最常用的divo英至于過去常用的table（不要使用table作為你的container,這是一個(gè)破方法）。想想container作為你房子的外墻，里面包含臥室，廚房，起居宗等等。container的類型:Header（頁(yè)頭）header

2、并不真的是一個(gè)特定的元素，盡管某些人會(huì)認(rèn)為它是。它更多是用在涉及到你放置你的logo,導(dǎo)航欄，tagline的web頁(yè)面頂層的地方。許多人更愿意把這些元素包含在一個(gè)div里以方便使頁(yè)面樣式和內(nèi)容分離。header會(huì)被視為一個(gè)container,所以它有兩種類型選樣，就是上文提到的liquid或fixed。Logo（網(wǎng)站標(biāo)識(shí)）你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我們的閱讀習(xí)慣是，從左往右，從上至下，所以你的log應(yīng)該放在訪問者第一眼能看到的地方。Navigation

3、（導(dǎo)航）頁(yè)面導(dǎo)航是最重要的元素之一；你的訪問者需要用它來使用你的站點(diǎn)。它應(yīng)該是容易被找到且易用的，這就是為什么人多數(shù)的人把它放在header部分，最少也是在頁(yè)而頂端附近的原因。navigation類型:MainContent（主內(nèi)容區(qū)）每個(gè)人都（應(yīng)該）知道，內(nèi)容才是王道！當(dāng)人們來參觀你的站點(diǎn)，這是他們想看的主要元素。它應(yīng)該是web頁(yè)而的焦點(diǎn)，所以參觀者才能快速找到他們想要的。Sidebarsidebar是放置你次要內(nèi)容的元素，像一些廣告，站點(diǎn)搜索，訂閱鏈接(RSS,Twitter,Email,等)，聯(lián)系方

4、法等。這個(gè)元素不是必需的，盡管右很多站點(diǎn)用它。它大多數(shù)是放在右邊的，但是你也能把它放在左邊或者兩邊，只要不擾亂主要內(nèi)容的瀏覽就行。網(wǎng)站使用橫向或縱向?qū)Ш?，sidebar往往是用縱向?qū)Ш?。Footerweb頁(yè)面的尾部總會(huì)有一個(gè)頁(yè)腳，讓您的訪客知道他已經(jīng)到達(dá)了你web頁(yè)而的結(jié)束部分。和hcascr—樣，footer也不是一個(gè)特殊的元素。在你的頁(yè)腳里包含版權(quán)，法律聲明以及主耍的聯(lián)系方式。包含一些重耍的鏈接是個(gè)好主意，比如homepage,contactpage,等.有些網(wǎng)站用這個(gè)區(qū)域提供一些相關(guān)材料或者其他重要

5、信息?！癢hitespace氣留A)你可能有強(qiáng)烈的愿望去填充這些頁(yè)而上的空白，但是請(qǐng)不要這么做?！翱瞻?也是相當(dāng)垂要的。你可以看看NetTuts網(wǎng)站是如何有效的使用空白區(qū)域的，創(chuàng)建了頁(yè)面平衡給人一個(gè)好的感覺。以上是web頁(yè)而的骨架，現(xiàn)在我們來看如何黃金分割這些元素。黃金分割和使用網(wǎng)格(Grids)還記得之前我說數(shù)學(xué)是美麗的嗎？我們認(rèn)為視覺的吸引力是基于比例的(比如，黃金分割)。幾千年來，藝術(shù)家，設(shè)計(jì)師，建筑師等都有意無意的在使用了一個(gè)共同的比例來增加他們作品的美感。這個(gè)神奇的數(shù)字是什么呢？1.62(實(shí)際是

6、1.618...)我不會(huì)說這個(gè)數(shù)字的起源，但是我會(huì)告訴你如何使用它。使用黃金分割是非常簡(jiǎn)單的。比如你像找到你主要內(nèi)容和sidebar列表的寬度。你將使用你內(nèi)容區(qū)域總的寬度除以1.62.然后得到555.55px.我們不需要那么精確，所以我們就用555pxo現(xiàn)在你就知道你的主要內(nèi)容元素是555px的寬度，你的sidebar是345px?？纯炊嗝慈菀祝?！但是等等先，樂趣不止于此！你也可以應(yīng)用黃金分割到其他元素的寬度和咼度。使用網(wǎng)格如果你和大多數(shù)的人一樣，不想每次都抱著個(gè)計(jì)算器來計(jì)算這個(gè)黃金比率。那么最簡(jiǎn)單的方法

7、就是用grido所以你需要做的就是把你的寬度或是高度分成三分。要產(chǎn)生更詳細(xì)的gird,只需要繼續(xù)三等分就行。如果你讀了前一篇文章“與BlueprintCSS框架的親密接觸”的話，你會(huì)看到BlueprintCSS框架用了一個(gè)詳細(xì)的gird系統(tǒng)。不僅僅是gird設(shè)計(jì)更容易更快，而且它也創(chuàng)建了一個(gè)美觀的布局。如果你還沒有使用gird設(shè)計(jì)，那么這是一個(gè)很好的嘗試機(jī)會(huì)。你"J以為fireworks,photoshops或者其他軟件從下載grid模板。正如你看到的，NctTuts很好的遵循了黃金比率。頂端三分之一的網(wǎng)

8、頁(yè)再次分成了三分，非常接近黃金比率。難怪NetTuts的設(shè)計(jì)是如此吸引人！如果你要做一個(gè)新的設(shè)計(jì)，我嚴(yán)重推薦你找一些流行的站點(diǎn)，評(píng)價(jià)他們的布局，以及如何應(yīng)用黃金比率和girdo然后花一些時(shí)間去實(shí)踐使用黃金分割，并在你的布局上面使用girdo真金不怕火煉，患難考驗(yàn)友誼。一一愛默生