重點放在樣式表和跨瀏覽器兼容

Question

讓我解釋我的網頁設計的背景經歷談起這個話題。我一直是更多的後端程序員，有PHP和SQL等等。不過，我確實有一個HTML和CSS的淺背景。問題是，我不知道這一切。我所知道的是，當涉及到設計時（不是後端骯髒的工作），我瞭解基本的CSS屬性，並且我也理解HTML，通常我可以將這兩個和幾個bazillion DIV標籤一起放在一起。

不管怎麼說..

我經常遇到的問題是，當我在設計類的瀏覽器IE7網站（然後它看起來完美的IE7），然後看它在IE8或IE6或Mozilla（等等），它會得到所有的空間和醜陋，看起來完全不同於它在IE7上的樣子。

問題一：

基本上，我問大家是我應該採取什麼樣的途徑來學習如何正確地構建網站？按照CSS標準和HTML標準進行構建，這將使我的網站在所有brwoser上看起來都一樣。 （不僅學習標準，而且我可以在哪裏學會正確編寫我的代碼？）我可以使用哪些強大的免費資源來學習如何實現這些目標？

問題二：

如何正確的代碼我的網站？我是否會使用所有外部樣式表來簡化動態頁面設計，或者是否將某些內容硬編碼到每個頁面上的DIV標記中？什麼是合適的？

哦，如果任何人有如何正確地設計一個完整的佈局隨意扔在一個地方應對任何教程。

感謝您百忙之中閱讀我的問題的時候，希望你會明白我想出去給大家。我需要走上網頁編程設計的正確路線，以便我將來知道如何創建成功的網站。

謝謝 山姆帕迪

Answer 1

跨瀏覽器兼容性始終是一個問題。不幸的是，這是網頁開發的主要部分，而且沒有魔力。幸運的是，主要的罪犯IE6終於開始褪色。

A1。

在新網站上開始工作時，首先將每頁需要在網頁上的內容粘貼到文本文件中。然後把它放在一個合理的順序（思考「如果我不得不使用文本瀏覽器來使用這個頁面，我將如何安排......」）。

然後開始在每段內容周圍包裝HTML標籤。對於每件作品，請考慮「這是什麼類型的信息？」標題？ h1/h2/etc標籤。一個段落？報價？一張桌子？ p，quote，table。基本上，使用HTML標籤來描述每條內容是什麼樣的信息。當我這樣做時，我支付沒有注意它現在在瀏覽器中實際看起來如何。

一旦內容全部標記完成，就開始編寫CSS。如果可能的話，請儘量不要在此步驟中觸摸標記。然而，有時候這是不可能的，並且圍繞某些元素拋出div或span是不可避免的。越少無意義標記越好。

根據我的經驗，這種方法可以讓事情保持乾淨整潔，並且使調試佈局問題變得更容易。

A2。

使用「樣式」屬性將樣式構建到您的標記中對於原型設計來說沒問題，但要小心，在它工作之後將它們留在那裏的誘惑力很強。最佳做法是將所有樣式放在外部樣式表中。我有興趣聽到其他觀點。

一些偉大的Web標準/ CSS資源：

• http://www.csszengarden.com/
• http://www.alistapart.com/
• http://www.thenoodleincident.com/
• http://www.quirksmode.org/css/contents.html（用於選擇兼容性有益的參考）
• http://centricle.com/ref/css/filters/（好CSS破解兼容性參考）
• http://www.zeldman.com/
• http://meyerweb.com/

希望這有助於！

Answer 2

首先，我建議不與IE起你的「發展」的瀏覽器。從Firefox開始，說（這給你的工具，如Firebug和web developer toolbar）的優勢，然後在IE瀏覽器之後正確的。

其次，絕對用戶外部樣式表;它會產生更簡潔的代碼和更簡單的樣式更新方式。絕對推薦。此外，瀏覽器還可以緩存外部CSS文件，因此當用戶在網站或應用程序中逐頁瀏覽時，它們不會增加頁面下載大小。

最後，通過使用簡單的HTML定義您的內容，立足於內容的含義結構開始（通常被稱爲「語義」 HTML），而不是你希望它看起來。例如，即使您不想將其顯示爲「項目符號列表」（<ul>的默認樣式），也可以使用<ul>標記作爲項目列表。然後開始添加樣式以使其看起來正確。這將產生非常乾淨的HTML，它可以支持各種格式和佈局（看看CSS Zen Garden瞭解我的意思），並且還會幫助您推進反映內容結構的佈局，這將會是更容易閱讀和理解。

在圖書方面，你不能去錯Eric Meyer。當然，HTML是很容易的，我不推薦用HTML做一些花哨的東西，所以把你的學習精力投入到CSS中（Eric是CSS大師）。

Answer 3

有太多的網站有真正偉大的HTML和CSS教程。他們會給你所有你要求的信息。我就開始做HTML/CSS的大宗師的一些閱讀：

西蒙 - 科裏森
安迪·巴德
莫莉Holschzag
達恩·塞德霍姆
傑森聖瑪麗亞
埃裏克邁耶
傑弗裏·策爾德曼
卡梅倫莫爾

任何書或文章，你可以從這些人喜歡將引導你在正確的方向;你不會出錯！

至於網站會給你正確的方法/概念/ Web標準培訓兼容網站：

http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/

到目前爲止我買，以幫助HTML和CSS編碼得當最佳書籍之一是Beginning CSS Web Development by Simon Collison 。好極了，容易理解，而且速度也不慢。很好的例子。之後，購買CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll。這本書可以讓你與一些先進的技術，你會在很多的網站，現在看，其中一些是由作者發明的加快。