單元一：下載及解壓縮網站(網頁)模板
從下載 Free Website Templates 免費網頁模板網站下載網頁模板檔案。這裡我們以下載 Law Firm Office 模板為例。
將下載的網頁模板壓縮檔 lawfirm.zip，儲存於 D:\Web 106-6 檔案路徑中。
解壓縮lawfirm.zip 檔案，得到 lawfirm 資料夾及其檔案。
開啟 lawfirm 資料夾，可以看見如下的檔案及資料夾。
單元二：修改網站導覽選單
1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟 index.html 檔案。
2. 將其英文導覽選單，修改為中文導覽選單。修改文字如下：
- Home→首頁
- About→關於我們
- Practices→服務項目
- Our Lawyers→產品介紹
- News→最新消息
- Contact→聯絡我們
3. 變更 index.html 檔案下列導覽選單項目的超連結
- 服務項目→services.html
- 產品目錄→products.html
4. 將下列網頁檔案，變更為不同的檔案名稱。
- practices.html→services.html
- lawyers.html→products.html
5. 快速完成其他網頁導覽選單的修改，是採用 複製/貼上 導覽選單HTML語法的方法。
(1) 複製 index.html 導覽選單HTML語法，Adobe Dreamweaver 應用程式需要切換成程式碼編輯模式。
(2) 網頁導覽選單的 HTML語法在哪裡？下圖紅色框中的HTML程式碼。
(3) 複製這些程式碼，然後開啟編輯每一個網頁，並進入程式碼編輯模式，將複製的程式碼，貼上取代原來的英文選單程式碼。
二種程式碼最大的不同，在於一個選單名稱是修改過的中文，另一個是原始的英文選單文字。
6. 因為首頁檔案導覽選單上的首頁文字沒有超連結，所以必須給每一個網頁檔案導覽選單的加上首頁超連接。首頁選單項目的超連結是 index.html。
7. 為了更好的導覽效果，可以給每一個網頁檔案屬於自己的導覽選單項目，設定 CSS 樣式表類別 active。例如：關於我們網頁 about.html，在其導覽選單的關於我們項目，加入CSS 樣式表類別 active。
下面以 about.html 網頁為例：
(1) Dreamweaver 切換成程式碼編輯模式
(2) 將下方的關於我們選單項目程式碼中的 <li>，變更為 <li class="active">，如下圖所示。
↓
單元三：製作網站 logo 圖片
網站 logo 圖片的規格：
- 圖片大小：400x 100 像素(原圖為364 x 52)
- 檔案格式：png
- 檔案名稱：logo.png
使用 Adobe Phoroshop 影像編輯應用程式製作 logo 圖片教學
單元四：更換網站頁首的 logo 圖片
將製作好的 logo.png 檔案，取代 images 資料夾中的 logo.png 檔案，即可完成全部網頁logo圖片的變更。
單元五：更改 logo 圖片的寬高設定
1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟網頁檔案，例如： index.html 檔案。
2. 切換為設計編輯模式
3. 選取頁首的 logo 圖片
4. 開啟屬性視窗：按一下應用程式選單「視窗→屬性」
5. 將高度值 52，改為 100。
6. 按 Enter 鍵，完成變更。此時網頁中的 logo 圖片，就可以顯示正確的寬高比。
單元六：修改網站頁尾的版權宣告
1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟網頁檔案，例如： index.html 檔案。
2. 在設計編輯模式，將原來的版權宣告，修改如下方範例， [我的網站名稱]請改成自己的網站名稱。
© Copyright 2017 [我的網站名稱]. 版權所有 All Rights Reserved.
3. 使用 複製/貼上 方法，將修改後的版權宣告，取代其他網頁的原有版權宣告。
單元七：修改網頁內容
現在假設我們想要製作一個類似奇美博物館的網站，所以我們的內容，都將來自於奇美博物館網站。
下面以修改關於我們 about.html 網頁為例
1. 使用 Adobe Dreamweaver 網頁編輯軟體開啟編輯網頁檔案 about.html
2. 開啟 Google Chrome 瀏覽器，然後透過搜尋，找到維基百科對於奇美博物館的介紹內容。
3. 複製奇美博物館的介紹文字
4. 為了移除原來文字上的許多文字格式化設定，可以先將文字貼入 Windows 附屬應用程式記事本(純文字編輯應用程式) 編輯區中，再將文字複製出來。
5. 將複製的介紹文字，取代 about.html 網頁內容區的英文。
6. 更換介紹文字上方的大圖。原先圖片規格：寬度：924px，高度298px。
單元八：更改與插入網頁圖片
下面以更改關於我們 about.html 網頁中的大圖為例：
1. 利用 Google 搜尋奇美博物館圖片，並挑選及下載一張圖片。
2. 將下載的圖片放在 images 資料夾內，檔案名稱可以使用中文的「奇美博物館」。
3. 開啟 Adobe Dreamweaver 網頁編輯軟體，並開啟網頁檔案 about.html
4. 在設計編輯模式下，按二下網頁中的圖片，出現選取影像原始檔畫面。
5. 操作畫面以查看到 images 資料夾，在點選奇美博物館圖檔，然後按確定。
6. 如果圖片太大或變形，請設定圖片屬性，將寬度設定為924px，高度可利用鎖定寬高比按紐自動調整之。
單元九：編輯最新消息
1. 開啟編輯 post.html 網頁檔案，以另存新檔方式，另存為 news-1.html
2. 修改 news-1.html 的頁首、導覽選單、及頁尾，如同首頁檔案 index.html。採用複製 HTML 語法的方式，會比較快速。
3. 將 news-1.html 的內容，更換為一篇最新消息文章。圖片大小請依照版面寬度調整。
完成的頁面，如下圖所示。
4. 開啟編輯 news.html 網頁檔案
5. 將最新消息列表版面中第一則最新消息的圖片及文章，更換為上方所製作的第一則最新消息的內容。
- 圖片規格：寬度 213px，高度245px。
- 文章標題及前言，請依照版面區塊大小，調整文字數量
- Read More 按鈕更換文字為「閱讀全文」，超連結t設定為 news-1.htm。
- 標題文字加入超連結 news1.htm。
- 圖片加入超連結 news-1.htm。
6. 接下來的二則最新消息的網頁檔案，皆使用news1.html檔案，以另存心檔方法，產生 news-2.html 及 news-3.html。
7. 編輯修改 news-2.html 及 news-3.html 二則最新消息的文章內容
8. 依照上文步驟 5 的方法，編輯修改 news.html 中的第二則、第三則的最新消息圖文與超連結。
9. 完成後的版面，如下圖所示。
