设计 培训资料.

Presentation on theme: "设计 培训资料."— Presentation transcript:

1 设计 培训资料

2 目 录 广告位图片 一 促销页的制作 二 1.套用模板 2.在PS里设计 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

3 广告位图片 1.首页广告位 一 宜齐网购商城的广告位按照类别分：首页广告位和大类页广告位
首页广告位即网站： 首页所展示的广告位 首页广告位分为：首页头部广告位（顶通栏） *80px *80px 首页滚动位 770*270px 首页左侧广告 206*200px （可根据产品来定广告数量改变高度） 首页右侧（下期团购底部广告位）广告 210*260px 首页各楼层的banner1 广告 1200*80px 首页各楼层的banner2 广告 205*400px ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

4 将设计好的首页和大类页广告图片用FTP上传到服务器 Advertise 文件夹中
广告位图片 一 2.大类页广告位 大类页广告位即网站按类别点进后所展示的大类页中的广告位 大类页广告位分为： 大类页滚动位 *270px 大类页左侧广告 （可根据网站的美观来设置是否显示图片） 大类页右侧广告 210*260px （可根据产品来定广告数量改变高度） 大类页楼层的banner1 广告 *80px 大类页楼层的banner2 广告 *390px 将设计好的首页和大类页广告图片用FTP上传到服务器 Advertise 文件夹中 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

5 广告位图片 一 首页广告位 和 大类页广告位 上传位置 首页广告位分为：首页头部广告位（顶通栏） 首页滚动位 首页左侧广告、首页横条广告
首页广告位 和 大类页广告位 上传位置 首页广告位分为：首页头部广告位（顶通栏） 首页滚动位 首页左侧广告、首页横条广告 首页下期团购底部广告位 （右侧） 大类页广告位分为： 大类页滚动位 大类页左侧广告、大类页横条广告 大类页右侧广告 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

6 1 4 2 3 审核 取消审核 更新 广告位管理：更新广告位的步骤 广告位图片 一 根据广告位类型进行选择
更改FTP上传后广告图的链接地址名称 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

7 广告位图片 一 首页广告位 和 大类页广告位 上传位置 首页广告位分为：首页各楼层的banner1 广告 1200*80px
首页广告位 和 大类页广告位 上传位置 首页广告位分为：首页各楼层的banner1 广告 1200*80px 首页各楼层的banner2 广告 205*400px 大类页广告位分为：大类页楼层的banner1 广告 *80px 大类页楼层的banner2 广告 *390px ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

8 更改 Banner1和 Banner2两 个图片的 链接地址
广告位图片 一 1 推荐商品维护： 更新Banner1和Banner2广告图的步骤 根据展示区域 进行搜索：是 首页或大类页 2 3 选择 右侧 更新 按扭 更改 Banner1和 Banner2两 个图片的 链接地址 4 选择更新 即可 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

9 目 录 广告位图片 一 促销页的制作 二 1.套用模板 2.在PS里设计 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

10 促销页的制作 二 1 套用 模板 2 PS 设计 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

11 1 促销页的制作 二 套用 模板 1、复制一份以前做好的模板促销页 更改文件夹的名称 2、文件夹中有三个文件夹 一个html文件
1、复制一份以前做好的模板促销页 更改文件夹的名称 2、文件夹中有三个文件夹 一个html文件 CSS文件夹：存放样式 Images_cx2 文件夹：存放网页模板中的图片 Js 文件夹：存放的是脚本文件 ???.html文件 模板页 需要修改 无需修改 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

12 1 题头 活动说明 背景 左角标签 导航 促销页的制作 套用模板需要修改的images_cx2 文件夹中的图片： 二 套用 模板
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

13 1 画面主体 促销页的制作 1.题头 二 套用 模板 根据提供的活动主题设计 题头 1350 * h px 980*h px 高度不限
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

14 1 促销页的制作 2.活动说明 3.导航条 二 套用 模板 活动说明的宽度 980*h px 高度不限
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

15 1 将这五张图片重命名，按照日期+活动命名。其它图片不需更改 促销页的制作 4.左角标签 5.背景 二 套用 模板
左角标签大小：55*74px 大小固定，图片格式png格式 5.背景 将这五张图片重命名，按照日期+活动命名。其它图片不需更改 背景大小：92*95px 大小固定 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

16 1 将CSS文件夹里面的.css文件重命名 将.html网页文件 重命名
促销页的制作 二 1 套用 模板 将CSS文件夹里面的.css文件重命名 将.html网页文件 重命名 命名方式：年月日+活动名拼音缩写 如 jiaoshijie.html ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

17 促销页的制作 二 1 套用 模板 更改之后的文件夹命名 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

