CSS/HTML布局的一步一步过程?

joh*_*b10 6 html css

我是一名正在尝试加快面向客户网站速度的开发人员.我有一个设计师(他有多年的经验,但它都是印刷品,所以她也在加强网页设计)所以我不是在寻找设计或可用性提示.我有兴趣听到的是对页面进行实际编码的分步过程.我想确保我从右脚下来并按逻辑顺序构建碎片.

因此,请在样式表和HTML中分享您对第一,第二等内容的看法.我的意思是在您已经有模型(在Photoshop中,或其他任何)并坐下来创建您的代码.

例如,您是否首先考虑页面上的所有部分(标题,导航栏,内容,RSS订阅源),然后将适当的DIV添加到样式表中?然后进入并详细研究每个部分?

(我知道网页设计技巧/最佳实践还有其他帖子,但我没有发现任何关注逐步编码过程的内容.)

谢谢!

小智 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文件.通过使用仅在关闭body标记之前发生的脚本标记来引用JavaScript.

6)完成JavaScript后,通过JSLint工具传递它.完全像你说的那样重写你的JavaScript.

当我与从印刷品迁移到网络的设计师合作时,我遇到了问题.当打印设计师试图将他们的布局体验调整到网络时,他们通常不会离开印刷世界.网络不打印.打印与网络有不同的限制和自由.甚至网格布局有时也不会无法从打印转换为网页设计.