1 / 42

Dreamweaver 8 範例： 201 、 202

Dreamweaver 8 範例： 201 、 202. 潘雅真. 第二類：版面編排之設計操作. 201 、 Dreamweaver 8 202 、 TQC 網頁設計類認證. 201 、 Dreamweaver 8. 一、開啟 Default.htm 編輯 1-1 修改頁面屬性 1-2 設定文件內容 1-3 設定文字超連結 1-4 運用「標籤檢測器」的「相關的 CSS 」 1-5 設定按鈕的超連結 1-6 將 CSS 樣式匯出 DW02.css 檔案 二、開啟 DW02.htm 編輯

dinesh
Download Presentation

Dreamweaver 8 範例： 201 、 202

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 設定文字超連結 • 1-4 運用「標籤檢測器」的「相關的CSS」 • 1-5 設定按鈕的超連結 • 1-6 將CSS樣式匯出DW02.css檔案 二、開啟DW02.htm編輯 • 2-1 匯入DW02.css樣式表檔案 • 2-2 設定按鈕的超連結 • 2-3 將編輯過的網頁檔案儲存

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

  5. 1-1 修改頁面屬性

  6. 1-1 修改頁面屬性

  7. 1-1 修改頁面屬性

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

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

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

  11. 1-2 設定文件內容

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

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

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

  15. 1-5 設定按鈕的超連結

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

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

  18. 2-2 設定按鈕的超連結

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

  20. 202、 TQC網頁設計類認證 (要先新增網站) 一、開啟DW02.htm編輯 • 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」樣式

  21. 202、 TQC網頁設計類認證 • 2-5 選取表格第一列，套用「 .DW02-2」樣式 • 2-6 新增「.DW02-3」樣式 • 2-7 表格第二列之後的儲存格，套用「 .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 將編輯過的網頁檔案儲存

  22. 1-1 修改頁面屬性

  23. 1-2 新增CSS樣式，類型為「標籤」，標籤選「body」，並設定格式 【文字】/【CSS樣式】/【開新檔案】

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

  25. 1-4 設定按鈕的超連結 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. 2-3 選取全部表格，套用「 .DW02-1」樣式

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

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

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

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

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

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

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

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

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

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

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

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

More Related