当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 设计 - 叙事曲(三)

点击数:16642012-08-05 12:34:43 来源: 海盈网络

    查看上述代码,很容易发现许多明显的复杂之处,包括:


    口    表格布局添加了大量的不必要标记。
    口    使用间隔图像-,而不是CSS中的内外边足巨设定,不必要地增加了页面的文件大小。
    口    图片是用img标签添加到页面中的,这些额外的img标签增加了页面的文件大小,导致页面加载需要更长时间。

    口    既然选择了表格布局,那么网站中的各个页面也必须统一使用table。每个页面都包含着类似的table和img标记,因此每次页面加载时浏览器都必须重新请求这些内容并进行重绘。但若是使用CSS,这些布局信息即可缓存于浏览器中。例如在禅意花园的作品中,应用图片的代码只需要加载一次。


    自然,这些都是表格布局中遇到的常见问题。绝大多数设计师也都了解过度使用表格导致的另外一些问题,包括可访问性—很多为盲人准备的屏幕阅读设备都无法正确理解采用表格布局的页面再来考虑一下叙事曲中最重要的设计- "ballade r2 c2 .gif"
width="537" height="429" border="0" alt=""></td>
<td>< img src= "images/spacer. gif" width="1"
height="429" border=" 0 " alt=" "></td>
</tr>
<tr>
<td><img name="ballade r3 c2" src="images/ballade r3_c2.gif" width="537" height:"185" border="0" alt="¨></td>
<td><img src="images/spacer.gif " width= "1" height="185" border=" 0 " alt="’’></td>
</table>
    查看上述代码,很容易发现许多明显的复杂之处,包括:
    口 表格布局添加了大量的不必要标记。
    口 使用间隔图像-,而不是CSS中的内外边足巨设定,不必要地增加了页面的文件大小。
    口 图片是用img标签添加到页面中的,这些额外的img标签增加了页面的文件大小,导致页面加载需要更长时间。
    口 既然选择了表格布局,那么网站中的各个页面也必须统一使用table。
    每个页面都包含着类似的table和img标记,因此每次页面加载时浏览器都必须重新请求这些内容并进行重绘。但若是使用CSS,这些布局信息即可缓存于浏览器中。例如在禅意花园的作品中,应用图片的代码只需要加载一次。


    自然,这些都是表格布局中遇到的常见问题。绝大多数设计师也都了解过度使用表格导致的另外一些问题,包括可访问性—很多为盲人准备的屏幕阅读设备都无法正确理解采用表格布局的页面再来考虑一下叙事曲中最重要的设计意图——引导读者视线,我们就会发现使用表格将导致的另外一个问题:因为table布局页面的加载过程通常都不会那么平稳自然,所以这种笨拙守旧的布局
方式将很有可能扰乱作品的视觉流向。
【责任编辑:(Top) 返回页面顶端