Dreamweaver
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Dreamweaver 簡介 PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Dreamweaver

Dreamweaver簡介

大葉大學 多媒體學程 黃鈴玲2013.12.11


Outline

Outline


Dreamweaver

1. 下載網頁範本

  • Free Website Template http://www.freewebsitetemplates.com/

    選一個版本下載


2 dreamweaver

2. Dreamweaver 的環境介紹

  • 歡迎畫面的使用

    啟動 Dreamweaver 時預設會顯示歡迎畫面,可以快速開啟最近編輯的檔案或新增文件。

Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案,

以方便等一下的解說


Dreamweaver

  • 操作環境的介紹

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


Dreamweaver

3. 網站管理

  • 新增或管理網站

    STEP 01

    選按功能表列 網站 \ 新增網站 (管理網站) 開啟對話方塊開始設定。

    STEP 02

    請選按 網站 標籤,在 網站名稱 輸入框,為網站命名,在 本機網站資料夾 中輸入資料夾所在位置,確認無誤後按 儲存 鈕。


Dreamweaver

STEP 03 (若需連接網頁伺服器)

伺服器  

Webmail密碼

尚未建立WWW目錄者請先空白,儲存後至視窗右下角新增WWW資料夾,

再至此處修改。

勾選測試


Dreamweaver

網站檔案的管理,可說是 Dreamweaver 管理網站的首要戰將。它不僅可以管理本地的資料夾,也可以檢視遠端網站資料,更厲害的是可以存在於個人或多人的工作模式中,亦能同步更新遠端網站及本地資料夾的內容。

  • 檔案面板的簡介

    在 檔案 面板,可以看到網站大概的結構,更可以在這裡建立所需要的檔案、資料夾... 等,以下是這個面板中重要的元件介紹:


Dreamweaver

  • 在檔案面板新增 \ 刪除檔案

    STEP 01

    新增網頁:請於 檔案 面板的 本機檢視 狀態中,進入「範例網站,然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 開新檔案,會自動新增一個 <untitled.htm> 的網頁檔案。

    STEP 02

    更改檔名:如果新增時不喜歡預設的檔名,請先選取要更改檔名的檔案,再選按 檔案 面板右上角的 鈕 \ 檔案 \ 重新命名 進入編輯狀態,輸入新的檔名。

    STEP 03

    刪除檔案:請選取要刪除的檔案後按 Delete鍵,或者也可以選按 檔案 面板右上角的 鈕 \ 檔案 \ 刪除 即完成刪除檔案的動作。


Dreamweaver

  • 在檔案面板建立資料夾

    STEP 01

    新增資料夾:例如現在要製作一個資料夾:「test」,請於 檔案 面板的 本機檢視 中進入範例網站,然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 新增資料夾,軟體自動新增資料夾,這時可以自行輸入想要設定的資料夾名稱。

    STEP 02

    更改資料夾名稱:更改資料夾名稱與更改檔案名稱的方式相彷,請選取要更名的資料夾後,選按 檔案 面板右上角的 鈕\ 檔案 \ 重新命名 或按 F2 鍵即可進入編輯狀態,完成更名。

    STEP 03

    刪除資料夾:首先選取要刪除的資料夾按 Delete鍵,或選按 檔案 面板右上角的 鈕\ 檔案 \ 刪除 即完成刪除檔案的動作。


Dreamweaver

4. 網頁文件視窗

接下來將進入 Dreamweaver 中網頁文件視窗,先簡單的了解編輯環境與一些基本編輯動作。

  • 新增 / 開啟網頁

    請開新檔案或選取檔案後按 Enter鍵或連按二下滑鼠左鍵,此時軟體會將檔案開啟在文件視窗。

選取檔案後按 Enter 鍵或連按二下滑鼠左鍵,可以將檔案開啟於文件視窗中


