wap2.0_图文专题.ppt

WAP2.0 图文专题 minmin 2009.11 Question 1:一个设计引发的纠结 列表符号怎么做？插入图片 or 图片背景？ 图片尺寸是多大？ 图片用什么格式？透明 or 不透明？ 背景图片、插图比较 插入不同高度图标(一) 插入不同高度图标(二) 插入不同高度图标(三) CSS：margin 四组测试用例：9*15px图片；.VM{vertical-align:middle;} CSS：vertical-align:middle影响 CSS：vertical-align:middle影响(图) CSS：vertical-align:middle影响(小结) 透明图片？ 不同位置插入图片 最终实现准则 重要的图片插入，不重要的装饰图片作为背景； 插入图片与文字尺寸相当 全局定义CSS：vertical-align:middle; CSS初始化图片：margin:0; 避免使用透明图片 Question 2:碰到这样的设计？ CSS：对字号的支持 CSS：对行距的支持 最终实现——行距 最终实现——字号 Question 3:Div or Table 一个带头像和个人信息的模块实现 一个带头像和个人信息的模块实现1：DIV+CSS布局方式 一个带头像和个人信息的模块实现1：DIV+CSS布局方式 一个带头像和个人信息的模块实现2：table布局方式 其他table布局示例 最终实现 CSS：border影响-图片 CSS：border影响-DIV CSS：border影响小结 特征小结 综合 插入图标高度尽量与文字高度相当，避免过高或过短 全局定义vertical-align:middle属性，避免单独对图标定义此属性 减少图文混排；不重要的图标考虑用背景实现---好处是避免在一些机型，尤其是mtk机里引起混乱、图片丢失，缺点是在ucweb这样的浏览器里会不显示此处图片； 避免使用透明图片。 避免行距、字号的区别表现 大部分CSS颜色、边框样式都表现良好 -- END -- 两种平台下的UCWEB都不支持图片定义border; S40下，图片margin会包含在图片border内; 几种浏览器都支持对DIV定义border！ S40自带 S60自带 UCWeb6、7 WM5、6 Opera Mini iphone MTK(金立) MTK(纽曼) √ √ × √ √ √ √ √ 图片有默认的margin，且margin会包含在border内； 图片不支持border 支持 结论： DIV的border 普遍被良好支持 图片的border属性在UCWEB下不被支持，不过此属性一般不影响使用 S40自带 ★★★ 屏幕较小 有vertical-align:middle属性和图片自带此属性时插入图标表现良好；无此属性时图标普遍向上偏移 图标带默认margin S60自带★★★★ 图标底部普遍与文字底部对齐 对vertical-align:middle属性无明显反映(部分机型图标自带内置vertical-align:middle属性时偏移稍加剧) 13px-15px的图片无此属性和外包此属性时都表现良好 UCWeb6/7★★★ 不支持背景图、不支持png透明(6.7也不支持gif透明) 图标多、尺寸不一时会发生图标移位、丢失等情况 图片尺寸变化时顶部与文字底部位置保持一致，图片越小越向上偏移(图片超出文字高度时底部与文字对齐)，对vertical-align:middle属性无明显反映； 对13px-15px图片在各种情况下表现良好(13px字号) WM5、6★★★★★ 对vertical-align:middle属性无明显表现； 图片尺寸变化时底部与文字底部位置保持一致，图片越小越向下偏移 对7-10px高图片表现良好 WM5下图片自带边距，内置vertical-align:middle属性时图片表现较好 WM5对行距没有表现；WM6有表现 Opera Mini★★★★★ 表现良好 iphone★★★★★ 表现良好 对vertical-align:middle属性无明显表现 图片底部与文字底部位置保持一致，图片越小越向下偏移，图片自带vertical-align:middle属时会略向下偏移 10-13px高度图片表现良好 MTK(金立)★★☆ 英文字母间距较大 不支持gif透明图片 图标表现基本良好，尽量与文字高度相当 MTK(纽曼)★★☆ 图标显示错乱、图片会引起文字换行 英文数字明显比中文偏小 总体表现较差 * * * * * * 讨论： 背景图片、插图比较 插入不同高度图标 图片格式的选取 不同位置插入图标 CSS对图片位置的影响 S40自带 S60自带 UCWeb6、7 WM5、6 Opera Mi