1 / 14
文档名称:

ECshop 模板设计教程.docx

格式:docx   大小:504KB   页数:14页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

ECshop 模板设计教程.docx

上传人:zxwziyou9 2019/7/24 文件大小:504 KB

下载得到文件列表

ECshop 模板设计教程.docx

文档介绍

文档介绍:大家好,在论坛泡了也有一段时间了,今天把EC模板制作修改方面的一些东西整理下,算是一个教程吧,希望对大家有点帮助想对EC模板进行修改、美化,前提是你必须对EC的文件结构有一定的了解,有DIV+CSS方面的基础,还有smarty方面的基础。建立在这些基础上,经过一定时间的尝试才可以对EC模板的修改得心应手,OK,下面我们开始一、()()+CSS基础知识如果你连这个什么都不懂的话模板基本是没办法改的,因为EC采用的是DIV+CSS布局,所以对这方面必须有所了解,给大家推荐我的CSS站点些基本的CSS教程,可以边学边尝试,,但smarty引擎的东西必须有所了解,不然库文件里很多相关代码看起来会觉得头痛,都是一些基础的语法,()二、EC模板修改提升篇OK,有了以上的基础,可以来学****这一篇章,但前提是上面给出的三个基础必须搞明白,就跟建房子一样,不建好地基,,因为其他的一些浏览器基本都是用的IE内核(1)火狐下用firebug进行测试,可以下一个火狐,然后在工具》附加组件里搜索firebug,出来后选择安装即可,安装好后按F12可以调出(2)IE我一般用IETESTER进行测试,因为可以在你的电脑中同时开启IE各种版本的环境先安装IETESTER,然后安装DEBUGBAR调试工具[local]4[/local]关于以上2个调试工具怎么使用我就不在这里累赘了,,这类文件需要专业的编辑工具进行编辑,切记不可用记事本编辑,特别是UTF8用记事本编辑会出错,在这里推荐DRM,即Dreamweaver或者Editplus也可以=====================================================第一篇章:如何删除首页品牌空白区域《见20楼》第二篇章:如何设计、美化和调用底部帮助文章列表《见24楼》第三章:商品分类模块的美化与设计《见35楼》第四章讲解预告:导航模块的美化与设计OK,经过了这么长时间大家如果对一楼的介绍有过基础后可以来看这一篇章《模板修改实例操作》,CSS将品牌区的高度写好了,而你又没在后台添加品牌,所以会看到空白区域,当然也有可能是广告区域预先写死了在模板中,各模板不同,:,如下发现图中今日特价右侧有空白区域,在火狐按F12调出FIREBUG工具*****注意:FIREBUG中深蓝色区域的代码仅仅是商品品牌模块的内层,外层包含的才是整个模块***<divclass="boxf_rbrandsIe6">    <divid="brands"class="box_1clearfix">          </div>    </div>复制代码步骤二:查看商品品牌模块外框架内的所有模块结构我们发现品牌模块左侧是ID为sales的特价模块层,外层框架是class为clearfix的层步骤三,+F搜索brands跳到如下行很明显发现了特价和品牌区域都是引用的库文件如果用不到品牌模块并且想不显示这个空白区域,解决方案:》在模板中删除对应的品牌模块,注意是整个品牌模块区删除,不是只是库文件删了就可以的!    <!--品牌-->    <divclass="boxf_rbrandsIe6">    <divclass="box_1clearfix"id="brands">      <!--#BeginLibraryItem"/library/"--><!--#EndLibraryItem-->    </div>    </div>复制代码》删除后我们发现右侧的空白区域仍然存在这是因为前面的特价模块的CSS宽度写死了,需要修改CSS》,把width改为750px》改好后刷新页面,发现右边空白区域已经没有,但模块顶部的背景图片短》这也是因为背景图片本身就只有500px宽,制作的死的,需要重新作图images/》重新作图覆盖后刷新页面,效果如下OK,大功告成!=========下节讲解预告:如何设计、美化并