摘 要： 以目前在國外廣泛應(yīng)用的Drupal 7為應(yīng)用開發(fā)框架，結(jié)合HTML5、樣式表、動(dòng)態(tài)腳本和第三方插件技術(shù)，通過在WAMP平臺(tái)上對(duì)Drupal進(jìn)行二次開發(fā)，設(shè)計(jì)了一套具有友好界面、易添加與刪除容器，并動(dòng)態(tài)加載數(shù)據(jù)的布局模板。該模板采取分層設(shè)計(jì)，從根容器到目標(biāo)內(nèi)容容器構(gòu)建頁面框架；采用HTML5自適應(yīng)布局設(shè)計(jì)方法，針對(duì)不同的業(yè)務(wù)需求完成個(gè)性化定制界面UI。同時(shí)介紹了利用主流瀏覽器調(diào)試工具對(duì)界面代碼進(jìn)行分析與調(diào)試。

關(guān)鍵詞： Drupal 7； HTML5； 樣式表； 動(dòng)態(tài)腳本； 自適應(yīng)布局

中圖分類號(hào)：TP315 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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 引言

目前，三網(wǎng)融合趨勢日趨明顯，網(wǎng)絡(luò)應(yīng)用越來越集成化，各種CMS被廣泛地應(yīng)用于Web App制作。其中Druapl作為功能強(qiáng)大的CMF，以其功能豐富的CMS結(jié)合PHP Framework受到全球網(wǎng)站開發(fā)者的青睞。從長遠(yuǎn)來看，Drupal先進(jìn)的模塊化設(shè)計(jì)理念結(jié)合“自適應(yīng)布局”會(huì)成為國內(nèi)互聯(lián)網(wǎng)應(yīng)用的主流?！白赃m應(yīng)布局”是利用HTML5的布局代碼來快速建立新的應(yīng)用界面的方法，其易用性好，可以適應(yīng)不同設(shè)備，并有著很好的定制性和替換性，克服了傳統(tǒng)界面修改及其繁瑣或是無法修改的缺點(diǎn)[1]。

本文利用Drupal進(jìn)行二次開發(fā)，設(shè)計(jì)一套具有友好界面、易添加與刪除容器并動(dòng)態(tài)加載數(shù)據(jù)的布局模板。

1 項(xiàng)目架構(gòu)

1.1 總框架

本設(shè)計(jì)采用Drupal默認(rèn)的主應(yīng)用框架，結(jié)合HTML5、樣式表、動(dòng)態(tài)腳本和第三方插件技術(shù)美化默認(rèn)布局。系統(tǒng)能夠快速完成單個(gè)元素樣式的修改，用戶可以調(diào)用該模板的內(nèi)容發(fā)布器來快速發(fā)布、修改和刪除內(nèi)容。項(xiàng)目的開發(fā)流程圖如圖1所示[2]，本文將討論“修改為Druapl輸出”部分的內(nèi)容。

預(yù)期模板包含2個(gè)默認(rèn)頁面變量和8個(gè)Region，插入外部樣式表CSS調(diào)整樣式，利用外部動(dòng)態(tài)腳本JS來調(diào)整動(dòng)態(tài)效果。

1.2 子模塊設(shè)計(jì)

⑴ 頁面頭部設(shè)定2個(gè)默認(rèn)變量標(biāo)志（Logo）和導(dǎo)航（Navigation），作為應(yīng)用的標(biāo)示和總體導(dǎo)航，出現(xiàn)在所有頁面的頭部。

⑵ 顯示區(qū)塊定義為Region，數(shù)據(jù)動(dòng)態(tài)加載，可以有效地分離數(shù)據(jù)與UI，降低元素樣式關(guān)聯(lián)性。包括首頁與分頁在內(nèi)，一共設(shè)計(jì)有8個(gè)Region。分別是[featured]、 [content]、[sidebar]、[social]、[footer]、[help]、[page_top]和[page_bottom]。其中[featured]、[content]、[sidebar]、[social]、[footer]是自定義顯性區(qū)域，其他3個(gè)是系統(tǒng)隱性區(qū)域。

