1、第三課 使用文本和圖像w 使用文本w 使用圖像w 插入文本 w 格式化文本 w 項目列表的應(yīng)用為網(wǎng)頁添加文本 插入文本 w 插入普通文本 w 插入特殊字符 w 在字符之間添加空格 w 插入其他文本插入普通文本 w 將插入點定位在文檔編輯區(qū)中，直接輸入文本即可。Enter：創(chuàng)建新段落。Shift+Enter：換行。w 在Word等文本編輯軟件中編輯好文本之后，將其復(fù)制到剪貼板上，然后在Dreamweaver 8中將插入點定位到文檔編輯區(qū)中，粘貼剪貼板中的文本即可。 插入特殊字符 在Dreamweaver 8中編輯文本時，往往會遇到一些無法通過鍵盤直接輸入的特殊字符，如版權(quán)符號、注冊商標(biāo)符號等，這

2、時可通過Dreamweaver 8插入特殊字符的功能進行插入。 在字符之間添加空格 Dreamweaver 8中的文檔格式都是以HTML編碼形式存在的，而HTML編碼中只允許字符之間包含一個空格，所以在Dreamweaver 8中無論按多少次空格鍵都只會輸入一個空格。 插入其他文本w 插入水平線 添加水平線 修改水平線 w 插入日期 添加水平線 在文檔編輯區(qū)將插入點定位到所需位置，選擇插入HTML水平線菜單命令或單擊“插入”欄中的“HTML”選項卡在其中單擊 按鈕即可添加水平線。 修改水平線 初始繪制的水平線的格式往往不能滿足實際需要，此時可通過屬性面板對其進行修改。 插入日期 在制作網(wǎng)頁時，

3、有時需要插入當(dāng)前的日期，Dreamweaver 8提供了快速插入日期和時間的功能。 格式化文本 w 設(shè)置字體外觀 w 設(shè)置字體大小 w 設(shè)置顏色 w 設(shè)置字體樣式 w 設(shè)置對齊方式 w 設(shè)置標(biāo)題格式 設(shè)置字體外觀 用戶也可對屬性面板的“字體”下拉列表框中的字體列表重新編輯。 設(shè)置字體大小 在屬性面板的“大小”下拉列表框中選擇相應(yīng)的選項，并選擇其后的“單位”下拉列表框中相應(yīng)的單位選項，即可設(shè)置所選文本的字體大小。 其中字體的度量單位有像素（px）、厘米（cm）等，可根據(jù)具體情況進行選擇，但一般都以像素為單位。 設(shè)置顏色 單擊屬性面板中的 按鈕，在彈出的顏色列表框中選擇相應(yīng)的選項可設(shè)置所選文本的字

4、體顏色，在其后的文本框中直接輸入顏色的英文名（如Red、Green等）或以“#”開頭的十六進制顏色代碼（如#ff0000、00ff00）設(shè)置所選文本的顏色。設(shè)置字體樣式 w 粗體 根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對所選文本加粗。單擊按鈕即可設(shè)置“加粗”設(shè)置，再次單擊按鈕可取消“加粗”設(shè)置。w 斜體 根據(jù)在“首選參數(shù)”對話框的“常規(guī)”選項中設(shè)置的樣式參數(shù)選擇，將或標(biāo)簽應(yīng)用于選定的文本，即對所選文本進行傾斜設(shè)置。選中按鈕即可將所選的文本應(yīng)用“傾斜”。再次單擊按鈕可取消“傾斜”設(shè)置。 設(shè)置對齊方式 通過屬性面板中的“左對齊”按鈕、“居中對齊”按

5、鈕、“右對齊”按鈕和“兩端對齊”按鈕可設(shè)置文本的對齊方式。 設(shè)置標(biāo)題格式 在屬性欄的“格式”下拉列表框中可設(shè)置標(biāo)題格式，其中“段落”是應(yīng)用標(biāo)簽的默認(rèn)格式，“標(biāo)題 1”選項應(yīng)用標(biāo)簽，設(shè)置該選項可以將所選的文本設(shè)置成各種標(biāo)題。標(biāo)題號越小，字體越大。 項目列表的應(yīng)用 w 有序列表w 無序列表w 定義列表 w 為現(xiàn)有文本創(chuàng)建列表 w 創(chuàng)建嵌套列表 w 設(shè)置項目列表屬性 有序列表 有序列表又稱為編號列表，是指將具有相似特性或某種順序的文本進行有規(guī)則地排列，列表常應(yīng)用在條款或列舉等類型的文本中，用列表的方式進行羅列可使內(nèi)容更直觀。在文檔窗口中，可以用現(xiàn)有文本或新文本創(chuàng)建編號列表、項目列表及定義列表。一般列

