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

4-2. 版型設計第一階段

另一個範例練習:締思膳食茗茶館

設計原則:由外而內 → 由上而下 → 由左而右

第一階段:網頁第一層框架 (粗紅線區域表示新加入的部份)

實例練習 HTML 部份

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

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

※ 粗紅線區域表示新加入的部份

  1. <body>
  2. <header> </header> <!-- header 區域:「插入->頁首 Header」------------- -->
  3. <nav> </nav> <!-- nav 區域:「插入->導覽 Header」------------- -->
  4. <div id="banner"> </div> <!-- banner 區域:「插入->Div」輸入ID名稱為banner --- -->
  5. <div id="main"> </div> <!-- #main 區域:「插入->div」輸入ID名稱為main ----- -->
  6. <footer> </footer> <!-- footer 區域:「插入->頁尾 Footer」 ------------- -->
  7. </body>

或是

  1. <body>
  2. <header> </header> <!-- header 區域:「插入->頁首 Header」------------- -->
  3. <nav> </nav> <!-- nav 區域:「插入->導覽 Header」------------- -->
  4. <div class="banner"> </div> <!-- banner 區域:「插入->Div」輸入Class名稱為banner --- -->
  5. <div class="main"> </div> <!-- #main 區域:「插入->div」輸入Class名稱為main ----- -->
  6. <footer> </footer> <!-- footer 區域:「插入->頁尾 Footer」 ------------- -->
  7. </body>

實例練習 CSS 部份

由於 CSS 樣式的設計有5個頁面要共用,所以應該讓 CSS 樣式的設計獨立存成.CSS檔案

方法一:

開新檔案, 建立新的CSS檔案, 儲存檔案, 檔案名稱「layout.css」 儲存位置在網站根目錄
index.html 檔案中, 在 </head> 的前一行設定與 layout.css 檔案的連結。

※ 粗紅線區域表示新加入的部份

  1. <link rel="stylesheet" href="layout.css">
  2. </head>

 

方法二:(DW才有的功能畫面)

index.html 檔案中, 在「CSS設計工具」面板中點選 「建立新的CSS檔案」。

按「瀏覽」 選擇「layout.css」按「確定」鈕。

 

 

由於網頁各元素大多有預設的留白邊界, 建議 重設歸零改由自行設定

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. * {
  3. padding: 0; /*由於網頁各元素大多有預設的留白邊界, 建議清除改由自行設定*/
  4. margin: 0; /*「*」 表示所有元素, 除了padding與margin, 建議其餘不要設定*/
  5. }
  6. </style>

 

針對整個網頁的整體預設

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. body {
  3. background-image: url(images/body_bg.png); /*設定整頁的背景影像*/
  4. background-repeat: repeat-x; /*設定背景影像只有水平重複*/
  5. background-color: #f7e6c0; /*設定整頁的背景顏色*/
  6. color: #222; /*設定整頁的文字顏色*/
  7.  
  8. /*以下是文字方面的設定,可以等輸入文字之後再設定--------------------------*/
  9. font-size: 15px; /*設定整頁的文字大小*/
  10. letter-spacing: 1px; /*設定整頁的文字字距*/
  11. /*以下是設定整頁的預設字體, 可以參考Yahoo或是DW中選擇, 也可以不設定*/
  12. font-family: "Helvetica Neue", Helvetica, Arial, STHeitiTC-light, STHeiti,
  13. "Microsoft JhengHei", 微軟正黑體, sans-serif;
  14. }
  15. </style>

 

版型中第一層框架的CSS樣式設計
    一般框架預設是貼於頁面由上到下排列, 預設 寬度 100%、高度 0
    header、nav、#banner、footer四個區域以預設寬度100%存在,
    而 #main 區域的設計,配合背景圖 指定寬度置於頁面中央

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. header {
  3. /*background-color: rgba(0, 136, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
  4. height: 122px; /*配合body的背景影像設定這個區域的高度*/
  5. padding-top: 20px; /*設定header區域上方留白空間*/
  6. text-align: center; /*設定區域內的文字皆水平置中, 也可以等輸入文字後再設定*/
  7. }
  8.  
  9. nav {
  10. /*background-color: rgba(0, 255, 10, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
  11. height: 30px; /*配合body的背景影像設定這個區域的高度*/
  12. text-align: center; /*設定區域內的文字水平置中, 也可以等輸入文字後再設定*/
  13. }
  14.  
  15. #banner {
  16. height: 302px; /*配合body背景影像設定高度*/
  17. background-image: url(images/banner/banner.png); /*設定這個區域的背景影像*/
  18. background-repeat: no-repeat; /*設定背景影像不重複*/
  19. background-position: center center; /*設定背景影像的定位位置*/
  20. }
  21.  
  22. #main {
  23. background-image: url(images/main_bg.png); /*設定這個區域的背景影像*/
  24. min-height: 100px; /*設定基本的最小高度, 掙開這個區域檢視設計的結果*/
  25. width: 1200px; /*配合背景影像設定寬度*/
  26. margin-left: auto; /*設定margin左右為auto, 讓所有元素水平置中*/
  27. margin-right: auto;
  28. margin-top: 10px; /*配合body背景影像設定上方間隔距離*/
  29. box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /*設定中央向外5px半透明的黑色陰影, 也可以不設定*/
  30.  
  31. /*以下設定是為了解決子元素浮動的後遺症問題, 這裡先不設定, 等子元素設計好再處理與解說*/
  32. overflow-x: hidden; /*以DW中CSS面板的操作方法, xy是分開的*/
  33. overflow-y: hidden;
  34.  
  35. overflow: hidden; /*如果以程式碼直接輸入法, 則這一行代表x,y皆設定, 以上二行可以取消*/
  36. }
  37.  
  38. footer {
  39. background-image: url(images/footer.png); /*設定背景影像*/
  40. height: 63px; /*配合body背景影像設定高度*/
  41. padding-top: 10px; /*配合body背景影像設定上方間隔距離*/
  42. text-align: center; /*設定區域內的文字水平置中, 也可以等輸入文字後再設定*/
  43. }
  44. </style>
go TOP