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

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

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

實例練習 HTML 部份

  1. <body>
  2.  
  3. <header>
  4. <img src="images/logo.png" alt="" id="logo">
  5. <p>Traditionally Royal hotel</p>
  6. </header>
  7.  
  8. <nav>
  9. <a href="index.html">回網站首頁</a>
  10. <a href="about.html">關於蒂莫絲</a>
  11. <a href="service.html">客房的服務</a>
  12. <a href="location.html">我們的位置</a>
  13. <a href="contact.html">聯絡蒂莫絲</a>
  14. </nav>
  15.  
  16. <div id="banner"></div>
  17.  
  18. <div id="main">
  19. <div id="content">
  20. <h1>最新消息</h1> <!-- 輸入文字,設定為標題1 -->
  21. </div>
  22. <aside>
  23. <!-- 插入影像,設定寬度,不設定高度 (高度會依原圖比例自動縮放) -->
  24. <img src="images/h2img.png" width="100%" alt="">
  25. <h2>優美的環境●愉快的渡假</h2> <!-- 輸入文字,設定為標題1 -->
  26. <!-- 以下插入影像,寬度與高度皆不設定,表示以原圖尺寸呈現 (後續再以CSS設定相關樣式) -->
  27. <!-- 為了多個影像一起設定CSS, 所以將需要設定的影像設定相同的 class 名稱 -->
  28. <img class="ADimg" src="images/aside_area/index_1.jpg" alt="">
  29. <img class="ADimg" src="images/aside_area/index_2.jpg" alt="">
  30. <img class="ADimg" src="images/aside_area/index_3.jpg" alt="">
  31. </aside>
  32. </div>
  33.  
  34. <!-- footer 區域 ===================================================== -->
  35. <footer>
  36. <p id="info">網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p>
  37. <p id="copyright">Copyright © Timothy Hotel Design by BFT Maintain by TS </p>
  38. </footer>
  39. </body>

 

 

實例練習 CSS 部份

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

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

 

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

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. aside h2 {
  3. font-size: 15px; /*設定這個區域的文字大小*/
  4. text-align: center; /*設定這個區域的內容置中對齊*/
  5. margin-bottom: 20px; /*設定這個區域的離下方的距離*/
  6. }
  7.  
  8. aside img {
  9. width: 100%; /*設定寬度與所在位置的寬度100%相同*/
  10. height: auto; /*設定高度依影像原寬高比例自動計算*/
  11. }
  12.  
  13. aside .ADimg {
  14. /*
  15. border-style: solid;
  16. border-width: 3px;
  17. border-color: #fff;
  18. */
  19. border: 5px solid #FFF; /*設定影像四周有白色邊框*/
  20.  
  21. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); /*設定中央向外5px半透明的黑色陰影*/
  22. margin-bottom: 10px; /*設定這個區域的離下方的距離*/
  23. width: 190px; /*上層aside的內容區寬度是180px, 扣除接下來要設計的border左右10px*/
  24. }
  25. </style>

 

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

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

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