310 likes | 547 Views
Dreamweaver 簡介. 大葉大學 多媒體學程 黃鈴玲 2013.12.11. Outline. 1. 下載 網頁範本. Free Website Template http ://www.freewebsitetemplates.com / 選 一個版本下載. 2. Dreamweaver 的環境介紹. 歡迎畫面的使用 啟動 Dreamweaver 時預設會顯示歡迎畫面,可以快速開啟最近編輯的檔案或新增文件。. Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案, 以方便等一下的解說. 操作環境的介紹
E N D
Dreamweaver簡介 大葉大學 多媒體學程 黃鈴玲2013.12.11
1. 下載網頁範本 • Free Website Template http://www.freewebsitetemplates.com/ 選一個版本下載
2. Dreamweaver 的環境介紹 • 歡迎畫面的使用 啟動 Dreamweaver 時預設會顯示歡迎畫面,可以快速開啟最近編輯的檔案或新增文件。 Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案, 以方便等一下的解說
操作環境的介紹 以下是 Dreamweaver 的操作環境,使用 傳統 使用介面來進行介紹,如果您的介面與我們不同,請比對參考:
3. 網站管理 • 新增或管理網站 STEP 01 選按功能表列 網站 \ 新增網站 (管理網站) 開啟對話方塊開始設定。 STEP 02 請選按 網站 標籤,在 網站名稱 輸入框,為網站命名,在 本機網站資料夾 中輸入資料夾所在位置,確認無誤後按 儲存 鈕。
STEP 03 (若需連接網頁伺服器) 伺服器 Webmail密碼 尚未建立WWW目錄者請先空白,儲存後至視窗右下角新增WWW資料夾, 再至此處修改。 勾選測試
網站檔案的管理,可說是 Dreamweaver 管理網站的首要戰將。它不僅可以管理本地的資料夾,也可以檢視遠端網站資料,更厲害的是可以存在於個人或多人的工作模式中,亦能同步更新遠端網站及本地資料夾的內容。 • 檔案面板的簡介 在 檔案 面板,可以看到網站大概的結構,更可以在這裡建立所需要的檔案、資料夾... 等,以下是這個面板中重要的元件介紹:
在檔案面板新增 \ 刪除檔案 STEP 01 新增網頁:請於 檔案 面板的 本機檢視 狀態中,進入「範例網站,然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 開新檔案,會自動新增一個 <untitled.htm> 的網頁檔案。 STEP 02 更改檔名:如果新增時不喜歡預設的檔名,請先選取要更改檔名的檔案,再選按 檔案 面板右上角的 鈕 \ 檔案 \ 重新命名 進入編輯狀態,輸入新的檔名。 STEP 03 刪除檔案:請選取要刪除的檔案後按 Delete鍵,或者也可以選按 檔案 面板右上角的 鈕 \ 檔案 \ 刪除 即完成刪除檔案的動作。
在檔案面板建立資料夾 STEP 01 新增資料夾:例如現在要製作一個資料夾:「test」,請於 檔案 面板的 本機檢視 中進入範例網站,然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 新增資料夾,軟體自動新增資料夾,這時可以自行輸入想要設定的資料夾名稱。 STEP 02 更改資料夾名稱:更改資料夾名稱與更改檔案名稱的方式相彷,請選取要更名的資料夾後,選按 檔案 面板右上角的 鈕\ 檔案 \ 重新命名 或按 F2 鍵即可進入編輯狀態,完成更名。 STEP 03 刪除資料夾:首先選取要刪除的資料夾按 Delete鍵,或選按 檔案 面板右上角的 鈕\ 檔案 \ 刪除 即完成刪除檔案的動作。
4. 網頁文件視窗 接下來將進入 Dreamweaver 中網頁文件視窗,先簡單的了解編輯環境與一些基本編輯動作。 • 新增 / 開啟網頁 請開新檔案或選取檔案後按 Enter鍵或連按二下滑鼠左鍵,此時軟體會將檔案開啟在文件視窗。 選取檔案後按 Enter 鍵或連按二下滑鼠左鍵,可以將檔案開啟於文件視窗中
儲存檔案 • 編輯過但卻尚未儲存之檔案,在標題列或頁面切換標籤的檔名旁會有一個「*」號。 • 在 Dreamweaver 儲存檔案的方式相當簡單,除了可以選按功能表列 檔案 \ 儲存檔案 就能儲存目前開啟於文件視窗上的作品。 • 也可以按 Ctrl + S 鍵儲存檔案。 編輯過但卻尚未儲存之檔案,在標題列或頁面切換標籤的檔名旁會有一個「*」號
在瀏覽器中預覽 請按文件工具列 鈕並選按 預覽於 chrome,也可以按 F12鍵達到同樣的效果。此時軟體會以預設的瀏覽器 chrome開啟。( 關於瀏覽器本書建議以 chrome做為預設值) 透過文件工具列 鈕或按 F12 鍵以預設瀏覽器開啟
5. 文字格式屬性面板 Dreamweaver CS6 中,對於文字格式的設定區分為 HTML 與 CSS 二種不同的方式。 當套用 HTML 格式時,Dreamweaver 會將屬性加入至網頁內文的 HTML 程式碼中。 當套用 CSS 格式時,Dreamweaver 會將屬性寫入文件標題或不同的樣式表中。
在屬性面板中設定 HTML 格式 • 如果 屬性 面板尚未開啟,請選按功能表列 視窗 \ 屬性 開啟,然後按 鈕。 • 選取要設定格式化的文字。 • 設定要套用到選取文字的選項。 以下是 屬性 面板中設定 HTML模式的相關選項說明:
在屬性面板中設定 CSS 樣式 • 如果 屬性 面板尚未開啟,請選按功能表列 視窗 \ 屬性 開啟,然後按 鈕。 • 接著可以執行下列其中一項作業: • 選取要套用CSS樣式的文字區塊,該樣式則會出現在目標規則 選單中。 • 從 目標規則 選單中,選取要編輯的樣式動作。 • 使用 CSS樣式 屬性 面板中的各個選項變更樣式內容。 以下是 屬性 面板中設定 CSS 樣式的相關選項說明:
在屬性面板使用 HTML 與 CSS 模式的時機 當設定文字段落格式 ( 這裡指 HTML 的基本標籤,如:段落 <p>、標題1 <h1>、粗體、斜體、項目及編號清單與縮排凸排... 等),因為屬於 HTML 的標籤屬性內容,就必須於 HTML 模式設定。其他較特別的如:ID 值、連結、標題、目標,也是 HTML 的標籤所管理,也必須在 HTML 模式下設定。 但是就文字本身的字體、大小、顏色、粗體、斜體與對齊,建議就於 CSS 模式設定,在設定的同時即可自動產生 CSS 樣式,並能套用到頁面上其他相同屬性的文字上。未來套用相同 CSS 樣式的部份若必須調整時,只要修改 CSS 樣式的內容,即能將所有套用的地方一起修改。 要注意的是,雖然 HTML 及 CSS 模式的屬性面板中都可以設定粗體、斜體... 等文字格式,但不同的是在 HTML 模式下設定是在選取的區域加上相關的 HTML 標籤,在 CSS 模式下是將設定值加入樣式中,或是修改樣式的內容。
設定文字格式 此頁面文字格式的規劃,將於指定文字套用四種格式:標題 1 (h1)、標題 2 (h2)、標題 3 (h3) 和 段落 (p)。 反白選取要更改格式的標題文字,於 屬性 面板按 鈕,設定 格式:標題 1,選取的標題文字已經套上 標題 1格式。
設定文字顏色 請反白選取已套用 h2樣式的標題文字,於 屬性 面板選按 文字顏色 鈕,於色盤上使用滴管選按 #F60,會發現文字呈現橘色,h2 樣式也會自動更新加上此顏色設定。 請利用相同方式設定標 3 與段落文字的字體顏色。
6. 插入影像與設定提示文字 STEP 01 插入\ 常用 面板選按 影像 右側 鈕 \ 影像,開啟對話方塊。 STEP 02 選取要插入的影像,按 確定 鈕會自動開啟 影像標籤輔助功能屬性 對話方塊。 STEP 03 請於 替代文字 欄中輸入指定文字,按 確定 鈕,如此即完成圖片的插入。 STEP04 下方屬性面板可修改影像相關參數,或製作影像地圖。
7. 表格 • 認識表格
插入表格的基本方法 STEP 01 請由 插入\ 版面 面板選按 表格 鈕,開啟對話方塊。 STEP 02 於 表格 對話方塊指定表格的各個屬性,其屬性說明如下:
選取欄、列、儲存格與表格的方法 插入表格後,是否覺得欄寬不夠寬、列高不夠高、顏色不太搭... 等問題,然而在動手設定、修改前,一定要先知道如何快速選取要調整的表格或儲存格。 • 選取儲存格 不連續儲存格的選取 (Ctrl 鍵): STEP01 請按 Ctrl 鍵不放,將滑鼠指標移至欲選取的儲存格上方,目標儲存格會呈紅框狀態,此時請按一下滑鼠左鍵。 STEP02 繼續按 Ctrl 鍵不放,用滑鼠點選即可選取多個儲存格。
選取儲存格 連續儲存格的選取 (Shift 鍵): STEP 01 按 Ctrl 鍵不放,將滑鼠指標移至欲選取的儲存格上方,目標儲存格會呈紅框狀態,此時請按一下滑鼠左鍵。 STEP 02 按 Shift鍵不放,再如圖於另一儲存格按一下滑鼠左鍵,這樣一來即選取了範圍內的所有儲存格。
選取列與欄 選取列: 將滑鼠指標移至欲選取列的最左方,待呈 → 時,目標列也會呈紅框狀態,此時請按一下滑鼠左鍵。如此一來就可將此列選取。 選取欄: 將滑鼠指標移至欲選取欄的最上方,待呈 ↓ 時,目標欄也會呈紅框狀態,此時請按一下滑鼠左鍵。如此一來就可將此欄選取。
選取表格 將滑鼠指標移至欲選取表格的左上角,待呈 時,目標表格也會呈紅框狀態,此時請按一下滑鼠左鍵。如此一來就可將此表格選取。 將滑鼠指標移至表格左上角,待呈 時,按一下 Ctrl 鍵,即可將整個表格結構以紅色框線標示出來。
表格屬性面板 選取整個表格時,會看到此表格的 屬性 面板。 儲存格屬性面板 選取任一儲存格時,在 屬性 面板除了會顯示文字的設定欄位外,在下方會顯示儲存格的設定欄位。
插入 超連結 • 超連結的對象 • 命名錨點的超連結:當內容太過冗長時,可用錨點來製作快速指定的連結方式。 • 網站內部的超連結:連結到網站內部其他網頁,或是同一網頁中的其他內容。 • 網站外部的超連結:連結到其他網站的內容,例如:相關網站介紹 • 檔案下載的超連結:將檔案以超連結的方式提供下載服務。 • 電子郵件的超連結:建立一個空白電子郵件,並已填妥收件者 E-mail,以提供一個與網友互動的管道。 8. 超連結
命名錨點的使用 若將文字、圖片全部設計在同一個網頁可能會使該網頁變得太過冗長,進而造成閱讀上的不易。這時就必須使用 Dreamweaver 中的命名錨點,它類似 Word 中的書籤,只需要在幾個關鍵地方插入 命名錨點,當它與連結搭配時就能很快地捲動到命名錨點的位置。 首先要確認功能表列 檢視 \ 視覺輔助 \ 隱藏元素 為被核選狀態,如此就可看到插入錨點時所有元素符號。 STEP 01 插入命名錨點 插入點置於指定的文字前,在 插入 \ 常用 面板選按 命名錨點 鈕開啟對話方塊。 STEP 02 輸入名稱 輸入 錨點名稱(如aa),按 確定 鈕,頁面即產生一命名錨點。 STEP03 插入超連結選定文字插入超連結,連結選 #aa