搜索
首页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
HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。