08 店铺中代码.pptxVIP

淘宝美工全攻略 店铺中的代码 店铺中的代码 8.1.1 Photoshop切片——作用和技巧 文件格式 作用与技巧 切片的作用 浏览网店时，页面打开的速度受图片大小的影响很大。将一张大图切成多张小图，可以加快页面打图片打开的速度，提升买家体验满意度。 便于装修时单一的替换商品，而不影响其他产品。 切片可以用在首页，宝贝详情页的关联。 切片技巧 依靠参考线：基于参考线的切片比直接手动绘制切片区域更精准。 必须切片的区域：虚线、转角与渐变形状在DreamWeaver不能实现，只能使用Photoshop切片。 特殊文字效果必须切片：除黑体和宋体外，其他字体必须切片。在浏览器中最有效的字体只有宋体和黑体，其它字体浏览器可能不兼容。 店铺中的代码 8.1.2 Photoshop切片——切片与存储 文件格式 切片与存储 (1) 在Potoshop中按Ctrl+O组合键，在弹出的对话框中打开一张图片，按Ctrl+R组合键打开标尺，根据需要切割的区域，从左侧和顶端拖出参考线； 在工具箱中选择裁剪工具，按住鼠标，在展开的工具组中选择切片工具， 在选项栏中单击“基于参考线的切片”按钮； (2) 此时图像被切割为多个小块，对于顶部不需要切割的区域还需要将其组合成完整的图片。使用切片选择工具，按住Shfit键，选择多个切片，单击鼠标右键，执行“组合切片”命令，用同样的方法，将其他需要组合的切片进行组合，按Ctrl+；组合键隐藏参考线； 店铺中的代码 8.1.2 Photoshop切片——切片与存储 文件格式 (3) 使用切片选择工具选择一个切片后，双击鼠标，弹出的对话框，在URL中粘贴链接网址；单击“确定”按钮。为其他需要添加链接的切片执行相同的操作；执行“文件”|“存储为Web所用格式”命令； (4) 打开的对话框，为了显示全部切片，在对话框下方单击“缩放级别”三角按钮，在展开的列表中选择“符号视图大小”选项；按住Shfit键选择多个切片，在右侧选择“优化的文件格式”为JPEG；存储选择格式为“HTML和图像”，并设置存储路径与文件名。 店铺中的代码 8.2.1 Dreamweaver的使用——切片生成代码 文件格式 (1) 首先进入卖家中心上传图片”；在弹出的对话框中单击“点击上传”按钮，弹出对话框，选择所用切片所在的路径，选中所用切片，单击“打开”按钮，等待上传完成即可； （2）在Dreamweaver中操作。选择前面保存的HTML格式的文件，单击鼠标右键，执行“打开方式”|“Adobe Dreamweaver”命令；选择一张图片，在“属性”面板中的Src中可以看到图片的地址；(打开图片空间，找到对应的图片，单击“复制链接”按钮； 切片生成代码 店铺中的代码 8.2.2 Dreamweaver的使用——热点与链接 (1) 启动启动Dreamweaver CC，新建HTML文档，执行“插入”|“图像”|“图像”命令；在弹出的对话框中选择图像，单击“确定”按钮，在“属性”面板中修改图片地址，单击矩形热点工具； （2）在图像上的“收藏优惠券”区域拖出一个矩形热点；在“属性”面板中粘贴“链接”地址，选择“属性”面板中的椭圆热点工具； 热点与链接 店铺中的代码 8.2.2 Dreamweaver的使用——热点与链接 (3) 在图像中绘制圆形热点区域；在“属性”面板中选择指针热点工具； （4）在“属性”面板中修改链接地址后复制代码，粘贴到店铺自定义区域中。 店铺中的代码 8.3 源代码装修 (1) 将代码区域中的body/body之间的代码选中，单击鼠标右键，执行“拷贝”命令；下将代码装修进店铺中，进入淘宝店铺装修后台，在店铺右侧的任意模块上，单击右下角的“添加模块”按钮； (2) 在打开的对话框中选择“自定义内容区”，单击右侧的“添加”按钮， 在添加的模块右上角单击“编辑”按钮，打开对话框，选中“编辑源代码”复选框； 源代码装修 店铺中的代码 8.3 源代码装修 (3) 在文本框中粘贴前面复制的代码，在显示标题后单击“不显示”单选按钮； （4）击“确定“按钮，单击装修后台右上角的“发布”按钮，弹出对话框，单击“确定”按钮， 在对话框中单击“查看店铺”按钮，查看装修的效果。 店铺中的代码 8.4.1 获取淘宝常见链接代码——宝贝链接 宝贝链接： 宝贝的链接是最常用的链接，在“卖家中心”单击“出售中的宝贝”链