sdk简易模版开发心得.doc

简易模版开发简易模版的开发说起来也比较简单，需要做的是熟悉火狐的使用方法及div+css的使用，难的是做好每一个布局的优化。1. 建立模版模版类型：建立你想设计的模版，我们现在讲简易模版所以选择简易模版。目录名称：是在模版目录下创建的，创建模版的名称。都在目录htdocs文件夹下。模版名称：我自己的理解是用于关键字的搜索的，如：商城女装|三色样式|通用模版。模版版本：起始为1.0.0，当你上架后需要修改某个模块或者添加某个模块可以下架后升级。模版缩略图：保存在assets/images文件夹下的图片，用于让用户区分模版外观的。这里的384*600是比例并不是像素，用户只需要按这个比例来进行缩略图的制作，当然你按这个比例制作缩略图也是可以的。调用数据类型：这里可以理解为你的模版要使用于那个行业。模版备注：用于说明模版的功能和作用。2. 建立模块建立模版以后跳转进入此界面，1. 创建布局：可创建通栏的（950代码：grid_m0）两栏的（750代码：grid_s5m0 .col_main;190代码：gird_s5m0 .col_sub）三栏的一般很少用这里不做讲解了。根据你所需要的创建好每个模块，这里要说明的是宝贝推荐如果要做的每个布局都适用就需要把各个布局写好优化好。具体的后面的代码阶段会讲解。2. 开发模块：2.1皮肤的设置：皮肤可使用纯色或单一的图片元素进行平铺完成，步骤：在我的模块里面选择管理风格default编辑背景颜色中填入颜色值；图片，先将图片保存至： TAE_SDKhtdocstestassetsimages目录下。背景图片：较小的图片作为皮肤背景会选择垂直平铺，具体效果结合前面皮肤背景。对齐方式：调整图片在页面的位置，一般选择为中上。坐标调整：坐标调整一般为微调。2.2设置页头背景（也就是banner背景）其设置方法和设置皮肤背景是一样的。这里要说明的是：banner背景高度是150px的宽度可以设置为全屏宽度，一般为1500px。2.3. 设置banner店招：说明：我是以刘雯做的蝴蝶模块为范本。.tshop-pbsm-shop-custom-banner .skin-box-bd .banner-box background-image:url(assets/images/dz.gif);代码解析：刚建立的店招模块，系统会设置默认的店招图片，如图店招尺寸是可以调整的：系统默认为950*118px。加上下面的导航模块(32px)一起是150px。首先覆盖系统图片，可用代码：background-image:url(assets/images/dz.gif)，括号里面的地址是图片所在位置;效果如图：其中的文字设置可使用代码：.grid-m0 .tshop-pbsm-shop-custom-banner .skin-box-bd .title,.grid-m .tshop-pbsm-shop-custom-banner .skin-box-bd .title, .tshop-pbsm-shop-custom-banner .skin-box-bd .title这里的代码是重复的做的优化，以上三句都是代表一个意思那就是店招的标题，这里写三句是让这句代码在各个浏览器中都能使用。.grid-m0 .tshop-pbsm-shop-custom-banner .skin-box-bd .title, .grid-m .tshop-pbsm-shop-custom-banner .skin-box-bd .title, .tshop-pbsm-shop-custom-banner .skin-box-bd .titlebackground:none; margin-left:270px; font-size:35px; color:#512c02; font-family:黑体;括号里面的是设置店招标题的属性：如果不需要店招标题带背景颜色或者图片可以设置：background的属性为none(即为空)；margin是外边距属性与其对应的padding是内边距属性，两者都是设置元素所在的位置Font是字体属性可以设置其大小（size），字体样式（family）;color是设置颜色的（这里是设置字体的颜色）。效果如图：说明：如果想要标题居中显示可以使用text-align:center;不过你的标题宽度就需要声明为950px的,width：950px。2.4 导航模块：（.tshop-pbsm-shop-nav-ch），因为导航系统默认为通栏950的所以不用声明布局。.tshop-pbsm-shop-nav-chheight:32px;代码解析：这里的.tshop-pbsm-shop-nav-ch是导航全局的div设置因为导航和店招一起是150px的；店招需要留一点高度（height）给导航一般是32-35个像素具体的需用户自己调配。.tshop-pbsm-shop-nav-ch .all-cats .linkdisplay:none;代码解析：这句代码是设置全局下拉菜单div的属性，display是控制该div的显示其中none表示无或者不显示。Link是其中的链接元素。.tshop-pbsm-shop-nav-ch.menu-list.linkbackground-color:#512c05; background-image:none; color:#FFFFFF; border:#512c05; height:32px;代码解析：这里的link是代表带超链接的元素，如首页。这句代码的意思控制导航中所有带链接的元素。border属性是设置元素边框的。.tshop-pbsm-shop-nav-ch .menu-list a:hover color:#512c05; font-size:18px;代码解析：a:hover(a是代表div里面的a标签也就是带链接的元素，hover是一个鼠标经过事件)这句代码的作用是设置元素鼠标经过所发生的属性更改。简单来说就是一个元素初始一个属性，设置hover后鼠标经过改变成另外一种属性。2.5 搜索模块：搜索模块需要做模块布局优化，所以我们最好是写三个布局的。首先通用布局：也就是不声明是哪个布局的全部通用的那个布局，代码：.tshop-pbsm-shop-srch-inshop。950布局：代码：.grid-m0750布局：代码：.grid-s5m0 . col-main . 190布局：代码：.grid-s5m0 . col-sub . 其中的属性更改都是大同小异的，就不多做解析了。说明：其中的skin-box-hd代表头部，skin-box-bd代表主体也就是标题下面的内容区。如果定义头部的属性代码需这样写：950的.grid-m0 . tshop-pbsm-shop-srch-inshop . skin-box-hd 750的.grid-s5m0 . col-main . tshop-pbsm-shop-srch-inshop . skin-box-hd190的.grid-s5m0 . col-sub . tshop-pbsm-shop-srch-inshop . skin-box-hd如果定义主体的属性代码需这样写：950的.grid-m0 . tshop-pbsm-shop-srch-inshop . skin-box-hd 750的.grid-s5m0 . col-main . tshop-pbsm-shop-srch-inshop . skin-box-hd190的.grid-s5m0 . col-sub . tshop-pbsm-shop-srch-inshop . skin-box-hd其中，h3一般用作标题 span用于定义这个标题区域 btn代表按钮 price,key代表价格名称price .connect-line 代表价格框之间那条线price input 代表价格框keyw