CSS网页布局语义化探讨_Web标准教程
在过去的文章中,我们不止一次的提到语义,结构。这是Mb5u.com一直持有的观点。任何时候,HTML文档都显得比CSS更重要,学习CSS网页布局,其实重视的是HTML而并非只是CSS本身。CSS网页布局的语义化不仅只是限定在HTML!
网格的内容,为什么我反对这个思想的流传?首先声明的我不是反对关于设计的网格化,我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码:
大家可以很清晰的看到这里的yui-u,或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除以后,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需要改动一下样式表就行了,而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离,如果强行改变会出现下面的一些问题:
改变表现的时候必须动到html,一次美观上面的修改要动到三条工作线,极大的人力资源耗费。
会出现排在第五个的叫做“first”的框
会出现实际为240宽的叫做“180宽”的框
会出现实际为三列的叫做“四列”的布局
会出现实际为红色的叫做“blue”的字
这些也就是相当于现在很多人流行的“left_box”和“right_box”,快速改版以后变成了在左边的“right_box”。这不就是相当于歪曲事实的真理么?但其实最重要的是第一点,这样的工作方式和我们以往的table布局工作方式有差别么?你提个改个样式需求,全公司(设计、页面、开发、功能测试、CE数据监测)都跟着你去跑,这是很不智的。
上面说完不对的,下面给大家看看代码段:
HTML代码:
CSS代码:
大家可以看到模块化思想的优势在于哪:
可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。
可以高度自由化的适应任何产品经理、任何老板的不同变态需求。
任何关于表现上面的修改不需要动用到开发人员,不需要功能测试。
CE数据监测绑定到id,不需要重新调整接口。
每个人担任单个模块的快速迭代开发。
另外就代码而言。标题就是标题,内容就是内容;总不会那种歪曲事实、自己打自己嘴巴的状态。
我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样,能力和慧根属其次,人品首当其冲。
我以为,XHTML好比一个人的本质,CSS好比人的处事方式和态度,JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构,也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素,其实自然而然的也就代表了一种人生观。的确,一个人没有好的处事方式和态度很难在现在的社会很好的存活;但是这个处事的方式和态度位置过于偏重了,就成了一个善于欺骗、做事不择手段的人。您的见解欢迎与我分享,可以在Mb5u.com评论,也可以到W3Cbbs.com发贴。
这个是一直想说的,有了CSS你可以将左右顺序变成右左顺序,他就是一个网页中的魔术师。你总不能把他乱用,去成了一个善于欺骗、做事不择手段的人。
网格的内容,为什么我反对这个思想的流传?首先声明的我不是反对关于设计的网格化,我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码:
示例代码 [www.Mb5u.com]
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
大家可以很清晰的看到这里的yui-u,或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除以后,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需要改动一下样式表就行了,而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离,如果强行改变会出现下面的一些问题:
改变表现的时候必须动到html,一次美观上面的修改要动到三条工作线,极大的人力资源耗费。
会出现排在第五个的叫做“first”的框
会出现实际为240宽的叫做“180宽”的框
会出现实际为三列的叫做“四列”的布局
会出现实际为红色的叫做“blue”的字
这些也就是相当于现在很多人流行的“left_box”和“right_box”,快速改版以后变成了在左边的“right_box”。这不就是相当于歪曲事实的真理么?但其实最重要的是第一点,这样的工作方式和我们以往的table布局工作方式有差别么?你提个改个样式需求,全公司(设计、页面、开发、功能测试、CE数据监测)都跟着你去跑,这是很不智的。
上面说完不对的,下面给大家看看代码段:
HTML代码:
示例代码 [www.Mb5u.com]
<div id="index_news" class="mode">
<h3 class="title">公益新闻</h3>
<div class="content">
<ul>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
</ul>
</div>
<a class="more" href="#">更多</a> </div>
<h3 class="title">公益新闻</h3>
<div class="content">
<ul>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
<li><a href="#">新闻标题Mb5u.com</a></li>
<li><a href="#">CSS网页布局的语义化不仅只是限定在HTML!Mb5u.com</a></li>
</ul>
</div>
<a class="more" href="#">更多</a> </div>
CSS代码:
示例代码 [www.Mb5u.com]
.mode{
position:relative;
float:left;
font-size:12px;
}
.mode h3.title,
.mode h4.title{
color:#234C00;
padding:5px 10px;
font-size:14px;
}
.mode .more{
top:5px;
right:10px;
font-size:12px;
color:#4282ab;
position:absolute;
}
.mode .content{
clear:both;
}
.mode .content:after {
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
#index_news.mode,
#index_bbs.mode,
#index_area.mode{
background:url(small_gray_grid.png) repeat-y -400px bottom;
width:200px;
margin:5px 0 5px 5px;
}
#index_news.mode h3.title,
#index_bbs.mode h3.title{
background:url(small_gray_grid.png) no-repeat -200px top;
}
#index_news.mode .content,
#index_bbs.mode .content,
#index_area.mode .content{
background:url(small_gray_grid.png) no-repeat -600px bottom;
display:table;
}
position:relative;
float:left;
font-size:12px;
}
.mode h3.title,
.mode h4.title{
color:#234C00;
padding:5px 10px;
font-size:14px;
}
.mode .more{
top:5px;
right:10px;
font-size:12px;
color:#4282ab;
position:absolute;
}
.mode .content{
clear:both;
}
.mode .content:after {
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
#index_news.mode,
#index_bbs.mode,
#index_area.mode{
background:url(small_gray_grid.png) repeat-y -400px bottom;
width:200px;
margin:5px 0 5px 5px;
}
#index_news.mode h3.title,
#index_bbs.mode h3.title{
background:url(small_gray_grid.png) no-repeat -200px top;
}
#index_news.mode .content,
#index_bbs.mode .content,
#index_area.mode .content{
background:url(small_gray_grid.png) no-repeat -600px bottom;
display:table;
}
大家可以看到模块化思想的优势在于哪:
可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。
可以高度自由化的适应任何产品经理、任何老板的不同变态需求。
任何关于表现上面的修改不需要动用到开发人员,不需要功能测试。
CE数据监测绑定到id,不需要重新调整接口。
每个人担任单个模块的快速迭代开发。
另外就代码而言。标题就是标题,内容就是内容;总不会那种歪曲事实、自己打自己嘴巴的状态。
我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样,能力和慧根属其次,人品首当其冲。
我以为,XHTML好比一个人的本质,CSS好比人的处事方式和态度,JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构,也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素,其实自然而然的也就代表了一种人生观。的确,一个人没有好的处事方式和态度很难在现在的社会很好的存活;但是这个处事的方式和态度位置过于偏重了,就成了一个善于欺骗、做事不择手段的人。您的见解欢迎与我分享,可以在Mb5u.com评论,也可以到W3Cbbs.com发贴。
这个是一直想说的,有了CSS你可以将左右顺序变成右左顺序,他就是一个网页中的魔术师。你总不能把他乱用,去成了一个善于欺骗、做事不择手段的人。
相关Web标准教程:
- 相关链接:
- 教程说明:
Web标准教程-CSS网页布局语义化探讨。