你现在的位置:首页 > opencart 正文

opencart模板认识

如果你有自己设计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模板有较大差别的时候,你会充满成就感。

我在这篇文章不是要写基础知识的学习,我只是希望告知初学者一个好的方法。学习一门技能的第一步,我认为并不需要去买一本书照着做,如果你直接动手,一边做一别找资料,更容易产生持久的兴趣。

\