1.5 CSS布局的基本思路(1)


1.5 CSS布局的基本思路(1)


在我们刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后用Photoshop或Fireworks等工具画图、再切成小图,最后通过编辑HTML将所有设计还原表现在页面上。


如果要用CSS布局,思路恰恰相反,你不需要先考虑网页的外观和布局设计,而是思考网页信息的语义和结构。那么什么是语义呢?


语义又称做词义,用中文也可以表示字义,它研究的对象是词语,而不是语句或文章,在Web中可以理解为构建网页的各种元素,这些元素的名称应该富有语义,即构建网页框架的元素应体现一定的意思,例如,HTML中的p元素,这个元素的名称p全称为paragraph(段落的意思),那么我们一看到这个元素,就知道它包含的内容应该是文本段,关于结构语义化元素更详细的说明读者可以参考2.1.5节内容。而结构就是由这些语义元素组合搭建起来的框架,所呈现出来的就是网页效果了。


语义Web(语义网)是W3C倡导下的协作项目,它提供了一个通用的框架,允许跨越不同Web应用程序、企业和团体共享和重用数据,这与微软公司所倡导的.NET第三代互联网技术平台思想是一致的。


从元数据角度分析,语义Web的基本思想就是让网页上的数据都有元数据(网页元素)来描述它,说明它的含义,这样计算机程序就能够理解网页上的数据,也能更好地为大家服务;从数据交换角度分析,这样更方便用户数据的交换,此时你会更加理解为什么XML语言是Web数据交换的基本格式;从Web搜索角度分析,目前的网页是让人看的,如查找信息、网上购物等,语义Web上的网页是让计算机看的,它通过制定一个Web上数据表示语言的规范,用以描述Web内容,且让计算机能够理解,例如,计算机遇到p元素就知道其中包含的内容是段落文本,遇到h1~h6就知道是标题一样等。


理解了Web语义和结构,接着我们来继续探讨CSS布局的基本思路。在标准布局中,外观并不是最重要的,一个结构良好的HTML页面可以以任何形式的外观呈现出来,例如,CSS Zen Garden(CSS禅意花园,http://www.csszengarden.com/)就是一个典型的例子,如图1.8~图1.11所示就是CSS禅意花园4个典型设计效果。


CSS禅意花园是由Dave Shea于2003年5月创建的个人站点,他的目标就是通过CSS禅意花园这个平台,提供一个相同的网页结构,鼓励优秀的设计师用CSS去创造全新的网页样式作品,下图所示的几幅作品就是其中的一部分。禅意花园的HTML代码非常简洁,且持久不变。读者可以访问禅意花园(www.csszengarden.com)查看源文件。







 
(点击查看大图)图1.8  禅意花园默认样式






 
(点击查看大图)图1.9  Icicle Outback(冰柱上的荒地)样式






 
(点击查看大图)图1.10  Zen Army(宗派部队)样式






 
(点击查看大图)图1.11  Floral Touch(点缀的花)样式




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2