opencart模板认识

sunboy · 发表于 2010-10-26 10:21:57

如果你有自己设计Wordpress，Blogspot等经验，那可以说你已经会网店设计了。如果你任何经验都没有，你先要学习一些基础知识。当然，会网店设计不等于能设计的好看，设计是否好看是另外的话题，我们这篇文章只说说如何自己动手设计网店。　　需要学习的基础知识：HTML，CSS，Photoshop，Dreamweaver。

　　前两个是要了解和记忆的语法，后两个是工具的使用。不要被这些语法和工具吓倒，其实最好的学习方法，就是一边学习一边设计网店模板。发现问题，学习问题，解决问题是最快的方法。学习过程是由点到面，由粗到细的，这样的方法不会因为枯燥乏味而提前放弃。我根据Opencart的模板设计，把学习的过程介绍一下。
　　Opencart软件下载之后，打开目录：/catalog/view/theme/default/，这个Default目录里就是网店的设计。文件夹里还有image,stylesheet,template 3个目录，分别是用来存储设计图片，CSS文件，模板文件。
　　Step 1. 把Default目录复制一个新目录，另外取一个你喜欢的名字，通常是你的网站域名。例如IECSP目录。在这个目录下是有Default一样的文件夹和文件。
　　Step 2. 把新目录上传到你的网店服务器空间里（如何在虚拟主机中安装Opencart，请到Opencart网站寻找帮助），新目录要和default目录是同级的，父目录是theme。然后再到Opencart软件的管理中心把模板改成你的新文件夹IECSP。这时候你访问网店页面，是和default设计一样的。
　　Step 3. 找到stylesheet目录里stylesheet.css文件，使用Notepad++(在sf.net里下载)打开这个文件，你会看到很多CSS语句。看不懂不用怕，我们学习的方法就是做一点，学一点。
　　Step 4. 我们先尝试把背景色修改成黑色，找到 body { margin: 0px;padding: 0px;text-align: center; } 语句，在后面添加一句： body { margin: 0px;padding: 0px;text-align: center; background:#000000;} ，之后你保存这个文件，再上传到网店主机的相同目录中，覆盖旧文件。
　　Step 5. 刷新网店网页，你会发现网页背景色已经是黑色的了，虽然很难看，但是这已经是你自己设计的了。
　　下一步你可以把Logo换一下，再根据这个修改思路，找你想修改颜色，字体的位置，然后再CSS文件中进行修改，如果不会就到Google里搜索CSS语法，反复尝试，你会发现你改的越多，网页越漂亮。当设计和default模板有较大差别的时候，你会充满成就感。
　　我在这篇文章不是要写基础知识的学习，我只是希望告知初学者一个好的方法。学习一门技能的第一步，我认为并不需要去买一本书照着做，如果你直接动手，一边做一别找资料，更容易产生持久的兴趣。