（中职）网店装修（第二版）学习情境六 教案.docx

《（中职）网店装修（第二版）学习情境六 教案.docx》由会员分享，可在线阅读，更多相关《（中职）网店装修（第二版）学习情境六 教案.docx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、任务一自定义页面筹划一一、教学目标1、知识目标（1） 了解网店自定义页面的基础理论知识。（2）熟悉网店自定义页面的主要类型。2、技能目标（1）能正确理解自定义页面的作用。（2）能区分不同类型的自定义页面3、情感目标（1）培养学生积极思考、大胆探索，举一反三的能力。（2）培养学生自主学习、协助学习的能力。二、教学内容分析一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打 破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意 来展示店铺的独特性。教学重点：1、自定义页面的定义。2、自定义页面的主要类型。3、自定义页面的作用。教学难点：1

2、、区分自定义页面的类型。三、教学过程设计任务二自定义页面设计二教学步 骤教师活动学生活动设计意图1、创设 情景引 入课题展示网店电脑端首页导航，网店首页导航里除了一般的产 品分类之外，还有一些“特别”的页面导航，这是属于什 么页面呢？看展示的网 店首页导航， 思考特别的 页面导航里 面有什么？激发学生思 考，引出课程 内容2、新课 讲解一、认识网店自定义页面自定义页面又称二级页面，是网店装修中的一个独立 页面，目前电脑端和无线端的网店装修后台均可根据需求 增添数量不限的自定义页面。自定义页面是卖家围绕某个 主题焦点的一个内容聚合页，一般是文案、图片、视频等 多种组合优化美观后的页面，再配合商品

3、详情信息、活动 优惠信息等链接，继而增加页面的访问深度，也起到页面 关联和购物引导的作用。了解自定义 页面的定义能熟悉自定 义页面的主让学生先行 了解网店自 定义页面的 定义让学生对自一、教学目标1、知识目标（1） 了解网店自定义页面的排版形式。（2）熟悉网店自定义页面的点缀元素。（3）掌握自定义页面的设计流程。2、技能目标（1）能灵活对不同类型的自定义页面运用合适的排版形式。（2）能合理运用自定义页面的点缀元素。（3）能根据自定义页面设计的计划方案设计自定义页面。3、情感目标（1）培养学生积极思考、大胆探索，举一反三的能力。（2）培养学生自主学习、协助学习的能力。二、教学内容分析一个优秀的自

4、定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打 破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意 来展示店铺的独特性。教学重点：1、自定义页面的排版形式。2、自定义页面的点缀元素。教学难点：1、区分不同类型自定义页面的排版形式运用。2、自定义页面的设计流程。三、教学过程设计10教学步 骤教师活动学生活动设计意图1、创设 问题引 入课题观察在任务一实训中到的自定义页面，可发现其排版 形式有很多种类型，那么什么样的自定义页面适合什么样 的排版形式呢？观察自定义 页面的排版 形式,思考其 排版的不同 以及不同类 型的自定义 页面适合何 种排版

5、形式。激发学生思 考，引出课程 内容2、新课 讲解一、自定义页面的排版形式1）常规楼层形常规楼层形的专题页面比拟简洁利落，主要把控好背景颜 色要有深-浅-深-浅的层次节奏,每一个楼层模块都是独立 的，清晰明了，有利于信息阅读。这种排版形式应用比拟 广泛，常用于品牌介绍页或售后服务页。大局部新手美工在设计活动专题页面时也偏爱使用 常规楼层形排版，但为了打破常规楼层形排版过于单调的 局限，往往会在其基础上做一些细微的演变，比方整体页了解不同的 排版形式适 合何种自定 义页页面。让学生先行 了解自定义 页面的排版 形式以及其 适用情况，为 后面的设计 奠定基础。教学步骤教师活动学生活动设计意图面背景

6、不做切割，只需在中间局部进行分割，作独立的楼 层模块。还.一种排版是在原来的基础上，对某一块楼层的内 部进行一些小变化。2) “S” 形“S”形排版的自定义页面，比照于常规楼层的排版形式 不会显得枯燥呆板，而是给人轻松活泼的感觉，而且消费 者阅读起来也十分流畅。这种排版形式适用于不同类型的 自定义页面。3) “Z” 形“Z”形排版会比“S”形排版多了一份厚重感，更适合用 于男性化风格的自定义页面，比方汽车、男性护肤、游戏、 电子器械等类目的自定义页面。4) “1”字形“ 1 ”字形排版的自定义页面，给人呈现一种硬朗大气的感 觉。这种形式的自定义页面需要有高质量模特大图或产品 图镇楼才能防止背景

