专注于样式表和跨浏览器兼容性

时间:2009-12-03 20:57:57

标签: html css layout standards

让我通过解释我在网页设计方面的背景经验来开始这个主题。我一直是一个后端程序员,使用PHP和SQL和东西。但是我确实有HTML和CSS的浅背景。问题是,我不知道这一切。我所知道的是,当涉及到设计(而不是后端脏工作)时,我理解基本的CSS属性,我也理解HTML,我通常可以把一个草率的网页与两个和几个BALillion DIV标签放在一起。

不管怎么说..

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

问题一:

基本上,我要问的是每个人应该学习如何正确构建网站?使用CSS标准和HTML标准进行构建,这将使我的网站在每个brwoser上看起来都一样。 (不仅是学习标准,还有我在哪里可以学会正确编写我的代码?)我可以用哪种强大的免费资源来学习这些东西?

问题二:

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

哦,如果有人有关于如何正确设计完整布局的任何教程,请随时将其放入响应中。

感谢您抽出宝贵时间阅读我的问题,希望您能理解我想要解决的问题。我需要走上网络编程设计方面的正确路线,以便我知道将来如何创建成功的网站。

谢谢你, Sam Pardee

3 个答案:

答案 0 :(得分:2)

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

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

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

就书籍而言,Eric Meyer不会出错。当然,HTML很简单,我不建议用HTML做一些奇特的东西,所以把你的学习精力放到CSS(Eric是CSS大师)。

答案 1 :(得分:1)

跨浏览器兼容性始终是一个问题。遗憾的是,这是Web开发的主要内容,并且没有灵丹妙药。幸运的是,主要犯罪者IE6终于开始消退了。

A1。

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

然后开始在每个内容周围包装HTML标记。对于每一件,请想一想“这是什么类型的信息?”标题? h1 / h2 / etc标记。一个段落?引用?一张桌子? pquotetable。实质上,使用HTML标记来描述每个内容的信息类型。当我这样做时,我支付没有注意来支持它在浏览器中的实际效果。

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

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

A2。

使用“样式”属性将样式构建到标记中可以很好地进行原型设计,但要注意,一旦它起作用,将它们留在那里的诱惑力很强。最佳做法是将所有样式都放在外部样式表中。我很想听听任何其他观点。

一些出色的网络标准/ CSS资源:

希望这有帮助!

答案 2 :(得分:1)

有很多网站,有非常好的HTML和CSS教程。他们会为您提供所需的所有信息。我会开始阅读一些HTML / CSS的大师:

西蒙·科里森(Simon Collison) 安迪巴德 Molly Holschzag
Dan Cederholm
杰森圣玛丽亚
Eric Meyer
杰弗里泽尔德曼 Cameron Moll

任何你喜欢这些人的书或文章都会引导你朝着正确的方向前进;你不能出错!

对于能够为符合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/

迄今为止我购买的最好的书之一是Beginning CSS Web Development by Simon Collison,以帮助HTML和CSS编码。伟大,易于理解,而不是太慢。跟随的好例子。之后,购买CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll。本书可以帮助您快速掌握目前在许多网站上看到的一些先进技术,其中一些技术是由作者发明的。