cq9火之女王分析

書(shū)名： D Web Development
作者名： Kai Nacke
本章字?jǐn)?shù)： 227字
更新時(shí)間： 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.

官术网_书友最值得收藏!

D Web Development

Benefits of using templates