03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀.

Presentation on theme: "03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀."— Presentation transcript:

1 03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀

2 3-1 網頁文字的編輯 網頁結構有百分之九十都是由文字組成，所以網頁上的文字編輯就需要一套完整且有規則的整理方法。
在開始進行文字編輯前， 必須具備一個正確觀念： 確認文章的段落，並事先 歸納出哪一段要當做標題、 副標亦或是內文？要設定 何種樣式？如此在進行後 續的各項文字編輯時，才 能事半功倍喔！

3 3-1-1 認識文字格式屬性面板 在屬性面板中設定 HTML 格式
認識文字格式屬性面板 以往在編輯文字時，都習慣在 屬性 面板上直接設定文字的格式，但對於網站版 面的統一性、便利性總有些不周全。所以在新一代 Dreamweaver CS5 中，對於 文字格式的設定區分為 HTML 與 CSS 二種不同的方式。當套用 HTML 格式時， Dreamweaver 會將屬性加入至網頁內文的 HTML 程式碼中。當套用 CSS 格式 時，Dreamweaver 會將屬性寫入文件標題或不同的樣式表中。 在屬性面板中設定 HTML 格式 設定文字格式最基礎的方式即是使用 HTML 標籤，透過 屬性 面板設定的方式如下： 1. 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。 2. 選取要設定格式化的文字。 3. 設定要套用到選取文字的選項。

4 在屬性面板中設定 CSS 樣式 使用 CSS 樣式來設定文字格式是一個相當不錯的方式，不僅能將文字的相關設定 以樣式來規範，並能將相同樣式設定套用在同性質的文字上，節省重複設定的麻煩。 於 屬性 面板編輯 CSS 樣式的方式與步驟如下： 1. 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。 2. 接著可以執行下列其中一項作業： 選取要套用 CSS 樣式的文字區塊，該樣式則會出現在 目標規則 選單中。 從 目標規則 選單中，選取要編輯的樣式動作。 3. 使用 CSS 樣式 屬性 面板中的各個選項變更樣式內容。 以下是 屬性 面板中設定 CSS 樣式的相關選項說明：

5 在屬性面板使用 HTML 與 CSS 模式的時機
在 Dreamweaver CS5 透過 屬性 面板將 HTML 與 CSS 二個模式區隔得很清楚， 相信也發現二個模式下能設定的項目不見得相同，那什麼時候要使用 HTML 格 式，什麼時候又必須使用 CSS 樣式呢？ 當設定文字段落格式 (這裡指 HTML 的基本標籤，如：段落 <p>、標題1 <h1>、粗體、斜體、項目及編號清單與縮排凸排...等)，因為屬於 HTML 的標 籤屬性內容，就必須於 HTML 模式設定。其他較特別的如：ID 值、連結、標題、 目標，也是 HTML 的標籤所管理，也必須在 HTML 模式下設定。 但是就文字本身的字體、大小、顏色、粗體、斜體與對齊，建議就於 CSS 模式 設定，在設定的同時即可自動產生 CSS 樣式，並能套用到頁面上其他相同屬性 的文字上。未來套用相同 CSS 樣式的部份若必須調整時，只要修改 CSS 樣式 的內容，即能將所有套用的地方一起修改。

6 文字輸入的方式 文字輸入，在 Dreamweaver 網頁製作中可以說是最簡單的，因為輸入方式與 一般在其他文書軟體中習慣編輯方法十分類似；在編輯區中輸入文字的方式與記 事本或是 Word 軟體相同，它的排列方式由左至右，遇到編輯區的邊界時會自 動折行。以下就針對本書的範例網站：「映象東京」，進行首頁的實作練習。 確定網頁編碼 在編輯網頁內容之前，建議使用者先確定 網頁編碼，這個動作能確保網頁上的文字 內容能正確顯示。在顯示繁體中文的頁面 上，通常都是使用 Big5 大五碼進行編碼， 可以依照下述方法進行設定：

