搜索
首页web前端html教程新人求助,这类设计图纸该如何切片构图。_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 的就相对小点。

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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具