單元一:下載及解壓縮網站(網頁)模板
從下載 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">,如下圖所示。
↓