重点放在样式表和跨浏览器兼容

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。这本书可以让你与一些先进的技术，你会在很多的网站，现在看，其中一些是由作者发明的加快。