18 1 促销页的制作 开始代码修改 在DW中将促销页面打开——源代码
二 1 套用 模板 开始代码修改 在DW中将促销页面打开——源代码 1.更改标题 ：代码第6行:<title> 促销页标题名称 汉字</title> 2.更改引用css文件名:代码第96行: <link href="css/17-jjdhz.css" rel="stylesheet" type="text/css" /> 将红色框选的地方CSS文件名称更改 3.在DW中打开.css文件 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

19 1 2 1 促销页的制作 css代码修改 二 套用 模板 修改images_cx2 文件夹中图片的名称 修改导行条 楼层的数值
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

20 1 促销页的制作 images_cx2文件夹css代码修改 二 套用 模板 将images_cx2文件夹中修改的图片
按照相对应的位置进行更改 1.修改头部图片代码 2.修改背景图片代码 3.修改导行图片代码 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

21 1 促销页的制作 images_cx2文件夹css代码修改 二 套用 模板 4.左角标签图片名称更改 5.活动说明图片名称更改
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

22 1 促销页的制作 二 套用 模板 导行条CSS修改 导行条根据产品选择楼层,如下图 6个楼层 高度可以更改,但必需是2的倍数
宽度固定980px 164px 高度可以更改,但必需是2的倍数 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

23 1 促销页的制作 二 套用 模板 导行条CSS修改 计算 980除以6后的数值=163 163 326 489 652 815
163 326 489 652 815 宽度为980除以6后的值163 整个图片的高度164 六个楼层 每个导行 图片的起 始位置和 整个高度 的一半 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

24 1 促销页的制作 二 套用 模板 导行条CSS修改 将下图画红色边框的地方进行更改设置 只改变宽度的数值，高度不变
整个高度164 的一半82 宽度为980除以6后的值163，高度为整个高度164 的一半82 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

25 促销页的制作 二 1 套用 模板 保存css文件 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

26 1 修改促销页的源代码 促销页的制作 二 套用 模板 根据产品选择楼层数量，如果是4个楼层，则把其它两个楼层隐藏,把<!--
<!--one floor--> 根据产品选择楼层数量，如果是4个楼层，则把其它两个楼层隐藏,把<!-- 放在第五个前面 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

27 1 将修改好的进行保存 预览效果 促销页的制作 二 套用 模板 [楼层数-产品数量排序] 如 [2-6] ，意思是第二个楼层的第六款产品
更改每个楼层的产品数量，多的删除，少的复制并修改数值 [楼层数-产品数量排序] 如 [2-6] ，意思是第二个楼层的第六款产品 按照各个楼层把 楼层以及产品排序 编排好 将修改好的进行保存 预览效果 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

28 1 促销页的上传 促销页的制作 二 套用 模板 1.将修改好后的促销页根文件夹发给技术：告知几个楼层多少款产品 2.打开宜齐商城的后台
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

29 促销页的制作 二 1 套用 模板 3.新增 促销页 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

30 1 促销页的制作 二 套用 模板 促销页的名称 查询中选择呼和浩特 选择新促销页的模板 一个ID购买 的种类数量，如一个人可以购买
6类产品，则填6。如果没有限制，则为0 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

31 促销页的制作 二 1 套用 模板 添加产品 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

32 促销页的制作 二 1 套用 模板 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

33 1 促销页的制作 添加内容完毕 点击保存 继续新增商品： 二 套用 模板 商品添加完毕后审核 发布促销页 生成促销页
添加内容完毕 点击保存 继续新增商品： 商品添加完毕后审核 发布促销页 生成促销页 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

34 促销页的制作 二 1 套用 模板 查看生成促销页 出现页面预览效果： ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

35 1 促销页的制作 二 套用 模板 将生成促销页网址0001/后面信息复制 粘贴到有头尾的网址：替换cncb ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ
便宜 齐全 快捷

36 促销页的制作 二 1 套用 模板 最后出现有头尾的页面 此页面为模板最终展示页面 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

37 1 展示 促销页的制作 在首页滚动广告位中上传制作促销页的广告图 在后台促销页的广告图上添加对应的链接地址 二 套用 模板
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

38 目 录 广告位图片 一 促销页的制作 二 1.套用模板 2.在PS里设计 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

39 2 1.在PS中设计促销页 2.在PS中将设计好的促销页切片 3.保存成 .Html 网页文件 4.将页面在DW中修改代码 促销页的制作
二 2 PS 设计 1.在PS中设计促销页 2.在PS中将设计好的促销页切片 3.保存成 .Html 网页文件 4.将页面在DW中修改代码 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

40 2 促销页的制作 PS 设计 二 切片促销页设计流程： 画面设计完成后用切片工具将画面切好: 压缩储存位图像和html格式
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

41 2 促销页的制作 PS 设计 二 保存后出现文件夹，其中包括一个images文件夹和 一个html文件：
将html格式文件用 dreamreaver 打开、 在第6行处修改背景颜色： ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

