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