6、表的前面有數(shù)字前導(dǎo)字符，其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。 w 編號列表： 1：將鼠標(biāo)光標(biāo)定位到要創(chuàng)建編號列表的位置。 2：單擊“屬性”面板中的“編號列表”按鈕，數(shù)字前導(dǎo)字符將出現(xiàn)在鼠標(biāo)光標(biāo)前。 3：在數(shù)字前導(dǎo)字符后輸入相應(yīng)的文本，按“Enter”鍵換行后，下一個數(shù)字前導(dǎo)字符將自動出現(xiàn)。 4：繼續(xù)輸入其他列表項的創(chuàng)建，完成整個列表的創(chuàng)建后按兩次“Enter”鍵即可。無序列表 無序列表又稱為項目列表，是一系列無順序級別關(guān)系的項目文本組成的列表，一般前面是用項目符號作為前導(dǎo)字符。 w 項目列表：w 1：將鼠標(biāo)光標(biāo)定位到要創(chuàng)建項目列表的位置。w 2：在“屬性”面板中單擊“項目列表”

7、按鈕，將出現(xiàn)項目符號前導(dǎo)字符。w 3：在前導(dǎo)字符后面輸入文本，然后按“Enter”鍵，項目符號前導(dǎo)字符將自動出現(xiàn)在新行的最前面。w 4：繼續(xù)創(chuàng)建其他列表項，完成整個列表的創(chuàng)建后按兩次“Enter”鍵即可。定義列表 定義列表不使用項目符號或數(shù)字這樣的前導(dǎo)字符，通常用在詞匯表或說明書中。 w 定義列表：w 1：將鼠標(biāo)光標(biāo)定位到要創(chuàng)建定義列表的位置，選擇“插入/HTML/文本對象/定義列表”命令。w 2：輸入文本后按“Enter”鍵，系統(tǒng)會自動換行，并在新行中進行縮進，輸入對上一行文本的解釋文本或小類后按“Enter”鍵。w 3：繼續(xù)輸入其他項目，輸入結(jié)束后按兩次“Enter”鍵即可完成整個列表的創(chuàng)

8、建。為現(xiàn)有文本創(chuàng)建列表 除了先創(chuàng)建列表項再輸入文本外，還可以先輸入文本，然后再設(shè)置列表項。 創(chuàng)建嵌套列表 嵌套列表是包含在其他列表中的列表。 w 創(chuàng)建嵌套列表 w 1：選擇要嵌套的列表項目。w 2：在屬性中，單擊“縮進”按鈕或選擇“格式”“縮進”。w 3：Dreamweaver 縮進文本并創(chuàng)建一個單獨的列表，該列表具有原始列表的 HTML 屬性。w 4：按照上面使用的同一過程，對縮進的文本應(yīng)用新的列表類型或樣式設(shè)置項目列表屬性 使用“列表屬性”對話框可以設(shè)置列表項的外觀，包括編號樣式、項目符號樣式等。方法：在屬性面板中點擊列表屬性按鈕 其中：列表類型列表類型: 指定列表屬性，根據(jù)所選的“列表類

9、型”，使用彈出菜單選擇項目、編號、目錄或菜單列表對話框中將出現(xiàn)不同的選項。樣式: 確定用于編號列表或項目列表的編號或項目符號的樣式。所有列表項目都將具有該樣式，除非為列表項目指定新樣式。開始計數(shù): 設(shè)置編號列表中第一個項目的值。標(biāo)尺和網(wǎng)格 w 標(biāo)尺 w 網(wǎng)格 標(biāo)尺 標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺，分別顯示在Dreamweaver 8文檔編輯區(qū)的上方和左側(cè)。標(biāo)尺的單位包括像素、厘米和英寸，在默認(rèn)狀態(tài)下使用像素為單位。 方法： 查看菜單 網(wǎng)格 網(wǎng)格與標(biāo)尺都是定位工具，但在網(wǎng)頁布局中使用網(wǎng)格更方便。文檔編輯區(qū)中顯示了網(wǎng)格后，就可以對網(wǎng)頁元素進行準(zhǔn)確的定位了。 方法： 查看菜單為網(wǎng)頁添加圖像 w 網(wǎng)頁圖像

