網頁框架除了 <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>
或是
- <body>
<header> </header> <!-- header 區域:「插入->頁首 Header」------------- --> <nav> </nav> <!-- nav 區域:「插入->導覽 Header」------------- --> <div class="banner"> </div> <!-- banner 區域:「插入->Div」輸入Class名稱為banner --- --> <div class="main"> </div> <!-- #main 區域:「插入->div」輸入Class名稱為main ----- --> <footer> </footer> <!-- footer 區域:「插入->頁尾 Footer」 ------------- -->- </body>
由於 CSS 樣式的設計有5個頁面要共用,所以應該讓 CSS 樣式的設計獨立存成.CSS檔案。
開新檔案, 建立新的CSS檔案, 儲存檔案, 檔案名稱「layout.css」
儲存位置在網站根目錄。
在 index.html 檔案中,
在 </head> 的前一行設定與 layout.css 檔案的連結。
※ 粗紅線區域表示新加入的部份
<link rel="stylesheet" href="layout.css">- </head>
在 index.html 檔案中, 在「CSS設計工具」面板中點選 「建立新的CSS檔案」。
按「瀏覽」 選擇「layout.css」按「確定」鈕。
- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- * {
- padding: 0; /*由於網頁各元素大多有預設的留白邊界, 建議清除改由自行設定*/
- margin: 0; /*「*」 表示所有元素, 除了padding與margin, 建議其餘不要設定*/
- }
- </style>
- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- body {
- background-image: url(images/body_bg.png); /*設定整頁的背景影像*/
- background-repeat: repeat-x; /*設定背景影像只有水平重複*/
- background-color: #f7e6c0; /*設定整頁的背景顏色*/
- color: #222; /*設定整頁的文字顏色*/
- /*以下是文字方面的設定,可以等輸入文字之後再設定--------------------------*/
- font-size: 15px; /*設定整頁的文字大小*/
- letter-spacing: 1px; /*設定整頁的文字字距*/
- /*以下是設定整頁的預設字體, 可以參考Yahoo或是DW中選擇, 也可以不設定*/
- font-family: "Helvetica Neue", Helvetica, Arial, STHeitiTC-light, STHeiti,
- "Microsoft JhengHei", 微軟正黑體, sans-serif;
- }
- </style>
- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- header {
- /*background-color: rgba(0, 136, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
- height: 122px; /*配合body的背景影像設定這個區域的高度*/
- padding-top: 20px; /*設定header區域上方留白空間*/
- text-align: center; /*設定區域內的文字皆水平置中, 也可以等輸入文字後再設定*/
- }
- nav {
- /*background-color: rgba(0, 255, 10, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
- height: 30px; /*配合body的背景影像設定這個區域的高度*/
- text-align: center; /*設定區域內的文字水平置中, 也可以等輸入文字後再設定*/
- }
- #banner {
- height: 302px; /*配合body背景影像設定高度*/
- background-image: url(images/banner/banner.png); /*設定這個區域的背景影像*/
- background-repeat: no-repeat; /*設定背景影像不重複*/
- background-position: center center; /*設定背景影像的定位位置*/
- }
- #main {
- background-image: url(images/main_bg.png); /*設定這個區域的背景影像*/
- min-height: 100px; /*設定基本的最小高度, 掙開這個區域檢視設計的結果*/
- width: 1200px; /*配合背景影像設定寬度*/
- margin-left: auto; /*設定margin左右為auto, 讓所有元素水平置中*/
- margin-right: auto;
- margin-top: 10px; /*配合body背景影像設定上方間隔距離*/
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /*設定中央向外5px半透明的黑色陰影, 也可以不設定*/
- /*以下設定是為了解決子元素浮動的後遺症問題, 這裡先不設定, 等子元素設計好再處理與解說*/
- overflow-x: hidden; /*以DW中CSS面板的操作方法, xy是分開的*/
- overflow-y: hidden;
- overflow: hidden; /*如果以程式碼直接輸入法, 則這一行代表x,y皆設定, 以上二行可以取消*/
- }
- footer {
- background-image: url(images/footer.png); /*設定背景影像*/
- height: 63px; /*配合body背景影像設定高度*/
- padding-top: 10px; /*配合body背景影像設定上方間隔距離*/
- text-align: center; /*設定區域內的文字水平置中, 也可以等輸入文字後再設定*/
- }
- </style>