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

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

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