HTML頁面基本架構

接著將介紹基本的整體頁面架構，會將之前的頁面結構拆開再讓Gulp幫我們組合。

首先先看到架構的html

layout.html


  <!-- @@placeholder= header -->
    <div id="page-container">
      <div id="page-body">
        <!-- @@placeholder= content -->
      </div>
    </div>
  <!-- @@placeholder= footer -->

  <!-- @@placeholder= bottomScript -->
</body>
</html>

這裡放上了四個插入點，分別為header、 content、 footer、 bottomScript，表示我們可以使用這個架構分開編輯這幾個段落。

接著看回首頁(page/index.html)

index.html

<!-- @@master  = ../layout.html-->

<!-- @@block  =  header-->
  @@include('../components/header.html', {
    "page": "first"
  })
<!-- @@close-->

<!-- @@block  =  content-->

<!-- @@close-->

<!-- @@block  =  footer-->
@@include('../components/footer.html')
<!-- @@close-->

首先帶入了整體架構，在header、 footer中連結到各自的html，而content的裡面我們可以放上將要編輯的首頁內容。

接著往裡面看header、footer在初始空白的狀況。

header.html

<!DOCTYPE html>
<html class="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="shortcut icon" href="image/favicon.ico">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.js"></script>
</head>
<body>

<div id="mainBody">
  <div id="page-header">

  </div>

footer.html

<div id="page-footer">


</div>

<!-- mainBody /div -->
</div>

看到這裡一切都合理了，當把header、 footer使用gulp組合到layout.html的架構中，重新生成的html就像這樣...

output index.html

<!DOCTYPE html>
<html class="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="shortcut icon" href="image/favicon.ico">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.js"></script>
</head>
<body>

  <div id="mainBody">
    <div id="page-header">

    </div>
    <div id="page-container">
      <div id="page-body">

      </div>
    </div>
    <div id="page-footer">

    </div>
  </div>

</body>
</html>

正是規範中構成的網站的基本架構！ 我們即將使用這樣的方式來製作網站。

results matching ""

    No results matching ""