7、抢镜的情况。因此，“1”字形排版一 般情况很少用到，但对于那些追求独特和个性化的卖家来 说，“1”字形排版是不错的选择。5)自由排版形自由排版形的自定义页面适合用于高端路线的时尚服饰类 目，这种排版设计虽看上去简洁干净，但是对于设计师的 排版功力要求却比拟高，新手美工一般不太适合尝试。认识自定义 页面的点缀 元素以及适 用情况。二、自定义页面的点缀元素点缀元素的应用较多地出现在活动专题页或者会员活 动页，设计时在页面背景上适当地增加点缀元素能有效地 烘托主题，活跃气氛，比起空白干净的背景更有吸引力一 些O一。增加点缀元素的时候需要考虑是否与节日主题相匹 配，在页面中加入一些与主题吻合的点缀元素

8、，会让消费 者在浏览页面时更有代入感。节日点缀物元素春节灯笼、对联、炮竹烟花、红包、中国结、书 法字体端午节粽子、龙舟、竹、山水、水墨七夕节爱心、丝带、巧克力、手捧花、情书、花瓣、 蝴蝶结中秋节月亮、月饼、玉兔、灯笼、夜空圣诞节雪花、红帽子、圣诞树、雪人、圣诞老人、 礼物三、自定义以页面的设计计划熟悉自定义以设计案例页面的设计 展示一份优11教学步 骤教师活动学生活动设计意图分析筹划方案流程。秀的自定义 页面设计的 流程，帮助学 生举一反三。明确风格、配色、排版、点缀物、字体搜索收集相关素材Photoshop制作自定义页面1 .分析筹划方案(1)本次任务所设计的自定义页面类型为活动主题页面，

9、此类页面要求主题鲜明，活动气氛浓厚，且其包含的促销 信息较多，所以在设计时须突出不同的促销活动信息，最 大化地满足不同消费者的优惠需求。(2)页面主题为：年货家居好礼购。从这里可提取的信息 有：活动背景对应的节日是春节，店铺类目是生活用品类。 春节的节日特征是欢庆喜悦，生活用品类的特征那么是给人 温暖温馨的感觉。通过主题标语“好礼购”字样可知店铺 希望消费者在浏览页面时能将本店商品和赠送亲朋戚友的 年货礼物联想在一起，从而萌生购买心理。(3)从页面的布局规划图可知，除了头部Banner图外， 楼层模块一共有四个，分别对应的促销活动是：优惠券、 免单活动、五折抢购、八折回馈。该页面容纳的优惠信息

10、 较多，故在设计时尽量使用统一协调的配色和元素，把多 个优惠活动连接一起，让活动主题贯穿页面。2 .明确风格、配色、排版、点缀物、字体(1)风格：根据筹划书的分析，初定YIMI生活日用品店 年货节活动专题页设计风格以喜庆、热闹、动感为主。(2)配色：选取暖色为主色调，再结合节日代表色表，最 终敲定页面色彩为红色、金黄色，营造活泼热闹的气氛。(3)排版：因优惠活动和参与活动的商品较多，页面排版 采用常规楼层形(局部自由排版)的形式。(4)点缀物：本任务的页面主题为年货节，根据节日主题12教学步骤教师活动学生活动设计意图点缀物代表所示，页面中可加入灯笼、烟花爆竹、红包等 具有春节特色的点缀元素。(

11、5)字体：头部Banner图的主标题字体选用传统韵律感 比拟强的叶根友毛笔行书，与春节活动背景相呼应。小标 题和正文局部选用微软雅黑字体。3.搜索收集相关素材四、自定义页面设计通过以上操作，最后设计自定义页面如下:3、学生实训4、课后小结全年最低价免单抢回家工振兴圆形纸巾筒但116怫C使交用xa*用新年价：13.99加入购物车欧式创融家用餐巾制膝盒木质收纳纸巾盒W6*耳3厅巾期8*环安个最滑持久去同可妒头皮亮发水海飞丝去屑洗发水SOOMI大*桥久左hm：D弄及词p条窿新年价：38.99籁年价：15.99BOA购物车hwllhwll舞 ao.9盘动价：m24.9enoa,w3,aw发布实训任务：

