京东装修代码调整,像左边移动一像素

装修宝典011

京东装修代码调整,像左边移动一像素,第1张

京东装修代码调整,像左边移动一像素
导读:我以前在 *** 模块中放你说的这种经过切换的代码,被 *** 自动过滤,必须买模板才能用这种效果,我想京东也是一样一般 *** 特效代码很多不能用的,能用的就只有轮播和悬浮代码几种等等每一个店铺标配的4个页面都可以分别进行装修,在没有装修之前系统在每个页面

我以前在 *** 模块中放你说的这种经过切换的代码,被 *** 自动过滤,必须买模板才能用这种效果,我想京东也是一样

一般 *** 特效代码很多不能用的,

能用的就只有轮播和悬浮代码几种等等

每一个店铺标配的4个页面都可以分别进行装修,在没有装修之前系统在每个页面默认了一些常规内容,对于这些内容你可以删除、和修改。

每个页面的装修操作完全一样,这里我们以“店铺首页”的装修为例进行讲解。

页面装修要遵循的原则:

先添加布局-然后在布局里添加模块-然后设置模块的内容-最后发布共5个环节。

1、 布局介绍名词解释

布局:是指将页面划分为不同结构的条格,页面的所有装修内容必须放置到布局内;每一个页面可以有多个布局。

目前系统提供了12个布局供选择和组合使用。

特别说明:

每一个页面的最顶部会有一个通栏布局(没有删除、移动操作)该布局里面放置的模块会自动强制显示在店铺所有页面。

建议在该布局内仅放置店铺招牌、店内导航和主推活动的banner等内容;如果只想将内容显示在当前页面,请手动添加新的布局后再添加模块,请勿使用该默认布局。

2、添加布局

21可用的布局列表在装修页面点击顶部左上角的添加布局按钮,打开如下选择器:

一共有12个布局供选择。

22使用说明

点击添加后,该布局将显示在页面的更底部,如果必要需手动向上移动。

添加后的可视化页面显示“通栏布局(990)”:

当鼠标移动到布局区域内的时候会出现布局的名字、尺寸和操作,如上图:

名词解释

通栏(990):是该布局名称,同时指出该布局为宽度990px的通栏布局

红叉:表示删除该布局的操作,布局被删除时它所包含的内容也会一并被删除且无法恢复,操作需谨慎。

绿色箭头:表示布局可用的上下移动操作

重复以上操作我们可以根据设计目的向当前网页添加多个不同版式的布局,比如在某个页面添加了7个布局,显示如下:

注意事项:

布局添加后显示为一个虚线框,每一行虚线框都是一个独立的布局。上图中选中的是左右布局,常用来左侧放置分类,右侧放置推荐商品。

你可以根据自己的设计思路,选择使用1个或者多个布局;布局的使用数量建议不要超过10个。

3、模板介绍

选择了布局就等于是为装修设定好了大纲和框架,接下来我们就要往框架里放置内容。

名词解释

功能模块:提供某些特效内容的系统功能称为功能模块。

目前系统已有5个目录分类共15个功能模块。

可用的“模块”列表

在任意一个布局的左下角有一个为名为添加模块的操作按钮,点击会弹出如下:

由上图可以看出模块的所属目录和名称。

上图为“店铺基础模块”,该目录下共有4个功能模块:

分页显示商品:如果您有M个商品,设置每页显示20个,那么就会有M/20个分页,直接点击页码即可查看对应页面的商品列表;每一个页面上的商品可以按照销量价格好评数进行排序。

默认是按照SKU的上架时间从晚到早排序的,您可以通过更换模版来调整默认排序。

商品类目:该模块用来显示店铺内的商品分类。

店内搜索:该模块是店铺内搜索框,您可以根据设计要求将该模块放置在合适的位置。

店内搜索结果:顾名思义用来显示搜索结果的,该模块默认在“店铺内搜索结果页面”预置了,如无特殊要求请不要删除。

第二个目录显示如下:

由上图可见该目录下有2个模块:

销售排行:用来显示店铺内商品的销售榜单,默认是前10个。

商品推荐:这个模块使用的频率更高,诸如“热卖”“店长推荐”“重点推荐”等等均可以使用这个模块来实现。

