准备好了么,今天的教程主要工具有图形软件(Photoshop, Illustrator, Freehand, Gimp, etc),一个上传文件到你服务器的ftp软件,以及铅笔和纸。

我不会侧重于上述软件的使用,因为我们的主要目的不是教你如何设计网页,而是了解我们设计完成一个网站的内部工作流程。

第一步:制定计划

上篇教程最后我们给出的网站设计图如下:

site-so-far

你可以看出,这个设计图弹性很大,虽然具备了基本功能,但是还需要设计更多细节符合网站的一些要求。

通常在这个阶段我会把这图打印出来,然后考虑网页的结构。到了这一步我开始考虑编程,之前我不想被编程语言约束我的图形设计,只有到了这一步我才开始考虑“如何把设计图编程为实际的网页”,这时我才考虑那些元素是h1,h2的。

第二步 编写基本HTML和css

我的html编辑器是du-jour.du-jour.我也不会先马上添加各种内容,只是输入一些带id和各种域的div标签,id和域的取名要简练易懂,切记,这些关键时候可以救命。

现在,我公布我的超级秘密,上帝,一个神奇的技巧。在这个阶段,我将建立我们的样式表( stylesheet),给不同的id和域分配不同的底色就是我们的技巧。在我们即将填充各种素材而使代码越来越复杂前帮助我们更快跟踪网站的结构。

网站的代码最后就类似下面的样子。

*/ Brought to you by the fine folks at The Blog Studio (www.theblogstudio.com) and the letter k */ * { margin:0; padding:0; } p {margin: 1em 0} body{ background: #fff; } #top-banner{ margin: 10px auto; width: 825px; height: 40px; text-align:center; background: red; } #wrapper{ margin: 0 auto; width: 825px; } #adwords-banner{ margin: 5px; width: 815px; height: 20px; background: red; } #header{ margin: 5px; width: 815px; height: 100px; background: grey; } etc etc etc

(未完待续)

编译:http://www.problogger.net/archives/2006/03/01/blog-design-for-beginners-part-2/