2009-02-06 22 views
7

我因缺乏審美判斷而感到沮喪。作爲一名開發人員,我很難創建一個看起來像樣的網站。我該如何改進我的HTML和CSS?

的問題是我在哪裏可以學習所有必要的CSS技巧還是有喜歡的東西「有效的CSS設計」,讓我

  1. 拿起CSS快速
  2. 用它做漂亮外觀的網站?

我會欣賞任何CSS和HTML設計師,讓我快速拉下美麗的樣機網頁。

編輯:也許我應該更明確。如果我被要求爲FaceBook克隆提供原始主頁,我會完全無能爲力。我甚至很難模擬出這樣的屏幕。確實,缺乏想象力。

+0

在我看來,非設計師的最佳方式是[twitters bootstrap](http://getbootstrap.com/)。他們有很多好看的按鈕,表格,表格,列表和我最喜歡的網格佈局組件。他們也有免費的javascript組件和一些方便的模板。 – 2013-08-20 12:46:00

回答

7

嘗試此鏈接Why developers suck at CSS design。這可能會爲您的項目提供一個很好的基準。

如果您將鏈接中的一些建議與一個小型css框架(我喜歡boilerplate)結合起來,您應該能夠以相當令人滿意的視覺基線開始每個項目。而且你會驚訝於你的工作有什麼不同。

+0

好的鏈接,謝謝 – Misko 2009-02-06 16:54:56

2

http://www.w3schools.com/

你會在那裏找到的一切,CSS/HTML等

+1

但是,你不會發現如何製作漂亮的網站,該網站本身相當醜陋! – 2009-02-06 16:59:28

10

美麗的網站往往事先在圖像編輯應用程序或在紙上存在和CSS + HTML的部分是最後一步,將您的設計轉換爲網絡友好型版本。

+1

+1在觸摸代碼之前應對設計 – 2009-02-06 16:56:01

+0

我**更喜歡在設計完成之前開始開發,但通常情況並非如此! :( – Wayne 2009-02-07 19:02:35

0

關於CSS有很多好書。我的主要建議是先從一個有點連貫的設計開始。我通常在Photoshop中將潛在網站的主頁完全佈置,然後讓客戶批准該設計,然後再開始任何HTML或CSS。

一旦你有了一個所有人都認同的設計模板,CSS就會變成一個簡單的技術問題,讓它看起來與你的模型一樣。

0

兩個小技巧:

  1. 得到 「倒栽蔥HTML和CSS」 的副本。這將是HTML和CSS最簡單(也是最好)的介紹。你會明白什麼時候使用什麼。

  2. 瀏覽網頁(nytimes.com,CSS zen ...)以獲得絕佳視覺效果的靈感。

1

其他人有一些資源回答,但看看這個網站: http://www.csszengarden.com/

它顯示了許多不同的佈局只使用CSS。您可以下載源代碼並進行檢查。此外,請查看資源部分的教程和操作方法。

0

Smashing Magazine 有一些奇妙的資源按照他們的CSS最佳實踐指南,並使用他們的'最好的'部分的靈感。這是我開始一個新的網頁設計項目時的第一站。

6

這聽起來像技術HTML和CSS提示不是你在找什麼(但)。您可能想要查找有關基本圖形設計原則的資源,或者特別關注網頁設計原理。一旦掌握了圖形設計的基礎知識,就可以開始爲項目勾畫出設計。最初的設計可以像記事本上製作的一些草圖一樣簡單。只有這樣你才能開始設計頁面的細節,並且最終你需要具備必要的HTML和CSS技能來實現設計。

我大致在同一個地方:我對HTML和CSS瞭解頗多,但我很難提出一個有吸引力的設計。一旦我有了(通常有很多其他人的幫助),我可以建立網站。

1

這不會幫助您拿出原創設計,但可能會有所幫助。

我對CSS佈局的理解有一個最顯着的增加來自於使用Firebug的「檢查」功能。能夠在「樣式」標籤中查看元素的計算樣式,它在「佈局」標籤中的填充/邊距/偏移量是(現在仍然是)巨大的資產。

就學習設計開發者而言,羅賓威廉斯的Non-Designer's Design Book是一個很好的起點。我擁有一份副本,並且肯定會將其推薦給任何希望以較爲抽象的術語來理解設計的開發人員。

1

假設你是誰願意做足夠體面的設計開發,這裏的東西我沒有當我是在一個類似的立場:

  1. 學習XHTML和CSS得好:有很多很好的資源指出在這裏的其他答案。基本上,這隻需要作爲開發人員的學習技能,你不應該有太多的問題。

  2. 從複製簡約設計開始。他們周圍有很多人。一個例子:http://vandelaydesign.com/blog/design/minimalistic-web-design/它應該幫助你建立自信和一些美學感。

  3. 一旦你建立了幾個,混合和匹配!假設,你沒有進行嚴肅的設計,你會感到驚訝,這可能會帶給你多遠。

祝你好運!

0

我認爲你需要區分你的意圖和你的實現。 CSS的東西只是一個實現細節,無非是一個交易工具。如果您已經創建了視覺上吸引人的網站,但它們不是基於CSS的,那麼學習CSS是非常值得的。另一方面,如果您對頁面佈局和視覺美學缺乏經驗,那麼您需要閱讀並嘗試大量關於頁面佈局技術的內容,例如字體使用,空白區域,平衡等。

我保留的一個站點去設計靈感,只是爲了閱讀一些偉大的CSS黑客是http://www.csszengarden.com。但我從來沒有勇氣向該網站提交任何內容。享受和祝你好運:-)

0

閱讀A List Apart。我從那裏得到了一些最好的提示和技巧。

1

一個很主觀的問題。什麼是美麗的網站?我在大學學習藝術(美術不是設計),我討厭我的網頁設計。大多數人喜歡我所做的事情,但對我來說這是一個非常乏味的過程。

我和一位擁有計算機科學學士學位的核心程序員一起工作,他傾向於組織非常合理的網頁。很多顏色(當然顏色都是有意義的)並彈出一切描述。你需要一把鑰匙來理解他的網頁。有些人喜歡他的設計,有些人不喜歡。

學習編碼HTML和CSS是可行的。我最好的建議是找到你喜歡的東西並進行檢查。從代碼角度以及設計/審美角度。

有些人從來沒有超越模仿階段,但我認爲如果你真的想成爲一個優秀的設計師,你會吸收你喜歡的東西,沒有比設計/開發網站更好的方法。練習,練習,練習或工作,工作,工作!你工作得越多,最終你自己的風格就會出現。

0

我會建議使用Web瀏覽器打開居住在:

http://delicious.com/

它經常與教程的鏈接上CSS和設計,你會發現自己花時間閱讀和使用更新。

我發現自己在尋找不同設計的例子,然後走開並嘗試自己使用它們 - 無論是網格系統還是簡單的配色方案。美味真的是靈感和幫助的寶庫。