圖2 首頁框架圖

圖3 分頁框架圖

⑶ 根據(jù)效果圖設(shè)定的CSS樣式定義放入一個(gè)自建的外部樣式表文件，命名為custom.css，用于自適應(yīng)屏幕大小的CSS樣式放入media.css文件中，并且加入適應(yīng)IE版本的CSS插件ie.css；外部動(dòng)態(tài)腳本除了用來做檢測瀏覽器功能支持情況檢查的第三方插件modernizr.js，其余自定義JS放入命名為custom.js的文件。

⑷ 結(jié)合以上分析，完成.info文件編寫。包括版式的基本信息、外部樣式表CSS文件指向、外部動(dòng)態(tài)腳本指向和區(qū)域列表[3]。布局形式如圖2和圖3所示，具體代碼如下：

name=Watercolor

description=Built for watercolor paintings style framework

core=7.x

；CSS

stylesheets[all][]=assets/css/custom.css

stylesheets[screen and （max-width：600px）][]=assets/css/media.css

stylesheets-conditional[if lt IE 8][all][]=assets/css/ie.css

；JS

scripts[]=assets/js/modernizr.js

scripts[]=assets/js/custom.js

；Regions

regions[featured]=Featured

regions[help]=Help

regions[content]=Content

regions[sidebar]=Sidebar

regions[social]=Social Icons

regions[footer]=Footer

regions[page_top]=Page Top

regions[page_bottom]=Page Bottom

2 分層設(shè)計(jì)

2.1 樣式表設(shè)計(jì)

主頁面采用960像素標(biāo)準(zhǔn)定寬；主菜單浮動(dòng)在右側(cè)，條目行內(nèi)成塊顯示；重點(diǎn)部分高395像素，設(shè)背景；社群圖標(biāo)浮動(dòng)右側(cè)，版權(quán)部分高75像素，不繼承浮動(dòng)。分頁同樣采用960像素定寬，內(nèi)容區(qū)塊高度312像素，內(nèi)容浮動(dòng)左側(cè)；側(cè)邊欄寬339像素，跟隨內(nèi)容浮動(dòng)左側(cè)，主菜單、社群和版權(quán)區(qū)塊與主頁設(shè)置相同。

關(guān)鍵設(shè)計(jì)代碼如下：

#page{ width： 960px； }

#main-menu{ float： right； }

#main-menu .menu li{ display： inline-block； }

#featured { height： 395px； background：url（../images/

featured_bg.gif）； }

#content { height： 312px； }

.content-block{ width： 291px； float： left； }

#social-icons{ float： right； clear： both； }

#sidebar { float： left； width： 338px； }

#footer { height： 75px； clear： both； }

2.2 頁面動(dòng)態(tài)顯示設(shè)計(jì)

數(shù)據(jù)加載采用Drupal 7的頁面動(dòng)態(tài)信息通過各級(jí)模板，分層加載，各層設(shè)計(jì)簡述如下。

⑴ html.tpl.php設(shè)計(jì)

頂層頁面中指明該模板設(shè)計(jì)為HTML5，所以替換頭部為

<！DOCTYPE HTML>

添加舊版瀏覽器適配的代碼，其中路徑使用drupal變量以適應(yīng)不同環(huán)境：

<！--[if lt IE 9]>

<！[endif]-->

⑵ page.tpl.php設(shè)計(jì)

不采用默認(rèn)的page頁面中導(dǎo)航（Navigation），采用橫排輸出格式，添加新代碼：

<？php print theme（'links__system_main_menu'，

array（'links' => $main_menu， 'attributes' => array（'id' =>

'main-menu'， 'class' => array（'links'， 'inline'， 'clearfix'）），

'heading' => t（'Main menu'）））； ？>

這樣所有頁面都有了主菜單頭部。分頁保持page.tpl.php，利用一份拷貝并更名page--front.tpl.php，利用它為首頁服務(wù)。分頁中的二級(jí)子標(biāo)題設(shè)計(jì)采用以下代碼：

