專注於樣式表和跨瀏覽器兼容性

Question

讓我通過解釋我在網頁設計方面的背景經驗來開始這個主題。 我一直是一個后端程序員，使用PHP和SQL和東西。 但是我確實有HTML和CSS的淺背景。 問題是，我不知道這一切。 我所知道的是，當涉及到設計（而不是后端臟工作）時，我理解基本的CSS屬性，我也理解HTML，我通常可以把一個草率的網頁與兩個和幾個BALillion DIV標簽放在一起。

無論如何..

我經常遇到的問題是，當我在瀏覽器中設計一個網站，比如IE7（然后在IE7上看起來很完美），然后在IE8或IE6或Mozilla（等等）上查看它會讓它變得空曠而難看看起來與它在IE7上的外觀完全不同。

問題一：

基本上，我問每個人是我應該采取什么途徑來學習如何正確建立網站？ 使用CSS標准和HTML標准進行構建，這將使我的網站在每個brwoser上看起來都一樣。 （不僅是學習標准，而且我在哪里可以學會正確編寫我的代碼？）我可以用哪種強大的免費資源來學習這些東西？

問題二：

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

哦，如果有人有關於如何正確設計完整布局的任何教程，請隨意將其放在響應中。

感謝您抽出寶貴時間閱讀我的問題，希望您能理解我想要解決的問題。 我需要在Web編程的設計方面找到正確的路線，以便我知道將來如何創建成功的網站。

謝謝Sam Pardee

Answer 1

首先，我建議不要將IE作為“開發”瀏覽器。 從Firefox開始，說（這為你提供了Firebug和web開發人員工具欄等工具的優勢），然后在IE中正確使用它。

第二，絕對是用戶外部樣式表; 它產生了更清晰的代碼和更簡單的方式來進行樣式更新。 絕對推薦。 外部CSS文件也可以由瀏覽器緩存，因此當用戶在您的站點或應用程序中從一個頁面移動到另一個頁面時，它們不會增加頁面下載大小。

最后，首先使用簡單的HTML定義您的內容，將結構基於內容的含義（通常稱為“語義”HTML），而不是基於您希望它的外觀。 例如，即使您不希望將其顯示為“項目符號列表”（ <ul>的默認樣式），也可以將<ul>標記用於項目列表。 然后開始添加樣式以使其看起來正確。 這將產生非常干凈的HTML，可以支持各種格式和布局（看看CSS Zen Garden看看我的意思），並且還將幫助您推動反映內容結構的布局，這將是更容易閱讀和理解。

就書籍而言， Eric Meyer不會出錯。 當然，HTML很簡單，我不建議用HTML做一些奇特的東西，所以把你的學習精力放到CSS（Eric是CSS大師）。

Answer 2

跨瀏覽器兼容性始終是一個問題。 遺憾的是，這是Web開發的主要內容，並且沒有靈丹妙葯。 幸運的是，主要犯罪者IE6終於開始褪色。

A1。

在新網站上開始工作時，首先要獲取需要在頁面上的每個內容並將其粘貼到文本文件中。 然后把它放在一個合理的順序（想“如果我必須使用文本瀏覽器來使用這個頁面，我怎么想要它被安排......”）。

然后開始在每個內容周圍包裝HTML標記。 對於每一件，請想一想“這是什么類型的信息？” 標題？ h1 / h2 / etc標簽。 一個段落？ 引用？ 一張桌子？ p ， quote ， table 。 實質上，使用HTML標記來描述每個內容的信息類型。 當我這樣做時，我不關注它在瀏覽器中的實際外觀。

內容全部標記后，開始編寫CSS。 如果可能的話，請嘗試在此步驟中不要觸摸標記。 但有時這是不可能的，並且在某些元素周圍拋出div或span是不可避免的。 標記越少， 無意義越好。

根據我的經驗，這種方法可以使事情變得非常干凈整潔，並使調試布局問題變得更加容易。

A2。

使用“樣式”屬性將樣式構建到標記中對於原型設計很好，但要注意，一旦它工作就將它們留在那里的誘惑很強烈。 最佳做法是將所有樣式都放在外部樣式表中。 我很想聽聽任何其他觀點。

一些很棒的網絡標准/ 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 hack兼容性的良好參考）
• http://www.zeldman.com/
• http://meyerweb.com/

希望這可以幫助！

Answer 3

有太多的網站，有非常好的HTML和CSS教程。 他們會為您提供所需的所有信息。 我會開始閱讀HTML / CSS的大師：

西蒙科里森
安迪巴德
Molly 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編碼正確的是由Simon Collison開始的CSS Web開發 。 偉大，易於理解，而不是太慢。 跟隨的好例子。 之后，購買CSS Mastery - Advanced Web Standards Solutions，也是Simon Collison，Andy Budd和Cameron Moll 。 本書可以幫助您快速掌握一些先進技術，您可以在許多網站上看到這些技術，其中一些是作者發明的。