WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-4. 版型設計第三階段

第三階段:各區域第三層 (粗紅線區域表示新加入的部份)

實例練習 HTML 部份

<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>

 

 

實例練習 CSS 部份

設定 #content 區域內第三層中的元素物件

<style type="text/css">  /*這一行的這個標籤不用輸入*/
#content h1 {
  background-image: url(images/h1bg.png);       /*設定這個區域的背景影像*/ 
  background-repeat: no-repeat;                 /*設定背景影像不重複*/
  background-position: center center;           /*設定背景影像的定位位置*/
  text-align: center;                           /*設定這個區域的文字置中對齊*/
  margin-bottom: 20px;                          /*設定這個區域的離下方的距離*/
}
</style>

 

在 aside 區域標題二的下方插入相關影像, 並設定class名稱為 ADimg

<style type="text/css">  /*這一行的這個標籤不用輸入*/
aside h2 {
  font-size: 15px;                               /*設定這個區域的文字大小*/
  text-align: center;                           /*設定這個區域的內容置中對齊*/
  margin-bottom: 20px;                          /*設定這個區域的離下方的距離*/
}

aside img {
  width: 100%;                               /*設定寬度與所在位置的寬度100%相同*/
  height: auto;                              /*設定高度依影像原寬高比例自動計算*/
}

aside .ADimg {
  /*
  border-style: solid;
  border-width: 3px;
  border-color: #fff;
  */
  border: 5px solid #FFF;                       /*設定影像四周有白色邊框*/

  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);   /*設定中央向外5px半透明的黑色陰影*/
  margin-bottom: 10px;                           /*設定這個區域的離下方的距離*/
  width: 190px;     /*上層aside的內容區寬度是180px, 扣除接下來要設計的border左右10px*/
}
</style>

 

完成版型之後, 複製出相關檔案

運用另存新檔, 複製出以下相關檔案

  1. ----- about.html
  2. ----- service.html
  3. ----- location.html
  4. ----- contact.html
go TOP