shopex_教程.pdfVIP

/shopex4-85%e9%a1%b6%e9%83%a8%e5%af%bc%e8%88%aa%e7 %bb%88%e6%9e%81%e8%af%a6%e8%a7%a3%ef%bc%88%e4%b8%80%ef%bc%89.html Shopex4.85 商店顶部导航终极详解（一） 我们先来看下简单版本的顶部导航效果,点击看大图 鼠标移动上去有高亮效果，但是有的朋友说能不能做，当前页面高亮效果，我只 能说部分可以，由于shopex系统只支持伪静态，通过javascript很难定位当前 页面的子页面。下面会详细讨论下，我们先看下这个效果。 首先要在photoshop中切出黑色导航背景，高亮图的背景，这部分就不说了。 顶部导航一般放在header.html中，所以在header.html放上一个div标记， 然后在这个div添加一个挂件位，如： div id=”menu” {widgets id=”menu”} /div 然后去商店后台添加挂件。添加版块 导航相关 商店导航菜单 版块边框选择无边框。导航数量决定了顶部导航的版块数量，如写上6，代表超 过6个版块将显示下面的文字。一般显示文字我填成空。超过的就隐藏了。但是 这里有个诡异的问题，就是即使是隐藏了也会在页面写有一个li的代码段。最 好的解决方法是在后台的页面管理 站点栏目 只显示必要的栏目。 我们可以保存后看下效果，这时的效果文字是竖排的，如下图： 现在我们用firebug插件看下HTML代码，然后用css来修饰导航， 让他变成我们想要的效果。 对于初学者来说，尽量不要修改挂件的HTML代码。当然修改HTML代码带来的好 处有很多。比如精简代码。 css代码如下 *{margin:0;padding:0;} #menu{background:url(nav.gif) no-repeat;padding:15px 30px;height:44px;} #menu ul li{float:left;}#menu ul li a{color:#fff;padding:0 25px;height:44px; line-height:44px;display:block;float:left;}/*float:left;是兼容IE6*/ #menu ul li a:hover{background:url(a_bg.gif) repeat-x;color:#333;} 那么一个简单的商店顶部导航就做好了，它的管理是在 页面管理 站点栏目 中，当然简单的商品分类也能这样添加。 下次讲的是商品分类多层的商店导航。 /shopex4-85%e6%a8%a1%e6%9d%bf%e6%95%99%e7%a8%8b-%e5 %88%b6%e4%bd%9c%e4%b8%80%e4%b8%aa%e9%a6%96%e9%a1%b5-%e5%ae%9e%e4%b e%8b%ef%bc%88%e4%b8%80%ef%bc%89.html Shopex4.85 模板教程-制作一个首页-实例（一） 现在我们做一个简单的shopex首页模板。 现在使用一个简便方法来快速的制作一个模板，在themes文件夹下新建一个文 件夹，起名为test。复制purple（紫气东来）模板下的所有文件，然后黏贴到 test文件夹下，这样文件架构基本都完成了，打开test/images，删除所有文件。 接下来修改配置文件。用编辑器打开info.xml,themes.xml文件，修改必要的 name标记（随便起个名字），id为test，可以删除borders下的边框配置， 放着也没什么大问题，删除themes.xml中widgets下的标记。widgets下的 东西是挂件的添加位置和内容，由系统自动生成的，不需要手动配置。 然后打开block/header.html文件。首先要确保你的head/head标记内含有 {header}，非常重要。然后在body标记下编写头部HTML，一般头部要添加 如下的挂件（商店 LOGO，商品搜索，会员注册/登录，商店导航菜单，购物车）， 给他们预留位置。但是布局一定要完成。 我们来看下简单的布局架构（点击放大） 添加不同的挂件位