让页面在手持设备中有良好表现(3)
为多个媒介做设计
在大屏幕上外观表现出色的页面不见得在小屏幕上也出色,但是让页面在质量上不做妥协又在小屏幕上表现出色也不会很困难.从一个普通的文档开始.按照合理的顺序编写了文档,编写时注意到了一些设备设计中特殊要点,再做一些额外的测试就OK了.
最好的工具是CSS的media属性,你可以为让指定的CSS只应用PC屏幕,打印输出,幻灯片演示或者手持设备.让你为其中某个媒介写好了代码,为下一个媒介做优化只是附加少少额外代码而已.
手持设备的样式
使用CSS,可以讲相同的HTML在不同的媒介中产生不同的呈现方式.最有效的方式是讲CSS表拆分为一个样式表与一个媒介相对应的形式.这样设备只下载符合自己的样式而不能加载到幻灯片演示的样式或者桌面PC的样式了.
<!-- 该样式将在所有媒介显示 -->
<link rel="stylesheet" href="all.css"><!-- 该样式仅会在PC屏幕中显示 -->
<link rel="stylesheet" href="desktop.css" media="screen"><!-- 该样式只会在打印时使用 -->
<link rel="stylesheet" href="printout.css" media="print"><!-- 该样式是为幻灯片编写的 -->
<link rel="stylesheet" href="presentation.css" media="projection"><!-- 该样式会被设备采用-->
<link rel="stylesheet" href="phone.css" media="handheld">
有很多其他不同的方式可以使用,这是一个针对设备的简单实例:
<!-- 该样式使用在所有媒介上 -->
<link rel="stylesheet" href="all.css"><!-- 但是对于设备有一些特别的规则 -->
<link rel="stylesheet" href="small.css" media="handheld">
有可能样式表需要列出需要应用的媒介,这是一个样式表针对所有可交互媒介,一个样式表针对打印输出.
<!-- 针对有屏幕的媒介 -->
<link rel="stylesheet" href="screen.css" media="screen, projection, handheld, tv"><!-- 一些针对打印的特殊规则 -->
<link rel="stylesheet" href="printout.css" media="print">
文档顺序
当你使用了一个好的文档顺序时,为多种媒介设计页面变得简单了许多.文档顺序就是HTML代码编写的顺序.大多数情况下页面是按照这个顺序显示的.文档前面的内容显示在上面,后面的内容显示在下面.相邻的元素也显示为相邻的元素.
有一个例外就是表格,表格是以从左到右的顺序显示单元格,再从上到下显示每一行.要是单元格尺寸比较大,那么两个元素可能就会离得很远,即便是他们在代码里看来是挨在一起的.比如下图中的单元格3和4,他们在代码里面相邻,却在页面内隔得很远,而1和4虽然在代码里面隔得远但在页面中看来却很近.
PC屏幕常常能同时显示数列表格的内容,而设备就不同了,因此表格通常需要重新定义一下以便能按照正常顺序阅读.
还有一个例外就是CSS中的float和position,float可以随意把区块浮动到左边活右边,position则可以把元素显示到任意位置包括盖在被的元素上面或者隐藏到别的元素下面.float和position很少用在设备中,另外如果你以不当心,元素可以就被显示到屏幕外面,用户不得不通过滚动条来操作了.
比较好的编写顺序是把重要内容写在HTML的前面,还要附加一些必要的代码,方便用户跳转.
-END-
