1 / 31

Dreamweaver 簡介

Dreamweaver 簡介. 大葉大學 多媒體學程 黃鈴玲 2013.12.11. Outline. 1. 下載 網頁範本. Free Website Template http ://www.freewebsitetemplates.com / 選 一個版本下載. 2. Dreamweaver 的環境介紹. 歡迎畫面的使用 啟動 Dreamweaver 時預設會顯示歡迎畫面，可以快速開啟最近編輯的檔案或新增文件。. Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案， 以方便等一下的解說. 操作環境的介紹

ornice
Download Presentation

Dreamweaver 簡介

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簡介 大葉大學 多媒體學程 黃鈴玲2013.12.11

  2. Outline

  3. 1. 下載網頁範本 • Free Website Template http://www.freewebsitetemplates.com/ 選一個版本下載

  4. 2. Dreamweaver 的環境介紹 • 歡迎畫面的使用 啟動 Dreamweaver 時預設會顯示歡迎畫面，可以快速開啟最近編輯的檔案或新增文件。 Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案， 以方便等一下的解說

  5. 操作環境的介紹 以下是 Dreamweaver 的操作環境，使用 傳統 使用介面來進行介紹，如果您的介面與我們不同，請比對參考：

  6. 3. 網站管理 • 新增或管理網站 STEP 01 選按功能表列 網站 \ 新增網站 (管理網站) 開啟對話方塊開始設定。 STEP 02 請選按 網站 標籤，在 網站名稱 輸入框，為網站命名，在 本機網站資料夾 中輸入資料夾所在位置，確認無誤後按 儲存 鈕。

  7. STEP 03 (若需連接網頁伺服器) 伺服器   Webmail密碼 尚未建立WWW目錄者請先空白，儲存後至視窗右下角新增WWW資料夾， 再至此處修改。 勾選測試

  8. 網站檔案的管理，可說是 Dreamweaver 管理網站的首要戰將。它不僅可以管理本地的資料夾，也可以檢視遠端網站資料，更厲害的是可以存在於個人或多人的工作模式中，亦能同步更新遠端網站及本地資料夾的內容。 • 檔案面板的簡介 在 檔案 面板，可以看到網站大概的結構，更可以在這裡建立所需要的檔案、資料夾... 等，以下是這個面板中重要的元件介紹：

  9. 在檔案面板新增 \ 刪除檔案 STEP 01 新增網頁：請於 檔案 面板的 本機檢視 狀態中，進入「範例網站，然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 開新檔案，會自動新增一個 <untitled.htm> 的網頁檔案。 STEP 02 更改檔名：如果新增時不喜歡預設的檔名，請先選取要更改檔名的檔案，再選按 檔案 面板右上角的 鈕 \ 檔案 \ 重新命名 進入編輯狀態，輸入新的檔名。 STEP 03 刪除檔案：請選取要刪除的檔案後按 Delete鍵，或者也可以選按 檔案 面板右上角的 鈕 \ 檔案 \ 刪除 即完成刪除檔案的動作。

  10. 在檔案面板建立資料夾 STEP 01 新增資料夾：例如現在要製作一個資料夾：「test」，請於 檔案 面板的 本機檢視 中進入範例網站，然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 新增資料夾，軟體自動新增資料夾，這時可以自行輸入想要設定的資料夾名稱。 STEP 02 更改資料夾名稱：更改資料夾名稱與更改檔案名稱的方式相彷，請選取要更名的資料夾後，選按 檔案 面板右上角的 鈕\ 檔案 \ 重新命名 或按 F2 鍵即可進入編輯狀態，完成更名。 STEP 03 刪除資料夾：首先選取要刪除的資料夾按 Delete鍵，或選按 檔案 面板右上角的 鈕\ 檔案 \ 刪除 即完成刪除檔案的動作。

  11. 4. 網頁文件視窗 接下來將進入 Dreamweaver 中網頁文件視窗，先簡單的了解編輯環境與一些基本編輯動作。 • 新增 / 開啟網頁 請開新檔案或選取檔案後按 Enter鍵或連按二下滑鼠左鍵，此時軟體會將檔案開啟在文件視窗。 選取檔案後按 Enter 鍵或連按二下滑鼠左鍵，可以將檔案開啟於文件視窗中

  12. 儲存檔案 • 編輯過但卻尚未儲存之檔案，在標題列或頁面切換標籤的檔名旁會有一個「*」號。 • 在 Dreamweaver 儲存檔案的方式相當簡單，除了可以選按功能表列 檔案 \ 儲存檔案 就能儲存目前開啟於文件視窗上的作品。 • 也可以按 Ctrl + S 鍵儲存檔案。 編輯過但卻尚未儲存之檔案，在標題列或頁面切換標籤的檔名旁會有一個「*」號

  13. 在瀏覽器中預覽 請按文件工具列 鈕並選按 預覽於 chrome，也可以按 F12鍵達到同樣的效果。此時軟體會以預設的瀏覽器 chrome開啟。( 關於瀏覽器本書建議以 chrome做為預設值) 透過文件工具列 鈕或按 F12 鍵以預設瀏覽器開啟

  14. 5. 文字格式屬性面板 Dreamweaver CS6 中，對於文字格式的設定區分為 HTML 與 CSS 二種不同的方式。 當套用 HTML 格式時，Dreamweaver 會將屬性加入至網頁內文的 HTML 程式碼中。 當套用 CSS 格式時，Dreamweaver 會將屬性寫入文件標題或不同的樣式表中。

  15. 在屬性面板中設定 HTML 格式 • 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。 • 選取要設定格式化的文字。 • 設定要套用到選取文字的選項。 以下是 屬性 面板中設定 HTML模式的相關選項說明：

  16. 在屬性面板中設定 CSS 樣式 • 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。 • 接著可以執行下列其中一項作業： • 選取要套用CSS樣式的文字區塊，該樣式則會出現在目標規則 選單中。 • 從 目標規則 選單中，選取要編輯的樣式動作。 • 使用 CSS樣式 屬性 面板中的各個選項變更樣式內容。 以下是 屬性 面板中設定 CSS 樣式的相關選項說明：

  17. 在屬性面板使用 HTML 與 CSS 模式的時機 當設定文字段落格式 ( 這裡指 HTML 的基本標籤，如：段落 <p>、標題1 <h1>、粗體、斜體、項目及編號清單與縮排凸排... 等)，因為屬於 HTML 的標籤屬性內容，就必須於 HTML 模式設定。其他較特別的如：ID 值、連結、標題、目標，也是 HTML 的標籤所管理，也必須在 HTML 模式下設定。 但是就文字本身的字體、大小、顏色、粗體、斜體與對齊，建議就於 CSS 模式設定，在設定的同時即可自動產生 CSS 樣式，並能套用到頁面上其他相同屬性的文字上。未來套用相同 CSS 樣式的部份若必須調整時，只要修改 CSS 樣式的內容，即能將所有套用的地方一起修改。 要注意的是，雖然 HTML 及 CSS 模式的屬性面板中都可以設定粗體、斜體... 等文字格式，但不同的是在 HTML 模式下設定是在選取的區域加上相關的 HTML 標籤，在 CSS 模式下是將設定值加入樣式中，或是修改樣式的內容。

  18. 設定文字格式 此頁面文字格式的規劃，將於指定文字套用四種格式：標題 1 (h1)、標題 2 (h2)、標題 3 (h3) 和 段落 (p)。 反白選取要更改格式的標題文字，於 屬性 面板按 鈕，設定 格式：標題 1，選取的標題文字已經套上 標題 1格式。

  19. 設定文字顏色 請反白選取已套用 h2樣式的標題文字，於 屬性 面板選按 文字顏色 鈕，於色盤上使用滴管選按 #F60，會發現文字呈現橘色，h2 樣式也會自動更新加上此顏色設定。 請利用相同方式設定標 3 與段落文字的字體顏色。

  20. 6. 插入影像與設定提示文字 STEP 01 插入\ 常用 面板選按 影像 右側 鈕 \ 影像，開啟對話方塊。 STEP 02 選取要插入的影像，按 確定 鈕會自動開啟 影像標籤輔助功能屬性 對話方塊。 STEP 03 請於 替代文字 欄中輸入指定文字，按 確定 鈕，如此即完成圖片的插入。 STEP04 下方屬性面板可修改影像相關參數，或製作影像地圖。

  21. 影像類型

  22. 7. 表格 • 認識表格

  23. 插入表格的基本方法 STEP 01 請由 插入\ 版面 面板選按 表格 鈕，開啟對話方塊。 STEP 02 於 表格 對話方塊指定表格的各個屬性，其屬性說明如下：

  24. 選取欄、列、儲存格與表格的方法 插入表格後，是否覺得欄寬不夠寬、列高不夠高、顏色不太搭... 等問題，然而在動手設定、修改前，一定要先知道如何快速選取要調整的表格或儲存格。 • 選取儲存格 不連續儲存格的選取 (Ctrl 鍵)： STEP01 請按 Ctrl 鍵不放，將滑鼠指標移至欲選取的儲存格上方，目標儲存格會呈紅框狀態，此時請按一下滑鼠左鍵。 STEP02 繼續按 Ctrl 鍵不放，用滑鼠點選即可選取多個儲存格。

  25. 選取儲存格 連續儲存格的選取 (Shift 鍵)： STEP 01 按 Ctrl 鍵不放，將滑鼠指標移至欲選取的儲存格上方，目標儲存格會呈紅框狀態，此時請按一下滑鼠左鍵。 STEP 02 按 Shift鍵不放，再如圖於另一儲存格按一下滑鼠左鍵，這樣一來即選取了範圍內的所有儲存格。

  26. 選取列與欄 選取列： 將滑鼠指標移至欲選取列的最左方，待呈 → 時，目標列也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此列選取。 選取欄： 將滑鼠指標移至欲選取欄的最上方，待呈 ↓ 時，目標欄也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此欄選取。

  27. 選取表格 將滑鼠指標移至欲選取表格的左上角，待呈 時，目標表格也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此表格選取。 將滑鼠指標移至表格左上角，待呈 時，按一下 Ctrl 鍵，即可將整個表格結構以紅色框線標示出來。

  28. 表格屬性面板 選取整個表格時，會看到此表格的 屬性 面板。 儲存格屬性面板 選取任一儲存格時，在 屬性 面板除了會顯示文字的設定欄位外，在下方會顯示儲存格的設定欄位。

  29. 插入 超連結 • 超連結的對象 • 命名錨點的超連結：當內容太過冗長時，可用錨點來製作快速指定的連結方式。 • 網站內部的超連結：連結到網站內部其他網頁，或是同一網頁中的其他內容。 • 網站外部的超連結：連結到其他網站的內容，例如：相關網站介紹 • 檔案下載的超連結：將檔案以超連結的方式提供下載服務。 • 電子郵件的超連結：建立一個空白電子郵件，並已填妥收件者 E-mail，以提供一個與網友互動的管道。 8. 超連結

  30. 命名錨點的使用 若將文字、圖片全部設計在同一個網頁可能會使該網頁變得太過冗長，進而造成閱讀上的不易。這時就必須使用 Dreamweaver 中的命名錨點，它類似 Word 中的書籤，只需要在幾個關鍵地方插入 命名錨點，當它與連結搭配時就能很快地捲動到命名錨點的位置。 首先要確認功能表列 檢視 \ 視覺輔助 \ 隱藏元素 為被核選狀態，如此就可看到插入錨點時所有元素符號。 STEP 01 插入命名錨點 插入點置於指定的文字前，在 插入 \ 常用 面板選按 命名錨點 鈕開啟對話方塊。 STEP 02 輸入名稱 輸入 錨點名稱(如aa)，按 確定 鈕，頁面即產生一命名錨點。 STEP03 插入超連結選定文字插入超連結，連結選 #aa

  31. 參考資料：

More Related