第3章 編輯網(wǎng)頁(yè)文本及圖像

第3章編輯網(wǎng)頁(yè)文本及圖像本章要點(diǎn)：網(wǎng)頁(yè)文本的編輯圖像的插入及編輯3.1編輯網(wǎng)頁(yè)文本文本是網(wǎng)頁(yè)中最基本的元素，具有信息量大、編輯方便、生成文件小、容易被瀏覽器下載等特點(diǎn)。因此，掌握好對(duì)文本的編輯，是做好網(wǎng)頁(yè)的基本要求。插入文本1、插入普通文本直接輸入法復(fù)制粘貼法導(dǎo)入Word文檔3.1編輯網(wǎng)頁(yè)文本插入文本2、插入特殊符號(hào)【插入記錄】→【HTML】→【特殊字符】3.1編輯網(wǎng)頁(yè)文本插入文本3、插入段落文本在網(wǎng)頁(yè)中，是以Enter鍵作為段落標(biāo)記的。當(dāng)在文檔窗口中輸入了一段文本，按Enter鍵后，已經(jīng)輸入的文本將轉(zhuǎn)換為段落，在光標(biāo)后再次輸入的文本作為一個(gè)新的段落。若希望段落與段落之間沒(méi)有空行，那么可以在按下Shift+Enter鍵。3.1編輯網(wǎng)頁(yè)文本插入文本4、創(chuàng)建項(xiàng)目列表以及編號(hào)列表無(wú)序列表（項(xiàng)目列表）【文本】→【列表】→【項(xiàng)目列表】3.1編輯網(wǎng)頁(yè)文本插入文本4、創(chuàng)建項(xiàng)目列表以及編號(hào)列表有序列表（編號(hào)列表）【文本】→【列表】→【編號(hào)列表】3.1編輯網(wǎng)頁(yè)文本課堂案例3-1（1）在Dreamweaver中新建HTML頁(yè)面，并保存到站點(diǎn)“MyBlog”，命名為“about.htm”3.1編輯網(wǎng)頁(yè)文本課堂案例3-1（2）設(shè)置標(biāo)題為“關(guān)于我”（3）在文檔窗口中輸入文字3.1編輯網(wǎng)頁(yè)文本課堂案例3-1（4）將光標(biāo)置于第一行文字末，并按Enter鍵。（5）選擇【插入】|【HTML】|【水平線】3.1編輯網(wǎng)頁(yè)文本課堂案例3-1（6）在Dreamweaver中繼續(xù)輸入文本（7）保存網(wǎng)頁(yè)文件3.1編輯網(wǎng)頁(yè)文本格式化文本無(wú)論制作網(wǎng)頁(yè)的目的是什么，文本都是網(wǎng)頁(yè)中不可缺少的網(wǎng)頁(yè)元素。良好的文本格式，能夠充分體現(xiàn)文檔要表述的意圖，激發(fā)讀者的閱讀興趣。在文檔中構(gòu)建豐富的字體、段落格式以及賞心悅目的文本效果，對(duì)于一個(gè)專業(yè)的網(wǎng)站來(lái)說(shuō)，是必不可少的要求之一。3.1編輯網(wǎng)頁(yè)文本格式化文本Dreamweaver是一種所見(jiàn)即所得的網(wǎng)頁(yè)制作工具，這意味著對(duì)文本格式的設(shè)置，可以直接從屏幕上看到設(shè)置結(jié)果，Dreamweaver提供了強(qiáng)大的文本格式化功能，您幾乎可以隨心所欲地對(duì)文檔進(jìn)行各種格式化操作。無(wú)論在文檔中選擇的是文本、段落還是列表，在屬性面板中都會(huì)顯示文本屬性中的各個(gè)選項(xiàng)3.1編輯網(wǎng)頁(yè)文本格式化普通文本常見(jiàn)的普通文本格式化主要包括文本顏色、字體、大小、粗體、斜體等。這些均可以在文本屬性面板中進(jìn)行設(shè)置。設(shè)置字體時(shí)用戶只需在屬性面板中字體下拉列表中選擇相應(yīng)的字體；設(shè)置文本大小時(shí)用戶只需在屬性面板大小中輸入相應(yīng)數(shù)值并在其后的單位下拉列表中選擇單位；設(shè)置字體顏色時(shí)用戶只需在屬性面板中單擊文本顏色，在彈出的顏色拾取器中選擇相應(yīng)的顏色；設(shè)置字體加粗、傾斜時(shí)只需單擊屬性面板中和

