Dreamweaver 8 範例：201、202 潘雅真

第二類：版面編排之設計操作 201、Dreamweaver 8 202、TQC網頁設計類認證

201、Dreamweaver 8 一、開啟Default.htm編輯 1-1 修改頁面屬性 1-2 設定文件內容 1-3 設定文字超連結 1-1 修改頁面屬性 1-2 設定文件內容 1-3 設定文字超連結 1-4 運用「標籤檢測器」的「相關的CSS」 1-5 設定按鈕的超連結 1-6 將CSS樣式匯出DW02.css檔案 二、開啟DW02.htm編輯 2-1 匯入DW02.css樣式表檔案 2-2 設定按鈕的超連結 2-3 將編輯過的網頁檔案儲存

1-1 修改頁面屬性 請輸入學號、姓名

1-1 修改頁面屬性

1-1 修改頁面屬性

1-1 修改頁面屬性

1-2 設定文件內容 文字縮排鈕

1-2 設定文件內容 １．嶄新設計工具 ２．強大而開放的整合功能 ３．方便開發

1-2 設定文件內容 ◎一個工具就包含了設計及程式編輯器： ◎配合符合標準的 CSS 支援來建構複雜的網站： ◎改善用戶的體驗： 1-2 設定文件內容 ◎一個工具就包含了設計及程式編輯器： ◎配合符合標準的 CSS 支援來建構複雜的網站： ◎改善用戶的體驗： ◎內置的影像編輯器可以節省時間： ◎製作更好的用戶介面：

1-2 設定文件內容

1-3 設定文字超連結 http://www.macromedia.com.tw/software/fireworks

1-4 運用「標籤檢測器」的「相關的CSS」 【視窗】/【CSS樣式】

1-4 運用「標籤檢測器」的「相關的CSS」 【視窗】/【CSS樣式】 background-image DW02.gif background-attachment fixed background-repeat no-repeat background-position 99% 99%

1-5 設定按鈕的超連結

1-6 將CSS樣式匯出DW02.css檔案 【檔案】/【轉存】/【CSS樣式】

2-1 匯入DW02.css樣式表檔案 【文字】/【 CSS樣式】/【附加樣式表】

2-2 設定按鈕的超連結

2-3 將編輯過的網頁檔案儲存

202、 TQC網頁設計類認證 (要先新增網站) 一、開啟DW02.htm編輯 1-1 修改頁面屬性 1-1 修改頁面屬性 1-2 新增CSS樣式，類型為「標籤」，標籤選「body」，並設定格式 1-3 運用影像地圖的矩形連結區域工具，設定「網頁設計類」的超連 結 1-4 設定按鈕的超連結 1-5 在最右邊儲存格中，新增可編輯區域「dw02」，並另存成樣板檔 案「DW02.dwt」 二、開啟DW02-1.htm編輯 2-1 套用DW02樣版，將內容移到新區域「dw02」 2-2 新增「.DW02-1」樣式，類型為「類別」，並設定格式 2-3 選取全部表格，套用「 .DW02-1」樣式 2-4 新增「.DW02-2」樣式

202、 TQC網頁設計類認證 2-5 選取表格第一列，套用「 .DW02-2」樣式 2-6 新增「.DW02-3」樣式 2-8 將樣式匯出為DW02.css檔案檔 2-9 刪除網頁所有樣式，再附加樣式表連結到DW02.css檔 三、開啟DW02-2.htm、 DW02-3.htm、 Default.htm編輯 3-1 套用DW02樣版，將內容移到新區域「dw02」 3-2 附加連結樣式表，連結到DW02.css檔 3-3 將編輯過的網頁檔案儲存

1-1 修改頁面屬性

1-2 新增CSS樣式，類型為「標籤」，標籤選「body」，並設定格式

1-3 運用影像地圖的矩形連結區域工具，設定「網頁設計類」的超連結 1-3 運用影像地圖的矩形連結區域工具，設定「網頁設計類」的超連結

1-4 設定按鈕的超連結 FrontPage 連結：DW02-01.htm Dreamweaver 連結：DW02-02.htm 1-4 設定按鈕的超連結 FrontPage 連結：DW02-01.htm Dreamweaver 連結：DW02-02.htm ASP 連結：DW02-03.htm

1-5 在最右邊儲存格中，新增可編輯區域「dw02」，並另存成樣板檔案「DW02.dwt」 【插入】/【樣式物件】/【可編輯區域】

2-1 套用DW02樣版，將內容移到新區域「dw02」 【修改】/【樣版】/【將樣板套用到頁面】

2-2 新增「.DW02-1」樣式，類型為「類別」，並設定格式 【文字】/【CSS樣式】/【開新檔案】

2-3 選取全部表格，套用「 .DW02-1」樣式

2-4 新增「.DW02-2」樣式 【文字】/【CSS樣式】/【開新檔案】

2-5 選取表格第一列，套用「 .DW02-2」樣式

2-6 新增「.DW02-3」樣式

2-7 表格第二列之後的儲存格，套用「 .DW02-3」樣式

2-8 將樣式匯出為DW02.css檔案檔

2-9 刪除網頁所有樣式，再附加樣式表連結到DW02.css檔

2-9 刪除網頁所有樣式，再附加樣式表連結到DW02.css檔

3-1 套用DW02樣版，將內容移到新區域「dw02」

3-1 套用DW02樣版，將內容移到新區域「dw02」

3-2 附加連結樣式表，連結到DW02.css檔

3-2 附加連結樣式表，連結到DW02.css檔

3-3 將編輯過的網頁檔案儲存 分別開啟「DW02-3.htm」、 「Default.htm」網 頁檔，重複步驟3-1~3-2。 3-3 將編輯過的網頁檔案儲存 分別開啟「DW02-3.htm」、 「Default.htm」網 頁檔，重複步驟3-1~3-2。 執行【檔案】/【全部儲存】，儲存所有已完成的 網頁。