移动互联网络环境下图书馆页面布局设计研究

2015-03-10 05:55林嘉琪
图书馆学刊 2015年6期
关键词:样式网页代码

林嘉琪

(1.武汉大学信息管理学院,湖北 武汉 430072;2.广东省立中山图书馆,广东 广州 510110)

截至2014年12月,据《第35次中国互联网络发展状况统计报告》显示,我国网民规模达6.49亿,全年共计新增网民3117万人,互联网普及率为47.9%,较2013年底提升了2.1%个百分点,手机网民规模达5.57亿,较2013年增加5672万人,由2013年的81.0%提升至85.8%[1]。随着移动互联应用的日益深入,图书馆网页服务不仅面向PC浏览器的使用,还要适应各种移动终端的使用环境以及用户的各种使用需求。基于此,图书馆网页设计应遵循Web标准,提高网页的规范性、灵活性和易用性,以适应未来互联网应用的发展。

1 Web标准的特点与优点

Web标准是由万维网联盟(W3C)构建的网页设计标准,主要包括可扩展超文本标识语言(XHTML)标准和层叠样式单(CSS)标准[2]。推行Web标准的目的是提升网页的简洁度、兼容性、易用性和灵活性,以适应今后互联网应用发展的需要。Web标准的特点是表现与结构相分离的网页设计模式。表现是页面的外观样式,通过样式代码来控制页面元素的排列与布局,向用户呈现易于浏览的页面外观。结构是由XHTML标签组成的代码结构,用于标识页面元素,为机器读取页面元素提供标识。在Web标准设计模式中,样式代码被独立保存为CSS文件,而结构代码与页面内容保存为XHTML文档。在这种模式下,网页文档的代码结构独立,样式调用灵活,有利于网页功能扩展以及日常维护。在移动互联时代,遵循Web标准设计的网页具有以下优点,使其适应了移动互联应用的发展。

①文档通用度高。XHTML文档是得到广泛支持的网页文档规范。无论在不同的浏览器软件中,还是在不同的硬件设备中,都能够被正确地解释,有效防止了网页文档出现兼容性错误。②数据交换性强。XHTML文档本质上是结构完整的XML文档,良好的代码结构使XHTML具有高效的数据交换功能,支持第三方软件或设备灵活地读取网页数据。随着移动互联技术的深入应用,网页文档也需要强调数据交换能力,以支持移动设备对网页内容的提取与利用。③页面样式灵活。通过更改调用CSS文件,能够灵活地改变页面样式,使XHTML文档能够针对不同的设备,如PC浏览器、手机、掌上电脑等的使用环境,调用对应的样式代码,呈现合适的页面外观。

2 遵循Web标准的网页设计技巧

Web标准不仅包括各种设计文档,包括XHTML文档、CSS文档、DOM(文档对象模型)的建设规范,还包括一套Web标准设计思路和设计技巧。笔者将由浅入深地阐述Web标准的网页设计思路和技巧。

2.1 应用三层模型设计网页

所有HTML和XHTML页面都是由“结构、表现和行为”这3方面组成的,抽象一点理解,内容是基础层,然后是结构层,最后附加表现层和“行为”[3]。设计模型如图1所示。

图1 网页设计三层模型

三层模型描述了结构、表现与行为之间的相互关系:①结构、表现、行为三者相分离,对应着3个独立的文件XHTML文件、CSS文件以及脚本语言文件,三者之间是调用与被调用的关系。②结构是Web标准下网页设计的核心元素,由一系列的XHTML标签组成,用于标识各个页面元素。程序利用文档对象模型(DOM)类库来访问结构化标签,能够读取指定位置的页面内容,动态调用样式代码和行为代码作用于指定的页面元素上。

2.2 使用语义标识构造网页文档

著名网页设计师Dan Cederholm说:“当谈及语义时,我的意思是使用表达意思的标记,而不是表现指令[4]。”Dan Cederholm的话是针对网页标签误用现象而提出。W3C对每个标签都做了定义及语义说明,但在实际使用中却存在各种误用,例如

标签被用来定义网页元素的位置,
标签用于页面布局。这些误用会导致浏览器解释网页文档时出错,或者是难以被第三方软件读取网页文档数据。基于此,需要还原网页标签的原义,正确书写网页文档。实现技巧有3方面。

①转变设计思路,正确使用页面标签。大多数情况下,标签误用源于代码跟着设计走的错误思路,导致本该用来标识内容的标签被误用于营造页面布局。Web标准倡导的设计思路是根据网页内容来选用网页标签,如表格数据使用

标签标识,列表内容使用
  • 标签标识,网页布局通过调用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.

    猜你喜欢
    样式网页代码
    CPMF-I 取样式多相流分离计量装置
    CPMF-I 取样式多相流分离计量装置
    取样式多相流分离计量装置
    基于HTML5与CSS3的网页设计技术研究
    创世代码
    创世代码
    创世代码
    创世代码
    基于CSS的网页导航栏的设计
    基于HTML5静态网页设计