【问题标题】:Focussing on Style Sheets and Cross Browser Compatibility专注于样式表和跨浏览器兼容性
【发布时间】:2010-04-08 12:45:03
【问题描述】:

让我从解释我的网页设计背景经验开始这个话题。我一直更像是一个后端程序员,使用 PHP 和 SQL 之类的东西。但是,我确实有 HTML 和 CSS 的浅背景。问题是,我不知道这一切。我所知道的是,当涉及到设计(而不是后端的脏活)时,我了解基本的 CSS 属性,也了解 HTML,我通常可以将一个带有两个和几个不计其数的 DIV 标签的草率网页拼凑在一起。

无论如何..

我一直遇到的问题是,当我在IE7之类的浏览器中设计一个网站时(然后在IE7上看起来很完美),然后在IE8或IE6或Mozilla(等)上查看它就会得到所有空间又丑陋,看起来与 IE7 上的样子完全不同。

问题一:

基本上,我要问大家的是我应该采取什么途径来学习如何正确构建网站?与 CSS 标准和 HTML 标准一起构建,这将使我的网站在每个浏览器上看起来都一样。 (不仅是学习标准,还有在哪里可以学习如何正确编写代码?)我可以使用哪些强大的免费资源来学习如何编写这些东西?

问题二:

如何正确编码我的网站?我是使用所有外部样式表来简化动态页面设计,还是将某些内容硬编码到每个页面的 DIV 标签中?什么是合适的?

哦,如果有人有任何关于如何正确设计完整布局的教程,请随时在某处回复。

感谢您抽出宝贵时间阅读我的问题,希望您能理解我试图向所有人传达的内容。我需要在网络编程的设计方面走上正确的道路,这样我才能知道如何在未来创建成功的网站。

谢谢你, 山姆·帕迪

【问题讨论】:

  • Sam,您应该为您的问题选择一个“已接受的答案”,这是礼仪的一部分——现在看起来您已经问了 10 个问题,其中一些问题有多个答案,但还没有t 接受任何。
  • 很抱歉,由于足部手术,我已经有一段时间没有参加了,但我会在今晚晚些时候复习。 :)

标签: html css layout standards


【解决方案1】:

首先,我建议不要从 IE 作为您的“开发”浏览器开始。比如说,从 Firefox 开始(这让您可以利用 Firebugweb developer toolbar 等工具的优势),然后在 IE 中正确使用它。

第二,绝对是用户外部样式表;它会产生更简洁的代码和更简单的样式更新方法。绝对推荐。外部 CSS 文件也可以由浏览器缓存,因此当用户在您的网站或应用程序中从一个页面到另一个页面时,它们不会增加页面下载大小。

最后,首先使用简单的 HTML 定义您的内容,将结构基于内容的含义(通常称为“语义”HTML),而不是您希望它的外观。例如,即使您不想将其显示为“项目符号列表”(<ul> 的默认样式),也可以将 <ul> 标记用于项目列表。然后开始添加样式以使其看起来正确。这将导致非常干净的 HTML 可以支持各种格式和布局(看看 CSS Zen Garden 以了解我的意思),并且还将帮助您朝着反映内容结构的布局迈进,这将是更容易阅读和理解。

在书籍方面,Eric Meyer 不会出错。当然,HTML 很简单,我不建议用 HTML 做花哨的东西,所以把你的学习精力放在 CSS 上(Eric 是 CSS 大师)。

【讨论】:

    【解决方案2】:

    跨浏览器兼容性一直是个问题。遗憾的是,它是 Web 开发的主要内容,而且没有灵丹妙药。幸运的是,IE6 的主要攻击者终于开始消退。

    A1.

    在新网站上开始工作时,首先获取页面上需要的每条内容并将其粘贴到文本文件中。然后把它放在一个合理的顺序(思考“如果我必须使用文本浏览器来使用这个页面,我希望它如何排列......”)。

    然后开始在每条内容周围包裹 HTML 标签。对于每一块,想想“这是什么类型的信息?”一个标题? h1/h2/等标签。一个段落?报价单?一张桌子? p,quote,table。从本质上讲,使用 HTML 标记来描述每条内容的信息类型。当我这样做时,我不注意此时它在浏览器中的实际外观。

    标记完所有内容后,开始编写 CSS。如果可能,请尽量不要在此步骤中触摸标记。但是,有时这是不可能的,并且在某些元素周围抛出divspan 是不可避免的。 无意义的标记越少越好。

    根据我的经验,这种方法使事情变得非常干净整洁,并且使调试布局问题变得更加容易。

    A2.

    使用“style”属性将样式构建到您的标记中对于原型设计来说是很好的,但要注意,一旦它起作用就很容易将它们留在那里。最佳实践是将所有样式都放在外部样式表中。我很想听听任何不同的观点。

    一些很棒的网络标准/CSS 资源:

    希望这会有所帮助!

    【讨论】:

      【解决方案3】:

      有太多的网站有非常好的 HTML 和 CSS 教程。他们会给你所有你要求的信息。我会开始阅读一些伟大的 HTML/CSS 大师:

      西蒙·科里森
      安迪·巴德
      莫莉·霍尔施扎格
      丹·塞德霍尔姆
      杰森·圣玛丽亚
      埃里克·迈耶
      杰弗里·泽德曼
      卡梅伦·莫尔

      您可以从这些人那里获得的任何书籍或文章都会引导您朝着正确的方向前进;你不会出错的!

      至于能够为您提供符合 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。这本书让您快速了解一些您现在可以在许多网站上看到的高级技术,其中一些是作者发明的。

      【讨论】:

        猜你喜欢
        • 2011-06-18
        • 2012-08-09
        • 1970-01-01
        • 1970-01-01
        • 2011-06-07
        • 2011-03-10
        • 2011-10-07
        • 2011-11-23
        相关资源
        最近更新 更多