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