2010-05-10 32 views
4

我知道這是一個非常擁抱的問題,但我剛剛開始使用Ruby on Rails,並且仍然有很長的CSS和HTML。 有很多關於CSS和HTML模式的書籍,但我想知道真正應用於實際網頁的內容。 例如,做一個帶橫向菜單,頂部標誌和下面一些文字的簡單網頁的最佳方式是什麼? 好的,這似乎很愚蠢,但有很多方法可以做到這一點,或不是?HTML和CSS的設計模式是什麼?

那麼,我該如何學習這種模式,以及什麼是真正的模式?

希望瞭解的書籍,文章等

+0

嘗試使用Google設計模板搜索。 – 2010-05-10 16:44:31

+0

http://stackoverflow.com/questions/35615/what-is-a-good-online-resource-for-css-design-patterns – 2010-05-10 16:51:11

回答

3

建議你可以在這裏找到一些好的CSS模板:

http://www.csszengarden.com/

+0

嗯沒有代表投票了! – nate 2010-05-10 16:46:22

+0

投票需要15個代表。這裏是10. – 2010-05-10 16:50:25

2

它從開發到開發者而異。所以我只會告訴你我在做什麼!

我實際上是遵循一個非常常見的模式 - 從內容中分離出任何佈局!

到HTML去...

  • 文本
  • <div/>與集裝箱的ID被layouted

並在CSS去...

  • 佈局ID'd和class'ed <div/>佈局容器
  • 顏色,背景圖片
  • 字體

它可以迅速改變整個頁面的設計,甚至沒有接觸的HTML!它會減少服務器的流量和客戶端頁面上的加載時間,因爲CSS文件可以被緩存,因爲它不會像HTML那樣改變!

發佈的CSS Zengarden nate是這種模式的一個很好的例子。相同的未修改的HTML與幾十個完全不同的CSS文件!

此模式還允許在大型顯示器上,小型上網本和移動設備上,使用自動選擇的CSS文件顯示相同的未修改HTML。如果你問我,不會更好!

+1

+1令人興奮!!!!!!!! – 2010-05-10 16:52:49

+0

興奮?不過謝謝你!我也得到了徽章感謝你:)我喜歡興奮! – LukeN 2010-05-10 16:58:30

0

經驗法則應該做的所有的設計在CSS和HTML僅僅是HTML,而不調用設計。這樣,就像上面提到的那樣,您可以快速更改設計。

瞭解它是如何工作的一個很好的參考是在Zengarden CSS網站:http://www.csszengarden.com/

這是我經常用我學到的插件和CSS設計的出局網站。

1

你可能想看看一些CSS庫。

我個人不喜歡使用它們,因爲我有我喜歡做事情的方式,有時他們對於我想做的事情不夠靈活。但是,既然你剛剛開始,他們可能會幫助你得到真正快速的東西,而不必擔心浮動下降錯誤或邊緣摺疊或任何其他容易被打但難以識別的CSS怪癖,如果你沒有看過他們之前。

一個例子是Yahoo User Interface (YUI) Grids CSS,它可以幫助您設置許多不同類型的網格佈局。要找到更多,我會搜索「CSS框架」或「CSS庫」。

另一個YUI資源,我認爲將是非常有用的,你將是他們design pattern library,其中記錄了不同的方式來顯示常用接口項目,並對您的資源去實現它們。這可以讓你的界面看起來對用戶來說很熟悉,並且可以讓你不再需要重新設計下拉框或其他東西。