7 文字檔複製內容 如果有現成的文字檔，是否希望在製作網頁時能將文字直接貼到網頁上，省去打 字的痛苦呢？只是在 Dreamweaver 中，有一些地方是需注意的喔！ 1. 在 檔案 面板 <tokyoimage\ txt> 資料夾中有一個 <about.txt> 文字檔，請 於此檔案上方連按二下滑鼠左鍵開啟文字檔，進行如下設定：

8 2. 選按頁面標籤回到 <about.htm> 的網頁編輯區，再選按功能表列 編輯 \ 貼上 或按 Ctrl + V 鍵將剛才複製的純文字貼上去，所有的文字即會保留原有的 段落與文字屬性設定，展現在網頁上呢！

9 3-1-3 格式化文字 加入網頁使用字體 以下要將範例網站的網頁文字格式化， 讓頁面內容格式能呈現一致性，看來 更有條理，增加頁面的易讀性。
格式化文字 以下要將範例網站的網頁文字格式化， 讓頁面內容格式能呈現一致性，看來 更有條理，增加頁面的易讀性。 加入網頁使用字體 請先於 屬性 面板按 鈕，進入 CSS 模式。當選按 屬性 面板 字體 旁 清單鈕，於清單中會找不到任何中文 字體，因為中文字體並不是 Dreamweaver 預設的字體，為了可 以讓本書的範例網站能夠統一字體， 以下將於 屬性 面板進行相關設定：

10 設定文字格式 所謂文字格式是為選取區域加上段落 (<p>)、標題 1~6 (<h1>~<h6>) 及預 先格式化 (<pre>) 的 HTML 標籤。在 網頁編輯文字段落時，應養成習慣將內 容以文字格式加以定義，除了能以格式 區分出標題、文字段落的不同，未來使 用 CSS 樣式加以定義時即可馬上應用， 不用再重新設定。 此頁面文字格式的規劃，將於指定文字 套用四種格式：標題 1 (h1)、標題 2 (h2)、標題 3 (h3) 和 段落 (p)。

11 以下其他文字內容請利用相同方式套用上 標題 2、標題 3 與 段落 的格式設定， 如此即完成初步文字格式化的動作。

12 設定字體與大小 變更文字的字體與大小，必須切換至 CSS 模式，再如下操作：

13 請利用相同方式設定標 2、標 3、段落文字的字體、大小與單位。

14 設定文字顏色 同樣的，文字顏色必須在 CSS 模式中設定，以下將繼續設定使用的文字顏色，讓 軟體自動更新剛才新增的 CSS 樣式：h1 的內容。

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

16 設定文字編號清單 請於 屬性 面板按 鈕，以下要為 文字設定上編號清單。
請於 屬性 面板按 鈕，以下要為 文字設定上編號清單。 套用編號清單後，會發現文字相關格式改變了，以下將透過 CSS 樣式設定來調整。

17 設定文字粗體 在文字段落中要突顯主題，除了考量文字的顏色、字體的使用及大小...等問題， 其實最有效最快的方法就是為文字套用上粗體或斜體效果。文字粗體也可在 CSS 樣式中設定，以下將繼續設定，讓軟體自動更新剛才新增的 CSS 樣式：li 編號清 單標籤的樣式。

18 設定文字對齊方式 無論是靠左對齊、置中對齊、靠右對齊或左右對齊都可以在選取要設定的文字後， 按設定鍵即可完成設定；對齊功能的設定，會自動更新到樣式，以下要將標題設 定置中對齊。

19 3-2 水平線的設計 編輯網頁文字時，針對不同性質的文章或圖片，想要有所區隔，使用分行、分段落的方式似乎說服力不強，版面也不明顯。這時就可以插入水平線來分開這些不同性質的內容。 在這個網頁中我們要插入一 條水平線，將兩個段落文字 做一個區隔，讓網頁瀏覽的 視覺效果能更清楚。

20 插入水平線 請繼續在 <about.htm> 檔案內插入一條水平線，作為區隔之用。

21 修改水平線屬性 設定水平線的寬高 透過 屬性 面板可以設定水平線的寬度、高度與對齊效果。

