網(wǎng)頁設計創(chuàng)建和編輯網(wǎng).ppt

網(wǎng)頁設計,3.1 創(chuàng)建一個新文檔 3.2 文字處理 3.3 圖像處理 3.4 超級鏈接 3.5 使用多媒體對象,第3章 創(chuàng)建和編輯網(wǎng)頁文檔,3.1.1 創(chuàng)建新的空白文檔 在Dreamweaver 8.0中可以創(chuàng)建新的空白文檔、創(chuàng)建以模板為基礎的文檔以及打開并編輯已經(jīng)存在的文檔。 三種方法： 1、 從啟動界面中的“創(chuàng)建新項目”組合框中選擇合適的文件類型，即可直接進入文檔窗口進行編輯。 2、也可選擇主菜單中的“文件”“新建”命令，系統(tǒng)彈出新建文檔對話框。 3、按下Ctrl+N快捷鍵，系統(tǒng)彈出新建文檔對話框。,3.1 創(chuàng)建一個新文檔,3.1.2 打開現(xiàn)有文檔 在Dreamweaver 8.0中可以打開現(xiàn)有的Web頁或基于文本的文檔，即使這些文檔不是用Dreamweaver 8.0創(chuàng)建的也可以將其打開，然后利用Dreamweaver 8.0在“設計”視圖或“代碼”視圖中編輯該文檔。 打開現(xiàn)有的文檔有以下幾種方法： 1.在“文檔”窗口中打開選擇的文檔 2.導入Word文檔 3.在資源管理器中打開文檔,3.1 創(chuàng)建一個新文檔,3.1.3 設置頁面屬性 頁面屬性是指網(wǎng)頁的一般屬性信息，例如，網(wǎng)頁標題、網(wǎng)頁背景顏色、背景圖像、超鏈接顏色、跟蹤圖像等。 1.設置網(wǎng)頁標題及編碼 2. 設置網(wǎng)頁其他屬性 (1)外觀 (2)鏈接 (3)跟蹤圖像,3.1 創(chuàng)建一個新文檔,文字處理主要包括：輸入文字、設置文字大小、設置字體、設置文本顏色、設置文本對齊方式等。 3.2.1 輸入文字 1輸入文字： 打開Dreamweaver 8.0之后，然后在需要插入文本的位置單擊鼠標左鍵定位插入點，然后輸入文字。如果需要開始新的一段，按鍵即可，對應的HTML標簽是；如果想換行顯示一段內(nèi)容，可以按組合鍵，對應的HTML標簽是；如果輸入的文字超出一行的范圍，輸入的文本將自動換行。,3.2 文字處理,2輸入連續(xù)空格 在Dreamweaver 8.0中一般只能輸入一個空格，若要輸入連續(xù)的空格時，可以采用下面幾種方法中的一種： 執(zhí)行菜單命令“編輯/首選參數(shù)”，打開“首選參數(shù)”對話框后，選定“分類”欄中的“常規(guī)”選項，然后在右邊編輯選項中勾選“允許多個連續(xù)的空格”復選框即可。 將光標定位到需要輸入多個空格的位置，切換到代碼視圖即HTML源文檔中連續(xù)輸入多個“”，或者單擊插入工具欄文本分類中的“字符”對象，彈出下拉菜單，選擇“不換行空格”選項即可。 切換到中文輸入法，設置為全角輸入狀態(tài)，然后在欲連續(xù)輸入空格的位置按空格鍵。 3輸入特殊字符,3.2 文字處理-輸入文字,3.2.2 編輯文字 1設置文字標題與段落 設置文字段落與標題的方法基本相同，方法如下： (1)將光標定位到應用段落樣式或文本樣式的文本中，或直接選取文本。 (2)單擊屬性面板中的格式選擇框，在彈出的下拉列表中選擇“段落”或“標題”。 切換到代碼視圖，我們就會發(fā)現(xiàn)，字符屬性面板的“格式”列表框中的“段落”、“標題1”、“標題2”、“標題3”、“標題4”、“標題5”、“標題6”和“預先格式化的”等選項，分別對應HTML語言中的、和標記。,3.2 文字處理,2設置文字字體及大小 (1)設置字體 (2)設置字號 3設置文本顏色 4設置方本對齊方式,3.2 文字處理-編輯文字,3.2.3 插入水平線 水平線對于組織信息很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文本和對象。 1、插入水平線 將光標移到要插入水平線的位置，執(zhí)行菜單“插入”“HTML”“水平線”命令或者在“插入”欄中，選擇“HTML”，然后單擊“水平線”按鈕，插入一條默認寬度和粗細的水平線。 2、修改水平線 選定插入的水平線，打開屬性面板，設置水平線的高度、寬度、對齊方式以及是否有陰影等屬性 3、設置水平線的顏色 選中水平線，然后單擊屬性面板中的快速標簽編輯器按鈕，打開編輯標簽窗口，鍵入代碼，如將水平線設為紅色，鍵入代碼：color=“red”。,3.2 文字處理,3.2.4 插入更新日期 Dreamweaver提供了一個方便的日期對象，該對象使用戶可以以喜歡的格式插入當前日期，還可以選擇在每次保存文件時都自動更新該日期。 1.插入日期、星期和時間 2.插入更新日期 3.修改日期 要修改網(wǎng)頁中已插入的日期，有兩種方法： (1)若沒有勾選“儲存時自動更新”，則直接手動修改日期。 (2)若勾選了“儲存時自動更新”，則選中日期后在屬性面板中單擊 按鈕，同樣彈出“插入日期”對話框，在其中編輯修改日期格式。,3.2 文字處理,3.3.1 插入圖像 在Dreamweaver中插入圖像的基本方法是： 1將光標置于要插入圖像的位置，在插入工具欄的“常用”類中單擊“圖像”按鈕或選擇“插入”菜單中的“圖像”命令，打開“選擇圖像源文件”對話框。 2在對話框中顯示有圖像文件名、文件類型和圖像源的路徑URL(每個網(wǎng)頁都有一個唯一的地址，稱作統(tǒng)一資源定位器即URL)。我們選取存放在站點中的圖像文件，然后單擊【確定】按鈕將顯示“圖像標簽輔助功能屬性”對話框，在“替代文本”和“詳細描述”文本框中輸入內(nèi)容，單擊“確定”按鈕，即可將圖片插入到指定區(qū)域。 3如果所選擇的圖像文件不在用戶設定的當前站點，則將打開“Macromedia Dreamweaver”對話框。提示是否將圖像文件復制到根文件夾，單擊【是】按鈕，然后打開“復制文件為”對話框，定位到站點中用于存放圖像文件的文件夾images，最后單擊【保存】按鈕即可。,3.3 圖像處理,3.3.2 設置圖像屬性 在網(wǎng)頁中插入圖像后可以對圖像的各種相關屬性進行設置，若要設置圖像屬性，請執(zhí)行以下操作： 1.圖像名稱及大小：使用縮略圖下面的文本框設置名稱，以便在使用 Dreamweaver 行為(如“交換圖像”)或腳本語言(如 JavaScript 或 VBScript)時可以引用該圖像。而縮略圖右側標明了所插入圖像的大小。 2.寬和高:以像素為單位指定圖像的寬度和高度。當您在頁中插入圖像時，Dreamweaver 自動用圖像的原始尺寸更新這些文本框。在“寬”和“高”文本框中輸入新值，實現(xiàn)圖像大小改變，但卻與圖像的實際寬度和高度不相符，若要恢復圖像原始值，可單擊“寬”和“高”文本框右側的“恢復圖像到原始大小”按鈕重設大小。,3.3 圖像處理,3.源文件：指定圖像的源文件。單擊文件夾圖標以瀏覽到源文件，或者直接鍵入路徑。 4.鏈接：指定圖像的超級鏈接。將“指向文件”圖標拖到“站點”面板中的某個文件，或單擊文件夾圖標瀏覽到站點上的某個文檔，或手動鍵入URL。 5.對齊:可以將圖像與同一行中的文本、另一個圖像、插件或其它元素對齊。當圖像與圖像在網(wǎng)頁中對齊時，可由屬性面板中的按鈕、來確定，當圖像與文本、插件或其它元素對齊時，可將圖像視為一般字符，運用屬性面板中的列表來確定。,3.3 圖像處理-設置圖像屬性,6.替代：指定只顯示文本的瀏覽器或已設置為手動下載圖像的瀏覽器中代替圖像顯示的替代文本。在某些瀏覽器中，當鼠標指針滑過圖像時也會顯示該文本。 7.地圖名稱和熱點工具：允許您標注和創(chuàng)建圖像映射。 8.垂直邊距和水平邊距：沿圖像的邊緣添加邊距(以像素為單位)?！按怪边吘唷毖貓D像的頂部和底部添加邊距?！八竭吘唷毖貓D像左側和右側添加邊距。若圖像和文字貼得太近，容易使人產(chǎn)生壓迫感。因此，適當調(diào)整圖像間邊距可以使瀏覽者在瀏覽網(wǎng)頁時更加舒適。,3.3 圖像處理-設置圖像屬性,9.目標：指定鏈接的頁應當在其中載入的框架或窗口。(當圖像沒有鏈接到其它文件時，此選項不可用。)當前框架集中所有框架的名稱都顯示在“目標”列表中。 也可選用下列保留目標名： _blank:將鏈接的文件載入一個未命名的新瀏覽器窗口中。 _parent:將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果包含鏈接的框架不是嵌套的，則鏈接文件加載到整個瀏覽器窗口中。 _self:將鏈接的文件載入該鏈接所在的同一框架或窗口中。此為默認值。 _top:將鏈接的文件載入整個瀏覽器窗口中，因而會刪除所有框架。,3.3 圖像處理-設置圖像屬性,10.低解析度源：指定在載入主圖像之前應該載入的圖像。 11.邊框:以像素為單位的圖像邊框的寬度。默認無邊框。 12.編輯：啟動在“外部編輯器”首選參數(shù)中指定的圖像編輯器并打開選定的圖像。 13.優(yōu)化：打開“優(yōu)化”對話框,使用 Fireworks優(yōu)化圖像。 14.裁剪：修剪圖像大小，刪除不需要的區(qū)域。 15.重新取樣：對已調(diào)整大小的圖像重新取樣，提高圖片在新的大小和形狀下的品質(zhì)。 16.亮度和對比度：調(diào)整圖像的亮度和對比度設置。 17.銳化：調(diào)整圖像的清晰度。,3.3 圖像處理-設置圖像屬性,3.3.3 插入圖像占位符 在Dreamweaver中插入圖像占位符的基本操作： 1.將光標置于要插入圖像占位符的位置，在插入工具欄的“常用”分類中選擇“圖像占位符”按鈕或選擇“插入”菜單中的“圖像對象”中的“圖像占位符”命令，打開“圖像占位符”對話框。 2.在對話框中進行設置： (1)在“名稱”文本框中，輸入要作為圖像占位符的標簽文字顯示的文本。名稱可有可無，必須以字母開頭，且只能包含字母和數(shù)字；不允許使用空格和高位 ASCII 字符。 (2)在“寬度”和“高度”文本框中，以像素為單位鍵入數(shù)字以設置圖像大小。 (3)為圖像占位符選擇一種顏色，可以使用顏色選擇器或直接輸入顏色的十六進制值(如 #FF0000)或輸入網(wǎng)頁安全色名稱(如 red)。 (4)在“替代文本”中，為使用只顯示文本的瀏覽器的訪問者輸入描述該圖像的文本。 3單擊“確定”。網(wǎng)頁文檔中即會出現(xiàn)圖像占位符。,3.3 圖像處理,3.3.4 插入“鼠標經(jīng)過圖像” 鼠標經(jīng)過圖像就是指當訪問者移動鼠標使鼠標指針經(jīng)過圖像時，圖像變?yōu)榱硪环鶊D像；而鼠標指針離開時，圖像又恢復為原始圖像。這種效果通常用于導航條、圖像互動等。它由兩幅圖像組成，一是首次載入時顯示的圖像即原始圖像，二是鼠標經(jīng)過后翻轉的圖像即鼠標經(jīng)過圖像。在創(chuàng)建鼠標經(jīng)過圖像時應使用相同大小的兩幅圖像；如果這兩個圖像大小不同，Dreamweaver 將自動調(diào)整第二個圖像的大小以匹配第一個圖像的屬性。,3.3 圖像處理,3.4.1 超級鏈接的概念 超級鏈接是指從一個網(wǎng)頁指向一個目標的連接關系，即在 Web 頁面中插入的指向其它文檔的引用。目標可以是一個另外的網(wǎng)頁，也可以是一張圖片、一個文件、一個程序等。鏈接可以將任何類型的資源轉換為鏈接，但最常用的鏈接類型是文本鏈接?？梢栽谡军c創(chuàng)建過程的任何階段創(chuàng)建超級鏈接。 超級鏈接的外觀多種多樣，可以是導航按鈕、文本、圖片，無論是哪一種格式，只要用鼠標單擊鏈接對象，即可跳轉到指定的目標網(wǎng)頁。當鼠標指向鏈接載體時，鏈接載體會發(fā)生一些變化，如鼠標指向文字載體，文字的字體、字號、顏色等會發(fā)生改變，有的帶有下畫線。,3.4 超級鏈接,1.超鏈接的分類 根據(jù)超級鏈接目標文件的不同，可以分為頁面超鏈接、錨點超鏈接、電子郵件超鏈接等；根據(jù)超級鏈接單擊對象的不同，超級鏈接可分為文字超鏈接、圖像超鏈接、圖像映射等。,3.4 超級鏈接-概念,2.路徑 創(chuàng)建超鏈接必須先了解鏈接與被鏈接載體的路徑。在一個網(wǎng)站中，路徑通常有3種表示方式：絕對路徑、根目錄相對路徑和文檔目錄相對路徑。 (1)絕對路徑。 (2)根目錄相對路徑。 (3)文檔目錄相對路徑。,3.4 超級鏈接概念,3.4.2 創(chuàng)建超級鏈接 Dreamweaver 提供多種創(chuàng)建超鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接?？山⒌轿臋n內(nèi)任意位置的任何文本或圖像(包括標題、列表、表、層或框架中的文本或圖像)的鏈接。 1、創(chuàng)建到其它文檔或文件的超級鏈接 2、創(chuàng)建到文檔內(nèi)的特定位置的超級鏈接 3、創(chuàng)建電子郵件鏈接,3.4 超級鏈接,3.4.3 管理超級鏈接 為避免站點中出現(xiàn)斷鏈接，可以激活鏈接管理，使 Dreamweaver 在您作出更改后自動更新鏈接。也可以使用站點的可視化表示形式來修改鏈接，或者通過一次更改將所有鏈接更新到一個特定的文件中。 自動更新鏈接 在站點地圖中修改鏈接 在整個站點范圍內(nèi)更改鏈接,3.4 超級鏈接,3.4.4 圖像映射 圖像映射就是指在一幅圖像中定義若干個區(qū)域(這些區(qū)域 稱為熱點)，每個區(qū)域中指定一個不同的超鏈接，當單擊不同 區(qū)域時可以跳轉到相應的目標頁面。,3.4 超級鏈接,3.4.5 導航條 導航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。導航條項目最多呈現(xiàn)四種圖像狀態(tài)： (1)初始狀態(tài)：用戶尚未單擊或尚未與此項目交互時所顯示的圖像。 (2)滑過狀態(tài)：指鼠標指針滑過初始圖像時所顯示的圖像。 (3)按下狀態(tài)：指項目被單擊后所顯示的圖像。 (4)按下時鼠標經(jīng)過狀態(tài)：指在項目被單擊后，鼠標指針滑過“按下”圖像時，所顯示的圖像。 1、創(chuàng)建導航條 2、測試與修改導航條,3.4 超級鏈接,Macromedia Dreamweaver 8 可以快速便捷地向Web 站點添加多媒體對象，如Flash 和 Shockwave 影片、QuickTime、AVI、Java applet、Active X 控件以及各種格式的音頻文件，從而使制作出的網(wǎng)頁有聲有色。目前使用的音頻和視頻文件格式包括： (1)音頻：主要包含Wav、Midi、Mp3、Aif和Ra等文件格式。 (2)視頻：主要有Real Media 、Windows Media、QuickTime 3種視頻文件，其中Real Media 和Windows Media格式在國內(nèi)使用最廣。,3.5 使用多媒體對象,3.5.1插入和編輯多媒體對象 可以在 Dreamweaver 文檔中插入Flash SWF文件或?qū)ο?、QuickTime或Shockwave 影片、Java applet、ActiveX 控件或者其它音頻或視頻對象。 在頁面中插入媒體對象的基本操作如下： (1)將插入點放在“文檔”窗口中希望插入該對象的位置。 (2)在“插入”工具欄的“常用”類別中單擊“媒體”按鈕，再選擇要插入的媒體對象按鈕；或者從“插入”“媒體”菜單中選擇適當?shù)拿襟w對象，如插件，彈出“選擇文件”對話框，然后從中選擇源文件，單擊