用PS做好的全图，然后切片，存储为Web和设备所用格式，将html文件放在Dreamweaver中，然后把上网到淘宝_百度知道
用PS做好的全图，然后切片，存储为Web和设备所用格式，将html文件放在Dreamweaver中，然后把上网到淘宝
中的图片全部在dw中替换掉，在F12预览的时候一点问题都没有，但是在淘宝中预览的时候就会出现错位，是怎么回事？...
中的图片全部在dw中替换掉，在F12预览的时候一点问题都没有，但是在淘宝中预览的时候就会出现错位，是怎么回事？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
返老还童好么
返老还童好么
采纳数：1170
获赞数：5545
凡是直接插图的图片，都可以直接替换，但凡是作为背景的图片，就是可以无限延长的那种图片，必须要在dw里，将原图删掉，在背景那里重新输入图片地址。还有，要把所有图片的宽度和高度都标明。自动延长的那种背景图片，只输入宽度即可。这都是懒人做法，最好的办法是按你的切片布局，重新做表格table。插图换背景等等。这样做出的网页，放到哪里都不会错位。
采纳数：11
获赞数：21
1，先检查图片的前面或者图片之间是否有空格，有则删除。2，检查图片的宽度，首页是950px，详情页是750px。3，也是我感觉最关键的一点，淘宝经常预览的时候都会出问题，图片会错位，特别是切片的图。你不用管他，直接发布一下试试！不管你信不信，反正我是发布了之后就好了！
1紫舞依依1
1紫舞依依1
采纳数：10
获赞数：23
只要你操作正确应该不是你的问题。有时候在预览中会错位。但是发布之后再看就不是错位。你试试发布看看。
来自：求助得到的回答
采纳数：138
获赞数：587
浏览器兼容性问题吧，你换个浏览器试试。
采纳数：23
获赞数：219
是做的描述 还是店铺首页
如果是店铺首页 切的不够规整 的会有个分隔符
你要把分隔符也要上传的
地址换下就好了
如果是描述 错位就没什么问题的直接发布就是了
采纳数：45
获赞数：150
擅长：暂未定制
检查一下DW里面的页面大小
其他4条回答
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在Photoshop中把一个图片用切片工具切割之后如何把它转化为以.html格式的静态页面
[问题点数：30分，结帖人zhangjing0914]
本版专家分：0
结帖率 90.48%
CSDN今日推荐
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
匿名用户不能发表回复！
其他相关推荐问个菜鸟问题--页面是在PS中做好用切片切直接存为HTML还是在DW中重新画表格不用PS导出来的html
[问题点数：20分，结帖人nosad]
本版专家分：442
结帖率 100%
CSDN今日推荐
本版专家分：8
本版专家分：442
本版专家分：2986
本版专家分：442
匿名用户不能发表回复！
其他相关推荐&&&&& 网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里使用PS进行网页切图。
&&&&& 我们通过设计稿，得到我们想要的产出物（如.png,.jpg文件），给网页提供图片素材（HTML:img，CSS:background）。
一.使用PS工具
1.1 PS首选项设置
编辑-》首选项-》单位与标尺，选改为像素。
在“窗口”菜单下开启：
工具（默认已开启）
选项（默认已开启）
图层（默认已开启）
信息（手动开启）
历史记录（手动开启）
关闭其他不需要的功能，将以上功能放置在合适的区域，窗口-》工作区-》保存工作区，设置后的工作区如下：
1.3 切图常用工具
将自动选择勾选，将组改为图层
?矩形选框工具
?裁剪工具+切片工具
-放大：Ctrl+加号
-缩小：Ctrl+减号
1.4 辅助视图
在“视图”菜单下开启：
?对齐（默认开启）（遇到参考线、边界有一个吸附力）
?标尺 Ctrl+R
?显示-&参考线 Ctrl+;（需要显示额外内容）
二.获取信息
打开设计稿，获取信息：
?尺寸信息：测量
?颜色信息：取色
获取信息最重要的是将画布拉的尽量大，尽量减小误差。
2.1所有数字都要测量
矩形选框工具+信息面板
测量内容：
宽度、高度
内边距、外边距
背景图片位置
2.2测量选区（矩形选框工具）
添加到选区：按住Shift
从选区减去：按住Alt
与选区交叉：按住Shift+Alt
2.3文字相关测量
2.3.1单独的文字图层
选中图层，点击工具T，顶部选项区显示如下：
可以直接获得文字的大小；
点击，可以获得其他的一些信心，如行高：
2.3.2非单独的文字图层（选择较大字作为测量）
使用矩形选框工具，选中文字，高度即为字号大小；
行高的测量
使用矩形选框工具，从上一行文字底部到本行文字底部的高度即为行高，如下图：
2.4所有颜色都要取色
拾色器+吸管工具
取色内容：
尽量放大画布，获取实点、避免锯齿点。
2.5单独的文字图层可以直接获取颜色，其他的颜色用“拾色器+吸管工具”获取
特别注意的是由于图层的叠加效果，显示的颜色与实际颜色不相符，这是要用拾色器来获取颜色
2.6取色工具的巧用
2.6.1确定背景是否为纯色（拾色器+吸管工具）
不同区域不停的点击，看颜色是否变化
2.6.2确定是否是线性渐变（魔术棒）
先选定图层，再选择魔棒工具，点击选中最上面一行，显示如下：
继续点击，一次向下选中一行
确定为线性渐变。
3.1 需要切片的内容
修饰性的（一般用在background属性）：
图标、logo
有特殊效果的按钮、文字等
非纯色的背景
内容性的（一般用在img标签）
banner、广告图片
文章中的配图…
例如，下图，红色框内是需要切的，黑框内是从后台获取的不需要切
3.2 切出来的图片的保存类型
内容性的一般保存为.JPG，
修饰性的一般保存为.PNG8，.png24
其中PNG8和PNG24都支持全透明；PNG24支持半透明的（图片质量比较高），但ie6不支持PNG24半透明，需要做兼容。
隐藏文字只保留背景
3.3.1文字独立图层（隐藏文字图层）
找到文字图层
去掉眼镜图标
3.3.2文字和图片合并（平铺背景覆盖文字）
背景图可以做拉伸
矩形选框工具选一块区域
自由变换 Ctrl+T
背景图不可以做拉伸（背景有纹理效果等）
矩形选框工具选一块区域
使用移动工具+Alt
3.3.3 获取切片
切图.PNG24
o移动工具选中所需图层(按住Ctrl多选)
o右键合并图层（Ctrl+E)
o再邮件制图层到新文件或直接拖至已有文件(新建：Ctrl+N )
切图.PNG8（带背景切）
o合并可见图层（Shift+Ctrl+E) o矩形选框工具选择内容 o魔棒工具去除多余部分（从选取中减去：按住Alt）
3.3.4 可平铺背景的切图
矩形选框工具选一块区域
复制粘贴到新文件中
平铺内容充满文件的宽（x轴）或高（y轴）：如，新建文件用于平铺x轴，切图的宽要与新建文件一致
3.4.切片工具（适用于可以一刀切的活动页）
?选择切片工具
?选项栏点击“基于参考线的切片”按钮
?选择切片选择工具
双击切片，更改文件名等信息
全选切片，统一设置存储格式
存储所需内容（背景一般为透明）
?复制、新建、粘贴（Ctrl+C、Ctrl+N、Ctrl+V，或拖动内容至新文件）
&&& 独立的图层：直接拖动内容至新文件
&&& 合并在一起：矩形选框工具选区，魔术棒提取，Ctrl+C、Ctrl+N、Ctrl+V
?存储为Web所用格式（Alt+Shift+Ctrl+S）
4.1 保存类型一（JPG）
当图片色彩丰富且无透明要求时
建议保存为JPG格式并选择合适的品质
注：品质：60-80；不能为100,80已经很好
4.2 保存类型二（PNG8）
当图片色彩不太丰富时无论有无透明要求
保存为PNG8格式
注：保存时，需要重新设置无仿色和无杂边
4.3 保存类型三（PNG24）
当图片有半透明要求时
保存为PNG24格式
默认设置。
4.4 保存类型四（PSD）
为保证图片质量
保留一份PSD文件，以后任何的修改都在PSD文件上
五 修改与维护
随着项目的进展，我们可能想要改变图标的位置、添加新图标、删除旧的图标、修改画布的大小，所以要进行修改和维护。
5.1 更改画布大小
5.1.1 增加画布
图像-》画布大小，根据情况，选择定位点
5.1.2 减小画布
第一种方法：矩形选择工具选中区域，图像-》裁剪进行画布的裁剪；
第二种方法：直接使用裁剪工具进行裁剪。
5.2 移动图标
?若图标为独立层
则用移动工具拖动即可
?若图标为非独立
用选区工具选中图标区域
用移动工具拖动图标
注：若图标为非独立，可用选区工具选中图标区域，按Ctrl+X剪切，然后再粘贴，将此图标变为独立的图层。
5.3 添加图标
将图标整理后，放入相应的位置即可。
注意事项：
修改PNG8的图片，需要更改颜色模式为RGB颜色，操作方法：图像-》模式-》RGB颜色。
&&&&& 图片合并方案：Sprite 图片
Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。根据具体图标在大图上的位置，给背景定位。
&&&&& Sprite拼图好处：减少网络请求，提升网页加载速度。
6.1 大小与质量（平衡与取舍）
压缩工具：
?有损TinyPng：
?无损Minimage：
6.2.1 排列
图片之间必须保留合适空隙，（便于图片修改、Css代码编写）
图标排列方式：横排和竖排
6.2.2 分类
?把同属于一个模块的图片进行合并（功能化）
?把大小相近的图片进行合并（节省空间）
?把色彩相近的图片进行合并（降低颜色数，文件体积会相对的小）
?综合以上方式合并
6.2.3合并推荐
?只本页用到的图片合并
?有状态的图片合并（鼠标经过状态的改变等）
七 浏览器兼容方案
7.1 IE6不支持PNG24半透明
解决方案：存两份sprite.png(24)和sprite_ie.png(8)
?高级浏览器使用css3
?低级浏览器使用切图
7.3 优雅降级
?支持的显示效果
?不支持没有效果
具体操作：
1，&&打开ps，将单位改为px单位（为了测量宽度，边距方便），编辑---首选项----单位与标尺。具体如下图& && && &&&2，把无关的面板都关了。只留工具、选项、信息、图层、历史记录。（关闭打开面板，在顶部菜单窗口选项）3，切图A，选择切换工具（右击），勾选你所需要的图片（图中选中了葡萄藤logo）&B，这里可以看到图片有背景颜色（钢青色），选择第二列的第一个工具，图层选择工具，点击选中背景图层。然后到图层面板点击眼睛图标来隐藏&C，然后打开文件选项，选择储存为Web所有格式。D，点击图片，即可选中。（按住shift可以多选）E，在储存之前，要选择保存图片的类型。这里介绍三种png8，png24，jpg分享一个简单粗暴的策略：a，如果psd文件中图片颜色丰富没有透明要求使用jpg格式。b，如果颜色不丰富，有透明要求的用png8。c，被要求半透明，直接png24。备注：我们切图的时候要尽量让图片大小尽可能的小。这里的png24类型图片要远远大于png8。jpg大小由品质决定，具体设置多少由项目决定4，最后一步就是点击下面的储存，储存的时候要选择保存切片的类型，选择选中切片。&到了这里就教程结束。结果图如下（这里是背景是透明，记得要保存为png格式）
抠图详解：
1，打开psd文件，然后合并可见图像（为什么，因为他叫扣图，你觉得能有图层吗，有图层还怎么扣）。图层——合并可见图层<span style="color: #，选择魔棒工具，按住Alt+右键，点击所选的矩形框。&&3点击之后的效果（记得容差设置为0，默认为0。具体容差是什么自己百度）&4，Ctrl+c，Ctrl+n，ctrl+v。ok，搞定。（背景要设置为透明，别忘了）！&最后再推荐个教程：
?支持的显示效果
?不支持没有效果
阅读(...) 评论()本章实际操作使用ps来进行切图,分成四部分来讲解：
1.切图的常规步骤
2.如何只保留某一部分
3.删除切片
4去掉默认切片线
切图的常规步骤
我现在有一张登录框的psd，拿到psd后首先要思考怎么构图。也就是切图的思路。我这里只是演示步骤，所以就不详细推理了。
在工具栏中选择切片工具
然后用切片工具画出三个部分，如果觉得切片工具不好画的话 可以右键切片 编辑切片 直接输入参数。
点击文件----》存储为web和设备所用格式
这里可以调节一些参数和图片格式，或者直接点击存储并选择保存路径即可。
存储后到保存的路径看到我们的3个切片已经有了
如何只保留某一部分
我们上面已经了解了正常的流程，不过有时候我们需要某一部分的图片，不能一次性全部切好。比如我们需要蓝色按钮单独作一张图片。那怎么单独切出这个按钮呢。
选择切片工具，画出按钮。
文件--》存储为web和设备所用格式，关键是在调节页面的时候 需要点击选中按钮部分。然后点存储。
选择好路径后 选择 只输出 选中切片 也就是只输出 按钮。
结果文件夹中就只输出了按钮图
ps:这里只是演示步骤,正规流程中 按钮这些单独的图层 最好使用 图层切片，这样得到的图才是最完整无混合边界的图。
步骤是 在右侧图层面板中选中图层 ----》选取图层---》新建基于图层的切片
在画切片的时候 经常有画错的时候， 除了后退之外我们还可以删除切片。
对着切片直接右键可以看到 删除切片。
仅仅是用户切片才能 使用 删除切片。
非用户切片的删除切片是灰色的。只能先右键点击提升为用户切片之后才能删除。
所谓的用户切片就是 我们画的切片，非用户切片是我们画了一部分之后 系统补充的另一部分。
去掉默认切片线
前面我们讲到删除切片 只能删除用户切片
那么系统默认的切片 和 切片线应该怎么去掉 删除呢。
视图-----》清除切片即可。
扫码向博主提问
学习最好的方式是分享o?o
photoshop将psd导出div+css格式HTML（自动）
psd切片切好后，导出 web格式，存储时选择html.所有切片，然后，选择其他，选择自定，选择切片，选择生成css
css命名有2种方式，根据ID和根据类，一...
怎么从psd转换成html
之前做java的时候一直觉得前端工程师有一种不一样很帅气很酷的感觉，请原谅其实我是觉得他们穿的很时髦~ 关键是可以跟交互或者视觉设计接触这点足以让我向往。于是踏上了前端之路。
没办法半途转行是没人把...
用实例详细讲解将PSD转成HTML&CSS
本教程通过一个实例，来详细讲解如何将psd转为html/css，以及js插件的使用。
将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。因此本教程通过对一个完整实例的详细讲解...
写给前端小白的切图技巧（实用）
我一开始是不会切图的，面试的时候心里也没有底气，但是之前也知道一点切图的知识，只是没有那种疯狂的天天做切图，所以一直也不敢说自己会熟练的切图，经过近一个月的切图经历之后，今天来分享一下纯纯的小白切图基...
拿到任务psd，如何切图，如何通过ps理清思想，完成到html的布局改变。
25种方法一步一步指导你将&em&PSD&/em&网站demo 转换成&em&HTML&/em& +CSS 十分的经典,从国外的网站上好不容易弄下来的。需要英文基础。和&em&HTML&/em& \\ CSS \\Photoshop 基础。
将&em&psd&/em& 转换成 &em&html&/em&的简单样板模型包含 &em&psd&/em&文件 &em&html&/em& css等 可对照参考学习
前端入门练习之将psd文件转换为HTML文件附上psd文件1.用Photoshop打开psd文件，按下ctrl+alt+d将文件放大，观察页面布局2.对psd文件进行切图，切除自己需要的logo或图片...
前端切图，把psd文件做成一个网页
马上要去报到上班鸟，好激动，过年假期玩傻了，作业还没完成，希望不会被劝退！！！
关于切图作业，先缕缕大致步骤：
1、拿到psd文件，先分析，对页面的结构有个大致了解，最好可以动手画画草图；
没有更多推荐了，