标签标识,网页布局通过调用CSS代码来实现。②采用层级标题定义文档结构等级[5]。类似于Word的文档结构图功能,XHTML规范中也定义了6个标题级别来标识文档结构等级,从最重要的
到最不重要的。对于内容层级结构丰富的网页,如图书馆的介绍性页面、数据库说明页面等,适宜采用层级标题定义文档结构,以方便浏览器或第三方软件识别网页内容及其重要程度。
③固定文档代码结构。在Web标准的设计模式中,网页文档只跟网页内容相关联,而跟页面布局、页面样式没有任何关系[6]。换言之,只要网页内容固定,那么网页文档的代码结构应该是固定不变的。这既是深入推行Web标准的思路,又是衡量表现与结构相分离的实现程度的标准。按照上述思路书写网页文档,网页将真正具备表现与结构相分离的特质,其简洁性、易读性和可访问性都会得到提高。
2.3 应用灵活布局设计
理论上讲,具有表现与结构相分离特质的网页,在不改变文档结构的情况下,可灵活调用CSS样式文件改变样式及布局。从使用上讲,灵活布局有广阔的应用。Web标准计划任务组成员Zoe Mickley Gillenwater认为,“页面需要适用于各种查看情况。既包括对各类用户的使用需求,又包括对各类终端设备使用环境的支持。正因为使用需求及环境的不确定性,因此页面本身也是灵活的,页面布局、内容大小都不是固定的[7]。”针对图书馆网页的使用特点,笔者提议可采用两种网页布局技巧。
①建立弹性框架。弹性框架是指页面框架能够自动适应页面文本字体的大小变化而改变,就像一个可适应物体大小变化的容器。根据笔者对清华大学等8所高校图书馆①网站调查数据所得,没有网站支持主流浏览器自带的字体大小调节功能,这个功能缺陷会对网页的可用性造成一定的负面影响。与此相比,国外大多数的网站支持字体大小调节功能,两者的差别在于网页是否采用弹性框架。实现弹性框架的关键是采用em来衡量页面元素的大小。em是一个相对单位,相当于一行文字的高度,默认设置下1em=16像素。以em为单位来设置页面元素的大小,当增大em的单位像素值时,所有文本及包容文本的页面元素会同比例放大,反之则缩小。网页应用了弹性框架后,用户就能够自如地调节字体大小。这也使得读者通过手机访问图书馆网页时,能够突破网页字体大小的限制,改善网页访问效果。
②建立多元样式布局。多元样式布局是指一个网页文档存在多种CSS文件可供调用。常见的例子有用户自定义网页颜色,其原理是网页文档响应用户行为,动态地调用不同的CSS文件来更改页面元素的颜色属性。在移动互联时代,建立多元样式布局显得更有意义。当读者通过手机访问图书馆网页时,限于屏幕尺寸,他们将希望隐藏非必要的页面元素如标题logo、页脚栏目等,只显示文本信息。为了节省时间,读者希望访问简洁版的页面,而不是带有所有图片及辅助栏目的完整页面。这些都是潜在的需要,只是在当前未得到足够重视。为此,未来的图书馆网页需要全面考虑各种用户群体和使用环境,针对每一种使用情况,设置不同的CSS属性值。例如,display属性分别设置为“display:none”和“display:block”,可隐藏或显示受控的页面元素。需要更改页面样式文件时,可通过更改网页文档头标签的href属性,调用需要的CSS文件。
3 图书馆新书推介页面设计分析
图书馆新书推荐具有信息量大、利用率高的特点,笔者此处选择新书推荐页面作为案例分析,以基本体现图书馆网页的功能特性。
3.1 页面功能分析
在Web标准设计模式下,新书推介页面可拥有更多的功能扩展,以提高页面的可用性和灵活性,实现与移动互联应用对接:①文档格式转换功能。为方便移动设备用户直接阅读新书推介的文本信息,页面应提供多种格式文档供选择,如XML文档、PDF文档。②字体大小调节功能。为适应各种用户群体的浏览需要,页面应支持用户使用字体大小调节功能。③页面外观自适应功能。页面需要适应不同的使用环境,调用并呈现对应的页面外观。
3.2 页面代码设计
根据页面功能需要,页面代码设计应用了以下技巧:①应用三层模型构建设计雏形,将设计工作分为books.html页面文档设计和books.css样式代码设计。②应用层级标题标签构造页面文档代码结构。
、、标签将文档划分为三层级别结构,每个层级下再应用XHTML标签标识文档内容。③应用弹性框架设计。采用em作为所有页面元素大小的衡量单位。④应用多元样式布局。针对PC浏览器和手持移动设备分别设计一套CSS样式文件。⑤增加页面数据转换/导出功能。提供与页面文档对应的XML文档或为PDF文档格式下载。
books.html文档代码如下:
books.css文档主体代码如下:
3.3 页面优点分析
设计后的新书推介页面效果如图2所示。
图2 遵循Web标准的图书馆新书推介页面
新书推介页面具有如下优点:
①网页规范度高,通用性强。由于book.html文档代码遵循XHTML规范设计,保证了网页文档在不同的浏览器环境下都能够被正确解释执行。
②支持与第三方的数据交换。books.html文档不仅支持PC浏览器的解释执行,还支持第三方软件对网页数据进行抓取利用。还可以将books.html文档内容转变格式输出,如XML文档或PDF文档。转换XML文档的方法比较简单,将book.html的DOCTYPE指令更改为XML文档标识<?xmlversion=“1.0”encoding=“gb2312”?>,保存为XML文档格式即可。转换PDF文档则需要借助Adobe AcrobatProfessional软件,将网页导出为PDF格式存档。用户可以直接浏览网页或者通过链接下载XML文档或PDF文档阅读(见图2)。
③网页布局灵活,具有更高的可用性。网页设计考虑到用户的使用需要和使用环境的多变性,提供了多种可供选择的外观呈现方案。用户在使用过程中,可灵活选择。图2展示了灵活布局的一种应用,即用户可利用浏览器自带的文字调节功能选择页面文字大小。
4 结语
在移动互联时代,用户需要图书馆网页面向更多的使用环境,具备更多的功能,而不只是局限于PC浏览器的应用,这种需求随着未来4G技术的逐步普及会更加突出。为此,图书馆网页设计应面向未来,着力发展,遵循Web标准的设计思路,应用各种设计技巧,提高图书馆网页设计的规范性、灵活性和易用性,增强网页功能,为适应未来的互联网应用奠定基础。可以预见,在Web 2.0日益健全完善以及移动互联应用深入发展的大背景下,图书馆网页的功能定位必将从以浏览为主迅速转变为以应用为主,页面设计将更加精彩纷呈。
注:
① 8所高校包括:清华大学、北京大学、南京大学、浙江大学、厦门大学、南开大学、武汉大学、中山大学。
[1]360doc个人图书馆[EB/OL].[2015-02-09].http://www.360 doc.com/content/15/0209/13/502486447443340.shtml.
[2]W3C网站.Web标准[EB/OL].[2012-02-08].http://www.w3cschool.cn/site_standards.html.
[3]阿捷.理解表现和结构相分离[EB/OL].[2012-02-08].http://www.w3cn.org/article/tips/2004/43.html.
[4]Dan C著;杨志红,姚军译.基于Web标准的网页设计技巧与实战[M].北京:人民邮电出版社,2010:3.
[5]爆牙齿.深入结构:理解h系列的不合理[EB/OL].[2012-02-10].http://www.cnblogs.com/yuntian/archive/2006/03/08/345609.html.
[6]阿一,等.博客园精华集:Web标准之道[M].北京:人民邮电出版社,2009.
[7]Zoe M,G著;李静,等译.灵活Web设计[M].北京:机械工业出版社,2009.