默识| Notepad ：分析博客模板的好帮手

抽屉 2007-05-26

展开全文

Notepad++：分析博客模板的好帮手

Published on 09/04,2006

　　前面的文章中介绍了编辑博客模板的基本常识，包括 HTML 语言，CSS 样式表和简单的模板布局方案等。然而，这些都是比较浅显的入门知识，现实中使用的博客模板是非常复杂的，仅仅了解这些内容远远不够，要想真正从头设计，还需阅读很多现有的博客模板代码，借鉴其它人的经验。在这里，我向您推荐一款开源免费的文本编辑器：Notepad++，它可以在您阅读网页代码时给您很大帮助。

　　Notepad++ 如何给代码阅读带来帮助呢？如前面的教程中讲到的，HTML 代码是成对的网页标签层层包裹的结构，而在博客模板中，通常是用 div 这种矩形块来布局。所以，要理解模板结构，首先应当看到最外层的 div 标签是如何排放的，这样就看到了整个模板的框架，随后再分析每个 div 内部的代码就可以逐步把握整个博客模板的结构了。Notepad++ 有一个很棒的功能，那就是将网页代码显示为可折叠的形式，当您不关心一对标签内部的结构时，可以轻松地将这部分内容折叠起来，只留下您感兴趣的部分。

用 Notepad++ 查看和编辑 HTML 文件　　左图是我的博客首页的模板代码，如果您直接在页面上点击右键并选择查看源代码的话，恐怕立刻就会被一坨一坨的标签搞得头晕眼花，但当您将我的首页另存为 HTML 文件并在 Notepad++ 中打开时，就可以看得清楚些。经过一些简单的折叠动作便可以看到页面的总体框架：最外层用 id 为 container 的 div 包裹，里面有四个 div，顶部是 banner，底部是 footer，中间的两部分分别是 content 和 sidebar。当然如果不参考样式表的话还不能直接看出 content 和 sidebar 其实是并列的。

用 Notepad ++ 查看和编辑 CSS 文件　　那么该如何查看 CSS 样式表呢？如果您将一张网页完整地存储到本地，CSS 样式表通常就位于和网页同名的 .files 目录里。Notepad++ 识别 CSS 样式表的语法，也可以用它查看和修改 CSS 样式表，编辑时还可以通过快捷键调出输入提示，减少重复乏味的属性名拼写。除了 HTML 和 CSS 之外，Notepad++ 还支持很多其它编程语言的语法高亮，如果对默认的字体配色方案不满意，还可以自行设定。因为是绿色软件，Notepad++ 的设置信息都保存在程序目录下，即使复制到其它机器上运行，配置也不会丢失，所以特别适合放在优盘上使用。

　　当然 Notepad++ 并非没有缺点，如果某个博客首页的代码写得不规范，它也可能对网页的结构做出错误的分析。比如我曾在一篇文章中嵌入一个媒体文件，但没有严格按规范书写，只写了 <embed ...> 而没有写关闭标签 </embed>。结果 Notepad++ 就把它和后面紧邻的 </div> 配对了；此外，一定让重要的起始标签另起一行，比如 <head>...</head><body> 这样的写法就会造成折叠 <head> 标签的时候把整个 <body>...</body> 都隐藏掉。要避免这种情况，利用查找替换功能将代码中所有的 "><" 都通过正则表达式替换为 ">\n<"即可。

　　也许有些朋友会问，我听说设计网页都用 Dreamweaver，没怎么听过这个 Notepad++ 啊？个人认为 Dreamweaver 是设计整个网站的时候才需要的工具，用来设计博客模板会有大材小用的感觉。其实我用过的网页编辑工具中最棒的当属微软的 VS.NET 2005，不仅启动速度超快，对网页代码分析纠错的能力也很强，还能根据代码结构重新缩进，使代码层次分明，更具可读性。遗憾的是它是个体积超过 2 G 的大家伙而且价格昂贵，除了专业编程人员，恐怕没人会考虑用它来编辑博客模板了。