新人求助，这类设计图纸该如何切片构图。_html/css_WEB-ITnose

这样的设计图。
运用了大量的透明以及光影效果。
试过直接按块切片，然后DIV强行定位拼接，但是效果很不理想很多地方能看到明显的接缝。
但是如果按层来切，GIF不支持半透明，用PNG的话IE6貌似又不支持png的透明。

新手，求大虾指点。

PS：如果有能帮助做下万分感激，pm我留下QQ，我发PSD图纸（可以追分）。

回复讨论(解决方案)

我估计看到明显样式是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌，耐心一点吧，呵呵

我估计看到明显 接缝是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌，耐心一点吧，呵呵

我估计看到明显接缝是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌，耐心一点吧，呵呵

不是样式没调整好。我说的接缝是指的两个图片衔接处有肉眼可见的色差，应该就是切片时候产生的

自动切片有时候是会有点问题。所以很多美工不会用自动切片功能，而是自己手工切，就是按像素去对位切分。

按层就太费劲了。
按块的话，很容易啊，结构其实很简单。看看美工教程吧。

另外这个页面，视觉设计很成问题，居然通过了，看来老总和总监都很好说话啊。

自动切片有时候是会有点问题。所以很多美工不会用自动切片功能，而是自己手工切，就是按像素去对位切分。

按层就太费劲了。
按块的话，很容易啊，结构其实很简单。看看美工教程吧。

另外这个页面，视觉设计很成问题，居然通过了，看来老总和总监都很好说话啊。

我就是用手工按像素去对位的啊-。-
还有。。这个页面的问题怎么改进？
通过的原因是整个公司都是搞电气的，对WEB一窍不通，整个项目从规划到设计到开发到测试运营就我一个人。。。

放弃ie6吧，这玩意太难搞了

放弃ie6吧，这玩意太难搞了

看这个网站的人主要都是电气领域。随便找个电脑或者公司电脑什么的。很多都是IE6，不考虑不行啊。

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位 

http://download.csdn.net/detail/stongyann/4172822   另外 PNG 的是可以处理的 。你可以理解为这是我再做广告，但是确实有效。我是自己 测试过的。

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位

整图做背景的话 载入速度会不会很蛋疼？

通过的原因是整个公司都是搞电气的，对WEB一窍不通，整个项目从规划到设计到开发到测试运营就我一个人。。。
那就不必自己给自己找麻烦了。理论上技术者是应该能做得更好就做到更好，但现实中还得相对地看。先简单搞一个就可以。但为了不让领导过后看着觉得跟人家比总好像有点差距，产生想换人的心思，你可以有时间再准备一个稍好的方案，在觉察领导有点那情绪时先拿给领导看看，让他看到你的能力是持续进步的，以后他就放心了。开始一次性地做到“质量在几年内保持领先”，过后没活干吃亏的反倒是自己。我只是觉得你不用愁自己目前能力了，和他们的WEB经验和眼光比你还是超出的。

引用 6 楼 的回复:
放弃ie6吧，这玩意太难搞了

看这个网站的人主要都是电气领域。随便找个电脑或者公司电脑什么的。很多都是IE6，不考虑不行啊。
呵呵，我以前在这领域干过，知道他们确实就这样的，IE6不仅要管，而且还得作为主要对象。

接缝色差的问题，还是和切图的经验方法有关。要看怎么划分，然后在切的时候根据情况注意一些事项或做一些必要处理。

另外，为消除CSS盒模型差异导致的微小缝隙，
* {padding:0;margin:0;}
也要加在或外部CSS中。

引用 9 楼  的回复:

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位


整图做背景的话 载入速度会不会很蛋疼？ 你可以把图片 按最小的 大小存储 比如 GIF 的就相对小点。

这个页面真炫呀~~~~
呼呼

对你楼主你也是一个人呀,我也是一个人在公司了负责，全是我一个人搞....对于上面的问题: 你们那里应该有美工吧.  这样吧。 要美工先把这背景图片弄出来，至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....  

恩，对了，还有对于兼容问题： ie 6 上面的大侠说的对放弃对他的测试。 我也是...做出网站不兼容ie6  。就测试下 i7 以上 加上火狐 谷歌 就行了.....

实在要ie 6用  css hack 可以，就是有点麻烦 

对你楼主你也是一个人呀,我也是一个人在公司了负责，全是我一个人搞....对于上面的问题: 你们那里应该有美工吧. 这样吧。 要美工先把这背景图片弄出来，至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....
很明显，楼主比你还惨，有美工也只是软件美工，不懂WEB美工应该做的，而且切图还有些经验性的东西，不是表面一想那么简单。

ie6不能不管，但在不是特别熟悉的情况下，也用不着费力去做 css hack ，可以用现成的CSS/JS框架和JQUI,EXTJS，YUI等界面库。

css框架的特征
1.抽象出常用的css样式,高再可用性,高移植性 　　
2.有固有的定义,详细的文档及开发特点 　　
3.高兼容性,可以兼容流行的浏览器 　　
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

常用的css框架: 
1. 960g 
2. YUI 2: Grids CSS 
3. Blueprint 
4. BlueTrip 
5. Elastic CSS 
6. Easy 
7. EZ-CSS 
8. Tripoli 
9. CleverCSS 
10. SenCSS 

对你楼主你也是一个人呀,我也是一个人在公司了负责，全是我一个人搞....对于上面的问题: 你们那里应该有美工吧.  这样吧。 要美工先把这背景图片弄出来，至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....

很杯具。。。我比你更惨。连这个设计图纸都是我自己画的。。。如果有美工 我也不用在这里问了。

引用 15 楼  的回复:
对你楼主你也是一个人呀,我也是一个人在公司了负责，全是我一个人搞....对于上面的问题: 你们那里应该有美工吧. 这样吧。 要美工先把这背景图片弄出来，至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....

很明显，楼主比你还惨，有美工也只是软件美工，不懂WEB美工应该做的，而且切图还有些经验性的东西，不是表面……

谢谢你的建议。
另外我还有个问题。

如果我分块切片的话 用绝对定位是能拼在一起，但是如果浏览器分辨率大于1024*768的话，整体页面显示就会不是居中的了。但是我用表格或者div做最外层，让其居中。然后其他div相对定位，就会出现各个图片无法拼接的现象。

这种情况怎么解决。

引用 11 楼  的回复:

引用 9 楼  的回复:

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位


整图做背景的话 载入速度会不会很蛋疼？
你可以把图片 按最小的 大小存储 比如 GIF 的就相对小点。

我这图储存成最小格式的话，效果惨不忍睹。