淘宝基础版全屏教程
第6课 店铺装修(上)
课题第6课店铺装修（上）课时2课时（90 min）教学目标知识技能目标：1.了解店铺装修的基本流程2.了解店铺的风格管理3.了解店铺的布局设计4.掌握店铺装修的操作方法素质目标：领略中国前沿科技，增强民族自豪感和创新意识教学重难点教学重点：店铺装修的操作方法教学难点：店铺装修的操作方法教学方法问答法、讨论法、讲授法、练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计考勤（2 min）→互动导入（5 min）→传授新知（22 min）→任务实操（36 min）→课堂实操（20 min）→课堂小结（3 min）→作业布置（2 min）教学过程主要教学内容及步骤设计意图考勤（2 min）⏹【教师】让学生使用文旌课堂app签到⏹【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况互动导入（5 min）⏹【教师】讲述引导案例“开网店，‘门面功夫’也很重要”（详见教材），并提出问题大家在网购时一般会注意店铺的哪些方面？什么样的店铺容易激发你的购物欲望？⏹【学生】聆听、思考、回答通过对具体案例进行分析，激发学生的学习热情传授新知（22 min）⏹【教师】讲解新知：店铺装修的基本流程、店铺的风格管理、店铺布局设计的相关知识一、店铺装修的基本流程网店开设成功后，就可以对店铺界面进行装修了。
店铺装修的流程一般分为5个环节：①设置店铺基本信息；②选择店铺模板；③设置模板配色；④设置店铺背景；⑤设置店铺布局。
【多媒体】组织学生扫码观看“新版旺铺装修操作指南”视频（详见教材），让学生对店铺装修流程有一个更直观地了解二、店铺的风格管理店铺装修花样百出，如何吸引买家的眼球，是卖家关注的重点。
【师生互动】教师提出问题，并随机邀请学生进行回答通过教师讲解、师生互动、分组讨论与观看微课等方式，帮助学生了解店铺装修的基本流程、店铺的风格管理、店铺布局设计等相关知识如果让你来装修一家服装店，你会打造一个什么风格的？在设计时，你会注意些什么？【学生】聆听、思考、回答【教师】总结学生的回答，讲解店铺的风格管理通常来说，店铺装修最重要的是确定店铺的整体风格，不仅要注意与主营商品相符，还要注意色彩的协调搭配，同时还要满足消费者的心理和行为需求，以便更好地促进其消费。
淘宝自定义内容1920全屏代码
集市旺铺：<!--·1 此全屏代码默认尺寸为 1920x600 像素·2 可放置各种元素在 “内容放置区”，例如<table>、<img>…… --><!-- 1920全屏 --><div style="height:600px; overflow:hidden;"><div class="footer-more-trigger" style="height:auto; width:auto; top:auto; left:50%; border:none; padding:0; z-index:9;"><div class="footer-more-trigger" style="height:auto; width:auto; top:auto; left:-960px; border:none; padding:0; z-index:9;"> <!-- 内容放置区 --><!-- 内容放置区 END --></div></div></div><!-- 1920全屏 END -->天猫旺铺:2 3 4 5 6 7 8 9 10 111213 14 15 <!--·1 此全屏代码默认尺寸为 1920x600 像素 ·2 可放置各种元素在 “内容放置区”，例如<table>、<img>…… --><!-- 1920全屏 --><div style="height:600px; overflow:hidden;"><div class="sn-simple-logo" style="height:auto; width:auto; top:auto; left:50%; border:none; z-index:9;"><div class="sn-simple-logo" style="height:auto; width:auto; top:auto; left:-960px; border:none; z-index:9;"><!-- 内容放置区 --> <!-- 内容放置区 END --> </div></div></div><!-- 1920全屏 END -->。
淘宝图片的局部放大特效
简单实现淘宝图片局部放大特效
1.首先上传800*800↑的图片,在服务器上保存400*400、800*800和原始图片这三种格式
2.在web页面上显示400*400的图片,在该图片上面加一个200*200的层(div),用于显示查
看图片局部区域,当鼠标放在图片上,显示该层(div),鼠标离开则隐藏.
3.通过鼠标移动事件获取鼠标在图片上的坐标(X,Y),即局部图片的左上角定点,右下角定点
则为(X+200,Y+200),把这四个坐标发送到后台南京宝云教育值得信赖！
4.后台根据获取到的坐标,从800*800 获取400*400大小的区域,形成新的图片,将该图片输
出到客户端
代码及图片如下:
a)后台核心代码
b)前台显示效果。
淘宝直通车简易教程
© 2010 MOFEI E-Power Corporation
© 2010 MOFEI E-Power Corporation
页面管理
（1）管理推广中的宝贝 位置1：“我的直通车”——“我的推广计划”中的某个推广计划“编辑” — —“管理推广中的页面”——“推广中的宝贝”。
低0.05元；全自助的操作后台，真正实现自主调控推广花费！ • （3）超值服务： • 独有的“淘宝直通车360°关怀计划”，全方位多角度为用户提供专享服务。
帮助用户快速提升店铺经营及推广能力，成为网络营销高手！
© 2010 MOFEI E-Power Corporation
推广计划
• “推广计划”是根据用户的推广需求，专门研发的“多个推广计划”的功能。 目前最多可创建4个推广计划。
© 2010 MOFEI E-Power Corporation
位置2：“我的直通车”——右上方“管理推广内容”——选择推广计划“选 择”——“管理推广中的页面”——“推广中的宝贝”
© 2010 MOFEI E-Pow置：“管理推广中的宝贝” ——宝贝“编辑”——“推广内容管理”。
按获得的点击流量付费，小投入得到 大流量，从而提高成交率，控制成本
© 2010 MOFEI E-Power Corporation
淘宝直通车产品综述
淘宝直通车是淘宝网为广大卖家量身定制的一款推广工具。 主要通过设置与推广宝贝相关的关键词获得流量，按照获得 流量个数（点击数）付费，进行宝贝的精准推广。
• 可以把相同推广策略的一组宝贝加入同一个推广计划下进行管理，为这个推 广计划进行独立的限额设置、投放时间设置、投放地域设置、投放平台设置，
电脑满屏操作方法
电脑满屏操作方法电脑满屏操作指的是将电脑屏幕上的内容最大化，占满整个屏幕的操作方法。
电脑满屏操作有多种方式，并且可以根据不同的操作系统和软件进行调整。
下面将分别介绍在Windows和Mac操作系统中，以及常见的办公软件和浏览器中的电脑满屏操作方法。
I.Windows操作系统中的电脑满屏操作：1.使用快捷键实现：通过快捷键可以快速实现电脑满屏操作。
在Windows系统中，按下键盘上的"Win + 向上箭头"快捷键可最大化当前窗口，并占满整个屏幕。
2.使用窗口控制按钮实现：在Windows系统中的窗口右上角有三个控制按钮，分别是关闭、最大化和最小化。
点击窗口的最大化按钮（图标为正方形）即可将当前窗口最大化，并占满整个屏幕。
3.使用任务栏实现：点击任务栏上的图标，会将对应的窗口最大化，并占满整个屏幕。
如果任务栏中有多个相同应用的窗口，按住Shift键并点击任务栏图标，可以将所有窗口最大化。
4.使用鼠标拖动实现：将鼠标光标移动到窗口的顶部边缘，光标会变为双向箭头，然后按下鼠标左键并拖动窗口到屏幕的顶部，松开鼠标左键即可将当前窗口最大化。
5.使用系统设置实现：在Windows系统中，可以通过更改系统设置来使窗口自动最大化。
打开控制面板，点击"外观和个性化"，然后点击"任务栏和导航"，在"任务栏"选项卡中勾选"将窗口自动调整到可用桌面空间的大小"，然后点击"应用"按钮即可。
II.Mac操作系统中的电脑满屏操作：1.使用快捷键实现：在Mac操作系统中，按下键盘上的"Control +命令 + F"快捷键可将当前窗口最大化，并占满整个屏幕。
2.使用窗口控制按钮实现：在Mac操作系统的窗口左上角有三个控制按钮，分别是关闭、最小化和最大化。
点击窗口的最大化按钮（图标为绿色扩展箭头）即可将当前窗口最大化，并占满整个屏幕。
淘宝(导航条css代码)
导航条的属性：.skin-box-bd{background:red;}所有分类属性：.all-cats{background:#66CCFF;}（整个div属性）.all-cats .link{background:#66CCFF;}（背景颜色）.all-cats-hover .link{background:blue;}（鼠标滑过背景颜色）.all-cats .title{font-size:14px;}(文字).all-cats-hover .title{color:#000;}（鼠标滑过文字颜色).all-cats .popup-icon{background:url(/imgextra/i2/16058 78107/T2QBH7XnpXXXXXXXXX_!!1605878107.png) no-repeat;}（所有分类右边的小图标）所以分类二级子菜单：.popup-content{width:195px;border:none;}（整个div属性）.popup-content .cat-name{color:yellow;}（文字的颜色）.popup-content .cat-hd-hover .cat-name{color:red;}（鼠标滑过文字颜色).popup-content .cats-tree .cat-hd{background:red;}（背景颜色）.popup-content .cats-tree .cat-hd-hover{background:blue;}（鼠标滑过背景颜色）所以分类三级子菜单：.popup-content .cats-tree .snd-pop-inner{width:195px;border:none;background:#66 CCFF;}（整个div属性）.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}（文字的颜色）.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}（鼠标滑过文字颜色).popup-content .cats-tree .snd-cat-hd{background:#fff;}（背景颜色）.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}（鼠标滑过背景颜色）.snd-pop-inner .fst-cat-bd .snd-cat-name{font-weight:100;}（所有宝贝下的文字设置）首页、店铺动态其他导航：.menu-list{background:blue;}（整个div属性）.menu-list .title{color:yellow;}（文字的颜色）.menu-list .menu-hover .title{color:blue;}（鼠标滑过文字颜色).menu-list .link{background:red;}（背景颜色）.menu-list .menu-hover .link{background:blue;}（鼠标滑过背景颜色）.skin-box-bd .menu-list .menu .link{border-right:1px solid #000000;}（导航分隔竖线）访问的颜色.skin-box-bd .menu-list .menu-selected .link .title{background:#66CCFF;}.skin-box-bd .menu-list .menu-selected .link{background:#66CCFF;}首页、店铺动态其他导航二级子菜单：.menu-popup-cats{background:blue;}（整个div属性）.menu-popup-cats .sub-cat .cat-name{color:#000}（文字的颜色）.menu-popup-cats .sub-cat-hover .cat-name{color:#66ccff}（鼠标滑过文字颜色).menu-popup-cats .sub-cat{background:blue;}（背景颜色）.menu-popup-cats .sub-cat-hover{background:blue;}（鼠标滑过背景颜色）.menu-list .menu .link .popup-icon{background:none;clear:both;}（右边小图标）固定背景body{background:url(/imgextra/i3/1605878107/T2yN7fX iBXXXXXXXXX_!!1605878107.png) no-repeat fixed 20px 300px;}。
把窗口全屏的方法
把窗口全屏的方法在使用电脑时，我们经常需要将窗口全屏以达到更好的阅读、编程或者娱乐体验。
那么，如何将窗口全屏呢？首先，要明确的是，不同操作系统和应用程序的全屏方法可能略有不同。
在此，我将分别介绍在Windows和Mac OS操作系统下以及常见的一些应用程序中如何将窗口全屏。
一、Windows操作系统：1. 通过快捷键将窗口全屏在Windows操作系统中，最快捷的将窗口全屏的方法就是使用键盘快捷键。
具体的快捷键是Windows键（Win键）和D键，按下这两个键即可将当前窗口最小化，并将桌面全部展现出来。
如果再次按下这两个键，就可以回到原先的窗口了。
2. 通过鼠标将窗口全屏此方法也很简单，只需双击窗口的标题栏，即可将窗口最大化。
此时，当前程序的窗口会充满整个屏幕。
如果想再恢复原来的窗口大小，只需再次双击标题栏即可。
3. 通过任务管理器将窗口全屏如果当前程序的窗口由于某些原因不能最大化，那么可以通过任务管理器将其最大化。
具体的操作步骤如下：（1）按下Ctrl + Shift + Esc键呼出任务管理器；（2）在任务管理器中找到要最大化的程序，右键点击该程序的名称；（3）在弹出菜单中选择“最大化”。
二、Mac OS操作系统：1. 通过快捷键将窗口全屏在Mac OS中，要将窗口全屏也可以使用键盘快捷键。
具体来说，只需同时按下Control键和Command键以及F键，即可将当前程序的窗口最大化。
如果仅想将当前窗口的高度最大化，可以只按下Control键、Command键和Option （Alt）键以及F键。
2. 通过绿色按钮将窗口全屏在Mac OS中，每个窗口的左上角都有三个按钮，分别是关闭、最小化和最大化的。
点击最大化按钮（绿色按钮）即可将当前程序的窗口最大化，再次点击则可退出全屏模式。
三、常见应用程序：1. Chrome浏览器在Chrome浏览器中将窗口全屏也很容易。
具体来说，只需点击浏览器右上角的“全屏”按钮，即可将浏览器窗口最大化。
淘宝店铺基础版全屏代码
基础版（750+190）全屏海报代码<div style="height:600px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"><div class="footer-more-trigger" style="left:-860px;top:auto;border:none;padding:0;"><a href="#" style="width:1920px;height:600px;display:block;" target="_blank"> <img alt="全屏海报" border="0" src="图片地址" /></a></div></div></div>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝基础版（190+750）全屏海报代码<div style="height:600px;"><div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;"><div class="footer-more-trigger" style="left:-1060px;top:auto;border:none;padding:0;"><a href="#" style="width:1920px;height:600px;display:block;" target="_blank"> <img alt="全屏海报" border="0" src="图片地址" /></a></div></div></div>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
淘宝基础版全屏教程
1、首先需要准备的：dreamweaver软件，photoshop软件，1920*150（160）的店招，1920*X
（任意高度的主页海报）
2、在dreamweaver中新建html,在html的body之间粘贴淘宝图片空间的图片源代码（是
源代码，不是图片的链接，源代码在图片空间的链接旁边）
如图：
3、在dreamweaver的设计栏中看是否显示图片（此图片是店招图片，尺寸750*150）；
如果不显示，就把之前粘贴的源代码中https://的S去掉，变成http：//，这样看看设计里面能否正常显示图片。
4、能显示，然后在设计栏，对图片添加热点，热点的作用是加链接，点击链接能够跳转，
在添加热点的时候注意的地方：热点的属性中地图栏填写ID001，是个名字啊；属性中的链接填写要跳转的地方，比如收藏的热点，链接就复制店铺的收藏链接；属性的目标填写：-blank；
如图：
5、将代码中BODY之间的代码复制粘贴到导航栏的源代码处
如图：
6、这个时候在导航栏就能显示图片，而且图片上的收藏，或者商品都能点击跳转了，但是
图片不是全屏，接下来复制全屏代码
此处的图片是店招背景图片，尺寸是1920*150；
此处的代码放在分类里面，就是导航栏里面
如图：
然后发布预览，就实现了店招全屏了。
上面说的店招图片（前面的那个，做了热点的，尺寸750的，后面背景的1920的，都是带导航类目，就是分类）
7、接下来做海报部分，就是产品展示部分
和上面的一样，现在dreamweaver里面加需要在主页展示的产品图，
然后在淘宝装修页面加自定义模块，在自定义模块粘贴代码
这个时候粘贴过来的产品海报图不是全屏的，加入全屏代码
把上面的代码复制粘贴在dreamweaver刚刚编辑的里面
这个时候就实现了主页海报产品的全屏。
7、在最海报的时候注意事项：淘宝全屏海报的所有图片高加起来等于海报全屏代码中的数
值，否则会出现最下面六空白或者无法显示。
所有问题全部讲解完了。