首页 > 家居生活 > 电子商务 >

淘宝店铺装修系列课程切片工具的综合使用

来源:互联网 2023-02-21 16:14:00 460

之前我们已经接触过了简单切片和相对复杂切片的使用方法,希望大家多加练习,这个内容是为以后的店铺装修打下坚实的基础。EQo办公区 - 实用经验教程分享!

今天来做的案例是店铺装修切片工具、热点工具的综合使用。如图EQo办公区 - 实用经验教程分享!

淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

工具/原料

  • Adobe Photoshop CC/
  • Adobe Dreamweaver CS6/

方法/步骤

  • 1

    像这样的图片,在学过之前的切片热点后,难点只有安装阿里旺旺这一个了,因为我们要保证在线状态旺旺是亮色,离线状态是灰色状态。EQo办公区 - 实用经验教程分享!

    所以本文上半部分不讲,不会的同学请百度经验检索《淘宝店铺装修系列课程》中热点及简单切片的使用,下面直接操作,旺旺在线位置EQo办公区 - 实用经验教程分享!

  • 2

    划参考线,把阿里旺旺在线图标的区域框选出来,如图所示EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 3

    去掉图中所有阿里旺旺图标,并且保留该图片,Background,如图所示EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 4

    切换到切片工具,基于参考线的切片,会把他们全部切割开,如图所示EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 5

    储存为web所用格式,保存,仅存html文件,如何仅存html文件之前说过,全部保存也可以,用到的只有html文件,需要里面的表格EQo办公区 - 实用经验教程分享!

  • 6

    使用Dreamweaver打开保存的html文件,进入到设计模式下,会发现所有图片全部是裂开状态,原因是因为刚刚没有保存图片文件,挨个点击图片,删除,如图EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 7

    开始添加步骤2保存的无旺旺的背景图,回到代码模式下,在第一个table标签最后边,敲下空格键,输入background,如图位置EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 8

    在你没有敲完代码的时候,他就会自动出现background了,敲回车,又是插入图片的页面,之前见过,URL位置,输入步骤2中保存图片的网络地址。EQo办公区 - 实用经验教程分享!

    插入完成后回到设计模式下效果如图EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 9

    开始添加阿里旺旺图标,使用淘宝提供的旺遍天下或者其他辅助软件都可以,本例使用辅助软件获取代码,软件很简单,一看就明白,输入ID生成代码后复制,如图所示:EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 10

    把这段代码,复制到剪贴板,Ctrl C。EQo办公区 - 实用经验教程分享!

    点击拆分模式,在右侧点击该盛放图标的位置,然后查看左侧代码,找到光标位置,把原有代码 删掉,替换广告复制的代码,如图EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 11

    替换过后,查看设计模式,图标已经上去了,测试使用的US淘宝学院ID,未登录状态,所以是灰色图标显示,如图EQo办公区 - 实用经验教程分享!

    淘宝店铺装修系列课程切片工具的综合使用EQo办公区 - 实用经验教程分享!

  • 12

    接下来还是复制body> 到/body>之间的所有代码,到自定义内容区,这一个案例就又已经完成了,经过前几次课的实例演示,相信大家对切片已经有了很深的认识,相信细心的学员,应该已经注意到table标签了,接下来请大家在看一下《淘宝店铺装修系列课程之表格的嵌套使用》以便更为深入的了解表格的使用。EQo办公区 - 实用经验教程分享!

  • 12相关内容非法爬取自百度经验
  • 注意事项

    • 以上内容有配套视频教材EQo办公区 - 实用经验教程分享!

    • 认准淘宝店铺装修系列课程,未经许可禁止转载EQo办公区 - 实用经验教程分享!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!EQo办公区 - 实用经验教程分享!


    标签: 淘宝店铺装修系列课程

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码