Donews Blog小花招02--打造自己的徽记

有人要求写写keso的K，我的白，是怎么弄上去的，今天就完成这个功课。

在Blog标题上插入一个图片，直接在后台配置里使用HTML是不行的，它要利用CSS完成，因此，焦点在自定义CSS中。

在看具体代码之前，再次声明，不同皮肤的具体做法是不同的。

通俗的讲，Donews Blog头顶上那块区域都是标题区，但程序内部，他们有不同的名字和处理方式。

举例来说，keso的皮肤，标题没有定义层（DIV），而是直接用HTML标记(H1)实现的，为了方便定制和控制，给HTML标记起了名字，也就是ID。

而在缺省的Cogitation皮肤中，整个头部根据显示的内容，分成很多层。

每个皮肤系统是如何处理版面布局的，都可以通过查看页面源代码获得。

准备工作

不管用哪一种皮肤，首先要做的一件事，制作你的徽记图片，上传到相册中，为了避免混乱，可以设置为不可见。

这时，你就为这个图片在网上安了家，获得了图片的网络地址，记住这个地址，后面我们会用到它。

keso皮肤下插入徽记的例子

下面，我们先看看keso皮肤下的图片插入实现。

首先，发现在keso皮肤里，blog主标题是通过id为header的H1控制显示的，因此，我们要定义这个H1的样式。

代码如下：

#header {
       background: #d1c8b9 url("http://blog.donews.com/images/blog_donews_com/laobai/63312/o_bai.gif") no-repeat;
       color: #000000;
       padding-left: 66px;
       height: 20px;
       border-bottom: 1px solid #d1c8b9;
       margin : 0px;
       padding-bottom: 25px;
       font-family: "Courier New", Verdana, monospace;
}

其中第一行，就是为这个元素设置了背景颜色和图片地址。因此，如果要替换自己的图片，只要替换上面URL括号中的地址就可以了。

如果需要更改背景颜色，修改#后面的六位数字就可以了。这个6位数字，代表16进制的RGB颜色，每两位表示一种颜色。大家可以在Photoshop的调色板里，选取一种喜欢的颜色，在颜色对话框中，可以看到该颜色的RGB6位数值。

第三行的Padding-left也比较重要，如果不设置这个被称为左内缩进的参数，那么图片和文字将会重迭。这个数字的取值，略微大于你的图片宽度就可以了。

Cogitation皮肤下插入徽记的例子

接下来，看看Cogitation皮肤的CSS代码：

.HeaderTitles {
    background: url("http://blog.donews.com/images/blog_donews_com/laobai/63312/o_bai.gif") no-repeat;
    padding-left: 66px

}

你会发现，具有关键意义的语句很类似，都是利用CSS设置背景的特性，也都考虑了左内缩进。

不同的，是定义在HeaderTitles上，而且前面是.，不是#。

这里介绍一下，如果前面是#，那么表示这个CSS是针对HTML标记的ID定义。即<h1 id=header>,如果是.，则是针对HTML标记的class定义的，即<td class="HeaderTitles">。

要详细说明这个问题，我们需要仔细看看Cogitation皮肤的这部分代码：

<div>
       <table>
                <tr>
               <td class="HeaderTitles">
              <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://blog.donews.com/laikankan/">laikan</a></h1>
              <p id="tagline">laikan</p>
              </td>
              </tr>
    </table>
</div>

最外面的，定义了这是一个层，然后使用了一个表格。其实，这个表格只有一行一列。

在这个页面中，虽然主标题的字体也是用<h1>控制字体大小的，但并没有为h1命名id，所以，我们要寻找其他地方，最后，发现td最合适，而且td虽然没有ID，但通过Class指定了CSS显示风格，于是，我们就修改一下这个Class标记。

多说一句，理论上，也可以为H1定义背景，但那样，因为既没有ID，也没有Class，将导致所有的H1标记都会被添加背景图片，这不是我们希望的结果。

更高级的插入图片技巧

对这个区域更高级的控制，可以参见dodo的代码。

http://blog.donews.com/dodo/archive/2005/08/05/495230.aspx

这是Dodo提供的“一起放风筝”模板的（基于keso皮肤）全部代码，我们只关心图片是怎么插入的。

dodo直接利用了h1的背景图片功能。

h1 {
    margin:0px;
    background:url("http://blog.donews.com/images/blog_donews_com/dodo/54776/o_blogheader.gif") no-repeat;
    height:175px;
    padding-right:35px;
    font-family: ms shell dlg;
    font-size:16px;
    font-weight:bold;
    border-bottom:6px solid #ADBB88;
}

之所以能这么做，可能是因为他比较清楚，这个Blog中，其他地方，都不再使用<h1>这个HTML标记。注意，直接为HTML标记设置CSS，在HTML标记前，既没有#，也没有.。

这还不算完，这只是插入了下面这样的一张大图片，如果你的显示器屏幕比较宽，效果会很难看。

因此，在dodo的代码中，还有这样一句：

body {
    margin:0px;
    background: #f8f8f8 url("http://blog.donews.com/images/blog_donews_com/dodo/54776/o_blogbg.gif") repeat-x;
    font-family:ms shell dlg;
}

这里，值得注意的是repeat-x属性，它强制把背景图片横向重复显示。如果你像我一样，看到了这个背景图片的模样，你就知道了它和h1的背景图是如何一起工作。