42 2 促销页的制作 PS 设计 二 勾选使用正则表达式： 在第8 、9行处修改主题 添加居中对齐设置 align=“0”
去除切片痕迹：将 alt=“” 修改为 "宜齐商城 勾选使用正则表达式： ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

43 促销页的制作 二 2 PS 设计 将所有的图片的边框去掉: border=“0” ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

44 促销页的制作 二 2 PS 设计 选择有链接的切片图 添加链接： ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

45 2 促销页的制作 PS 设计 二 然后添加链接标签：在网址后加 target=“_blank” 打开链接出现新窗口
此时完成了一个切片的点击过程 添加完成后预览 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

46 2 促销页的制作 PS 设计 二 上传服务器。将根文件夹用FTP上传 到 advertise/cxy/文件夹里 上传成功
在FTP里 html页面可以替换 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

47 2 促销页的制作 PS 设计 二 加上固定网站头尾的链接：
17shop.com:8008/Advertise/cxy/ yutiaojiucx/yutiaojiu0905.html&h=2700 需要修改三个地方的信息 注 生成页面并展示后如需修改 页面 需要在源文件中修改 ，重复上面制作过程，发给技术部覆盖。 根文件夹名称 促销页名称 促销页高度 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

48 2 展示 促销页的制作 PS 设计 在首页滚动广告位中上传制作促销页的广告图 在后台促销页的广告图上添加对应的链接地址 二
ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

49 促销页 控制限购 促销页 六种类型 6.产品预定页面需添加团购 1.直接套用模板
促销页 控制限购 6.产品预定页面需添加团购 1.直接套用模板 5.对于每日限量销售的产品，需用PS设计一个展示页面，产品需添加限时抢购审核。 促销页 六种类型 2.用PS设计 4.一个页面套用多个模板页， 套用其它模板的产品需做成图片形式展示 3.前台用PS设计展示，后台套模板不展示 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

50 促销页 控制限购 套用一个模板 1.每个单独的套模板促销页面只能要求套一种格式， 价格会在活动开始时自动变价
促销页 控制限购 1.每个单独的套模板促销页面只能要求套一种格式， 价格会在活动开始时自动变价 如每个用户只能买6类产品，每款产品只能买 2个 或者 每个用户可以买多类产品，每款产品只能买2个 或者都不限量 套用一个模板 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

51 促销页 控制限购 无需套模板 2.每个单独的PS切片促销页 不能 套格式， 并且需各产品负责人自已修改 价格 以
促销页 控制限购 2.每个单独的PS切片促销页 不能 套格式， 并且需各产品负责人自已修改 价格 以 及 库存 开始时间也需人工添加上传展示 无需套模板 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

52 促销页 控制限购 后台套模板 3.设计两个页面 （1）设计一个静态页面切片保存 在前台展示 每款产品链接到产品页面
促销页 控制限购 3.设计两个页面 （1）设计一个静态页面切片保存 在前台展示 每款产品链接到产品页面 （2）设计一个模板页面 后台添加审核 在前台不展示 将两个页面设计 好，活动开始时在产品页自动 更改价格 后台套模板 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

53 套多种模板 促销页 控制限购 4.如果想套用两种及以上格式：则需先用模板做好每一种格式的促销页
促销页 控制限购 4.如果想套用两种及以上格式：则需先用模板做好每一种格式的促销页 在展示的页面中套用其它格式的产品需做成图片形式，并链接到相应 产品中，在活动开始后会自动调用后台未展示但已添加的模板促销页。 1.前台只展示一个页面，有要求的产品做成图片，无要求的直接套一个模板 2.用PS做静态图片 （静态图片链接产品页面，该产品套用另一个模板审核不展示） 3.其它无要求的产品套一个模板 套多种模板 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

54 每日限量 促销页 控制限购 5.如果是 一款产品每ID只能购买一件每日都限量销售，这类的产品需添加
促销页 控制限购 5.如果是 一款产品每ID只能购买一件每日都限量销售，这类的产品需添加 限时抢购。如一款茶叶，每日限量5个抢购，则需添加限时抢购并审核 。 （1）用PS设计一个静态页面，产品链接到产品页面 （2）在限时抢购的地方将限购的产品添加后台审核 （3）价格会在限时抢购开始时自动变价 每日限量 ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

55 预定…… 促销页 控制限购 6.如果是 产品的预定页面，则需要将产品添加团购，团购开始时间就是产品预定
促销页 控制限购 6.如果是 产品的预定页面，则需要将产品添加团购，团购开始时间就是产品预定 时间，结束时间就是预定结束，可以发货时间 （1）用PS设计一个静态页面，产品链接到产品页面 （2）在团购的地方添加产品并且后台审核 （3）价格会在团购开始时自动变价 预定…… ｗｗｗ．１７ｓｈｏｐ．ｃｏｍ 便宜 齐全 快捷

56 培训资料 设计 谢谢观看！