Dreamweaver 8 範例：201、202 潘雅真.

Presentation on theme: "Dreamweaver 8 範例：201、202 潘雅真."— Presentation transcript:

1 Dreamweaver 8 範例：201、202 潘雅真

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

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

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

5 修改頁面屬性

6 修改頁面屬性

7 修改頁面屬性

8 設定文件內容 文字縮排鈕

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

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

11 設定文件內容

12 設定文字超連結

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

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

15 設定按鈕的超連結

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

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

18 設定按鈕的超連結

19 將編輯過的網頁檔案儲存

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

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

22 修改頁面屬性

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

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

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

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

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

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

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

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

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

32 新增「.DW02-3」樣式

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

34 將樣式匯出為DW02.css檔案檔

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

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

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

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

39 附加連結樣式表，連結到DW02.css檔

40 附加連結樣式表，連結到DW02.css檔

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

42