品牌团:仅适用于第三方卖家。商家可在该模块的“设置”里通过SKU ID录入参加了品牌团购的商品。

第三个目录为“店铺营销”模块,显示如下:

由上图可看到该目录共有4个模块:

自定义内容区:大家又称为“HTML编辑器”,也是装修店铺使用频率更高的模块之一,目前自定义内容可以上传、写代码等。如果您懂一些dreamweaver、html、CSS DIV的话,使用这个模块可以让您装修出更炫的效果。

导航:比较好理解,即为输入一个关键词 并配置一个链接网址即可。

雷宁轮播图:通过编辑需要轮播的html片段以及背景颜色,实现html片段的轮播效果!

接下来看第四个目录“公司相关”,截图如下:

由上图可以看出该目录包含3个模块:

店铺简介:即显示品牌介绍内容的模块。

店铺公告:即显示店铺内公告信息的模块。

店招模块:即显示店铺招牌内容的模块。

接下来看第五个目录“公司相关”,截图如下:

由上图可以看出该目录包含1个模块

搭配详情:展示用户在搭配购里面的商品搭配,在“设置”里输入搭配id可置入搭配信息。

在装修的时候根据设计可以添加以上15个模块中的任意一个或者多个,同一个模块在一个页面上是可以多次被使用的。

4、添加模块

41、添加“分页显示商品”模块411添加的操作流程

选中要添加模块的布局,比如:

点击添加模块按钮,依次找到目标模块后点击置入,

模块置入完毕后,可对模块进行修饰和内容完善,操作如下:

412设置

点击模块的设置,会弹出如下操作面板:

如上图,默认选中的是皮肤操作。

413皮肤

名词解释

皮肤:用来美化该模块的边框和周边,详细功能

说明:

皮肤选择:系统预置了2套皮肤,可以快速选择使用

标题栏:用来设置模块标题区域范围内皮肤的操作

内容区:用来设置模块内容区域范围内皮肤的操作

底部栏:用来设置模块更底下区域范围内皮肤的操作

414模板

每一个模块系统都预置了1个或多个模版,通过更换模版可以使模块显示样子瞬间变化:

说明:

模版共分为“最近使用”“我的创建”和“系统模版”,分别含义如下:

最近使用:里面放置的是你最近使用过的模版,可以快速选择无须寻找

我的创建:里面放置的是你自己创建的模版

系统模版:官方或第三方开发者提供模版

415选项卡

名词解释

选项卡:是指和模块标题并列显示的可添加超链接的功能。选项卡的使用如下:

使用说明:

输入“超链接文本” 和“网址”如上图中的,然后点击增加,可以添加多个,最后点击批量更新,最后记得点击保存哦,待页面发布后可看到效果,点击刷新可即可看到效果哦。

42添加“商品类目”模块

421添加的操作流程

选中要添加该模块的布局,点击添加模块按钮:

选中“商品类目”模块,点击置入:

置入后显示如下:

点击模块名称后面的设置可进行该模块的内容完善和显示效果更换等。

422设置

点击设置后显示如下:

默认选中的是皮肤。

423皮肤

同413操作

424模板

同414

425选项卡

同415

43添加“店内搜索”模块

431 添加的操作流程

选中要添加该模块的布局,然后点击左下角的添加模块,举例如下:

点击添加模块后,弹出的操作面板中找到“店内搜索”模块,并点击置入:

置入后默认显示如下:

如上图可见,该模块位于“分页显示商品”的下面。

名词解释

模版的拖拉移动:鼠标移动到模块上,并按下左键,不松开左键同时移动鼠标可将模块移动到一个新的位置,比如上下交换位置等。

这时,用鼠标选中“店内搜索模块”,按下左键向上拖拉鼠标,待移动到目标位置时松开鼠标左键,即可将该模版移动到上面(同理也可以往下移动、跨布局移动等),如下:

松开鼠标:

即可完成模块的上下移动,当然模块的移动不局限于布局内,也可以在布局间来回移动哦。

点击该模块名称后面的设置,可进行内容修改。

432设置

如上图所示默认选中皮肤。

433 配置

名词解释

配置默认关键词:你可以设定一个搜索词,设定后该词会搜索框里默认显示出来。

