Semantic Typography: Bridging the XHTML gap

我要留言 Jump to comments Posted in Web by Evan @ 2006-7-10 19:51

Web Standards Fans | x5's Blog 上看到的,收藏。

最近在看侯捷《 Word 排版艺术》,在被他的文笔所吸引的同时,也感叹于排版中的学问。正好今天,看到了 Mark Boulton 写的一篇日志《 Semantic Typography: Bridging the XHTML gap 》,所以想介绍给大家。

本文主要讲的就是如何在排版中遵循语义的原则,任何道理如果去“干讲”都显得枯燥晦涩,所以,我们就直入主题,用他举的例子来给大家阐述一下:

如果你有一个客户,他是一个房产代理,你要为他做一个网站。站点中的大部分内容都是房产信息。现在,他交给了你一个文档(很可能就是一个 word 文件),里面都是些房产的具体信息,他让你用此来做这个网站,下面的这个,就是房产的具体信息:

http://ciox5.blogbus.com/files/1133619874.gif

正如你看到的,这是一个很“朴素”的文档,我们要做的第一项任务,是建立它的概念结构(Conceptual Structure),它的语义元素,以此,我们才能确定他的排版结构:

http://ciox5.blogbus.com/files/1133620204.gif

这步完成以后,让我们暂时忘记怎么去设计它的问题吧,我们先用对应的 XHTML 标签来标记上面的这些元素:

http://ciox5.blogbus.com/files/1133618946.gif

在保留了概念结构的同时,我们也拥有了 XHTML 结构(语义化的标记)。现在我们可以专注与排版了,使他去遵循概念结构(与此同时,我们也就遵循了 XHTML 的结构)。

http://ciox5.blogbus.com/files/1133620714.gif

完~

这种设计过程最大的好处就是,不再被代码所烦扰,而且它很“健康”。

关键字:TAGS:

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}