HTML5和CSS3：网页设计的框架

原作者：
来源HTML5 and CSS3: Wireframing in the final product
译者cms_k

框架是Photoshop和网页经典的比较之处。现有的框架和原型工具不能准确体现网站的需求。

静态设计的网站不能在web浏览器上浏览。而且当你完成网站最终建设，网页上一些元素看起来和草稿中相对应元素不完全一样，客户端会发现那些字体定位上的细微的区别。

使用图形编程重复渲染设计的作品视觉上可能更舒服，比HTML手写代码花费更多的时间。

然而，从一开始就在HTML创建框架的优势开始在两者比较中得不偿失：我们不仅HTML5有新的布局元素，CSS3更加强大的选择器和样式，而且把这两者结合起来，我们能快速设计出简单的布局。
很多新公司，比如，37Signals,Atomiq，其他等，都采用HTML原型方法。主要原因是在合适的地方使用正确的工具，开发过程就非常简易。你很想了解这个过程到底有多简单，当你这么做，
你将在下一步的编写中有个良好的开端。

使用HTML5快速布局

HTML5包含一整套优秀新的结构元素，使用这些结构元素能快速开发出更少类和id标识。一旦理解了这些元素的目的，就能在几分钟内创建粗略的网页布局。

如果不熟悉这些新的元素，这里有个快速介绍。这些新元素使文档结构较以前更加简洁，从而就不用大量得使用div。在文章“HTML5的简介”，拉克.亨特很好地描述了这些元素：

• article标签  构造了文档、页面或者网页的独立分段，适用于放置新闻、博客贴子和论坛贴子和各条评论。
• section标签 用于显示文章或应用的通用分段，比如一个章节。
• header 标签用于显示分段的标题。标题的内容不仅仅只有分段的标题，比如，还可以加入副标题、版本历史信息和署名。
• nav 标签包含了导航链接的部分，同时适用于网站导航和表格内容。
• aside 标签是用于定义和内容相关的内容，对于标记出侧边栏很有用处。
• footer标签标记分段的页脚。特别是包含一些关于分段的详细信息比如作者名，相关文档链接和版权数据。

示例网站的布局了居中页面，包含了页头，左侧侧边栏，主要内容区域和页脚。我已经使用HTML5标签标记文章的结构，把所有内容都包含在内。

          >                          

这些标签和div没有尺度大小且不可见，除非你设置标签样式属性或在其中填写内容。为了使这些标签有效，必须暂时给这些标签设定高度属性。我们应该设置HTML标签属性display: block;；这样浏览器就能识别标签，额外的工作由IE完成。

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

在定位标签之前，布局必须是可视化，没有包含任何内容。理想的方法应该是易于稍后移除而且不会影响设计。

方法1: 大纲

设置outline 可以兼容所有浏览器，而不会影响标签的宽度，但会改变border 属性

article, header, nav, aside, section, footer {outline: 1px solid #000; }

方法2: HSLa

HSLa是标签层级的很好表示，因为透明度能使层叠标签变暗。但是如果是使用实体模型基本背景颜色，那么这个方法就无效了。

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }

定位

定位标签的选用在于个人偏好问题，你有足够多的选择：浏览器或操作系统的尺度属性，背景网格图片（我已选用），带有网格和布局辅助功能的CSS框架，或是Dreaweaver这样的软件。定位是最重要的一部分，必须从一开始就正确使用。这儿写的代码会保留在最终作品。

在我的示例中，我给页面一个固定的宽度，左侧侧边栏和右侧内容，两者在页头和页脚之间。

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

整个过程，我能看到每个分段和每个分段显示在哪里。下面是结果：

直到完成最终作品前不要担心浏览器的兼容性。我强烈建议做些注释而不是CSS评论，标记一下哪些必须回头检查，主要是对特定浏览器有附加要求的选择器和属性。

初始化内容

布局完成之后，你可能必须添加示例内容。如今大部分普遍做法是页面填入“Lorem lpsum”块和水印的公式化图片。为什么不改变一下做法呢？

HTML Ipsum 是一个很优秀的网站，在需要公共标记的区域填入“Lorem lpsum”文本。在一个页面囊括所有东西不能比这更容易了。

PlaceHold.it 提供你需要的任何大小图片的链接请求调用，比如，http://placehold.it/350x150，第一个值是宽度，第二个值是高度。

除了更可爱的图片之外，PlaceKitten和PlaceHold.it运营完全一样：

你可以为地图添加高级的Javascript的代码，取用地图图片，而不是Google的静态地图。这要求有个API密码或唯一的签名，无论如何都必须获取密码或签名，如果想要最终作品中包含一张地图。

模拟的行为

现代网站包含功能难以通过静态框架实现：扩展折叠的标签，转换，拖拉，动态按钮等。无论如何，你最终必须使用Javascript库，载入一个Javascript库和编写基本功能应该不能冲突。

通过网站载入jQuery减少了一次下载.使用一些函数模仿意要实现功能取代编写实际代码。比如，点击一个链接时，显示出一个标签（登入窗口或是交互表单），然后在窗口快速创建一个线框，
默认是隐藏的，使用jQuery点击显示。

只要你做好足够多工作模仿这些行为，客户端将可以看到它们的效果，而不是必须在一大堆图表或解释做大量的工作。

模拟的状态

假如你正在为一个web应用创建框架时，你可能想要快速显示一个简单页面的几种状态。你可以创建框架的几个不同的拷贝，每个更改成特别的状态，或可以使用 PolyPage。

PolyPage 是jQuery的一个插件，能使你能在你使用类的标记中表现不同的状态，比如，登录或退出。你可以用一个链接切换各个状态，从而帮助你无需多个页面轻松地演示不同的客户端。

总结思路

最初的设计在纸上或PDF格式看起来外观华丽，从一开始创建HTML页面有几个优点。

节省了用于设计代码重构的时间。避免疑惑为什么最终作品看起来和原始的不完全一样。节省你和客户端双方时间，金钱和神经。

迈克尔.波特可是波兰俄勒冈州的一名网站开发人员和网站技术指导员。他喜欢从事客户端开发和Botsko.net, LLC.的开源项目。不工作时，他喜欢和他的两个孩子和美好的妻子一起度过。

我忽略了哪个快速布局和原型的工具？先设计什么后编写什么的好处是什么？

添加新评论

相关文章：

  减小串扰的板级解决办法

  用Photoshop设计一个小型、现代的产品主页

  提升设计品质的8种布局方案

  八种布局方案改善你的设计（下）

  八种布局方案改善你的设计（上）