兩個(gè)按鈕即可。3.1編輯網(wǎng)頁(yè)文本格式化普通文本例如為普通文本設(shè)置字體為：黑體，大小為20px，粗體加斜體，字體顏色為紅色后的效果對(duì)比如圖所示。3.1編輯網(wǎng)頁(yè)文本格式化段落文本段落文本除了可以設(shè)置普通文本的屬性外，還可以設(shè)置排列方式、縮進(jìn)等。用戶只需單擊相應(yīng)屬性面板中的按鈕即可。常見(jiàn)的段落對(duì)齊方式主要有左對(duì)齊（）、居中對(duì)齊（）、右對(duì)齊（）以及兩端對(duì)齊（），用戶只需選擇相應(yīng)段落，再單擊相應(yīng)的對(duì)齊按鈕；段落的縮進(jìn)主要有文本凸出（）和文本縮進(jìn)（）兩種操作，用戶需要增加段落的左縮進(jìn)時(shí)，只需選擇相應(yīng)段落，再單擊文本縮進(jìn)按鈕；用戶需要減少段落的左縮進(jìn)時(shí)，只需選擇相應(yīng)段落，再單擊文本凸出按鈕。3.1編輯網(wǎng)頁(yè)文本格式化列表若要更改列表類型（將編號(hào)列表轉(zhuǎn)換為項(xiàng)目列表或?qū)㈨?xiàng)目列表轉(zhuǎn)換為編號(hào)列表），用戶只需要選擇需要更改的列表項(xiàng)目，再單擊屬性面板中的編號(hào)列表按鈕（）或項(xiàng)目列表按鈕（）。3.1編輯網(wǎng)頁(yè)文本格式化列表若要更改列表的樣式、開(kāi)始計(jì)數(shù)值時(shí)，用戶首先選擇需要更改的相應(yīng)列表項(xiàng)目，再執(zhí)行菜單“文本”→“列表”→“屬性”命令，此時(shí)系統(tǒng)彈出“列表屬性”對(duì)話框，如圖所示。用戶根據(jù)需要在該對(duì)話框中選擇相應(yīng)的選項(xiàng)即可。3.1編輯網(wǎng)頁(yè)文本課堂案例3-2（1）打開(kāi)課堂案例3-1中完成的頁(yè)面“about.htm”。（2）選擇“關(guān)于我”文字，并在【屬性】面板中設(shè)置格式為“標(biāo)題1”3.1編輯網(wǎng)頁(yè)文本課堂案例3-2（3）選擇“文章分類”文字，并在【屬性】面板中設(shè)置格式為“標(biāo)題2”3.1編輯網(wǎng)頁(yè)文本課堂案例3-2（4）按步驟（8）的方法，對(duì)文字“最近發(fā)表”設(shè)置格式為“標(biāo)題2”。（5）選擇“文章分類”下面的四段文字，并在【屬性】面板中點(diǎn)擊，將文字設(shè)置為項(xiàng)目列表3.1編輯網(wǎng)頁(yè)文本課堂案例3-2（6）按步驟（5）的方法對(duì)“最近發(fā)表”下面的文字設(shè)置項(xiàng)目列表格式。（7）保存網(wǎng)頁(yè)文件。3.2編輯網(wǎng)頁(yè)圖像圖像格式PNG（PortableNetworkGraphic）PNG格式是WEB圖像中最通用的格式。它是一種無(wú)損壓縮格式，但是如果沒(méi)有插件支持，有的瀏覽器可能不支持這種格式。PNG格式最多可以支持32位顏色，但是不支持動(dòng)畫(huà)圖。GIF（GraphicsInterchangeFormat）GIF是Web上最常用的圖像格式，它可以用來(lái)存儲(chǔ)各種圖像文件。特別適用于存儲(chǔ)線條、圖標(biāo)和電腦生成的圖像、卡通和其它有大色塊的圖像。GIF文件非常小，它形成的是一種壓縮的8位圖像文件，所以最多只支持256種不同的顏色。Gif支持動(dòng)態(tài)圖、透明圖和交織圖3.2編輯網(wǎng)頁(yè)圖像圖像格式BMP（WindowsBitmap）BMP格式使用的是索引色彩，它的圖像具有極其豐富的色彩，可以使用16M色彩渲染圖像。此格式一般用在多媒體演示和視頻輸出等情況下。TIFF（TagInageFileFormat）TIFF格式是對(duì)色彩通道圖像來(lái)說(shuō)最有用的格式，支持24個(gè)通道，能存儲(chǔ)多于4個(gè)通道。TIFF格式的結(jié)果要比其它格式更大、更復(fù)雜，它非常適合于印刷和輸出。3.2編輯網(wǎng)頁(yè)圖像圖像格式JPEG（JointPhotographicExpertsGroup）JPEG是Web上僅次于GIF的常用圖像格式。JPEG是一種壓縮得非常緊湊的格式，專門(mén)用于不含大色塊的圖像。JPEG的圖像有一定的失真度，但是在正常的損失下肉眼分辨不出JPEG和GIF圖像的差別。，而JPEG文件只有GIF文件的1/4大小。JPEG對(duì)圖標(biāo)之類的含大色塊的圖像不很有效，不支持透明圖和動(dòng)態(tài)圖。在IE7.0中.寫(xiě)HTML代碼時(shí),若想插入JPEG格式的圖片,后綴名必須是JPG格式,否則圖片根本無(wú)法顯示.TGA（Targa）TGA格式與TIFF格式相同，都可以用來(lái)處理高質(zhì)量的色彩通道圖形。3.2編輯網(wǎng)頁(yè)圖像插入圖像1、插入背景圖像常用的背景圖像一般可以應(yīng)用在網(wǎng)頁(yè)背景和表格（行、單元）背景上，屬于Dreamweaver中的一種頁(yè)面屬性。在背景圖像上用戶可以輸入文本、可以插入圖像等操作，但不影響背景圖像本身的顯示。插入背景圖像的方法是單擊屬性面板中的頁(yè)面屬性按鈕（），此時(shí)系統(tǒng)彈出頁(yè)面屬性對(duì)話框，如圖所示3.2編輯網(wǎng)頁(yè)圖像插入圖像插入背景圖像3.2編輯網(wǎng)頁(yè)圖像插入普通圖像插入普通圖像是拼合網(wǎng)頁(yè)常用的方式之一，當(dāng)插入普通圖像時(shí)，在該圖像上不能插入文本、圖像等其他元素。插入普通圖像的方法是首先將光標(biāo)定位到需要插入圖像的位置，再執(zhí)行菜單【插入記錄】→【圖像】命令，此時(shí)系統(tǒng)彈出選擇圖像源文件對(duì)話框，用戶根據(jù)需要選擇需要插入的圖像即可。3.2編輯網(wǎng)頁(yè)圖像插入鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像是指當(dāng)鼠標(biāo)指針經(jīng)過(guò)一幅圖像時(shí)，圖像的顯示會(huì)變?yōu)榱硪环鶊D像。鼠標(biāo)經(jīng)過(guò)圖像實(shí)際上是由兩幅圖像組成，初始圖像（頁(yè)面首次裝載時(shí)顯示的圖像）和替換圖像（當(dāng)鼠標(biāo)指針經(jīng)過(guò)時(shí)顯示的圖像）。用于鼠標(biāo)經(jīng)過(guò)圖像的兩幅圖像大小必須相同。如果圖像的大小不同，Dreamweaver會(huì)自動(dòng)調(diào)整第二幅圖像的大小，使之與第一幅圖像匹配。3.2編輯網(wǎng)頁(yè)圖像插入鼠標(biāo)經(jīng)過(guò)圖像插入鼠標(biāo)經(jīng)過(guò)圖像的方法是首先將光標(biāo)定位到需要插入鼠標(biāo)經(jīng)過(guò)圖像的位置，再執(zhí)行菜單“插入記錄”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過(guò)圖像”命令，此時(shí)彈出插入鼠標(biāo)經(jīng)過(guò)圖像對(duì)話框，如圖所示。分別單擊原始圖像后的瀏覽按鈕和鼠標(biāo)經(jīng)過(guò)圖像后的瀏覽按鈕選擇不同的原始圖像和鼠標(biāo)經(jīng)過(guò)圖像即可，若單擊圖像時(shí)需要實(shí)現(xiàn)超級(jí)鏈接，則單擊按下時(shí)，前往的URL后的瀏覽按鈕選擇超級(jí)鏈接的目的地或者直接在輸入框中輸入超級(jí)鏈接的目的地3.2編輯網(wǎng)頁(yè)圖像插入鼠標(biāo)經(jīng)過(guò)圖像3.2編輯網(wǎng)頁(yè)圖像插入分層圖像通常情況下插入網(wǎng)頁(yè)中的圖像格式為GIF或者JPEG，但是由于DreamweaverCS3包括了與PhotoshopCS3相同的增強(qiáng)的集成功能，這樣在Dreamweaver中就可以插入具有多個(gè)圖層的圖像。與PhotoshopCS3相結(jié)合，還可以根據(jù)不同的情況插入選區(qū)圖像或者切片圖像。插入PSD格式圖像插入PSD格式圖像的方法與插入普通圖像的方法相同，但選擇圖像時(shí)選擇PSD格式圖像即可。在選擇了相應(yīng)的圖像后，系統(tǒng)彈出圖像預(yù)覽對(duì)話框，用于預(yù)覽圖像效果以及設(shè)置圖像將要顯示在網(wǎng)頁(yè)中的格式。如圖所示。3.2編輯網(wǎng)頁(yè)圖像插入分層圖像插入PSD格式圖像3.2編輯網(wǎng)頁(yè)圖像插入分層圖像插入一層圖像由于PSD圖像為一個(gè)多圖層圖像，所以還可以在PhotoshopCS3中選擇并復(fù)制一個(gè)圖層，然后粘貼到DreamweaverCS3中。插入一層圖像的方法是首先啟動(dòng)PhotoshopCS3，選擇其中需要的一層圖像，執(zhí)行全選，再執(zhí)行復(fù)制，進(jìn)入DreamweaverCS3，將光標(biāo)定位到需要插入該圖像的位置，執(zhí)行粘貼操作，此時(shí)彈出圖像預(yù)覽對(duì)話框，用戶根據(jù)需要設(shè)置好格式、大小等后，單擊確定按鈕即可。3.2編輯網(wǎng)頁(yè)圖像插入分層圖像插入選區(qū)圖像除了復(fù)制單個(gè)圖層的圖像到網(wǎng)頁(yè)中以外，還可以復(fù)制整幅圖像中的一部分到網(wǎng)頁(yè)中。插入選區(qū)圖像的方法是首先啟動(dòng)PhotoshopCS3，利用PhotoshopCS3中的選取工具選擇其中需要的部分圖像，執(zhí)行復(fù)制操作，進(jìn)入DreamweaverCS3，將光標(biāo)定位到需要插入該圖像的位置，執(zhí)行粘貼操作，此時(shí)彈出圖像預(yù)覽對(duì)話框，用戶根據(jù)需要設(shè)置好格式、大小等后，單擊確定按鈕即可。3.2編輯網(wǎng)頁(yè)圖像插入分層圖像插入切片圖像在DreamweaverCS3中還可以插入利用PhotoshopCS3切片的切片圖像。插入切片圖像的方法是首先啟動(dòng)PhotoshopCS3，利用PhotoshopCS3中的切片工具（）對(duì)圖像進(jìn)行切片，再使用切片選擇工具（）選擇需要的切片圖像，執(zhí)行復(fù)制操作，進(jìn)入DreamweaverCS3，將光標(biāo)定位到需要插入該圖像的位置，執(zhí)行粘貼操作，此時(shí)彈出圖像預(yù)覽對(duì)話框，用戶根據(jù)需要設(shè)置好格式、大小等后，單擊確定按鈕即可。3.2編輯網(wǎng)頁(yè)圖像課堂案例3-3（1）將在“關(guān)于我”頁(yè)面中要用到的圖片拷貝到站點(diǎn)的“images”文件夾下3.2編輯網(wǎng)頁(yè)圖像課堂案例3-3（2）在Dreamweaver中，打開(kāi)課堂案例3-2中完成的頁(yè)面about.htm。（3）將光標(biāo)置于文檔開(kāi)始，選擇【插入】|【圖像】，在彈出的【選擇圖像源文件】對(duì)話框中選擇header.jpg圖像3.2編輯網(wǎng)頁(yè)圖像課堂案例3-33.2編輯網(wǎng)頁(yè)圖像課堂案例3-3（4）在【選擇圖像源文件】對(duì)話框中，點(diǎn)擊，在彈出的【圖像標(biāo)簽輔助功能屬性】對(duì)話框中進(jìn)行設(shè)置3.2編輯網(wǎng)頁(yè)圖像課堂案例3-3（5）在【圖像標(biāo)簽輔助功能屬性】對(duì)話框中，點(diǎn)擊。網(wǎng)頁(yè)的頭部插入了相應(yīng)圖片3.2編輯網(wǎng)頁(yè)圖像課堂案例3-3（6）仿照步驟（3）至步驟（5）的方法，在頁(yè)面其他位置插入圖像，并保存網(wǎng)頁(yè)，在瀏覽器中預(yù)覽3.2編輯網(wǎng)頁(yè)圖像課堂案例3-33.2編輯網(wǎng)頁(yè)圖像設(shè)置圖像屬性插入圖像后，可以通過(guò)【屬性】面板對(duì)圖像的各屬性進(jìn)行設(shè)置。選擇相應(yīng)的圖像時(shí)，在屬性面板中會(huì)顯示出圖像的相關(guān)屬性，如圖所示。在該面板中可以設(shè)置圖像名稱、圖像大小、圖像超級(jí)鏈接、邊框、對(duì)齊方式等屬性。3.2編輯網(wǎng)頁(yè)圖像1、設(shè)置圖像大小在網(wǎng)頁(yè)中圖像大小主要是指圖像的寬和高，用戶選擇需要設(shè)置大小的圖像后，在屬性面板的寬和高后的輸入框中輸入需要的寬和高數(shù)值即可改變圖像的大小。2、設(shè)置圖像對(duì)齊方式當(dāng)在文本中插入圖像時(shí)，需要設(shè)置文本與圖像之間的對(duì)齊方式，而這種對(duì)齊方式主要有基線、頂端、居中、底部、文本上方、絕對(duì)居中、絕對(duì)底部、左對(duì)齊、右對(duì)齊以及默認(rèn)值幾種。用戶選擇需要設(shè)置對(duì)齊方式的圖像后，在屬性面板的對(duì)齊下拉列表中選擇需要的對(duì)齊方式即可。3.2編輯網(wǎng)頁(yè)圖像3、設(shè)置圖像位置當(dāng)圖像與文本混排時(shí)，除了設(shè)置圖像與文本之間的對(duì)齊方式外，還需要設(shè)置圖像與文本之間的間隔距離，此時(shí)只需要設(shè)置圖像的垂直邊距和水平邊距。用戶選擇需要設(shè)置位置的圖像后，在屬性面板的垂直邊距和水