基于Drupal 7HTML5布局模板二次开发.doc

基于Drupal 7HTML5布局模板二次开发 　　摘 要： 以目前在国外广泛应用的Drupal 7为应用开发框架，结合HTML5、样式表、动态脚本和第三方插件技术，通过在WAMP平台上对Drupal进行二次开发，设计了一套具有友好界面、易添加与删除容器，并动态加载数据的布局模板。该模板采取分层设计，从根容器到目标内容容器构建页面框架；采用HTML5自适应布局设计方法，针对不同的业务需求完成个性化定制界面UI。同时介绍了利用主流浏览器调试工具对界面代码进行分析与调试。 关键词： Drupal 7； HTML5； 样式表； 动态脚本； 自适应布局 中图分类号：TP315 文献标志码：A 文章编号：1006-8228（2013）12-52-03 Secondary development of HTML layout template based on Drupal 7 Chen Hao， Wu Jian （Information system of Suzhou institute， Suzhou trade and commerce college， Suzhou， Jiangsu 215009， China） Abstract： Taking Drupal 7， widely used overseas， as development framework， combining with HTML5， style sheets， dynamic scripting and third-party plug-in technology， Drupal on WAMP platform is developed for the second time. A set of friendly interface is designed， on which it is easy to add and delete container and dynamically load data layout template. Adaptive layout template method using HTML5 is used. UI can be customized according to different business needs. After the design is completed， the use of mainstream browsers interface code debugging tools for analysis and debugging is introduced. Key words： Drupal 7； HTML5； style sheets； dynamic script； adaptive layout 0 引言 目前，三网融合趋势日趋明显，网络应用越来越集成化，各种CMS被广泛地应用于Web App制作。其中Druapl作为功能强大的CMF，以其功能丰富的CMS结合PHP Framework受到全球网站开发者的青睐。从长远来看，Drupal先进的模块化设计理念结合“自适应布局”会成为国内互联网应用的主流。“自适应布局”是利用HTML5的布局代码来快速建立新的应用界面的方法，其易用性好，可以适应不同设备，并有着很好的定制性和替换性，克服了传统界面修改及其繁琐或是无法修改的缺点[1]。 本文利用Drupal进行二次开发，设计一套具有友好界面、易添加与删除容器并动态加载数据的布局模板。 1 项目架构 1.1 总框架 本设计采用Drupal默认的主应用框架，结合HTML5、样式表、动态脚本和第三方插件技术美化默认布局。系统能够快速完成单个元素样式的修改，用户可以调用该模板的内容发布器来快速发布、修改和删除内容。项目的开发流程图如图1所示[2]，本文将讨论“修改为Druapl输出”部分的内容。 预期模板包含2个默认页面变量和8个Region，插入外部样式表CSS调整样式，利用外部动态脚本JS来调整动态效果。 1.2 子模块设计 ⑴ 页面头部设定2个默认变量标志（Logo）和导航（Navigation），作为应用的标示和总体导航，出现在所有页面的头部。 ⑵ 显示区块定义为Region，数据动态加载，可以有效地分离数据与UI，降低元素样式关联性。包括首页与分页在内，一共设计有8个Region。分别是[featured]、 [content]、[sidebar]、[social]、[footer]、[help]、[page_top]和[page_bottom]。其中[featured]、[content]