在emlog的官方论坛中看到很多关于风格制作的问题，大多人在移植其他模板的到emlog的过程中总是出现这样那样的问题。在论坛里也有篇以前奇遇写的移植WP模板到emlog的教程，以前我看了一遍，有点迷茫，而且有点复杂，并且兼容性比较低（只适合WP特定风格）。因此，我决定写个支持emlog风格的移植教程系列，通过这个系列教程，你可以将你在WEB中看到的一切适合博客的基于DIV+CSS网页改而支持emlog。至于这个系列要写多少篇日志才能讲完，我不知道，反正写一篇发布一篇吧。
在开始这个教程之前，你需要掌握HTML基础以及DIV+CSS基础。当然，如果你的悟性够高，你也可以在本系列教程中学会（我之前是不会DIV+CSS的，而我的DIV+CSS就是在自己扒模板支持emlog的过程中用一周学会的，这个一周内我没看过任何系统的关于DIV+CSS的书籍，当然，我同时也了解了emlog的结构和一些PHP基础，而之前我是一点PHP都不会的）。
本篇教程我们不先讲实际操作，先讲一下实现各种博客系统的模板和里近似博客系统网页支持emlog的理论的可能性。
从理论上来说，所有网页的风格都是可以完全复制的。不管这个网站是基于哪种语言架构的，但是到达我们客户端浏览器上却始终是HTML形式的静态页面。而构成一个页面的风格和效果的则是由CSS和JS实现的。CSS主要控制页面元素的位置、颜色、大小等；JS重要控制页面动态效果，以及特殊情况下的CSS的动态更改等。而网页的源代码、CSS、JS、图片、Flash等都是可以通过WEB得到的。如此，我们将所有东西下下来后，就可以还原网页。
来个例子吧，我们打开http://u.thinkworld.com.cn/thinku4/machineAction.do?method=listMachine&family=X 这个网站是联想的一款产品网站（个人觉得挺好看，呵呵）。好了，现在跟我做：
鼠标放在打开的网页内容上面，右键>查看源文件，然后将弹出的txt文件另存为index.html
用DW或者其他网页编辑软件打开这个index.html文件，查找“.css”字样，你会找到3行一样的包含index.css的代码，这个inde.css就是这个网页调用的CSS，现在我们把它下载下来，复制“style/index.css”，然后删掉浏览器地址栏里“thinku4/”后面的所有文字，将复制内容粘贴到后面，按下ENTER键即可下载到该css。将该css保存在index.html相同的根目录下，保存为index.css
•在index.html中，将所有“style/index.css”替换为“index.css”，保存。
•查找index.htm中所有以.gif和.jpg以及.png结尾的字样，这里以你查找到的第一个“images/thinsm.gif”为例，通过“”可以打开并下载到该图片，保存此图片到与index.html相同根目录下的images文件夹下（没有请在index.html相同根目录下新建images文件夹）。然后用相同方法下载所有图片保存到images文件夹下。
•由于该页面没有JS，所以不下载JS。JS的下载方法和上面下载CSS和图片的方法相同。
到此为止，所有工序完成，你打开本地刚刚保存的index.html，你会发现页面效果与先前网站打开的页面显示效果一模一样。这就是网页复制技术。
好了，今天的教程就到这里，后续教实例教程请继续关注本博客。
2011-01-13 16:14