公共图书馆网站响应式设计的实现

李悦

关键词：响应式设计;响应式原型;XHTML线框图;CSS3媒体查询;内容管理软件

摘 要：文章根据公共图书馆专题数据库和网站专题建设中内容结构规划的需要，通过使用XHTML和CSS构建代表性网站页面，使用CSS3媒体查询，借助内容管理软件，构建可交互的响应式XHTML线框原型，在线框原型内容结构和响应式布局测试基础上实现响应式视觉设计，起到协助内容规划、网站开发及加快网站建设的作用。

中图分类号：G258.2文献标识码：A文章编号：1003-1588（2019）02-0012-03

随着公共图书馆专题数据库、网站专题建设数量的增加，如何合理规划专题数据库及网站专题的内容结构是其在网站开发中亟须解决的问题。网站建设的目的是为了向网站使用者揭示特定主题的内容，有序组织和揭示内容。用户访问网站是为了获取信息，网站的视觉设计及编程技术都是为网站内容服务的。传统的网站开发流程先进行视觉设计，再填充内容，内容总是处于次要状态，常常无法满足用户的需要。响应式XHTML线框原型的设计实现方法使公共图书馆能够在网站专题栏目规划完成后，建立起可交互的未经视觉美化的响应式XHTML线框原型。使用响应式线框原型测试、调整栏目结构，使网站开发过程能更专注于专题数据库和网站专题内容的有序组织和揭示，符合以内容为主导的网站开发建设思路，体现了先进的网站建设方法。使用响应式原型测试响应式布局，可以在测试的基础上最终实现专题数据库和网站专题的响应式设计。

1 XHTML线框图原型和响应式设计

1.1 XHTML线框图原型

线框图指网站每个页面内容的梗概，能显示信息的层级结构及需要的空间。创建线框图可保证页面中包含它需要的所有信息。线框图不包括网站的配色方案、背景或图像等内容，主要着眼于每个页面需要什么样的信息，并创建视觉层次结构以表明每个页面中最重要的部分[1]。线框图是让网站内容建设人员及相关人员尽早参与Web开发的一个工具。XHTML线框图原型可以起到改善内容规划和设计的作用，当用户与XHTML线框图原型进行交互时，用户参与其中能更好地理解上下文。

1.2 响应式设计和响应式XHTML线框原型

从用户的角度看，响应式设计就是网页内容能自动改变大小和移动位置以适配显示它们的屏幕。用户使用任何设备访问网站，获得的网站内容都是相同的，且网页上展示的是全尺寸的文本，无须用户缩放操作查看内容。响应式原型是内置响应式XHTML的线框图，可使各种屏幕上的设计随着设备宽度的变化而变换，其显示效果与线框图原型类似。区别在于布局是响应式的，响应式原型可调整浏览器窗口，在不同设备上查看原型，观察布局是如何变化的。使用响应式原型可以同时测试网站专题的栏目结构和响应式布局，起到加快网站开发的作用。

2 响应式XHTML线框原型的设计实现

2.1 构建代表性的XHTML页面

具有代表性的Web页面包括首页、列表页和内容页，这三种页面相互链接就可以构成完整的Web站点。首页，即所有栏目集中显示的页面。列表页是针对某一栏目而言的，即该栏目下的文档以列表形式显示出来的页面。内容页，是用于显示文档具体内容的页面[2]。三种代表性Web页面的页面结构都可划分为页头、导航、主内容区域和页脚。其中，首页的主内容区域划分为与一级栏目数量相同的多个区域，每个区域包括一级栏目名称、链接地址、栏目文档列表，以及栏目具体内容的截取内容。列表页、内容页的主内容区域均划分为两部分，都包括次级导航。列表页的主内容区域分为文档列表和分页链接，文档列表包括标题、责任者、日期等内容。内容页的主内容区域为文档的详细内容，包括标题、责任者、发布时间和正文等内容。

构建代表性的Web页面的XHTML代码，应使用简洁的语义化XHTML代码，分离内容和表现，不使用表现性元素，编写的内容应该不借助CSS也能浏览，具有良好的阅读性。响应式设计的内容先于布局，内容采用线性设计的原则，突出重点内容。用户按照什么顺序阅读网页内容，XHTML代码就应该按什么顺序编写。如果没有布局，所有的内容就需要按照用户想要它出现的顺序编码，也就是一块内容接一块内容地线性排列。

公共图书馆应使用XHTML1.0构建首页、列表页、内容页三种代表性页面，其中列表页内容区域划分为文本、图片、文本图片混排三种形式。响应式设计中的媒体查询是基于视口宽度的，在台式电脑上视口是浏览器窗口去掉菜单、工具栏、滚动条的部分，在移动设备上视口的宽度就是屏幕的宽度。在XHTML代码中添加将页面渲染宽度设置为视口宽度的语句，能为后续响应式布局作准备，将构建完成的代表性XHTML页面作为响应式原型开发的基础页面。

2.2 构建包括实际内容的XHTML页面

公共图书馆使用内容管理软件建设维护网站，内容管理软件的工作原理是将网站的动态信息和彼此之间的关系存入数据库，程序自动结合栏目模板（含有置标的HTML）和文档数据（数据库中的数据），按照栏目规则生成网站各层次的XHTML静态页面和页面链接，以静态页面的形式发布动态信息，完成网站的自动生成[3]。

在网站设计前，考虑网站内容将帮助网站建设者创建一个符合网站目标和用户需要的网站，在网站设计时使用实际内容有利于提高网站视觉设计的效果。响应式设计的内容先于布局，有内容的XHTML页面是进行响应式设计的基础，公共图书馆借助内容管理软件的发布功能实现XHTML页面内容的添加、维护，進而自动生成列表页中的标题列表和图片列表。具体流程是：将代表性的XHTML页面制作成内容管理软件的模板;在内容管理软件中添加网站专题规划的一级栏目，并按照栏目的表现形式指定对应的模板;将网站内容、主导航、次级导航的代码作为内容管理软件的文档进行管理，使用内容管理软件完成网站内容的添加、维护以及导航代码的维护;使用内容管理软件生成无样式控制的、包含网站专题实际内容的、可以互相链接的XHTML页面，并将其作为响应式原型CSS开发的基础。

2.3 响应式原型的设计实现

使用CSS完成响应式XHTML线框原型的构建，公共图书馆需要注意的是原型应该只涉及页面内容布局及响应式布局，不应涉及视觉设计美化。

2.3.1 设计思想的确定。响应式设计思想包括“从桌面端向下设计”和“从移动端向上设计”两种形式。“从桌面端向下设计”的思想，即Web页面的默认布局是台式机浏览器中所看到的样子，并利用CSS3媒体查询针对移动设备的小屏幕简化、调整布局。公共图书馆可采用“从桌面端向下设计”的思想，这种设计思想便于操作，并能对现有网站进行响应式改造。

2.3.2 创建核心体验。公共图书馆采用“从桌面端向下设计”的思想，核心体验应设定为固定宽度桌面版的CSS样式。将桌面版CSS样式代码集中在一个CSS样式文件中，而将使用媒体查询实现其他布局的CSS样式代码集中在另一个CSS样式文件中。在这种情况下，公共图书馆只要在XHTML页面代码中移除实现响应式布局的CSS文件引用，响应式线框原型就会立即变成普通的线框图原型。

2.3.3 确定断点。断点是响应式设计的重要概念，用媒体查询在断点处改变布局设计，使设计产生不同的变体。公共图书馆应根据内容确定断点及需要设置多少个断点，而不是简单地把常用设备的宽度设置为断点。

2.3.4 对于不支持媒体查询浏览器的支持。使用条件注释能实现IE8及以下版本浏览器对媒体查询的支持，而忽略对其他不支持媒体查询的非IE浏览器的支持，就是让少数非IE用户错过媒体查询这个功能。在响应式原型初步开发完成后，开发人员可在浏览器中直接浏览原型，完成栏目结构和响应式布局的测试。

2.4 響应式原型测试

2.4.1 内容结构测试。内容开发人员使用包括网站专题内容的响应式XHTML原型，完成栏目结构的测试、调整、再测试、再调整，最终构建合理的栏目结构，确定正式的栏目结构;调整首页、列表页、内容页内容区域不同内容的顺序，按照重要内容、次要内容、最不重要内容进行线性排列，为正式的响应式布局做好内容准备工作。

