把内容与显示效果分开设定的好处之一就是灵活,通过用CSS控制网站的版面布局(在第十二章用过的方法),就能控制整个网站的设计要素,改变几条规则,就能立刻戏剧性的更新上千个页面.
用CSS控制布局的的便利性示范之一,就是为<body>指定样式,通过为<body>标签加上class或者id,就能对页面的任何标签进行自定义控制.完全没有重复定义的烦恼.
在这一章里,将探讨如何通过为<body>标签加上class而让我们用一份标记结构切换两种不同的版面配置.
两栏或者三栏的布局
就像用CSS版面布局技术为Fast Company重新设计网站时,挑战之一是:虽然所有页面都共享相同的导航,页尾区,但是也需要建立两种不同版面布局.
第一种布局是"索引页(首页)",见图15-1,这是具备导航功能的页面,让使用者能继续深入网站的目录结构.这些页面我们决定使用三栏布局.
图15-1 Fast Company的三栏"索引页"示范
第二种页面布局则是"内文页" 图15-2.任何感觉是目的地的页面都使用这种版面布局.为了提升易读性,我们决定省略左边栏,留下两栏,也就是一个大栏放置内容,另一个放广告.
图15-2 Fast Company的两栏 "内文页" 示范.
我解释这些的原因不是为了证明我们破解了某个版面布局的伟大谜团,而是为了示范为<body>标签加上class就能调整栏宽,并且根据页面形态放置或省略去第三栏.制作这样的效果的时候,完全没有重复任何规则,也没有引入任何额外的样式表.
标记和样式结构
在开始叙述两种页面共用的标记结构之后,这些叙述就会开始变得很有道理,为了达成分栏布局,会使用在第十二章里提过的绝对定位法.
内文页
内文页简化过的标记结构看起来像是这样:
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
以CSS规则为#content与#footer加上足以使用绝对定位法放进#right的右外补丁,在这个例子中,190像素刚好可以满足.
#content, #footer {
margin: 10px 190px 10px 10px;
}
索引页
对索引页来说,标记结构完全相同,因此不必复制一份共享的CSS规则,但是在#content左侧加了额外的<div>作为第三栏(#left).
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="left">
...left column info...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
对这份三栏结构来说,不仅要为#content与#footer设定右外补丁以容纳右栏,还要设定左外补丁,容纳新加进来的左栏.
但是先前已经把左外补丁设为10像素了,以配合只拥有双栏的预设内文页布局.
哇,我们卡住了,该怎么继续呢?请继续往下阅读.
这个<body>有分类
这就是<body>标签加入游戏的地方:通过为<body>指定class,指定这个是索引页,就能为这个分类编写特殊的规则了.
举例来说,为了要覆盖预设的10像素左外补丁,就需要为索引页的<body>标签加上一下这个分类.
<body class="index">
在原本为#content 与 #footer设定补丁的规则之后,我们加上以下的CSS:
#content, #footer {
margin: 10px 190px 10px 10px;
}
body.index #content, body.index #footer {
margin-left: 190px;
}
在把<body>标签设为index分类的页面里,左边扩大190像素(与右边相同)可以用来容纳左栏,如果不指定index分类的话,左外补丁就会是预设值里声明的10像素了.
现在就能在两栏,三栏布局之间切换了,只要为<body>标签指定分类,在需要的时候为标记源代码加上额外的<div>即可,你也能指定更多分类,能处理的页面类型数目并没有限制.
标记区域与名称可以维持相同,根据页面类型进行微调即可.
不止处理分栏
我以切换Fast Company网站的分栏数目作为例子,但是相同的想法也能自定义页面上的任何元素.
举例来说,如果在索引页上让所有以<h1>标注的页面标题以橘色(而不是预设的颜色)显示,你可以在预设值之后加上额外的CSS声明.在所有页面上,都能使用以下这段CSS:
h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 140%;
color: purple;
}
而这段CSS只会对索引也发生作用.
body.index h1 {
color: orange;
}
你应该已经发现了,只需要在专门用于索引页的声明里面加上跟预设值不同的规则即可.在这个例子中,再使用<body class="index">的页面上,<h1>标签会以140%大小的橘色Arial字体显示,但不必为<h1>加上class,或是加上其他额外的标签.
我在这里用的是非常简单的例子.不过你能开始想象为<body>标签指定适当的class,建立多种页面类型的可行性,这些分类可以用来触发完全不同的版面布局,色彩组合与设计,只需要单一的CSS文件,十分类似的标记源代码结构就能办到.
你在这里"
除了为<body>标签加上分类属性之外,加上id也能得到有趣的结果.
举例来说,技术高超的设计师或许能以<body>标签的id处罚导航元素,提示使用者目前位于哪个页面,让我们看看这要如何才能办到.
导航清单
在这个例子中,将借用第一章"技巧延伸"里面提到的迷你分页标签,这边的导航条用了一个单纯的无序清单,里面包含了几个链接,像是这样:
<ul id="minitabs">
<li><a href="/apples/">Apples</a></li>
<li><a href="/spaghetti/">Spaghetti</a></li>
<li><a href="/greenbeans/">Green Beans</a></li>
<li><a href="/milk/">Milk</a></li>
</ul>
你或许记得我们以CSS为这个清单加上样式,把项目转成水平排列,同时在鼠标移过的时候显示标签.图15-3是浏览器显示的效果.
图15-3 水平导航条,显示标题效果
你或许还记得为了达成 "你在这里" 的效果(将某个链接的标签固定在"选定"状态),而将想要固定的链接加上了class:
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
我们也加了一条CSS规则,为class="active"的链接应用background-image:
#minitabs a.active {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
然而有另一种方法可以完成这个效果,能不动到导航条的标记源代码,但是又能突出使用者目前所在的页面,那就是为"body"标签指定id.
判别组件
首先必须先为导航条的每个<li>标签加上id属性,这只需进行一次,接着这个无序清单可以不经变动直接用在每一页上,甚至能显示"你在这里"的效果.
<ul id="minitabs">
<li id="apples_tab"><a href="/apples/">Apples</a></li>
<li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
<li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
<li id="milk_tab"><a href="/milk/">Milk</a></li>
</ul>
在前面这一小段源代码里,我们为每个li加了个简短的id,字字符串尾加上_tab以避免重复.稍后就能看出道理何在.
现在完成了清单的标记语法,现在我们能把它忘了,这可能很方便,视你使用的模板,内容管理系统而定.
这个效果唯一需要变动的地方只有<body>标签的id,这样就能凸显使用者所在的页面.举例来说,如果想告诉浏览器目前正位于Apples页,就可以像这样为<body>加上id:
<body id="apples">
或者是,加上id代表目前正处在Beans页面:
<body id="beans">
以此类推.
CSS的魔力
要根据<body>的id来"点亮"标签,只需要一组CSS声明,告诉浏览器每种可能发生的组合:
body#apples #apples_tab a,
body#spag #spag_tab a,
body#beans #beans_tab a,
body#milk #milk_tab a {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
基本上这就代表了:当<body>标签的id是apples的时候,就为#apples_tab清单项目加上链接背景,同时把连接色彩换成黑色,然后为,每个标签选项重复类似的声明.
现在需要"点亮"导航条内正确的动作只剩下变更<body>标签的id了.这段CSS会处理好剩下的事情,同时能在未来网站新增页面时进行修改,以便处理更多种组合.
举例来说,如果想根据使用者目前位于这一页,"点亮"Beans标签的话,只需要像这样为<body>标签指定id即可.
<body id="beans_tab">
然后正确的标签就会凸显出来,就像图15-4一样(这边我们用了第一章解释的"mini-tab"样式).
图15-4 为<body>标签指定id所选定的标签
我们也能为<body>指定其他在标记源代码,CSS里都声明过的id,"点亮"我们希望凸显的其他分页标签.
除此之外,你也能以相同的概念触发页面里其他与内容相关的事件,像是子导航目录,或者根据页面的id轮换颜色.由于<body>标签位于顶层,因此它的id可以用来控制页面里任何在它底下的标签.
归纳
迁移到用CSS作为基础的布局方法后,你一定会对更大的灵活性感到惊讶.在这一章里,我们看了善用这种灵活性的方法之一:也就是使用<body>标签的class或是id来控制页面的分栏结构,或是标识使用者目前所在的页面.
使用标准,模块化开发网站有何好处?这些不过只是简单的例子而已,通过<body>标签的一个属性,就能改变整个页面(甚至是网站)的布局,设计与样式.