10、的格式及來源w 插入圖像 w 設(shè)置圖像屬性 w 圖像高級設(shè)置 網(wǎng)頁圖像的格式及來源w GIF格式 w JPEG格式 w PNG格式 w 網(wǎng)頁圖像來源 GIF格式 GIF全稱為“Graphics Interchange Format”，意為可交換圖像格式，它是第一個支持網(wǎng)頁的圖像格式，在PC機和蘋果機上都能被正確識別。它最多支持256種顏色，可以使圖像變得容量相當(dāng)小。GIF圖像可以在網(wǎng)頁中以透明方式顯示，還可以包含動態(tài)信息，即GIF動畫。 JPEG格式 JPEG全稱為“Joint Photographic Experts Group”，意為聯(lián)合圖像專家組，它可以高效地壓縮圖片，丟失人眼不易察覺的

11、部分圖像，使文件容量在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。缺點：不支持透明和動畫效果。 PNG格式 PNG全稱為“Portable Network Graphics”，意為便攜網(wǎng)絡(luò)圖像，它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點，又具有JPEG處理精美圖像的優(yōu)勢，且可以包含圖層等信息，常常用于制作網(wǎng)頁效果圖。優(yōu)點：圖像品質(zhì)高 ，下載速度快，支持透明。缺點：不支持動畫效果。網(wǎng)頁圖像來源 網(wǎng)頁圖像的素材有很多來源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作；可以購買網(wǎng)頁素材光盤；可以從網(wǎng)絡(luò)上下載等。 插

12、入圖像 w 直接插入 w 占位符插入 w 圖像的放大顯示 直接插入 w 將鼠標(biāo)光標(biāo)定位到要插入圖像的位置，選擇插入圖像菜單命令。w 單擊插入欄的“常用”選項卡中的圖像按鈕。w 按【Ctrl+Alt+I】鍵。 占位符插入 制作網(wǎng)頁時還未選定需插入的圖像，但確定了圖像大小的時候，可以使用占位符來代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開的對話框中設(shè)置后插入即可。 方法： 選擇“插入”“圖像對象”“圖像占位符”。 在“圖像占位符”對話框中，輸入下面的屬性：“名稱” “寬度”“高度”單擊顏色框并從顏色選擇器中選擇一種顏色。圖像的放大顯示 Dreamweaver 8新增的放大鏡功能可以

13、讓用戶更方便地進行對齊圖像、選擇較小的對象以及查看較小的文本、動畫或網(wǎng)頁元素等操作。 設(shè)置圖像屬性 在網(wǎng)頁中插入圖像后可通過屬性面板對其屬性進行修改等設(shè)置。 圖像命名 圖像大小 編輯圖片 源文件設(shè)置 文本說明 圖像與文本的對齊 圖像邊距 圖像邊框 圖像命名 為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫語言（如JavaScript或VBScript）時可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。 圖像大小 在Dreamweaver 8中插入圖像后系統(tǒng)會自動將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。 編輯圖片 在網(wǎng)頁中選擇圖像之后，單擊屬性面板中的

14、按鈕，打開圖像處理軟件，對圖像進行處理。如果安裝了Fireworks，那么Fireworks將被默認(rèn)為圖像處理軟件。如果沒有安裝，用戶也可自己設(shè)置使用其他軟件中處理圖像。 源文件設(shè)置 在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側(cè)后的 按鈕，在打開的“選擇圖像源文件”對話框中重新選擇需要的圖像。 文本說明 在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說明。 圖像與文本的對齊 選取圖像后，在屬性面板的“對齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對齊方式。