12、为网店设计会员活动页任务要求:请把任务一的自定义页面筹划方案设计成图片。 制作规范：宽1920像素，高2500像素以上，jpg格式。根据上面的 知识点，完成 网店会员活 动页的设计。通过此任务 的完成，懂得 举一反三设 计不同类型 的自定义页 页面。本节课要掌握的重点：1 .自定义页面的排版形式。2 .自定义页面的点缀元素。3 .自定义页面的设计流程。明白本节课 自己要掌握 的知识点13任务三自定义页面上传一、教学目标1、知识目标(1)分别了解电脑端和手机端自定义页面的上传方法。2、技能目标(1)能灵活上传手机端自定义页面。3、情感目标(1)培养学生积极思考、大胆探索，举一反三的能力。(2)培

13、养学生自主学习、协助学习的能力。二、教学内容分析一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打 破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意 来展示店铺的独特性。教学重点：1、电脑端和手机端自定义页面的上传方法。教学难点：1、手机端自定义页面的上传以及热区链接的设置。三、教学过程设计14教学步 骤教师活动学生活动设计意图1、创设 问题引 入课题展示网店后台电脑端和手机端自定义页面的装修页面 提问：网店装修后台电脑端自定义页面的装修页面和手机 端的截然不同，那么两个不同端口的上传方法会有所不同 么？观察不同端 口的自定义

14、页面的装修 页面,思考教 师问题。激发学生思 考，引出课程 内容2、新课 讲解一、电脑端自定义页面的上传电脑端的自定义页面和首页的装修基础模块大同小 异，所以两者的上传步骤大致相同。值得一提的是，在智 能版的电脑端装修平台中，自定义页面的某些基础模块新 增了同步功能。如图下列图所示，宝贝推荐模块、全屏宽图 模块、双列图片模块、文本链接模块、图文模块、文本模 块、多端轮播模块、全屏轮播模块均能实现电脑端和无线 端的同步效果。但目前智能版的同步功能只支持电脑端自 定义页面自动同步生成无线自定义页面，不支持从无线端 同步到电脑端。智能版的同步功能方便于将设计好的电脑端自定义 页面上传后直接同步生成无

15、线端的自定义页面，能大大地 提高店铺的装修效率。二、无线端自定义页面的上传无线端的自定义页面和首页的装修模块大致相同，但是 常规的基础模块有固定的尺寸要求，以及这些模块只能实 现一张图对应一个热区链接，对于那些想要实现无线端页 面差异化与创意化的店铺来说有一定的设计约束。然而， 智能版的无线端装修平台中新增了美颜切图模块，该模块 能够帮助买家实现页面的自由排版布局以及一图多热区链了解电脑端 和手机端自 定义页面上 传的方法并 区分两种情 况。让学生先行 了解电脑端 和手机端自 定义页面的 上传方法。教学步 骤教师活动学生活动设计意图接的设置。美颜切图模块的图片宽度要求750像素，高度最小 33

16、5像素，最大2500像素，一个页面最多可以添加25个 美颜切图模块，且一个切图模块可以添加多个大小范围不 一的热区链接（如右下列图所示）。美颜切图模块还能选择 隐藏模块下方的白色间隙，从而实现页面的无缝连接，增 加了卖家在自定义页面发挥无限创意的可能性。自定义页面的上传流程计划熟悉自定义 页面上传的 流程,懂得每 一步的制作 过程。让学生对熟 悉自定义页 面的上传流 程，为后面的 任务实施奠 定基础。使用Photoshop切片工具切图上传到图片空间确定自定义页面的上传方法上传到店铺1 .使用Photoshop切片工具切图YIMI生活日用品店年货节活动专题页涵盖优惠活动信息 较多，也就意味着需添

17、加的热区链接也随之较多。在切片 前确定热区链接数量一共有15个,切片时切忌把同一个热 区链接分开。2 .确定页面的上传方法本次任务的活动专题页是放在无线端店铺中，且该页面的 热区链接比拟多。根据所学知识，智能版无线端装修中的 美颜切图模块能实现页面的自由排版布局和单图对应多热 区链接的效果，应选择美颜切图模块上传本次任务的活动 专题页比拟合适。四、任务实施依据课本上任务实施步骤，对自定义页面的上传过程进行演示。通过以上操作，最后设计自定义页面如下：15教学步骤B想人*穗军A建堪商城包信蹴多色同附03振兴圆形纸巾筒 色口色色鲁交战时磨/用口新年价：13.99* 心北为心用心1 20 6080 1

