網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)建和編輯網(wǎng).ppt

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