網(wǎng)頁(yè)設(shè)計(jì)中黃金分割線布局

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

1、鄭州網(wǎng)站建設(shè)公司,鄭州網(wǎng)站建設(shè)數(shù)學(xué)是優(yōu)美的，聽(tīng)上去有點(diǎn)奇怪?當(dāng)我第一次開(kāi)始設(shè)計(jì)的時(shí)候，我確信如此。數(shù)學(xué)如此刻板乏味。你可能會(huì)驚訝的發(fā)現(xiàn)，最美觀的設(shè)計(jì)，藝術(shù)作品，物體，甚至人都有數(shù)學(xué)上的共同點(diǎn)。尤其是黃金分割，也被稱為神之比例，希臘字母表示其為Φ(phi)。本教程會(huì)剖析一個(gè)網(wǎng)站的布局，以及如何對(duì)其黃金分割?！　【W(wǎng)頁(yè)骨架圖1　　這些是web頁(yè)面的主要元素。有很多不同的方法去組織它們，但是這種布局也許是最常用的?！　ontainer　　所有的web頁(yè)面都用一個(gè)container，主要是為了同一個(gè)目的：去包含一些頁(yè)面元素，然

2、而這個(gè)方法實(shí)現(xiàn)各有不同。例如，body標(biāo)簽或者是最常用的div。甚至于過(guò)去常用的table（不要使用table作為你的container，這是一個(gè)破方法）。想想container作為你房子的外墻，里面包含臥室，廚房，起居室等等。container的類(lèi)型:Liquid:根據(jù)瀏覽器寬度填充。Fixed:指定的寬度，并不會(huì)根據(jù)瀏覽器寬度改變。本文歸鄭州網(wǎng)站建設(shè)http://www.wangzhanjs.com/，版權(quán)所有，轉(zhuǎn)摘請(qǐng)注明出處.鄭州網(wǎng)站建設(shè)新浪博客：http://blog.sina.com.cn/wangzhanj

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

4、該放在訪問(wèn)者第一眼能看到的地方。　　Navigation頁(yè)面導(dǎo)航是最重要的元素之一;你的訪問(wèn)者需要用它來(lái)使用你的站點(diǎn)。它應(yīng)該是容易被找到且易用的，這就是為什么大多數(shù)的人把它放在header部分，最少也是在頁(yè)面頂端附近的原因。navigation類(lèi)型:Horizontal:水平顯示，被稱為'navigation'Vertical:垂直顯示，被稱為'menu'本文歸鄭州網(wǎng)站建設(shè)http://www.wangzhanjs.com/，版權(quán)所有，轉(zhuǎn)摘請(qǐng)注明出處.鄭州網(wǎng)站建設(shè)新浪博客：http://blog.sina.com.cn

5、/wangzhanjs1鄭州網(wǎng)站建設(shè)公司,鄭州網(wǎng)站建設(shè)圖4MainContent　　每個(gè)人都（應(yīng)該）知道，內(nèi)容才是王道！當(dāng)人們來(lái)參觀你的站點(diǎn)，這是他們想看的主要元素。它應(yīng)該是web頁(yè)面的焦點(diǎn)，所以參觀者才能快速找到他們想要的。Sidebarsidebar是放置你次要內(nèi)容的元素，像一些廣告，站點(diǎn)搜索，訂閱鏈接(RSS,Twitter,Email,等),聯(lián)系方法等。這個(gè)元素不是必需的，盡管右很多站點(diǎn)用它。它大多數(shù)是放在右邊的，但是你也能把它放在左邊或者兩邊，只要不擾亂主要內(nèi)容的瀏覽就行。網(wǎng)站使用橫向或縱向?qū)Ш?，sideba

6、r往往是用縱向?qū)Ш?。本文歸鄭州網(wǎng)站建設(shè)http://www.wangzhanjs.com/，版權(quán)所有，轉(zhuǎn)摘請(qǐng)注明出處.鄭州網(wǎng)站建設(shè)新浪博客：http://blog.sina.com.cn/wangzhanjs1鄭州網(wǎng)站建設(shè)公司,鄭州網(wǎng)站建設(shè)圖5　　Footerweb頁(yè)面的尾部總會(huì)有一個(gè)頁(yè)腳，讓您的訪客知道他已經(jīng)到達(dá)了你web頁(yè)面的結(jié)束部分。和header一樣，footer也不是一個(gè)特殊的元素。在你的頁(yè)腳里包含版權(quán)，法律聲明以及主要的聯(lián)系方式。包含一些重要的鏈接是個(gè)好主意，比如homepage,contactpage,等

7、.有些網(wǎng)站用這個(gè)區(qū)域提供一些相關(guān)材料或者其他重要信息?！　?Whitespace"　　你可能有強(qiáng)烈的愿望去填充這些頁(yè)面上的空白，但是請(qǐng)不要這么做。"空白"也是相當(dāng)重要的。你可以看看NetTuts網(wǎng)站是如何有效的使用空白區(qū)域的，創(chuàng)建了頁(yè)面平衡給人一個(gè)好的感覺(jué)。以上是web頁(yè)面的骨架，現(xiàn)在我們來(lái)看如何黃金分割這些元素?！　↑S金分割和使用網(wǎng)格（Grids）　　還記得之前我說(shuō)數(shù)學(xué)是美麗的嗎？我們認(rèn)為視覺(jué)的吸引力是基于比例的（比如，黃金分割）。幾千年來(lái)，藝術(shù)家，設(shè)計(jì)師，建筑師等都有意無(wú)意的在使用了一個(gè)共同的比例來(lái)增加他們作品的美

8、感。這個(gè)神奇的數(shù)字是什么呢？1.62(實(shí)際是1.618…)我不會(huì)說(shuō)這個(gè)數(shù)字的起源，但是我會(huì)告訴你如何使用它。本文歸鄭州網(wǎng)站建設(shè)http://www.wangzhanjs.com/，版權(quán)所有，轉(zhuǎn)摘請(qǐng)注明出處.鄭州網(wǎng)站建設(shè)新浪博客：http://blog.sina.com.cn/wangzhanjs1鄭州網(wǎng)站建設(shè)公司,鄭州網(wǎng)站建設(shè)圖6