Heim > Web-Frontend > HTML-Tutorial > 新人求助,这类设计图纸该如何切片构图。_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 09:38:20
Original
952 Leute haben es durchsucht

这样的设计图。
运用了大量的透明以及光影效果。
试过直接按块切片,然后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 的就相对小点。

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage