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

公共图书馆网站响应式设计的实现 关键词：响应式设计;响应式原型;xhtml线框图;css3媒体查询;内容管理软件 摘要：文章根据公共图书馆专题数据库和网站专题建设中内容结构规划的需要，通过使用xhtml和css构建代表性网站页面，使用css3媒体查询，借助内容管理软件，构建可交互的响应式xhtml线框原型，在线框原型内容结构和响应式布局测试基础上实现响应式视觉设计，起到协助内容规划、网站开发及加快网站建设的作用。 中图分类号：g258.2文献标识码：a文章编号：1003-1588（2019）02-0012-03 随着公共图书馆专题数据库、网站专题建设数量的增加，如何合理规划专题数据库及网站专题的内容结构是其在网站开发中亟须解决的问题。网站建设的目的是为了向网站使用者揭示特定主题的内容，有序组织和揭示内容。用户访问网站是为了获取信息，网站的视觉设计及编程技术都是为网站内容服务的。传统的网站开发流程先进行视觉设计，再填充内容，内容总是处于次要状态，常常无法满足用户的需要。响应式xhtml线框原型的设计实现方法使公共图书馆能够在网站专题栏目规划完成后，建立起可交互的未经视觉美化的响应式xhtml线框原型。使用响应式线框原型测试、调整栏目结构，使网站开发过程能更专注于专题数据库和网站专题内容的有序组织和揭示，符合以内容为主导的网站开发建设思路，体现了先进的网站建设方法。使用响应式原型测试响应式布局，可以在测试的基础上最终实现专题数据库和网站专题的响应式设计。 1xhtml线框图原型和积极响应式设计 1.1xhtml线框图原型 线框图指网站每个页面内容的梗概，能够显示信息的层级结构及须要的空间。建立线框图可以确保页面中涵盖它须要的所有信息。线框图不包含网站的配色方案、背景或图像等内容，主要立足于每个页面须要什么样的信息，并建立视觉层次结构以说明每个页面中最重要的部分[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代码中添加将页面渲染宽度设置为视口宽度的语句，能为后续响应式布局作准备，将构建完成的代表性