大家一起来博皮——1：两行代码一个皮肤，树立信心篇

saybody

浏览: 902473 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<div style="border: 1px dotted teal; float: right; text-align: center; font-size: 9pt; color: teal;">
<img src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/BSLogo.gif" alt=""><br>
大家一起来博皮</div>
<p>虽然博客园的皮肤很多，而且很漂亮。但是那些自己想更“个性化”自己博客皮肤的朋友，对博客园的皮肤模板还是颇多不满，认为皮肤的结构过于混乱，css样式难以掌控。针对这种情况，博客园开发团队在2007年底，对博客园皮肤模板进行了较大程度的改进和调整，力求让更多的朋友能够更方便、简单的制作自己个性化的博客皮肤。</p>
<p>但是，到底如何利用新的皮肤模板，来制作个性化的博客皮肤呢？且看《大家一起来博皮》系列文章，告诉你制作个性“博皮”的秘密。</p>
<h4>引言</h4>
<p>博客园开发团队在2007年底，对博客园皮肤模板进行了较大程度的改进和调整。这下，博友们自己终于可以更方便的制作“博皮”了。 </p>
<p>因为，我一直希望能做一套自己个性化的博皮。所以，第一时间便对这个新的博客皮肤模板进行了一些研究和摸索（当然，现在也仍然在继续对探索中……）。这里，我将自己对这套博客皮肤模板的一些探索结果和经验技巧，写成系列文章，拿出来和大家一起分享。不仅希望能得到大家的指点，也希望更多的，和我一样热爱博客园的朋友，能够制作出更美、更漂亮的博皮，让大家一起分享！</p>
<p>今天这篇文章，是用来树立信心用的，所以会很简单，甚至“无味”，但是为了兼顾到一些对css不是很熟的朋友，还请各位高手海涵。</p>
<h4>工欲善其事，必先厉其器</h4>
<p>不急，不急！先别急着看新的皮肤模板。让我们先来找点能够“事半功倍”的工具。</p>
<h5>利用“IE Developer Toolbar”查看页面DOM和CSS信息</h5>
<p>相信“IE Developer Toolbar”是很多开发者的朋友，利用它可以很方便地在IE下面查看网页DOM结构和CSS样式信息。还没有使用过这个工具的朋友，这篇文章可能对你有所帮助。 <a title="IE Developer Toolbar" href="http://www.cnblogs.com/JustinYoung/archive/2007/04/19/good-tools-for-web-developer.html" target="_blank">《介绍两个b/s开发中我常用到的小工具》 </a></p>
<p>上篇文章中虽然提供了下载，但是却没有进行使用说明。其实“IE Developer Toolbar”都是用很简单，所以下面就进行一下简单的说明吧。</p>
<h6>第一步：下载安装</h6>
<p>没有什么好说的，下载地址和简要介绍可以参看<a title="IE Developer Toolbar" href="http://www.cnblogs.com/JustinYoung/archive/2007/04/19/good-tools-for-web-developer.html" target="_blank">《介绍两个b/s开发中我常用到的小工具》 </a>这篇文章。</p>
<h6>第二步：确定安装成功</h6>
<p>打开IE（不能是IE内核的第三方浏览器，例如傲游，theWorld等），看IE上方的工具栏中是否出现了下图中所示的“IE Developer Toolbar”图标。</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin01.gif"></a><br>
“IE Developer Toolbar”图标</div>
<p>如果，你没有发现这个图标，请在IE工具栏中点击鼠标右击 →【自定义】→在【自定义工具栏】对话框的左边看是否有。如果还没有的话，请重新安装“IE Developer Toolbar”。</p>
<h6>第三步：用“IE Developer Toolbar”查看页面DOM</h6>
<p>点击“IE Developer Toolbar”图标，即可打开“IE Developer Toolbar”（界面如下图所示）。</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin02.gif"></a><br>
“IE Developer Toolbar”界面</div>
<p>上面是菜单和工具栏，左面是IE当前打开页面的DOM结构；中间是“当前元素”的属性；右面是“当前元素”的样式。</p>
<p>使用“通过点击获得元素”按钮，便可以通过在页面上点击，来将鼠标点击的元素变成“当前元素”了（超链接也可以放心的点击，不会跳转的）。如下图所示。</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin03.gif"></a><br>
“通过点击获得元素”按钮</div>
<p>通过上面三步，我们便可以分析网页的DOM结构和各个元素的样式啦。</p>
<h5>在FireFox中利用firebug</h5>
<p>FireFox中有一个firebug，功能更强大。有兴趣的朋友可以下载自己研究一下，因为这篇文章是用来树立信心的，所以就不讲这些强悍的东西了。</p>
<h5>FireFox下的“Web Developer”</h5>
<p>FireFox下另外一个功能强大的，网页开发者一定会喜欢的插件。有兴趣的朋友可以下载自己研究一下，因为这篇文章是用来树立信心的，所以就不讲强悍的东西了。</p>
<h4>现在就开始吧！</h4>
<p>最新的博客皮肤模板的名称叫做“custom”，但是今天我们先不讲这个皮肤模板，而是从另一个博皮开始，它的skin名叫做“FFandIE”，它是根据“custom”皮肤模板制作的一个新的博皮。</p>
<p>你可以通过下面的步骤，将你的博客皮肤设为“FFandIE”。</p>
<p>进入你博客园博客后台→【选项】→【Configure】→【Display Skin】。在这里选择“FFandIE”→【SAVE】保存。</p>
<p>为什么要使用“FFandIE”博皮呢？那是因为——</p>
<ol>
<li>这个博皮是根据最新的博客皮肤模板“custom”制作的，所以前面的XHTML结构是最新的。
    </li>
    <li>这个博皮还蛮漂亮的，至少俺比较喜欢。呵呵……
    </li>
    <li>这个博皮带那个FireFox狐狸缠绕IE的图标是整个博皮的灵魂，只要替换这个图标就能更换整个博皮的灵魂，从而产生一种“像一个全新的皮肤一样”的感觉。
    </li>
    <li>文章标题“两行代码一个皮肤”，就是根据这个皮肤来的。 </li>