22 在水平線 屬性 面板可以設定水平線的寬度與高度。寬度的計算單位有兩種， 一種是 %百分比，也就是水平線占整個頁面的百分比；另一種是 像素。而 高度的計算單位只有一種，那就是 像素。
可以規定水平線對齊的方式為 靠左對齊、置中對齊、靠右對齊 三種效果。 在水平線 屬性 面板右下角的 立體效果 選項，如果取消核選會讓水平線除 去立體效果。

23 設定水平線的顏色 在水平線 屬性 面板上並沒有設定顏色的選項，但只要使用 HTML 語法即可幫水 平線加上色彩，請如下設定：

24 水平線的參考資料 如果想知道更多關於水平線的設定技巧，可選按功能表列 視窗 \ 結果 \ 參考 開啟 參考 面板，在 tag 選按 HR，並於最右側的清單鈕中選擇要知道的項目內容即可。

25 3-3 網頁影像的使用 如果網頁中滿是密密麻麻的文字，無論有多精彩的內容也會令人望之卻步！所以影像的加註在網頁設計中佔了相當地位，沒有影像來相輔，網站就算不上完美。

26 插入影像與設定提示文字 請依照下述步驟進行影像的插入。 請利用相同方式，將另外三張影像分 別插入在文字段落中。

27 設定影像的對齊位置 插入影像後，請將影像設定靠右對齊，請依如下進行操作：

28 請利用相同方式，將另外三張影像分別設定 對齊：靠右對齊。

29 設定文字與影像的間距 當設定影像靠右對齊後，會發現文字和影像排列位置全部都擠在一起，已經影響 到網頁整體瀏覽的視覺效果，影像與文字不能整齊的排列。 1. 首先設定水平線和影像的間距。

30 接著要以影像的大小為基準，設定與段落文字之間的間距。
當設定好影像與段落文字的間距後， 會發現編號清單樣式跑掉了，這時請 調整 li 的 CSS 樣式：

31 插入日期符號 完成了文字與影像的設定後，以下將插入此網頁的建置日期。

32 設定網頁背景 在網頁上瀏覽頁面時，會看到某些 網頁的背景是一張圖片，而不是單 純的顏色，最後，我們要為網頁加 入背景，請選按 屬性 面板 頁面屬 性 鈕或選按功能表列 修改 \ 頁面 屬性，開啟對話方塊進行如下操作：

33 3-4 操作秘技與重點叮嚀 在本節中提供幾個設定影像的相關技巧，以及插入特殊符號、移除無關的程式碼...等，讓您在編輯網頁時能更快速的操作。 插入特殊符號 編輯時常會使用到一些不容易輸入的符號，例如版權符號、註冊商標或是特定國 家的貨幣單位符號。因為在鍵盤沒有這些符號的按鍵，所以輸入時就格外困難。 HTML 軟體語言對於這些符號有它特殊的輸入碼，要使用正確才能在瀏覽器中顯 示，所以在使用時如果沒有熟背的話，都要先查閱相關規定再來輸入。

34 樣式的修改 該如何修改設定好的樣式呢？有二個方式可以進行，若是在 屬性 面板可以完成 即直接在面板上設定即可；若是較進階的 CSS 設定建議開啟 CSS 樣式面板進行 修改。 例如想要修改之前設定好的 h1 標題文字顏色，可以使用下面的方式：

35 選擇網頁中可使用的影像類型 影像的加入能讓網頁增色不少，想把手邊所有的影像全都放置到個人的網頁上嗎？ 但是請注意，不是任何類型的影像都可以插入到網頁之中。 在插入影像時會開啟 選取影像原始檔 對話方塊，對於影像的類型似乎有些限制， 只允許 GIF、JPG(JPEG) 及 PNG 類別。

