我是一名尝试在面向客户的网站上加快速度的开发人员。我有一个设计师（他有多年的经验，但都是印刷品，所以她也在加强网页设计）所以我不是在寻找设计或可用性提示。我有兴趣听到的是对页面进行实际编码的分步过程。我想确保我从右脚下来并按逻辑顺序构建碎片。
因此，请在样式表和HTML中分享您对第一，第二等内容的看法。我的意思是说你已经有了模型（在Photoshop中，或者其他什么）并且坐下来创建你的代码。
例如，您是否首先考虑页面上的所有部分（标题，导航栏，内容，RSS订阅源），然后将适当的DIV添加到样式表中？然后详细介绍每个部分？
（我知道网页设计提示/最佳做法还有其他帖子，但我没有发现任何关注逐步编码过程的内容。）
谢谢！
答案 0 :(得分：19)
以下是通过数字执行此操作的正确方法：
1）编写HTML。除了写它之外什么都不做。不要在浏览器中呈现它以查看最重要的内容。专注于语义，简洁和可访问性。此时没有其他问题。如果你做错了这一步，那么其他任何事情都无关紧要。
2）验证您的HTML。如果你的HTML验证失败，那么在做其他任何事情之前修复它。
3）为您的HTML编写CSS。此时，您必须在浏览器中呈现HTML以查看CSS的影响。不要更改HTML的结构以满足演示的要求。这就是你首先编写HTML的原因。此时，您应该在HTML中改变的唯一内容是标记的class，id和title属性。使用带有rel =“stylesheet”属性的链接标记从HTML的head部分引用CSS。请勿尝试使用样式标记或@import规则包含样式表。
4）CSS完成后，一切看起来都很漂亮，然后创建CSS所需的任何背景图像。
5）只有在完成CSS和CSS所需的所有内容之后，才能使用JavaScript。 JavaScript不会进入您的HTML。 JavaScript总是进入外部js文件。通过使用仅在关闭正文标记之前发生的脚本标记来引用JavaScript。
6）完成JavaScript后，通过JSLint工具传递它。完全重写你的JavaScript。
当我与从印刷品迁移到网络的设计师合作时，我遇到了问题。当打印设计师试图将他们的布局体验调整到网络时，他们通常不会离开印刷世界。网络不打印。打印与网络有不同的限制和自由。甚至网格布局有时也不会无法从打印转换为网页设计。
答案 1 :(得分：2)
从http://960.gs开始使用960网格系统 - 它将附带一些可打印的网格，用于勾勒出想法。这个CSS框架将促进布局的快速开发，使用非常容易理解的标记和最小的CSS。
Nettuts不久后做了一个视频教程，展示了使用960网格系统设计布局是多么容易。您可以在http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
在线查看如果您愿意阅读，他们也有a written-tutorial。
如果您决定使用960网格系统，您可以添加一个书签，该书签将使用网格覆盖您的页面，以便您轻松获得您喜欢的布局。 http://gridder.andreehansson.se/
提供更多信息（以及书签本身）答案 2 :(得分：1)
我总是使用我用几个基本样式表制作的css框架。 一个reset.css，以确保所有浏览器中的所有边距，填充，边框等都相同。然后使用typography.css为所有标准元素（如段落，列表，标题等）设置所有字体，大小，颜色等的一些规则。然后使用forms.css来处理表单，最后是一个wireframe.css，让我建立一个基于A List Apart的圣杯的页面：http://www.alistapart.com/articles/holygrail/
在我的情况下，线框由标题，子标题，容器和页脚组成。在容器中，我可以通过为它提供适当的类来指定三列中的一列。
通过这个基本设置，我开始非常全面地编写HTML。当然是线框部分的div，然后是这些div中的分区。通常我会在标题中填入一个h1和一个带有主要导航元素的列表（取决于设计），带有一个或多个列表和/或段落的侧边栏，以及带有一些段落的主列。这只是为了填补页面，即使内容仍然是胡言乱语。
然后我开始使用每个元素（例如导航菜单），首先为它编写HTML，就像它在没有样式表的浏览器中显示一样。确保语义正常，使用h1表示标题，p表示段落，ul / ol表示列表等。然后，当该特定元素的HTML准备好并且在无样式浏览器中看起来很好时，我开始应用css。
我在配置框架的样式表后添加的所有样式都进入一个单独的样式表，即main.css。我通常以与页面相同的方式划分这个样式表，首先是一个包含整个页面中使用的类的块（比如用于多个目的的重复块），然后逐个具有标题样式的块和它的内容，子标题及其内容，主列，左侧和右侧边栏以及页脚。
这个过程让我在对它应用样式之前考虑每个html元素，这样底层的html在语义上是正确的，但是通过预先定义主css框架我至少可以使用它。
（正在进行的示例可以在pkr.nl/template/上看到，其中最顶层菜单中的论坛选项卡可以点击其他页面较少的页面。）
答案 3 :(得分：1)
在切割Photoshop comps之后，我通常首先编写HTML。我尽可能使用语义HTML。 HTML页面完成后，我转到CSS。以前的答案中描述的网格系统非常擅长帮助您布局CSS，但您确实需要在设计时考虑到这一点。
如果我没有使用CSS网格系统，我使用CSS重置（Eric Meyer提供的那个），因为它为您提供了最佳的起点，并且在尝试开发IE7 / IE8时遇到的麻烦最少Safari浏览器/ Firefox浏览器。我最近放弃了对IE6的支持，除非我是专门为此付费的。