基于Drupal 7HTML5布局模板二次開發

基于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先進的模塊化設計理念結合“自適應布局”會成為國內互聯網應用的主流?！白赃m應布局”是利用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]

總結

以上是生活随笔為你收集整理的drupal html5,基于Drupal 7HTML5布局模板二次开发.doc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。