36 PSD 檔轉換成網頁影像格式 Dreamweaver CS5 加強了與 Photoshop CS5 的整合。可以將 Photoshop 影像 檔 (PSD 格式) 插入 Dreamweaver 網頁中，並由 Dreamweaver 將這些影像 檔最佳化轉換為網頁可用的影像 (GIF、JPEG 和 PNG 格式)。 請先開啟一個全新空白的檔案來練習插入 PSD 影像的步驟，請先複製附書光碟 <本書範例 \ 各章練習檔 \ 原始檔 \ ch03> 資料夾至 <C:\ practice> 下。

37 編輯影像相關設定 Dreamweaver 提供了基本的影像編輯功能，在 Dreamweaver 中可以直接調 整影像大小、裁切、調整亮度、對比或銳利化...等。現在就一起看看如何操作吧！ 目視調整影像大小 若是插入的影像圖片大小並不符合所需要，該如何調整 呢？ 請選取影像後，將滑鼠指標移至影像物件右下角的縮放 控點，當呈 時，按 Shift 鍵不放再拖曳該縮放控 點即可以正比例調整影像大小。要注意的是，縮放影像 時，過於放大影像會導致失真。

38 重設大小、重新取樣 調整影像大小後，會發現影像的呈現 不如調整前清楚，可在選取影像的狀 態下，於 屬性 面板設定重設影像大 小或重新取樣。 裁切 請選取影像後，選按 屬性 面板 裁切 鈕並開始如下設定：

39 亮度和對比 銳利化 當影像太暗或太亮時，請在選取影像的狀態下，於 屬性 面板選按 亮度和 對比 鈕，開啟 亮度/對比 對話方塊調整影像。
當影像太暗或太亮時，請在選取影像的狀態下，於 屬性 面板選按 亮度和 對比 鈕，開啟 亮度/對比 對話方塊調整影像。 銳利化 銳利化會增加物件邊緣四周的像素對比，並增加影像的清晰度或銳利度。請在選 取影像的狀態下，於 屬性 面板選按 銳利化 鈕，開啟對話方塊調整影像。

40 編輯影像設定 請在選取影像的狀態下，於 屬性 面板選按 編輯影像設定 鈕，將網頁中的 影像做最佳化處理。

41 編輯 若想再修改已插入編輯區中影像的樣式，可以先選取該影像，然後於 屬性 面板 選按 編輯 鈕開啟 Photoshop。待影像檔編修完成後，直接存檔即可大功 告成，回到 Dreamweaver，可看到圖片已經更改了，是不是又方便又快速呢！

42 3-4-6 移除 Word 產生的無關 HTML 程式碼
是否常遇到需要將 Word 製作的內容轉成網頁型態？但該檔案在 Dreamweaver 中開啟時，卻夾帶 Word 中不必要的 HTML 程式碼，所以以下將 說明如何在 Dreamweaver 中移除 Word 所產生的無關 HTML 程式碼，讓網頁完 整呈現。

43 1. 請在 Dreamweaver 中開啟先前在 Word 中轉存成網頁的檔案。 2
1. 請在 Dreamweaver 中開啟先前在 Word 中轉存成網頁的檔案。 2. 選按功能表列 命令 \ 清理 Word HTML 開啟對話方塊進行相關設定即可。

44 在此對話方塊中，基本 標籤有下列幾樣選項：
移除所有 Word 自訂的標記：會移除所有 Word 專用的 HTML，可以利用 詳細 標籤個別選取這些選項。 清理 CSS：會移除所有 Word 專用的 CSS，可利用 詳細 標籤進一步自訂這 個選項。 清理 <font> 標籤：會移除 HTML 標籤，將預設的內文文字大小轉換為大小為 2 的 HTML 文字。 修正不正確的巢狀標籤：會移除 Word 在段落和標題標籤之外所插入的字體標 記標籤。 套用原始格式：會將您在 HTML 格式 偏好設定和 SourceFormat.txt 中所指 定的原始格式選項套用至文件。 完成後顯示記錄：會在清理動作完成時，顯示一個訊息方塊，內含變更的相關 詳細資料。 3. 當完成設定時，請按 確定 鈕。根據文件的大小及 所選的選項數目，要完成清理動作可能要花數秒的時間； 而所輸入的偏好設定會自動另存為預設的 清理 Word HTML 設定。