Dreamweaver

  • 儲存檔案

    • 編輯過但卻尚未儲存之檔案,在標題列或頁面切換標籤的檔名旁會有一個「*」號。

    • 在 Dreamweaver 儲存檔案的方式相當簡單,除了可以選按功能表列 檔案 \ 儲存檔案 就能儲存目前開啟於文件視窗上的作品。

    • 也可以按 Ctrl + S 鍵儲存檔案。

編輯過但卻尚未儲存之檔案,在標題列或頁面切換標籤的檔名旁會有一個「*」號


Dreamweaver

  • 在瀏覽器中預覽

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

透過文件工具列 鈕或按 F12 鍵以預設瀏覽器開啟


Dreamweaver

5. 文字格式屬性面板

Dreamweaver CS6 中,對於文字格式的設定區分為 HTML 與 CSS 二種不同的方式。

當套用 HTML 格式時,Dreamweaver 會將屬性加入至網頁內文的 HTML 程式碼中。

當套用 CSS 格式時,Dreamweaver 會將屬性寫入文件標題或不同的樣式表中。


Dreamweaver

  • 在屬性面板中設定 HTML 格式

    • 如果 屬性 面板尚未開啟,請選按功能表列 視窗 \ 屬性 開啟,然後按 鈕。

    • 選取要設定格式化的文字。

    • 設定要套用到選取文字的選項。

      以下是 屬性 面板中設定 HTML模式的相關選項說明:


Dreamweaver

  • 在屬性面板中設定 CSS 樣式

    • 如果 屬性 面板尚未開啟,請選按功能表列 視窗 \ 屬性 開啟,然後按 鈕。

    • 接著可以執行下列其中一項作業:

      • 選取要套用CSS樣式的文字區塊,該樣式則會出現在目標規則 選單中。

      • 從 目標規則 選單中,選取要編輯的樣式動作。

    • 使用 CSS樣式 屬性 面板中的各個選項變更樣式內容。

      以下是 屬性 面板中設定 CSS 樣式的相關選項說明:


Dreamweaver

  • 在屬性面板使用 HTML 與 CSS 模式的時機

    當設定文字段落格式 ( 這裡指 HTML 的基本標籤,如:段落 <p>、標題1 <h1>、粗體、斜體、項目及編號清單與縮排凸排... 等),因為屬於 HTML 的標籤屬性內容,就必須於 HTML 模式設定。其他較特別的如:ID 值、連結、標題、目標,也是 HTML 的標籤所管理,也必須在 HTML 模式下設定。

    但是就文字本身的字體、大小、顏色、粗體、斜體與對齊,建議就於 CSS 模式設定,在設定的同時即可自動產生 CSS 樣式,並能套用到頁面上其他相同屬性的文字上。未來套用相同 CSS 樣式的部份若必須調整時,只要修改 CSS 樣式的內容,即能將所有套用的地方一起修改。

    要注意的是,雖然 HTML 及 CSS 模式的屬性面板中都可以設定粗體、斜體... 等文字格式,但不同的是在 HTML 模式下設定是在選取的區域加上相關的 HTML 標籤,在 CSS 模式下是將設定值加入樣式中,或是修改樣式的內容。


Dreamweaver

  • 設定文字格式

    此頁面文字格式的規劃,將於指定文字套用四種格式:標題 1 (h1)、標題 2 (h2)、標題 3 (h3) 和 段落 (p)。

    反白選取要更改格式的標題文字,於 屬性 面板按 鈕,設定 格式:標題 1,選取的標題文字已經套上 標題 1格式。


Dreamweaver

  • 設定文字顏色

    請反白選取已套用 h2樣式的標題文字,於 屬性 面板選按 文字顏色 鈕,於色盤上使用滴管選按 #F60,會發現文字呈現橘色,h2 樣式也會自動更新加上此顏色設定。

    請利用相同方式設定標 3 與段落文字的字體顏色。


Dreamweaver

6. 插入影像與設定提示文字

STEP 01

插入\ 常用 面板選按 影像 右側 鈕 \ 影像,開啟對話方塊。

STEP 02

