国外网站大全·环游世界互联网

当前位置:首页 > 网上开店 > >

内容详情

收录时间:2010-08-21

标题

自己动手做网店模板设计

已阅0
投稿须知

网站介绍

学习一门技能的第一步,这篇文章不是要写基础知识的学习。认为并不需要去买一本书照着做,如果你直接动手,一边做一别找资料,更容易发生耐久的兴趣。   

如果你有自己设计 Wordpress Blogspot 等经验。先要学习一些基础知识。当然,会网店设计不等于能设计的好看,设计是否好看是另外的话题,这篇文章只说说如何自己动手设计网店。  
 

需要学习的基础知识: HTML CSS Photoshop Dreamweav  
 

后两个是工具的使用。不要被这些语法和工具吓倒,前两个是要了解和记忆的语法。其实最好的学习方法,就是一边学习一边设计网店模板。发现问题,学习问题,解决问题是最快的方法。学习过程是由点到面,由粗到细的这样的方法不会因为枯燥乏味而提前放弃。根据 Opencart 模板设计,把学习的过程介绍一下。  
 

打开目录: /catalog/view/theme/default/ 这个 Default 目录里就是网店的设计。文件夹里还有 image,Opencart 软件下载之后。stylesheet,templ 3 个目录,分别是用来存储设计图片, CSS 文件,模板文件。  
 

另外取一个你喜欢的名字:
 

Step 1. 把 Default 目录复制一个新目录。通常是网站域名。例如 IECSP 目录。这个目录下是有 Default 一样的文件夹和文件。  
 


Step 2. 把新目录上传到网店服务器空间里(如何在虚拟主机中安装 Opencart 请到 Opencart 网站寻找协助)新目录要和 default 目录是同级的父目录是 theme 然后再到 Opencart 软件的管理中心把模板改成你新文件夹 IECSP 这时候你访问网店页面。   

使用 Notepad++ sf.net 里下载 ) 打开这个文件,
 

Step 3. 找到 stylesheet 目录里 stylesheet.css 文件。会看到很多 CSS 语句。看不懂不用怕,学习的方法就是做一点,学一点。 

 

找到 bodi { margin: 0px;padding: 0px;text-align: center; } 语句,
 

Step 4. 先尝试把背景色修改成黑色。后面添加一句: bodi { margin: 0px;padding: 0px;text-align: center; background:#000000;} 之后你保管这个文件,再上传到网店主机的相同目录中,覆盖旧文件。  
 

会发现网页背景色已经是黑色的虽然很难看,Step 5. 刷新网店网页。但是这已经是自己设计的 

再根据这个修改思路,下一步你可以把 Logo 换一下。找你想修改颜色,字体的位置,然后再 CSS 文件中进行修改,如果不会就到 Googl 里搜索 CSS 语法,反复尝试,会发现你改的越多,网页越漂亮。当设计和 default 模板有较大差别的时候,会充溢成果感。
 

分享给小伙伴们:
站长头像赫赫无敌:探索互联网世界,收集和分享实用互联网资源,推荐国内和国外知名、实用、创新、科技、优质的站点资源!互联无极限,探索无止境;分享求真知,网络无国界!
更多>>

同类站点推荐

评论

关于我们|联系方式|版权声明|关于图片|友情链接|

分享互联网优秀资源-国外网站推荐

Copyright ◎ 2014 egouz.com, All Rights Reserved.| 目前收录国外网站 个!

国外网站大全 版权所有 冀ICP备11014106号-