设计一个Web2.0网页 第一部分[翻译教程]

5,999 Comments

本教程原创翻译自http://breakthenetwork.com/2010/12/31/design-a-web-2-0-layout/ 转载请注明出处

final

 

在这个教程中,我会一步一步为大家演示如何设计一个web2.0的网页。参照这个教程你只需要不到30分钟就可以完成,当然,你要对Photoshop有个差不多的了解。你可以在这里下载到用到的显示器图标。这是我为大家演示如何设计然后编写html/css来完成一个网页的两部分中的第一部分。

Step1


step-1

开始之前你需要先新建一个文档。这一步最重要就是宽度要设置在960像素,这是目前网站的一个标准,因为它几乎可以适应所有分辨率的屏幕。高度我们可以在后期根据需要来调整,所以我们现在选择1000像素左右就可以了。如果你感兴趣,你可以研究下960网格系统,它可以帮助你更好的控制你设计的网页。

现在,调出图层调板吧。在设计页面之前,我建议你把图层结构化分组。比如把图层分为header、content和footer三个组。这将帮助你有序的管理图层,避免在之后因为一大串图层而头疼。当然,你也可能需要建立一个navigation子图层组,或者其他一些组,只要其有助于保持页面整洁和可控。

Step2


step-2现在我们已经准备好了,让我们开始创建页面吧。在页面头部我决定做一个宽度100%、高280像素的一个内容区。在页面顶部的30像素区域,我创建了一个导航条,颜色是#202020.这个黑灰色将会跟页面的蓝色和白色产生鲜明的对比。这对突出导航条特别重要。在导航条上,加上文字链接,文字大概14-18像素就可以了。对于当前页面的链接,我对文字颜色进行了加亮,然后在底部加了一个箭头。要创建这个箭头,首先要填充一个20×20像素的正方形,然后旋转45度形成一个菱形。然后使用矩形工具删掉下面一半使其形成一个三角形。

More