</ol>
<h4>两行代码一个皮肤</h4>
<p>当你看“FFandIE”博皮时，最吸引眼球的无疑是那个FireFox狐狸缠绕IE的图标。的确，整个博皮的风格就是这个图标。当你将这个图标替换后，你就会发现，整个博皮的风格也会随之改变。那如何来替换这个图标呢？其实很简单——</p>
<p>使用“IE Developer Toolbar”工具，我们可以得到那个图标附近的DOM结构（如下图所示）。DOM结构很简单，其实就是一个超链接<a>标签（id为“lnkBlogLogo”）里面，包一个图片<img>（id为“blogLogo”、大小为121px*145px）。</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin04.gif"></a><br>
图标附近的DOM结构</div>
<p>如果想换图片，我们通常的做法是直接修改img的url地址。但是，我们制作新的博皮时，并不能修改前台的结构，自然也不能修改图片的url地址。那怎么才能更换这个图片呢？其实很简单——要显示图片，并不一定要使用<img>标签，利用元素的背景图片也一样能达到效果。所以只要简单的两句就能达到效果。</p>
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; font-size: 13px; margin-bottom: 15px; width: 98%; background-color: #eeeeee;">
<span style="color: #008000;">/*</span><span style="color: #008000;">让现有的图片消失</span><span style="color: #008000;">*/</span><span style="color: #800000;"><br>
#blogLogo</span><span style="color: #000000;">{</span><span style="color: #ff0000;">display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">none</span><span style="color: #000000;">;</span><span style="color: #000000;">}</span><span style="color: #800000;"><br></span><span style="color: #008000;">/*</span><span style="color: #008000;">用超链接的背景图片呈现效果,可以根据你自己的图片设置width和height，以及用top和left来设置图片的位置</span><span style="color: #008000;">*/</span><span style="color: #800000;"><br>
#lnkBlogLogo</span><span style="color: #000000;">{</span><span style="color: #ff0000;">display</span><span style="color: #000000;">:</span><span style="color: #0000ff;">block</span><span style="color: #000000;">;</span><span style="color: #ff0000;">width</span><span style="color: #000000;">:</span><span style="color: #0000ff;">121px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">height</span><span style="color: #000000;">:</span><span style="color: #0000ff;">145px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">top</span><span style="color: #000000;">:</span><span style="color: #0000ff;">5px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">left</span><span style="color: #000000;">:</span><span style="color: #0000ff;">50px</span><span style="color: #000000;">;</span><span style="color: #ff0000;">background</span><span style="color: #000000;">:</span><span style="color: #0000ff;">url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo06.gif')no-repeat</span><span style="color: #000000;">;</span><span style="color: #000000;">}</span>
</div>
<p>那么将这两句话，放在什么地方呢？其实，博客后台有个【通过CSS定制页面】，只要放在那里，我们自定义的样式就会覆盖原有相对的样式了。</p>
<p>具体步骤：进入博客园博客后台【管理】→【选项】→【Configure】→【通过CSS定制页面】→将上面的两句代码贴在这里就可以了（当然，最后还要保存修改才可以）。如下图所示：</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin05.gif"></a><br>
【通过CSS定制页面】</div>
<p>然后，返回你博客首页，看看效果吧～是不是还不错呢？</p>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/" target="_blank"><img alt="web标准设计" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blogskin06.gif"></a><br>
最终效果截图</div>
<h4>相关资源</h4>
<p>这里是一些可能对你有用的图片和资源（为什么不将下面的图片立刻用在上面学到的知识中呢？）——</p>
<ul style="">
<li>“FFandIE”博皮图标设计（psd格式）： <a title="博客园博皮小组" href="http://files.cnblogs.com/JustinYoung/blogSkinlogo.rar">点击下载</a>
    </li>
    <li>可能对你有帮助的图片01——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo01.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo01.gif">
