4-2. 締思膳食茗茶館---網站首頁版型設計

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

實例練習 HTML 部份

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

實例練習 CSS 部份

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

方法一：

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

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

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

 

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

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

如果 CSS 檔案已存在, 在「CSS設計工具」面板中點選 「附加現有的 CSS 檔案」。

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

 

 

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

針對整個網頁的整體預設, 以及跨區共用的設計

有關 box-sizing 可以參閱 CSS3 新的區塊大小計算模式

 

設定 header 區域

 

設定 main 及 footer 區域

 

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

運用另存新檔, 複製出第2個檔案 ----- about.html 存放在「webPage」資料夾中

 

目前結果參考如下：