16. 蒂莫絲版型 HTML 部份

開新檔案, 建立新的HTML檔案, 儲存檔案, 檔案名稱「index.html」儲存位置在 網站根目錄。

PART-1   網頁第一層框架

網頁框架除了 <div> </div>，還可以使用
<header> </header> 頁首區， <footer> </footer> 頁尾區， <nav> </nav> 導覽區， <aside> </aside> 側邊區。 

<body>
    <header> </header>                   <!-- header 區域：「插入->頁首 Header」------------- -->
    <nav> </nav>                         <!-- nav    區域：「插入->導覽 Header」------------- -->
    <div id="banner"> </div>             <!-- banner 區域：「插入->Div」輸入ID名稱為banner --- -->
    <div id="main"> </div>               <!-- #main  區域：「插入->div」輸入ID名稱為main ----- -->
    <footer> </footer>                   <!-- footer 區域：「插入->頁尾 Footer」 ------------- -->
</body>

 

PART-2   各區域第二層 (粗紅線區域表示新加入的部份)

<body>

  <header>
            <!-- 當插入影像的 width寬、height高 沒有設定時表示以原圖大小呈現 -->
    <img src="images/logo.png" alt="">              <!-- 插入影像 -->
    <p>Traditionally  Royal  hotel</p>              <!-- 輸入文字,設定為段落 -->

  </header>
  
  <nav>

    <a href="index.html">回網站首頁</a>              <!-- 設定連結, 設計導覽按鈕 -->
    <a href="about.html">關於蒂莫絲</a>              <!-- a標籤表示連結 -->
    <a href="service.html">客房的服務</a>
    <a href="location.html">我們的位置</a>
    <a href="contact.html">聯絡蒂莫絲</a>

  </nav>

  <div id="banner"></div>

  <div id="main">

    <div id="content"></div>                <!--「插入->Div」輸入ID名稱為content-->
    <aside></aside>                         <!--「插入->側邊 Aside」-->

  </div>

  <footer>

    <p>網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p> 
    <p>Copyright © Timothy Hotel Design by BFT Maintain by TS </p>

  </footer>
  
</body>

 

PART-3   各區域第三層 (粗紅線區域表示新加入的部份)

<body>

  <header>
    <img src="images/logo.png" alt="" id="logo">
    <p>Traditionally  Royal  hotel</p>
  </header>
  
  <nav>
    <a href="index.html">回網站首頁</a>
    <a href="about.html">關於蒂莫絲</a>
    <a href="service.html">客房的服務</a>
    <a href="location.html">我們的位置</a>
    <a href="contact.html">聯絡蒂莫絲</a>
  </nav>

  <div id="banner"></div>

  <div id="main">
    <div id="content">

      <h1>最新消息</h1>                                  <!-- 輸入文字,設定為標題1 -->

    </div>
    <aside>

            <!-- 插入影像,設定寬度,不設定高度 (高度會依原圖比例自動縮放) -->
      <img src="images/h2img.png" width="100%" alt="">
      <h2>優美的環境●愉快的渡假</h2>    <!-- 輸入文字,設定為標題1 -->
            <!-- 以下插入影像,寬度與高度皆不設定,表示以原圖尺寸呈現 (後續再以CSS設定相關樣式) -->
            <!-- 為了多個影像一起設定CSS, 所以將需要設定的影像設定相同的 class 名稱 -->
      <img class="ADimg" src="images/aside_area/index_1.jpg" alt="">
      <img class="ADimg" src="images/aside_area/index_2.jpg" alt="">
      <img class="ADimg" src="images/aside_area/index_3.jpg" alt="">

    </aside>
  </div>

  <!-- footer 區域 ===================================================== -->
  <footer>
    <p id="info">網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p> 
    <p id="copyright">Copyright © Timothy Hotel Design by BFT Maintain by TS </p>
  </footer>
</body>