<？php if （$title）： ？>

<？php print $title；

？><？php endif； ？>

首頁的信息通過featured變量、content變量、social變量和footer變量讀取數(shù)據(jù)庫信息：

<？php print render（$page['featured']）； ？>…

分頁中的信息多一個(gè)變量sidebar，用于輸出邊欄信息。

⑶ region.tpl.php設(shè)計(jì)

區(qū)域的劃分主要通過drupal管理員菜單中進(jìn)行布局設(shè)定，region.tpl.php中不需要設(shè)定div，刪除系統(tǒng)模板中的類的div容器，刪除代碼為：

⑷ node.tpl.php設(shè)計(jì)

去除系統(tǒng)模板的node.tpl.php中原本包含node的div；同時(shí)去除包含content的div。針對(duì)個(gè)性子頁面，建立起node—custom.tpl.php的頁面滿足設(shè)計(jì)要求。

⑸ block.tpl.php設(shè)計(jì)

設(shè)計(jì)通過block-views—sidebar-exhibit-block.tpl.php來加入feature-block，加上特殊的CSS樣式；通過block--block--3.tpl.php來加入特殊的樣式feature-content。給aside加上特殊的class并添加每一個(gè)所需要的樣式，classt設(shè)定在Ddrupal的structure中配置block。

⑹ 其他動(dòng)態(tài)頁面

利用第三方模塊views做細(xì)節(jié)設(shè)計(jì)。views-view-fields.tpl.php中，只保留field的content變量，通過css調(diào)整顯示樣式完成設(shè)計(jì)。

3 測試調(diào)試

測試頁面時(shí)，分別在PC、IPad和Android手機(jī)上使用IE、FireFox和Chrome來測試兼容性。同時(shí)結(jié)合第三方Devel模塊和Theme Developer模塊來進(jìn)行調(diào)試[4]。

最終形成的文件包括templates文件夾中的各層模板文件，assets文件夾中css子文件夾中的樣式表文件、images文件夾中的圖片和js子文件夾腳本與插件，并且數(shù)據(jù)動(dòng)態(tài)加載，樣式可控可調(diào)。

完成效果如圖4所示。

圖4 最終效果圖

4 結(jié)束語

經(jīng)過設(shè)計(jì)與調(diào)試代碼，本課題實(shí)現(xiàn)了基于Drupal的主題二次開發(fā)：可以通過CSS靈活調(diào)整界面的元素位置，更改單個(gè)或多個(gè)元素的樣式；可以在多種設(shè)備上實(shí)現(xiàn)頁面以達(dá)到設(shè)計(jì)效果。本設(shè)計(jì)中采用LAMP為基礎(chǔ)平臺(tái)，結(jié)合HTML5自適應(yīng)布局、樣式表、動(dòng)態(tài)腳本和第三方插件技術(shù)，形成整套數(shù)據(jù)、樣式和顯示的Web B/S解決方案，設(shè)計(jì)方法合理，易于編寫代碼，設(shè)計(jì)速度快，順應(yīng)主流Web應(yīng)用要求，具有很好的后續(xù)開發(fā)前景。還需要進(jìn)一步研究的問題有：優(yōu)化JS與CSS代碼，提高模板的易用性。

參考文獻(xiàn)：

[1] 戴馬.淺談基于Drupal網(wǎng)站開發(fā)過程[J].信息系統(tǒng)工程，2011.8：

115-116

[2] 陳豪.網(wǎng)頁色彩設(shè)計(jì)的案例分析和試用總結(jié)[J].美與時(shí)代，2009.8：

82-84

[3] 付軍，鄭軍.Drupal在圖書館門戶網(wǎng)站建設(shè)中的應(yīng)用[J].計(jì)算機(jī)光盤

軟件與應(yīng)用，2012.23：203-204

[4] 孫方.基于Drupal電子學(xué)檔平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù)，

2012.1：98-101