2.4.2 响应式布局测试。在内容结构测试完成的基础上，设计人员使用响应式原型，测试响应式布局，调整断点设定，调整响应式CSS代码，为正式的视觉设计做好布局准备。在响应式布局测试完成的基础上，设计人员会将最终实现各方认可的响应式原型作为后续网站专题开发的基础，继续进行视觉设计、程序开发、内容建设等一系列开发工作。

3 响应式视觉设计的实现

3.1 响应式视觉设计的实现

设计人员在响应式原型测试完成的基础上，会进行正式的视觉设计。由于在视觉设计前，设计人员就已经清楚每个页面上需要显示的信息，对内容的关系理解更清晰，有助于视觉设计更贴近网站内容和主题，以及更优秀的视觉设计作品的产生。设计人员将包含实际网站内容的响应式XHTML线框原型页面作为视觉设计的参考依据，在准确把握网站主题和内容的基础上，能够较容易地完成二至三种视觉设计，能够提供给网站建设的决策者多种可供选择的视觉设计。

3.2 响应式视觉设计代码的实现

响应式线框原型已经测试过响应式布局，设计人员可跳过大部分响应式布局的代码工作，只需做一些代码调整工作，将代码工作的重点放在实现新的视觉设计实现方面，能够以较快的速度完成响应式代码工作。公共图书馆将网站视觉设计放在网站开发建设的最后一步，能起到简化网站开发的作用，突出网站内容优先的网站建设思路。

4 响应式XHTML线框原型的使用效果

4.1 响应式XHTML线框原型作为后续Web开发的基础，内容建设、视觉设计、技术开发应并行工作，加快开发进程

在网站专题的XHTML线框原型得到内容建设人员、视觉设计人员和开发人员的认可后，相关人员会在XHTML线框原型的基础上并行开展工作，加快网站开发的进程。具体的工作流程是：内容建设人员使用内容管理软件中的栏目开始内容建设，设计人员使用线框原型开始视觉设计，开发人员在线框原型的基础上进行技术开发。

4.2 响应式XHTML线框原型测试更直观，凸显内容，减少过度关注视觉设计

内容开发人员借助可交互的响应式XHTML线框原型，对栏目结构进行测试，并在测试基础上对栏目结构进行调整。原型测试使开发人员的注意力集中在网站专题栏目结构是否合理，内容是否得到充分展示等问题上，将网站建设的重点放在内容规划和开发上。

4.3 使用内容管理软件发布XHTML原型页面，栏目结构调整更方便，节省XHTML代码工作的时间

通过在内容管理软件中建立与专题栏目对应的栏目，建立包括导航代码和网站内容的文档，即可在短时间内完成网站专题XHTML页面的构建。通过简单地增加、修改、删除栏目，修改包括导航代码和专题内容的文档，重新发布整个专题栏目，即可完成XHTML线框页面栏目结构和内容的调整，减少了XHTML代码修改的工作，减少了使用网页制作软件维护XHTML网页代码的工作，提高了工作效率。

4.4 XHTML代码重用，使用CSS设计

在线框原型阶段采取保存和重用XHTML代码的目的完成工作，将线框原型的XHTML代码作为开发基础，使用一个或多个CSS对原型进行布局、调色及排版，无须修改任何XHTML代码，可以快速改变视觉设计。

5 结语

公共图书馆借助响应式原型的设计最终实现其网站的响应式设计，通过响应式设计能够向用户提供更好的访问体验，向使用不同设备（包括手机、平板电脑、台式机）的访问用户提供相同的网站内容，使用移动设备的用户无须通过缩放操作查看文本内容。响应式设计还能够避免用户访问手机版网站和桌面版网站而获得不同的内容，避免网站建设人员维护手机版、桌面版等多个网站。

参考文献：

[1] Duckett J.HTML&CSS设计与构建网站[M].北京：清华大学出版社，2013：452.

[2] 乔冰琴.网站项目规划与设计[M].北京：清华大学出版社，2009：36.

[3] 刘运臣.网站规划与网页设计[M].北京：清华大学出版社，2009：80.

（编校：孙新梅）