配置热荐词:你可以设定3个推荐词,方便用户直接搜索而无须手动输入。

价格筛选:开启后可以让用户按照N元只M元之间来搜索你的店内商品。

434 皮肤

操作同413

435 模版

操作同414

目前系统预置有2个模版,截图如下:

436选项卡

操作同415

44添加“店内搜索结果”模块

441添加的操作流程

“店内搜索结果”模块默认预置在“店内搜索结果”页面里,如无特殊需求请勿删除。

系统预置该模块的显示位置截图如下:

点击页面装修显示如下:

当用户点击搜索按钮后,用该模块显示搜索结果的,如果删除了该模块,将无法显示搜索结果,请慎重操作,在没有把握的前提下请勿删除和移动该模块。

当然该模块也可以设置,如在上图中点击模块名称后面的设置。

442设置

默认显示如下:

如上图,默认选中了“皮肤”。

443皮肤

操作同413

444模板

操作同414

445选项卡

操作同415

45添加“销售排行”模块

451添加的操作流程

选中将要添加销售排行模块的布局,比如:

点击添加模块,在打开的操作面板中找到“销售排行”模块,并点击置入,

置入该模块后默认显示效果如下:

点击设置可进行模块内容配置。

452设置

点击设置打开操作面板默认是“皮肤”。

453皮肤

操作同413

454模板

操作同414

455选项卡

操作同415

46添加“商品推荐”模块

461添加的操作流程

选中要添加该模块的布局,比如:

然后点击添加模块,在弹出的操作面板中找到“商品推荐”模块并点击置入:

置入该模块后默认显示效果如下:

点击模块名称后面的设置可以补充内容。

462设置

点击设置后默认打开的是配置。

463配置

点击设置后会打开如下操作面板:

名词解释

ID录入:是指通过录入一批商品的SKU,来实现推荐商品的操作。

筛选录入:是指通过1、2、3级分类来批量录入商品SKU,实现推荐商品的操作。

1) ID录入:

如何查看商品的SKU请参考附件一:商品SKU的查看方式。

2) 筛选录入商品:

商品录入后点击保存,则商品推荐就操作完毕了。商品显示如下:

这个时候我们可以点击,该模块名称后面的设置来更换皮肤哦。

464皮肤

依次点击模块名称后面的设置,在打开的操作面板中选择皮肤,即可进行皮肤设置。

操作同413

465模板

依次点击模块名称后面的设置,在打开的操作面板中选择模版,即可进行模版设置。

操作同414

该模块是装修店铺时用到最多的模块之一,模版数量目前也比较多,截图如下:

466选项卡

依次点击模块名称后面的设置,在打开的操作面板中选择选项卡,即可进行皮肤设置。

操作同415

47添加“导航”模块

471添加的操作流程

选中将要添加导航模块的布局,比如选择一个通栏来做导航模块:

点击添加模版按钮,打开添加模块操作面板,找到“导航”模块并点击置入:

置入完毕后默认显示如下图,可点击名称后面的设置来完善导航模块内容:

472设置

点击设置按钮后会弹出如下操作面板:

默认打开配置操作。

473配置

名词解释

导航名称:是指待超链接的文字

链接地址:是指点击文字后打开的网址

添加完毕后点击保存即可看到效果。

474皮肤

操作同413

475模板

操作同414

476选项卡

操作同415

48添加“自定义内容区”模块

481添加的操作流程

选中将要用来添加该模块的布局,并点击该布局左下角的添加模版按钮,在打开的模块选择面板中找到“自定义内容区”并点击置入,

置入完毕后显示如下,可点击设置来完善内容:

482设置

点击设置默认打开配置内容区域,通俗称呼为“HTML编辑器”。

483配置

自定义内容区功能简述,自定义内容支持使用:

1) HTML代码(仅支持body标签内的代码,不含body)

2) 部分CSS代码:常用效果的CSS代码也可以

3) Script代码:常见的javaccript代码

4) 系统内置的js库js代码

如果你写入了CSS代码,那么为了避免和系统css冲突请在你的CSS代码前面添加user等标识,以避免和系统默认样式冲突。

484皮肤

操作同413

485模板

操作同414

因为轮播图模块可以用来做banner、导航、活动入口、重点推荐等诸多功能,所以该模块的模版按照用途去向分为几个小类,截图如下:

