标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计

2024-05-01

标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计（共2篇）

篇1：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计

未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对

的恐惧.

对搜索引擎的友好

这是最大的优点.搜索引擎十分喜欢标题标签,标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的

标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.

搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完和标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.

所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?

附带一提的标签顺序

在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签

,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:

Super Cool Page Title

那么下一个标题(如果不是另一个

的话),就应该是

篇2：标准化设计解决方案 Part 1: 从标记语法谈起 Chapter 2 标题网页设计

之后直接使用

.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.

如同先前所述,设计者可能会使用

代表页面里最重要的标题,只因为它的预设字体大小不如

那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.

概要

让我们大致上回顾一下,为什么使用标题标签(

到

)来标记页面内的标题会比较好.

方法A:

可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别.

搜索引擎不会特别重视以标记的标题

我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.

方法B:

可视化浏览器只会用粗体显示内容,继续使用预设的字体大小.

我们无法为标题加上和内文不同的独特样式

搜索引擎同样不会特别重视以

创建的标题的内容.

方法C:

传达了标题标签中的文字确切的含义.

不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容

搜索引擎会重视标题标签中的关键字.

技巧延伸

这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)

简单的样式

使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的

标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个

的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?

让我们超级酷的标题来告诉我们自己吧:

Super Cool Page Title

让我们用css来改变它的颜色,字体和大小吧:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

}

就像我们刚才所说的,非常简单,整个页面的所有

都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 2-2:

图 2-2: 标题样式示例

接下来我们继续在标题文字下面加上1像素宽的灰色边框(如图 2-3):

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-bottom: 4px;

border-bottom: 1px solid #999;

}

图 2-3:加上灰色底边的标题样式示例

我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.

另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.

加上背景

背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #fff;

padding: 4px;

background-color: #696;

}

我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.

图2-4:设定了内补丁和背景色的标题示例

背景和边框

只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.

这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #666;

padding: 4px;

background-color: #ddd;

border-bottom: 2px solid #ccc;

}

借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:

图2-5:设定背景和底边的标题

平铺背景

用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):

图2-6 用Photoshop创建的小图片

我们可以用css把这个小图片放到我们的

底部去:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-bottom: 14px;

background: url(10x10.gif) repeat-xbottom;

}

设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)

图2-7:设定平铺背景的标题示例

方便替换的图标

我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.

代码和上面的平铺背景大致相同:

h1 {

font-family: Arial, sans-serif;

font-size: 24px;

color: #369;

padding-left: 30px;

background: url(icon.gif) no-repeat 0 50%;

}

我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.

图2-8:设定了图标的标题示例

容易更新

让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!

如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.

变色龙效果

下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在4月为Fast Company杂志的网站(www.fastcompany.com)做标准重构时大量使用的技巧.

那时我们在网站里的

标签旁边用了许多13X13的小图标,就像这样:

FIRST IMPRESSION

有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.

为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:

图2-9: 13X13的透明图标(放大后)

为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对

标签内的图片使用这条规则,以便达到我们想要的效果:

h3 img {