鄭州網(wǎng)站建設(shè)網(wǎng)頁設(shè)計在本質(zhì)上就是一個進化的原則和理論創(chuàng)造的演化過程中打印。設(shè)計行業(yè)帶來了很多的技術(shù)網(wǎng)絡(luò),但是一些花的時間掌握在一個虛擬環(huán)境。不幸的是,我們沒有一個單一的平臺為我們的內(nèi)容出現(xiàn)在;我們必須戰(zhàn)斗與多個瀏覽器,操作系統(tǒng),屏幕尺寸。
隨著網(wǎng)絡(luò)的發(fā)展,所以我們觀察到的設(shè)計原則。基于網(wǎng)格的設(shè)計有玫瑰近年來,即把他們的網(wǎng)站設(shè)計者可以根據(jù)一個圓柱狀的網(wǎng)格。網(wǎng)格系統(tǒng)是一個非常受歡迎的方法來組織和排列元素,并添加到一個頁面,一般命令通過應(yīng)用比例和平衡。
把我們的知識的使用比例和平衡,你可以采用另一個印刷設(shè)計原則:基線網(wǎng)格。
鄭州網(wǎng)站建設(shè)-什么是基線網(wǎng)格嗎?
基線網(wǎng)格技術(shù)用于更好的你的基于web的排版。從本質(zhì)上講,它使你所有的文本垂直網(wǎng)格,每個字母的底部被放置到電網(wǎng),就像寫在橫格紙。最終的結(jié)果是一個身體的文字完美的組織,一個潛意識的識別的平衡��調(diào)和。
就像我以前說的,印刷是一個靜態(tài)的介質(zhì)。設(shè)計一個打印格式允許您指定什么你所有的觀眾將會看到。然而,由于你的設(shè)計可替代平臺web上的解釋,你的CSS將不可避免地呈現(xiàn)你的行高,和其他印刷上的值,對于不同的用戶有不同的。對于很多設(shè)計師,這原來只是猜測和預(yù)測最終用戶將看到。
基線網(wǎng)格在打印
許多印刷設(shè)計師使用基線網(wǎng)格結(jié)合自己的設(shè)計套件,無論是排版軟件名稱或其他。網(wǎng)格在打印一直追溯到1200年代早期,不受限制的只是網(wǎng)頁設(shè)計。事實上,從網(wǎng)格的黃金比例(即大多數(shù)數(shù)學理論)是共享在生活的其他方面,最明顯的是架構(gòu)。
網(wǎng)格可以把所有的設(shè)計元素——類型字符,攝影,繪畫和色彩——變成一個正式的關(guān)系,彼此;也就是說,網(wǎng)格系統(tǒng)是一種手段,引入秩序設(shè)計。一個故意設(shè)計組成一個更清晰,更整齊的排列和更成功的效果比隨機廣告放在一起。-約瑟夫·穆勒布羅克曼
鄭州網(wǎng)站建設(shè)-創(chuàng)建一個基線網(wǎng)格
現(xiàn)在,讓我們看看我們?nèi)绾蝿?chuàng)建我們的基線網(wǎng)格。
首先,我們需要定義一個行高為基線網(wǎng)格基于比率與我們的字體大小,對于這個示例,1:1 5是一個很好的數(shù)量,提供我們一個慷慨的50%領(lǐng)先。如果我們有一個文本大小12 px,行高(使用這個1:1 5比)將18 px。150%是一個不錯的數(shù)量,給我們提供了一個設(shè)計,將很容易閱讀,但是這個值可以不同。然而,你應(yīng)該盡量約130%的范圍-160%當考慮行高。
在我們繼續(xù)之前,你應(yīng)該知道如何CSS屬性實際上作品行高。行高的是整體的、集體的高度行文本,而不是文本本身。它通過添加填充上面和下面的文本空間出來。如果我們真的需要一些文本和把它放在一個統(tǒng)治的背景,我們會看到文本定位在字里行間,��一定在他們。
到CSS
為了使事情簡單,我們假設(shè)我們的文本有一個基地大小為10 px。堅持我們的粗糙的比率,這意味著我們的行高將15 px,雖然我們可以改變這個。(做一個邊注,10 px是相當小的,我不一定會推薦它在大多數(shù)情況下,但我在這里用它純粹是為了使他們更容易在數(shù)學系)。為了使各種元素融入我們的基線網(wǎng)格系統(tǒng),我們需要設(shè)置在我們的CSS。
在我們繼續(xù)下去之前,雖然,這些示例假設(shè)您使用的是某種CSS重置。如果你沒有,那么默認的利潤率可能會妨礙我們的工作今天做。
段落
開始做事了,一旦我們設(shè)置行高,我們需要配��一致的保證金在每個標題和段落。因為我們正在與一個15像素網(wǎng)格這里,我們踢做事了覆蓋標準的底部邊緣的一個段落標記(默認情況下,這是1 em,在這種情況下將10 px)來同我們的行高在文本。這將創(chuàng)建一個空行每一段下成比例,等于身高如果文本在那里居住。
| 001 002 003 |
p {
margin-bottom: 15px;
}
|
這是結(jié)果:身體的文字下面的邊緣一個段落等于行高。
頭
相似,因為標題,我們只是需要繼續(xù)遵守增量15像素。通過簡單的標簽在我們的保證金一邊150%行高,我們創(chuàng)建一個類似的、一致的打破。
<iframe allowtransparency="true" frameborder="0" height="250" hspace="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-style: inherit; font-family: inherit; vertical-align: baseline; overflow-x: hidden; overflow-y: hidden; left: 0px; position: absolute; top: 0px; " vspace="0" width="300"></iframe>| 001 002 003 004 005 |
h1 {
font-size: 20px;
line-height: 30px;
margin-bottom: 15px;
}
|
這個例子在右邊有我們的CSS應(yīng)用,使利潤率在我們的標題符合我們的基線網(wǎng)格。因為我們的頭有一個字體大小的兩倍我們正常的文本,它占了���排在我們的網(wǎng)格。
我走之前任何進一步的,我想說的是你的文字可能不總是實際上坐在線,如果你申請一個你的背景。不要擔心,只要線高度是一樣的。如果你的文本漂浮在中間的線,你可以很容易地玩耍和你的利潤,但這不是必要的。
鄭州網(wǎng)站建設(shè)-列表
接下來,我們?nèi)绾翁幚砹斜韱?首先,我們要運用我們的標準保證金以同樣的方式,我們做我們的段落。這給了一個水平的一致性與內(nèi)容。
| 001 002 003 |
ul, ol {
margin-bottom: 15px;
}
|
這是開始變得容易了!如果你仍然有一個行高15像素定義在其他地方,你的列表將會適應(yīng)得很好與其他內(nèi)容。
因為我們的行高是定義在父元素的CSS,我們只需要定義邊緣得到我們的列表并運行在我們的基線網(wǎng)格系統(tǒng)。
圖像
圖片是在它開始變得有點困難。最好是,我們要有相同的一致性在我們的利潤率,因此圖像都是以同樣的方式對待的仿佛一塊文本。它意味著,你的圖片需要大小的倍數(shù)你行高價值,在這種情況下,15。
在我的例子中,我將向右浮動的形象,所以我有一個15像素邊緣應(yīng)用到左邊和底部。與我們現(xiàn)有的保證金在段落,這給了我們一個一致的保證金等于我們余下的基線網(wǎng)格。
| 001 002 003 004 |
img.left {
float: left;
margin: 0 0 15px 15px;
}
|
當然,這些并不是唯一的因素,我們需要修改以符合我們的新基線網(wǎng)格。關(guān)鍵是要確保你的工作在一個一致的增量,所以一切都是狹隘的,相同的網(wǎng)格。這可以導致和諧和平衡變得明顯在你的網(wǎng)頁在使用大量豐富的文本。
我們的示例
這是我們完成的例子,一個簡單的網(wǎng)頁標題、段落、特色一個圖像和一個列表。如果你想走出你的尺子,你可以,但我可以向你保證,一切遵循一致的網(wǎng)格,建立從我們的排版。
我們只是剛剛打破了表面使用基線網(wǎng)格。它可以變得更為困難當你開始試圖將它們應(yīng)用到更復雜的設(shè)計,最終導致一些在網(wǎng)絡(luò)上使用。然而,它是可能的,并且會導致平衡,比例設(shè)計,可以導致更好的用戶體驗。
鄭州網(wǎng)站建設(shè)-結(jié)論
基線網(wǎng)格是一個偉大的方式和比例的增加一些平衡你的排版。這是其中的一個微妙的實現(xiàn),可以添加到您的設(shè)計中一些自然的感覺。對于基線網(wǎng)格,我們的排版變得符合標準化的間隔給它,和諧的感覺。
然而,不幸的是,我們?nèi)匀灰獙惯@種威脅的瀏覽器不兼容的問題,可以使我們的CSS呈現(xiàn)不同的方式為不同的用戶當他們?yōu)g覽在交替的瀏覽器、操作系統(tǒng)或設(shè)備。這是一個任務(wù),似乎不像它在它的出路,盡管添加一個基線網(wǎng)格并提供其他優(yōu)點。例如,這種類型的網(wǎng)格系統(tǒng)可以幫助極大,因此,當縮放和強迫瀏覽器重新呈現(xiàn)它的CSS。基線網(wǎng)格提供更多的靈活性和鼓勵為瀏覽器正確地做事。
這是一個比平時短文章,但那是因為基線網(wǎng)格沒有很多解釋關(guān)于或展示如何使用。真正的魔力來自當設(shè)計師調(diào)整和測試,以確保他的基線網(wǎng)格作品,高于一切,使設(shè)計吸引人的視覺效果(更)。另一種旋轉(zhuǎn)的事情,閱讀一個列表分開的文章在這個敏感話題。直到下一次,快樂的設(shè)計!
技術(shù)創(chuàng)造價值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開拓者電子科技有限公司 All Rights Reserved