在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”为例,通过“http://u.thinkworld.com.cn/think_u/images/thinsm.gif”可以打开并下载到该图片,保存此图片到与index.html相同根目录下的images文件夹下(没有请在index.html相同根目录下新建images文件夹)。然后用相同方法下载所有图片保存到images文件夹下。
- 由于该页面没有JS,所以不下载JS。JS的下载方法和上面下载CSS和图片的方法相同。
到此为止,所有工序完成,你打开本地刚刚保存的index.html,你会发现页面效果与先前网站打开的页面显示效果一模一样。这就是网页复制技术。
好了,今天的教程就到这里,后续教实例教程请继续关注本博客。