</li>
    <li>可能对你有帮助的图片02——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo02.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo02.gif">
</li>
    <li>可能对你有帮助的图片03——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo03.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo03.gif">
</li>
    <li>可能对你有帮助的图片04——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo04.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo04.gif">
</li>
    <li>可能对你有帮助的图片05——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo05.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo05.gif">
</li>
    <li>可能对你有帮助的图片06——<br>
    地址：<br>
    http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo06.gif<br>
    效果图：<br><img alt="博客园博皮小组" src="http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/yzyLogo06.gif">
</li>
</ul>
<h4>博客园博皮小组</h4>
<div class="floatRPic">
<a title="博客园博皮小组" href="http://space.cnblogs.com/group/bs/" target="_blank"><img alt="博客园博皮小组" src="http://space.cnblogs.com/pic/group/g100229.gif"></a><br>
博客园博皮小组</div>
<p>这是《大家一起来博皮》系列第一篇，高手看来可能比较不屑。但是，每个人都有个性化自己博客的权利。所以，为了照顾到更多的朋友，还是写了这么简单的东西。最后做个广告——对制作博皮有兴趣的朋友来参加<a title="【博客园博皮小组】" href="http://space.cnblogs.com/group/bs/" target="_blank">【博客园博皮小组】</a>哦，让我们一起制作出更多、更漂亮的博皮！</p>
<p>如果你对博客园博皮制作有兴趣和疑问，请你访问<a title="【博客园博皮小组】" href="http://space.cnblogs.com/group/bs/" target="_blank">【博客园博皮小组】</a>，发挥你的想象，让单调的黑白变成绚丽的彩色吧！</p>
<h4>下期预告——</h4>
<p>真正的来接触新的博客园皮肤模板“custom”吧。对于高手，先透露一个网址吧——<a title="剥离出来的静态页面和开发文档" href="http://skintemplate.cnblogs.com" target="_blank">http://skintemplate.cnblogs.com</a>，这个是由博客剥离出来的静态页面，结构和真正的博客皮肤是一样的，这样就可以方便的在本地调试和修改了。这些，都将是下期会讲到的哦。</p>
<p><strong>注意：新的博客皮肤模板，页面中98%以上的元素都可以通过CSS选择符明确的定位到（2%没有改变是因为考虑到历史遗留问题和修改成本）。这样只要通过修改CSS样式表，而不用修改页面结构就可以制作出新的博皮。所以，制作博皮的朋友请注意：请只通过修改CSS来制作新的皮肤，而不要修改前面的XHTML结构哦。如果有什么地方，你认为不能通过CSS来控制，请向博客园【<a title="博皮小组" href="http://space.cnblogs.com/group/bs/" target="_blank">博皮小组</a>】反馈。谢谢！</strong></p>

分享到：