18、001匚匕口以两张不同的自定义页面为案例，分别分析其布 局：以某店铺电脑端“双旦礼遇季”活动专题页面为例, 其布局为：双旦礼遇季Banner图一一优惠券楼层 模块一一活动主推产品楼层模块一一明星单品楼 层模块。再看看某店铺无线端会员活动页会员特权mvWH8WW得双倍礼笆某店铺无线端会员活动页其布局为：会员日 Banner图一一会员提供抽奖活动楼层模块。5元W Illi IlliUH UH将提供1个好友，可获得1次开宝盒机会自定义页面布局中的楼层模块没有数 量的硬性要求，只要能满足页面信息的传教学步 骤教师活动学生活动设计意图这11.柿 2.7口 月 3.4.犷ii一二、 、:确明建 揭祥巾li

19、给予消费者良好的体验相自定义页面筹划书的撰至 自定义页面的设计流程确定自定义页面类型L 1明确自定义页面主题。分析优秀自定义页面耀与自定义页面筹划方案,定自定义页面类型本次任务是为店铺推广至 昌自定义页面的类型定义, 拓角自定义页面主题仔细分析年货节活动营与 旻的，故“年货节”为主是 又结合店铺产品属性进行木 乂最后确定自定义页面的弓 ,析优秀自定义页面分析知名电商网店的优3 m定义页面方案筹划做好官 之写自定义页面筹划方案根据自定义页面的布局4 攵量以及内容。结合本次K 勺楼层模块共四个，分别八折回馈模块。士以上操作，最后筹划如1打二P或-E 二 R|酎V3：用可。专的“年货节”促销活动设计

20、自定义页面， 可确定该页面为活动专题页面类型。发划方案，页面主题是围绕年货节促销活动 亥心。为了让页面的主题标语更打动人心， 刘，该店铺是一家专营生活日用品的网店， 须为“年货家居好礼购”。刍定义页面，了解其活动专题页面的布局， 是准备。戌要求，在撰写筹划方案前需明确楼层模块 皂义页面的任务单内容，可确定该页面布局 优惠券模块、免单商品模块、五折抢购模熟悉自定义 页面的筹划 流程。让学生学 会筹划自 定义页面 的流程，有 明确的方 向才开始 设计。教学步 骤教师活动YIMI生活日用品店年货节活动自定义页面筹划书页面类型活动专题贝面页面主题年货家居好礼购头图Banner图转：年货礼购优惠券楼层模

21、块满50减5元，满100减10元，满300减5阮贝面布局免单活动楼层模块参与活动商品：抽纸、保温玻璃杯五折抢购楼层模块参与活动商品：牙套、纸巾筒、纸巾食、洗发水八折回馈楼层模块参与活动商品：饭盒、纸手帕、洗脸毛巾、玻璃杯、筷子套 装、洗洁精学生活动设计意图3、学生实训4、课后小结发布实训任务：为网店筹划会员活动页任务要求：某电器网店已开张五周年，为回馈会员，该店铺筹划了 “五周 年会员日”会员活动，故需要为店铺制作一张网店会员活动页，请你根据 营销策略资料，筹划该会员活动页的方案。营销策略：1、提供抽奖活动：提供店铺给3位好友即可获得一次抽奖机会。2、明星单品会员8. 8折购：(1)网红懒人锅

22、(原价180) ； (2)北欧风烤箱(原价280)；(3)多功能养生壶(原价140) ； (4)迷你电饭煲(原价220)；3、积分兑换乐园：(1)优惠券兑换：99积分兑换3元优惠券；199积分兑换5元优惠券；299积分兑换9元优惠券；(2)礼品兑换：1900兑换红糖养生茶；2900积分兑换樱花碗四件套；3900积分兑换小熊公仔;(3)产品兑换：18999兑换加湿器；25999积分兑换养生壶;注册会员入口本节课要掌握的重点：1 .自定义页面的布局。2 .自定义页面筹划书的撰写。根据上面的 知识点，完 成网店会员 活动页筹划 书的撰写。(没有弄清 楚的地方可 参看微课)明白本节课 自己要掌握 的知

23、识点通过此任 务的完成, 懂得如何 撰写自定 义页面的 筹划书。任务二自定义页面设计一一、教学目标1、知识目标（1） 了解网店自定义页面的常见尺寸。（2）熟悉网店自定义页面的设计原那么。（3）熟悉自定义页面的色彩搭配2、技能目标（1）能合理运用自定义页面的设计原那么。（2）能灵活对不同类型的自定义页面搭配合适色彩。3、情感目标（1）培养学生积极思考、大胆探索，举一反三的能力。（2）培养学生自主学习、协助学习的能力。二、教学内容分析一个优秀的自定义页面能将商品信息和店铺实力很好地传达给顾客。网店的自定义页面打 破了常规页面的局限，给卖家带来了更多的可操作性，越来越多的卖家通过发挥自定义页面的创意