選取要插入的影像,按 確定 鈕會自動開啟 影像標籤輔助功能屬性 對話方塊。

STEP 03

請於 替代文字 欄中輸入指定文字,按 確定 鈕,如此即完成圖片的插入。

STEP04

下方屬性面板可修改影像相關參數,或製作影像地圖。


Dreamweaver

影像類型


Dreamweaver

7. 表格

  • 認識表格


Dreamweaver

  • 插入表格的基本方法

    STEP 01

    請由 插入\ 版面 面板選按 表格 鈕,開啟對話方塊。

    STEP 02

    於 表格 對話方塊指定表格的各個屬性,其屬性說明如下:


Dreamweaver

選取欄、列、儲存格與表格的方法

插入表格後,是否覺得欄寬不夠寬、列高不夠高、顏色不太搭... 等問題,然而在動手設定、修改前,一定要先知道如何快速選取要調整的表格或儲存格。

  • 選取儲存格

    不連續儲存格的選取 (Ctrl 鍵):

    STEP01

    請按 Ctrl 鍵不放,將滑鼠指標移至欲選取的儲存格上方,目標儲存格會呈紅框狀態,此時請按一下滑鼠左鍵。

    STEP02

    繼續按 Ctrl 鍵不放,用滑鼠點選即可選取多個儲存格。


Dreamweaver

  • 選取儲存格

    連續儲存格的選取 (Shift 鍵):

    STEP 01

    按 Ctrl 鍵不放,將滑鼠指標移至欲選取的儲存格上方,目標儲存格會呈紅框狀態,此時請按一下滑鼠左鍵。

    STEP 02

    按 Shift鍵不放,再如圖於另一儲存格按一下滑鼠左鍵,這樣一來即選取了範圍內的所有儲存格。


Dreamweaver

  • 選取列與欄

    選取列:

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

    選取欄:

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


Dreamweaver

  • 選取表格

    將滑鼠指標移至欲選取表格的左上角,待呈 時,目標表格也會呈紅框狀態,此時請按一下滑鼠左鍵。如此一來就可將此表格選取。

    將滑鼠指標移至表格左上角,待呈 時,按一下 Ctrl 鍵,即可將整個表格結構以紅色框線標示出來。


Dreamweaver

表格屬性面板

選取整個表格時,會看到此表格的 屬性 面板。

儲存格屬性面板

選取任一儲存格時,在 屬性 面板除了會顯示文字的設定欄位外,在下方會顯示儲存格的設定欄位。


Dreamweaver

  • 插入 超連結

  • 超連結的對象

    • 命名錨點的超連結:當內容太過冗長時,可用錨點來製作快速指定的連結方式。

    • 網站內部的超連結:連結到網站內部其他網頁,或是同一網頁中的其他內容。

    • 網站外部的超連結:連結到其他網站的內容,例如:相關網站介紹

    • 檔案下載的超連結:將檔案以超連結的方式提供下載服務。

    • 電子郵件的超連結:建立一個空白電子郵件,並已填妥收件者 E-mail,以提供一個與網友互動的管道。

8. 超連結


Dreamweaver

命名錨點的使用

若將文字、圖片全部設計在同一個網頁可能會使該網頁變得太過冗長,進而造成閱讀上的不易。這時就必須使用 Dreamweaver 中的命名錨點,它類似 Word 中的書籤,只需要在幾個關鍵地方插入 命名錨點,當它與連結搭配時就能很快地捲動到命名錨點的位置。

首先要確認功能表列 檢視 \ 視覺輔助 \ 隱藏元素 為被核選狀態,如此就可看到插入錨點時所有元素符號。

STEP 01 插入命名錨點

插入點置於指定的文字前,在 插入 \ 常用 面板選按 命名錨點 鈕開啟對話方塊。

STEP 02 輸入名稱

輸入 錨點名稱(如aa),按 確定 鈕,頁面即產生一命名錨點。

STEP03 插入超連結選定文字插入超連結,連結選 #aa


Dreamweaver

參考資料:


  • Login