案例研究演示了如何構建一個完整的 <AppML> 互聯網應用程序，具有針對數據庫中的若干表進行信息列舉、編輯和搜索的功能。

添加 HTML 模板

我們將演示如何向 HTML 頁面添加 HTML 模板。

列出客戶

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" style="display:none">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

過去的日子里，從頭開始創建一個網站變得越來越容易。了解HTML、可能還有CSS的程序員，可以用很少的精力創建一個不錯的網頁，然后把它放在網絡服務器上，就搞定了。比如：

當然，你可以選擇這種創建方式，但有一些不錯的改變，你可以試試。隨著互聯網的速度要求越來越快，瀏覽器變得越來越標準化和強大，網站的規模和復雜性也越來越多，即便是有經驗的設計師都會使用具有高級功能的設計工具和代碼編輯器來使開發過程更順利。

如今，很少有程序員從頭開始設計web網頁了。大多數程序員都使用預制模板設計，自定義適合其內容管理系統的選擇。即使是構建復雜Web應用程序的程序員也依賴于模板庫。

但是，如果要為內容管理系統或靜態站點生成器構建新模板，該怎么辦？如果想使用單個目標網頁或少量不太可能經常更改的靜態網頁構建簡單網站，該怎么辦？如果要編寫JavaScript應用程序但不想使用復雜的框架或庫來構建最終輸出怎么辦？

對我來說，最重要的是控制。隨著時間的推移，網頁越來越肥胖。程序員進行web開發時，應該以內容為重。問問自己，真的需要加載這個頁面時顯示這樣的網絡字體嗎？必須用jQuery，還是可以用幾行Vanilla JS完成同樣的事情？

使用HTML模板和框架可以幫助程序員實現標準化，易于使用的布局網格，以及現代化的功能。與此同時，它們還很簡單。這里有三個開源的HTML5模板以供參考。

1、Bootstrap

Twitter的Bootstrap也許是創建新網頁最著名的模板框架之一。它的無所不在已經導致了網頁設計界的反彈，Bootstrap很簡單，幾乎完全沒有定制的實現。

Bootstrap可以輕松創建響應式設計，并具有許多開箱即用的功能：從圖標到樣式輸入，并將標準化帶到許多常見的頁面元素，從breadcrumbs到警報到分頁，同時還有大量現成的主題。

2、HTML5 Boilerplate

HTML5 Boilerplate包括大部分程序員會用到的元素，對很多項目開箱即用：分析片段以及一些默認的CSS和JavaScript模板。

HTML5 Boilerplate相當輕便，如果你不需要某個特定組件，很容易就可以剪掉。如果你在追求極簡主義和功能全面之間的平衡，HTML5 Boilerplate可能是最佳選擇。

3、Skeleton

Skeleton是一堆框架中最輕的。如果曾經使用過Web框架，并且發現它們太笨重，或者只是為了滿足需要，可以考慮使用Skeleton來處理：一個簡單的網格，格式很好的表單，列表，排版等基本要素，跨瀏覽器支持。

使用一些不錯的模板和編輯器，程序員不需要復雜的JavaScript框架來構建一個簡單的前端，無論是傳統的頁面還是輕量級Web應用程序。如果這三個都不滿意，還可以考慮Initializr，一個可以預配置HTML5 Boilerplate的開源Web應用程序。

你最喜歡的web設計模板或框架是什么呢？你有哪些很棒的web設計方法呢？歡迎評論區交流