- D Web Development
- Kai Nacke
- 227字
- 2021-07-16 09:35:32
Benefits of using templates
Let's look at a simple HTML 5 page with a header, footer, navigation bar, and some content:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo site</title> <link rel="stylesheet" type="text/css" href="demo.css" /> </head> <body> <header> Header </header> <nav> <ul> <li><a href="link1">Link 1</a></li> <li><a href="link2">Link 2</a></li> <li><a href="link3">Link 3</a></li> </ul> </nav> <article> <h1>Title</h1> <p>Some content here.</p> </article> <footer> Footer </footer> </body> </html>
The formatting is done with the demo.css
file:
body { font-size: 1em; color: black; background-color: white; font-family: Arial; } header { display: block; font-size: 200%; font-weight: bolder; text-align: center; } footer { clear: both; display: block; text-align: center; } nav { display: block; float: left; width: 25%; } article { display: block; float: left; }
Despite being simple, this page has elements that you will often find on other websites. If you create a website with more than one page, then you will be using this structure on every page in order to provide a consistent user interface. Starting with the second page, you would violate the Don't Repeat Yourself (DRY) principle: The header and footer are the elements with fixed content. The content of the navigation bar is also fixed but not every item is always displayed. Only the real content of the page (in the article
block) changes with every page.
Templates solve this problem. A common approach while using templates is to define a base template with the page structure. For each page, you will define a template that inherits from the base template and adds the real content.
- DB2 V9權威指南
- Fundamentals of Linux
- 小創客玩轉圖形化編程
- Processing互動編程藝術
- jQuery從入門到精通 (軟件開發視頻大講堂)
- Learning Python Design Patterns(Second Edition)
- JSP開發案例教程
- Webpack實戰:入門、進階與調優
- 劍指大數據:企業級數據倉庫項目實戰(在線教育版)
- 深入實踐Kotlin元編程
- Android嵌入式系統程序開發:基于Cortex-A8(第2版)
- 小程序從0到1:微信全棧工程師一本通
- HTML5 WebSocket權威指南
- 計算機程序的構造和解釋(JavaScript版)
- Swift 2 Blueprints