Dreamweaver网页设计.pptVIP

第11章 Dreamweaver網頁設計 11-1 Dreamweaver定義網站 11-2 網頁基本元素的使用 11-3 網頁圖片運用 11-4 超連結設定 11-5 動態效果製作 Dreamweaver定義網站 本章中將使用Dreamweaver如何定義網站、如何新增網頁檔與資料夾、以及如何刪除檔案、開啟網頁視窗編輯網頁、建立網頁的連結、儲存與預覽…等，我們將為您做說明。 定義網站前的準備工作 當網站的架構已規劃好，此時可以利用表格將相關資料夾與網頁名稱加以命名，讓建置的過程中對網站的內容更清楚明瞭。 開始定義網站 有了以上的架構，現在要開始在Dreamweaver裡定義網站。 只要設定好網站資料夾，Dreamweaver就會依照設定的位置來存放相關檔案。 如此一來，當網站上傳到遠端伺服器時，才不會發生連結錯誤得情況。 定義網站步驟 新增網頁檔案與資料夾 當Dreamweaver在你的電腦上建立一個空白的網站後，其新增方式可以透過滑鼠右鍵來設定。 編輯與切換網頁檔 Dreamweaver視窗中若同時開啟多個網頁檔，它會以標籤的形式呈現，而目前所編輯的網頁會位於最上端，按於標籤可切換到其他的網頁檔。 更改或刪除網頁檔 不管是要刪除檔案或是重新更換檔名，都可以在「檔案」面板中，於網頁檔上按滑鼠右鍵，從「編輯」指令中選擇要執行的動作。 設定首頁與網頁間連結 設定好以上的網頁檔，彼此之間是沒有任何的關聯性，因此接下來再透過「地圖檢視」功能，將各網頁間的關係連結起來。 儲存網頁檔 儲存時，執行「檔案/儲存」指令能將目前編輯的檔案儲存起來。 如果目前視窗上開啟多個網頁檔，也可以執行「檔案/全部儲存」指令將所有檔案一起儲存。 網頁基本元素的使用 Dreamweaver是一套網頁編排軟體，它的輸出不是紙張，而是在網路上呈現。 它之所以受到網頁設計師的喜愛，那是因為「所見即所得」，所編排的樣貌等於網頁上所呈現的效果。 開啟新檔案 執行「開始/所有程式/Macromedia/Macromedia Dreamweaver 8」指令，會看到起始頁面。 輸入文字 在Dreamweaver中，輸入文字內容的方式和一般的文書處理軟體相同，都是由左到右，且遇到文件的邊界時，就會自動折行。 換行不換段段落 按「Shift」+「Enter」鍵來強迫換行。 插入空白字元 先將中文輸入法轉換成「全形」(可按「Shift」+「Space」鍵切換全形)，這樣再按空白鍵，就可以加入空白字元。 插入特殊字元 將「插入」工具列切換到「文字」，再從 鈕處下拉選擇要插入的字元。 設定文字效果 透過屬性面板可為文章加入色彩、樣式、縮排、或對齊…等屬性設定。 修改頁面屬性 如果想加快文字效果的設定，可以執行「修改/頁面屬性」指令。 在「屬性」面板上按下 鈕，進入如下視窗後，先在「外觀」和「標題」的分類中預先設定好相關的文字色彩、字體、大小…等屬性。 屆時就可以快速從屬性面板中作選擇，同時段落文字也能直接顯示所設定的樣式。 變更項目清單 若具有項目符號的文字，我們可任意變更它的符號樣式，例如：將1、2、3符號改為a、b、c的排列方式。 只要先選取文字範圍，在屬性面板上按下 鈕將選取文字轉為編號清單，再按下 鈕，即可進入下圖視窗更改項目符號的樣式。 插入水平分割線 先利用滑鼠指定水平線的插入點，再將「插入工具列」切換到「HTML」類別，按下 鈕即可插入水平線。 對齊方式 有「預設」、「靠左對齊」、「置中對齊」、「靠右對齊」四種，而預設則顯示置中對齊。 插入網頁時間 網頁中如果希望瀏覽者知道網頁更新的時間，可在「插入」工具列上按下 鈕，進入「插入日期」視窗中選擇日期格式，以及是否顯示星期與時間的格式。 網頁圖片運用 透過圖片來美化網頁是增加網頁吸引力的最快方式。 但是圖片該如何插入、調整或是與網頁文字作文繞圖的效果等，便是這一小節要介紹的重點。 從檔案插入圖片 只要是JPEG、GIF、或PNG格式的圖檔，都是網頁上常用的圖檔格式，因為這三種格式都是屬於壓縮式的圖檔，。 這三種格式中，JPEG適合表現色彩豐富的影像照片。 GIF適合漫畫或線條式的插畫圖案，如果要做去除背景的插圖，以便和有底色的網頁作整合時，建議使用PNG格式，它的去背效果比GIF格式更好。 當各位找到適切的網頁圖片後，可以先將圖檔複製到網站所在的「images」資料夾中，再透過以下方式來插入圖檔。 插入圖檔 設定對齊方式 圖片插入後，接下來就是透過「屬性」面板來調整圖片與文字的位置。 如上圖所插入的圖片，由於插入點設在文字之