24、 来展示店铺的独特性。教学重点：1、自定义页面的设计原那么。2、自定义页面的色彩搭配。教学难点：1、区分不同类型自定义页面的色彩搭配方法。三、教学过程设计7教学步 骤教师活动学生活动设计意图1、创设 问题引 入课题展示一张优秀的的自定义页面，请同学们谈谈其设计优秀 的地方在哪里？为什么？观察自定义 页面,谈谈其 设计优秀之 处。激发学生思 考，引出课程 内容2、新课 讲解一、自定义页面的常见尺寸由于电脑和手机的屏幕大小不同，电脑端和无线端的自定义页面尺寸有所不同。1）电脑端自定义页面的尺寸宽:950px/ 1920px高：3000px6000px （仅建议，具体根据页面内容决定）2）无线端自定

25、义页面的尺寸宽：640px/750px （根据无线端装修后台的不同模块尺寸限了解自定义 页面的电脑 端和无线端 的尺寸让学生先行 了解网店自 定义页面的 常见尺寸让学生对熟 悉自定义页 面的设计原8教学步 骤教师活动学生活动设计意图制决定）高：1500px5000px （仅建议，具体根据页面内容决定）二、自定义页面的设计原那么1）首尾呼应在设计自定义页面时基本都是从上往下、从框架搭建到细 化细节的流程顺序进行的。在这个过程中，需要至少一个 的主要元素贯穿整体页面。2）协调统一保证页面里的模特、文案、点缀物、各种颜色、布局排版 以及所有这些元素汇聚在一起所组成的是同一种风格，从 而达成视觉协调统

26、一的目的。3）层次清楚自定义页面的层次主要涉及两个方面的层次，一方面是信 息的层次级别有主次之分，另一方面是整个页面的层次节 奏，如空间层次中的近景中景远景等，借此使页面看起来 更立体。三自定义页面的色彩搭配根据自定内容的需要，采用适合的色彩搭配，能准确地 表达出相应的主题内涵。活动专题页的常见配色活动专题页面一般也会以暖色为主色调，如红色、橙色、 黄色等，这种色调的运用可以使页面给人带来热情、兴奋、 欢快的心理感受。活动专题页面为了能与节日主题相呼应，很多时候会选择 节日代表色。熟悉自定义 页面的设计 原那么。认识区分不 同类型自定 义页面的色 彩搭配方案。那么,为后面的 设计奠定基 础。节

27、日相关颜色春节红色金色中国红情人节紫色粉色红色妇女节玫红色丁香色儿童节鹅黄色天蓝色绿色中秋节普蓝色红色橙黄色国庆节中国红黄色圣诞节红色绿色白色2、品牌介绍页的常见配色在设计品牌介绍页时必须考虑品牌本身的风格与色调。为 了让消费者在浏览品牌介绍页的过程中，能深深地把店铺 品牌形象烙在心间，品牌介绍页的配色一般是挑选能代表 该品牌形象风格的颜色。3、会员活动页的常见配色会员活动页的配色通常表现为以暖色调为主，同时采用对 比色或者间隔色的搭配，给人活泼轻松的感觉，从而衬托 会员活动气氛。除此配色方案外，也有一些店铺为了深化会员对品牌的认 知，在会员活动页面的配色设计中融合能代表品牌形象风 格的颜色。4、售后服务页的常见配色教学步 骤教师活动学生活动设计意图售后服务页的配色一般以冷色调为主，如：蓝色、绿色等 等，或者运用非彩色搭配，如黑字白底、白字黑底。3、学生 实训发布实训任务：在淘宝网上搜索不同类型的自定义页面，并尝试分析其遵 循了哪些设计原那么以及运用了怎样的色彩搭配方案。搜索不同类 型的自定义 页面,并分析 其遵循了哪 些设计原那么 以及运用了 怎样的色彩 搭配方案通过分析，充 分掌握自定 义页面的设 计原那么和色 彩搭配方案。4、课后 小结本节课要掌握的重点：1自定义页面的设计原那么。2、自定义页面的色彩搭配。明白本节课 自己要掌握 的知识点