15、圖像邊距 選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁面上方和左側(cè)之間的距離，也可以設(shè)置圖像與其他網(wǎng)頁元素之間的距離。 圖像邊框 選取圖像后，在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度，單位為像素，“0”表示無邊框。 鏈接 為當(dāng)前圖像指定鏈接目標(biāo)。如單擊圖像打開新浪網(wǎng)，可在文本框中輸入“http:/” 圖像高級設(shè)置鼠標(biāo)經(jīng)過圖像設(shè)置 鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時，鼠標(biāo)光標(biāo)經(jīng)過該圖像時，圖像發(fā)生變化的動態(tài)圖像。 瀏覽網(wǎng)頁時，當(dāng)鼠標(biāo)移動到原始圖像上時，會顯示另外一張圖像，鼠標(biāo)移除時，圖像范圍則恢復(fù)為原始圖像。鼠標(biāo)經(jīng)過圖像由原始圖像和鼠標(biāo)經(jīng)過圖像組成，因此，

16、創(chuàng)建鼠標(biāo)經(jīng)過圖像時必須先準(zhǔn)備兩張大小相同的圖像。 鼠標(biāo)經(jīng)過圖像設(shè)置步驟 方法：w 新建空白HTML網(wǎng)頁，將鼠標(biāo)光標(biāo)定位在要插入鼠標(biāo)經(jīng)過圖像的位置w 選擇“插入/圖像對象/鼠標(biāo)經(jīng)過圖像”命令，打開“插入鼠標(biāo)經(jīng)過圖像”對話框w 在“圖像名稱”文本框中輸入圖像名稱，單擊“原始圖像”文本框后的“瀏覽”按鈕。在打開的對話框中選擇原始圖像。確定。w 使用同樣的方法為鼠標(biāo)經(jīng)過圖像選擇圖像，再在“替換文本”文本框中輸入替換文本，在“按下時，前往的URL”文本框中輸入單擊圖像時打開的網(wǎng)頁地址。 確定。完成鼠標(biāo)經(jīng)過圖像的創(chuàng)建。上機w 岳飛 -滿江紅 本練習(xí)要求在空白文檔中輸入宋詞滿江紅，標(biāo)題“滿江紅”和作者“岳飛

17、”的編排要求每兩個字之間插入兩個空格，然后再將所有文本使用“隸書，華文行楷”為字集。最后在文檔中插入兩個鼠標(biāo)經(jīng)過圖像，要求兩個鼠標(biāo)經(jīng)過間的圖像變化效果相反。 補充：HTML文件的基本結(jié)構(gòu)HTML文件是一種純文本格式的文件，HTML文件包括HTML、頭部（head）和主體(body)三個標(biāo)記。文件基本結(jié)構(gòu)為： 網(wǎng)頁標(biāo)題 網(wǎng)頁的內(nèi)容 代表是一個HTML文件（無屬性設(shè)置）網(wǎng)頁的頭部網(wǎng)頁的標(biāo)題網(wǎng)頁內(nèi)容，HTML主要的部分以上三種標(biāo)記必須成對使用說明：HTML語言并不要求在書寫時縮進，但為了程序的易讀性，建議網(wǎng)頁設(shè)計制作者使標(biāo)記的首尾對齊內(nèi)部的內(nèi)容向右縮進幾格。例：簡單的HTML文件。 簡單的HTML文

18、件 最簡單的網(wǎng)頁 1.HTML文檔標(biāo)記2.HTML文件頭標(biāo)記3. HTML文件標(biāo)題標(biāo)記4. HTML文件主體標(biāo)記1.HTML文檔標(biāo)記文檔標(biāo)記 HTML文檔標(biāo)記的格式為： 文檔的內(nèi)容 HTML文檔的標(biāo)記。處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從開始解釋，直到遇到為止。 每個HTML文件均以開始，以結(jié)束。2.HTML文件頭標(biāo)記習(xí)慣上將HTML文檔分為文件頭和文件主體兩部分。文件主體是在WEB瀏覽器窗口的用戶區(qū)顯示的內(nèi)容，而文件頭則用來規(guī)定該文檔的標(biāo)題（瀏覽器標(biāo)題欄中的內(nèi)容）和文檔的一些屬性。HTML文件頭標(biāo)記格式： 頭部的內(nèi)容說明：HTML文件的頭部在文件標(biāo)記之后，在開始標(biāo)記間定義。其內(nèi)容可以是標(biāo)題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁信息說明。對應(yīng)于相應(yīng)的標(biāo)記，有標(biāo)題標(biāo)記等。標(biāo)記在HT