你可根据具体的使用目的灵活组合使用。

486选项卡

操作同415

49添加“轮播图”模块

491添加的操作流程

选中要添加轮播图模版的布局,通常用轮播图来做banner、首图等所以一般选择位于页面中上位置的布局:

点击添加模块按钮,找到轮播图模块并点击置入:

模块置入后默认显示效果如下图,可点击设置进行修改内容:

492设置

点击设置按钮,打开操作面板,默认会选中配置操作。

493配置

说明:

1) 点击选择上传轮播显示图。

2) 标题:输入每一张的标题。

3) 链接:输入每一张的链接到的网址,注意必须是京东网址。

操作完毕后点击保存,你最多可以设置8张轮播图哦。

494皮肤

操作同413

495模板

操作同414

496选项卡

操作同415

410添加“店铺简介”模块

4101添加的操作流程

选中要添加店铺渐渐诶(改)模块的布局,然后点击左下角的添加模块按钮,该模块默认预置在“店铺简介页”里。如果没有特殊需要,请勿删除和移动。

点击设置可对该模块进行管理和美化。

4102设置

说明:该模块的简介内容在供应商后台--我的店铺-店铺装修设置-品牌简介:

4103皮肤

操作同413

4104模板

操作同414

4105选项卡

操作同415

411添加“店铺公告”模块

4111添加的操作流程

店铺公告模块默认预置在店铺首页左下角的位置,如无特殊需要请勿删除。

4112设置

该模块的内容维护在“供应商后台”-我的店铺-公告海报管理-公告管理。

点击该模块的设置直接定位到皮肤操作

4113皮肤

操作同413

4114模板

操作同414

4115选项卡

操作同415

412添加“店铺招牌”模块

4121添加的操作流程

店招模块默认在每一个页面的顶部,如果无特殊要求请勿删除该模块。该模块的内容维护在“供应商后台”-我的店铺-店铺管理-店铺基本信息。

4122设置

点击可以进行修饰操作。

4123皮肤

操作同413

4124模板

操作同414

4125选项卡

操作同415

5、页面设置

页面设置包含背景设置和分享设置。

51背景设置

在每一个页面装修的时候,浏览器窗口的左上角都有一个按钮叫页面设置点击它可以看到背景设置

说明:

背景颜色:可以选择或者输入背景色颜色值。

背景宽度:用来限定背景色、背景图的宽度;数值单位是像素,留空则表示全屏。

背景:请上传一张,大小限制300K。

采用“背景”结合“自定义内容区”模块可以 *** 出诸如“全屏banner”之类的效果。

52分享设置

为店铺增加分享浮动条,可以选择显示在页面的左侧还是右侧,同时可以设定默认分享词;支持分享店铺到新浪微博,腾讯微博,人人网,开心,豆瓣等其他第三方网站。

分享词,留空则程序自动读取一段文字,建议手动撰写文案后保存。

说明:

分享词:建议输入140字符内,因为要分享到微博等网站,超出部分将被对方网站自动截断。

可能会影响微博内容的完整性。

京东店铺装修全部分类可以下拉:在我的店铺--店铺装修设置--店内分类管理,在里边可以添加修改删除店铺的分类。

效果设置好之后,将Dreamweaver视图切换成代码视图,获取装修代码。值得注意的是Dreamweaver 中的代码不是所有的代码,是代码视图中<body>和</body>之间的代码。另外代码中引入的地址应该换成自己空间里面的地址。

差异化原则:

服装店铺在进行设计时,必须把握差异化的定位原则,使自己的店铺与其他店铺有差异。店铺只有设计出与众不同的形象,展示自己的经营特色,树立个性化的风格、使用特色的道具装饰等,才能让消费者迅速的识别到店铺的经营特色和风格。

营造独特的氛围,烘托出所售商品的特色,是对其进行装饰时的原则。吸引顾客零售店铺外部和内部环境的设计要依照经营商品的范围、类别以及目标顾客的习惯和特点来确定,应以别具一格的经营特色,将目标顾客牢牢地吸引到店铺里来。要使顾客一看外观,就驻足观望并产生进店购物的欲望;一进店内,就产生强烈的购买欲望和新奇感受。