Cs Tip02: 简单的站点头部
译自： http://soup.co.za/weblog/archive/2006/03/21/CS_Tip_02_Simple_Sitewide_Headers.aspx
一个自定义Cs最简单和最有效的办法就是做一个自己的站顶，我将带您一步步的做一个看起来还行并且对符合Web标准的站顶， 让我们先来预览一下最终效果.
假设: 我们要为一个Web2.0的网站 "MenuDo"创建站顶，也许你会问"MenuDo"是干什么的?我们再假设他是一家利用Fickr的WebService和Rss来创建服务的网站。我这里已经有了这样的一个logo，当然你也可以自己做一个 呵呵
包含logo的控件位于 /Themes/default/skins/Skin-TitleBar.ascx，当你打开这个控件时你会发现一些table和div标签，在这个控件中包含4个重要的元素
- 站点的标题
- 用户登录
- 搜索
- 导航条
代码
我们要去除那些不必要的代码并留下这四个元素，我写了下面的这些代码来代替原来的代码
（译者注： 替换掉Div标签开始和结束的代码， 顶部的Import等不要删除）
<div class="customheaderright">
<CS:DisplayUserWelcome runat="server" id="Displayuserwelcome1"/>
<div class="CommonSearch">
<CS:DefaultButtonTextBox id="TitleBarSearchText" runat="server" columns="15" maxlength="64" button="TitleBarSearchButton"/>
<asp:PlaceHolder Runat="server" ID="TitleBarSearchInArea">
<CS:ResourceControl ID="ResourceControl1" runat="server" ResourceName="TitleBar_SearchIn" />
<asp:DropDownList Runat="server" ID="TitleBarSearchDropDownList" />
</asp:PlaceHolder>
<span class="CommonSearchButtonOuter">
<asp:LinkButton id="TitleBarSearchButton" runat="server" cssClass="CommonSearchButton" />
</span>
</div>
</div>
<h1><CS:EditableLink id="TitleBarSiteName" runat="server" /></h1>
<div class="CommonTabBar">
<CS:RepeaterBar ID="RepeaterBar1" runat="server" />
</div>
现在问题变得简单了很多，我们用一个"customheaderright" Div来包含用户登录和搜索，H1来包含站点名称，再用一个Div标签来包含导航条， 如果你看/Themes/default/Master/Master.ascx 这个文件，你将会发现Skin-TitleBar.ascx被一个叫#CommonHeader的标记所包含， 如果我们去除掉所有的样式 Skin-TitleBar.ascx将会变成这样
现在我们写的样式还是不够完美，现在的导航条是在Table里，用一个无序列表会好多了
然而，现在也很容易了，ok，我们来修改Css
Css
第二步是修改 /Themes/default/style/Common.css 并添加对应的标记, 打开这个文件并在最后修改， 这样是为了快速定位
我们第一个要修改的标记是#CommonHeader, #CommonHeader是包含Skin-TitleBar.ascx的Div所对应的Id, 我们修改#CommonHeader的背景，背景见下图
我们给他取名为headerbackground.gif并放在custom文件夹下，图片背景色为#333 深灰色，我们也设置整个的背景色为深灰色
于是有了如下的代码
#CommonHeader {
background: #333 url(../images/Custom/headerbackground.gif) repeat-x top left;
}
下一步很重要， 我们要隐藏掉那些文字而且显示我们要显示的logo,我们采用http://www.mezzoblue.com/tests/revised-image-replacement/#phark2 所介绍的技巧
#CommonHeader h1 a {
text-indent: -5000em;
background-image: url(../images/custom/menudo.gif);
display: block;
height: 100px;
width: 300px;
}
我们所做的是用图片来取代原来的站点描述，将图片设置为链接的背景并将文字的缩进设置为很小，这样文字就隐藏掉了，这样你就有一个可以修改的logo，这样做既可以自定义站顶又没有去除原来的站点描述而对搜索引擎友好
这时的logo还不是在左上角因为，h1标签默认包含有margin所以我们还需要修改一下
#CommonHeader h1 {
margin: 0;
}
下一步要做的是把搜索和登陆放到右边，.customheaderright标签包含了这些元素，而且我们还要给定这个标签合适的width，请参考下面的代码
.customheaderright {
margin: 1em 1em 0 0;
text-align: right;
float: right;
width: 50%;
}
现在你的搜索和登陆应该在右边好好的呆着了，但是我还想改掉那些文字的颜色还有链接的颜色，请参考下面的代码
#welcome {
color: #FFF;
margin: 0 0 1em 0;
}
#welcome a:link, #welcome a:visited {
color: #ffbbdd;
}
#welcome a:hover, #welcome a:visited {
color: #cc3377;
}
现在我们已经完成了99%的工作，最后一步就是要移除顶部的绿色边框
#Common {
border-top: 0 none #333;
}
现在我们就得到了最终的效果, 查看
这些也许看起来很麻烦，其实做起来真的很简单,不妨一试
这是50 days of CS tips and tricks 系列的一部分，有问题您可以提出来
注意：
当您以管理员身份登陆时，您将发现原来包含站点链接的Div标签变成了h1
解决这个问题很简单，请参考下面的Css
#CommonHeader h1{
margin: 0;
}
#CommonHeader h1, #CommonHeader h1 a {
text-indent: -5000em;
background-image: url(../images/custom/menudo.gif);
display: block;
height: 100px;
width: 300px;
}
---------------------------------------
您也可以在这里提问，我将尽力解决您的问题 呵呵 谢谢您的支持
