Mouselife——鼠标生活

以此纪念我流失于鼠标之上的那些青春……

EMLOG风格制作教程(理论篇)

post by Kuma / 2009-12-2 22:33 Wednesday / About Designs / 标签: emlog theme 模板 教程

        在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,你会发现页面效果与先前网站打开的页面显示效果一模一样。这就是网页复制技术。

        好了,今天的教程就到这里,后续教实例教程请继续关注本博客。

 

引用地址:

评论:

bearing2
2010-07-30 22:18
友情链接申请
枫雪
2010-05-16 15:19
发现不居中..靠左怎么办呢?
博主回复:将那个div标签的css这样写:{margin:0 auto;}应该就能居中了。如果还不能居中的话,就是其它问题了,情况很多,具体问题具体分析,好好学学div+css就好。
天天天兰
2009-12-03 10:59
还想问一下,在IE上点击文件,保存全部网页,保存下的图片是不是和你的方法下载的图片一致?
博主回复:恩,是一致的,你那种方法要简单一些,但是下载来后的html结构被更改过,虽然显示效果一致,但是有改动。本博文说的方法是正统的,完全复制的。
天天天兰
2009-12-03 10:55
为什么不同时发布在论坛中呢,~
博主回复:论坛是同步发布的

发表评论: