2011-03-06 103 views
1

排版是我在使用CSS設計網頁時永遠無法獲得的東西之一,標題和正文文本的外觀和感覺與我在網上看到的大多數其他網站一樣好。通過這個我主要是我的排版不覺得像這些網站上可讀和寬敞排版模板或良好做法

我確實試圖複製這些漂亮的網站的CSS,但我似乎從未得到相同的結果(或爲了免得我永遠不會似乎使這些技術是我自己的,所以我可以在將來使用它們)。另外,當談到印刷術時,我的CSS已經遍佈全球。如果以後我需要更改樣式,我會花費很長時間來搜索相關的值

當我第一次開始學習css時,發現了很多關於如何正確獲得頁面佈局的教程(靜態,流暢,導航左/右),但我從來沒有發現任何有用的東西如何得到正確的外觀和感覺,當它來到印刷術。另一方面,另一方面有很多關於印刷術的書,但似乎沒有幫助如何在網絡上使印刷術看起來不錯。

我希望你能提出一些資源,或者說總是保證該類型會好看在網絡上

感謝任何固定方法

回答

2

這篇文章可能是有用的:http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

你通過在你崇拜的網站上開始嘗試他們的CSS來做正確的事情;這是學習最好的方法之一。

一般來說,當我使用印刷術時,爲了使它看起來很好,可以做的最好的事情是考慮三件事:對比度,顏色和視覺層次結構。

  • 對比度:如果你的文字呈現在與不對比很好色的背景下,它會看起來很糟糕。實際上,這很糟糕,它可能被認爲是「無法訪問」的。您可以使用諸如Colour Contrast Check之類的工具來確保您的文本符合Web Content Accessibility Guidelines
  • 顏色:您可能會發現,大多數您喜歡的網站並沒有真正的黑色文本。純黑色在自然界中並不常見,白色背景上的黑色文字是您可以獲得的最高對比度,看起來有點刺耳。大多數網站通過使它們的黑色文本稍微灰色來降低它的色調,使用css,如color: rgb(30,30,30);
    如果要使用顏色,請嘗試使用basic color theory來選擇可以很好地協同工作的顏色。要麼,要麼選擇一個漂亮的深色,並堅持黑色。
  • 可視層級:基本上,使用更大的字體作爲更重要的標題。因此,h1很可能是您最大的一段文字,每個大小都會一直下降到h6,而p標籤中的任何其他大小都應該與您在此處看到的文字的大小相當。網站設計最近剛剛發佈an article on visual hierarchy,這很不錯。

希望幫助!

+0

我發現此鏈接http://spreadsheets.google.com/ccc?key=0AsK4MoYiBVMldE12V3FJYk95YVRUZ18xNDJNOVRrSHc&hl=de#gid=0來自大多數熱門網站的排版分析,它可能會幫助某人 – aurel 2011-03-06 08:05:37