HTML5和CSS3:网页设计的框架

框架是Photoshop和网页经典的比较之处。现有的框架和原型工具不能准确体现网站的需求。静态设计的网站不能在web浏览器上浏览。而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别。

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

然而,从一开始就在HTML创建框架的优势开始在两者比较中得不偿失:我们不仅HTML5有新的布局元素,CSS3更加强大的选择器和样式,而且把这两者结合起来,我们能快速设计出简单的布局。

很多新公司,比如,37Signals,Atomiq,其他等,都采用HTML原型方法。主要原因是在合适的地方使用正确的工具,开发过程就非常简易。你很想了解这个过程到底有多简单,当你这么做,你将在下一步的编写中有个良好的开端。

来源:译言网/作者cms_k

使用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/350×150,第一个值是宽度,第二个值是高度。

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

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

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

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

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

模拟的状态

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

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

总结思路

最初的设计在纸上或PDF格式看起来外观华丽,从一开始创建HTML页面有几个优点。
节省了用于设计代码重构的时间。避免疑惑为什么最终作品看起来和原始的不完全一样。节省你和客户端双方时间,金钱和神经。

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


Have Your Say »

Required

Required, never published