3章用文本和圖像充實(shí)網(wǎng)頁(yè)-中文版Dreamweaver-CS6網(wǎng)頁(yè)制作課件

·清華大學(xué)出版社·第3章用文本和圖像充實(shí)網(wǎng)頁(yè)中文版DreamweaverCS6從入門到精通·清華大學(xué)出版社·第3章中文版DreamweaverC本章導(dǎo)讀從入門到精通清華大學(xué)出版社2Contents1添加文本2設(shè)置文本格式3創(chuàng)建列表4為網(wǎng)頁(yè)添加圖像5圖像的設(shè)置和應(yīng)用本章導(dǎo)讀從入門到精通清華大學(xué)出版社2Contents1添3.1添加文本Concept3.1.1添加普通文本3.1.2添加空格3.1.3添加水平線3.1.4添加日期3.1.5添加特殊符號(hào)3.1.6文本換行與分段3.1添加文本Concept3.1.1添加普通文本33.1.1添加普通文本從入門到精通清華大學(xué)出版社4

直接輸入文本1從其他文檔中復(fù)制文本2導(dǎo)入文本33.1.1添加普通文本從入門到精通清華大學(xué)出版社41．直接輸入文本從入門到精通清華大學(xué)出版社5在網(wǎng)頁(yè)文檔中，將鼠標(biāo)光標(biāo)定位在需添加文本的位置，切換到所需的輸入法即可進(jìn)行文本的輸入。

1．直接輸入文本從入門到精通清華大學(xué)出版社5在網(wǎng)頁(yè)文檔中，將在其他包含文本的文檔中選中所需復(fù)制的文本，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制”命令，然后將鼠標(biāo)光標(biāo)定位到網(wǎng)頁(yè)中需插入文本的位置，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令即可完成文本的插入。2．從其他文檔中復(fù)制文本從入門到精通清華大學(xué)出版社6在其他包含文本的文檔中選中所需復(fù)制的文本，單擊鼠標(biāo)右鍵，在彈除了使用復(fù)制文本的方法為網(wǎng)頁(yè)快速添加文本，Dreamweaver還可以直接將Word、Excel中的內(nèi)容導(dǎo)入到網(wǎng)頁(yè)中。3．導(dǎo)入文本從入門到精通清華大學(xué)出版社7

除了使用復(fù)制文本的方法為網(wǎng)頁(yè)快速添加文本，Dreamweav在Word等文字編輯軟件中若要添加空格只需按空格鍵即可，但是在Dreamweaver中無(wú)論按多少次空格鍵都只會(huì)出現(xiàn)一個(gè)空格，這是因?yàn)镈reamweaver中的文檔格式都是以HTML的形式存在，而HTML文檔只允許字符之間包含一個(gè)空格。要在網(wǎng)頁(yè)文檔中添加連續(xù)的空格，可以采用以下幾種方式：選擇【窗口】/【插入】命令打開“插入”面板，在“常用”下拉列表中選擇“文本”選項(xiàng)切換到“文本”插入欄，在插入列表中單擊“已編排格式”按鈕，然后在文檔中連續(xù)按空格鍵即可。3.1.2添加空格從入門到精通清華大學(xué)出版社8在Word等文字編輯軟件中若要添加空格只需按空格鍵即可，但是水平線對(duì)于信息的組織很有用。在頁(yè)面中，可以使用一條或多條水平線以可視方式分隔文本和對(duì)象，使段落區(qū)分更明顯，讓網(wǎng)頁(yè)更具層次感。3.1.3添加水平線從入門到精通清華大學(xué)出版社9水平線對(duì)于信息的組織很有用。在頁(yè)面中，可以使用一條或多條水平Dreamweaver提供了一個(gè)方便的日期對(duì)象，該對(duì)象可以以任何格式插入當(dāng)前的日期，并可在每次保存文件時(shí)都自動(dòng)更新該日期。3.1.4添加日期從入門到精通清華大學(xué)出版社10

Dreamweaver提供了一個(gè)方便的日期對(duì)象，該對(duì)象可以以在Dreamweaver中，可以為文檔添加多種特殊符號(hào)，如版權(quán)符號(hào)

、注冊(cè)商標(biāo)符號(hào)

等。3.1.5添加特殊符號(hào)從入門到精通清華大學(xué)出版社11

在Dreamweaver中，可以為文檔添加多種特殊符號(hào)，如版在Dreamweaver中輸入文本時(shí)不會(huì)自動(dòng)換行，當(dāng)在瀏覽器中預(yù)覽時(shí)，文本的行數(shù)和每行的字?jǐn)?shù)會(huì)隨著瀏覽器大小改變而改變，如果要換行，需按“Shift+Enter”鍵進(jìn)行手動(dòng)換行，如果要分段，則直接按“Enter”鍵。3.1.6文本換行與分段從入門到精通清華大學(xué)出版社12在Dreamweaver中輸入文本時(shí)不會(huì)自動(dòng)換行，當(dāng)在瀏覽器從入門到精通清華大學(xué)出版社3.2設(shè)置文本格式Text3.2.1設(shè)置文本基本格式TextText3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社3.2設(shè)置文本格式Text3.3.2.1設(shè)置文本基本格式從入門到精通清華大學(xué)出版社14

編輯字體列表1設(shè)置文本字體格式23.2.1設(shè)置文本基本格式從入門到精通清華大學(xué)出版社14不同的電腦中所安裝的字體可能不同，所以為了盡可能讓大多數(shù)電腦中顯示的網(wǎng)頁(yè)外觀保持一致，網(wǎng)頁(yè)中的文本通常都采用最常用的字體，如中文采用“宋體”、“黑體”，英文采用“Arial”等。1．編輯字體列表從入門到精通清華大學(xué)出版社15

不同的電腦中所安裝的字體可能不同，所以為了盡可能讓大多數(shù)電腦要設(shè)置文本的字體和大小，可選中要設(shè)置字體的文本，文本將以反白形式顯示，在“屬性”面板中可進(jìn)行字體、大小、顏色、對(duì)齊方式以及粗體或斜體設(shè)置。2．設(shè)置文本字體格式從入門到精通清華大學(xué)出版社16

要設(shè)置文本的字體和大小，可選中要設(shè)置字體的文本，文本將以反白3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社17

設(shè)置段落標(biāo)題123設(shè)置段落對(duì)齊設(shè)置段落縮進(jìn)3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社17利用“屬性”面板“格式”下拉列表框中的選項(xiàng)，可以快速地將段落文本設(shè)置為一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題等標(biāo)題樣式，其中標(biāo)題號(hào)越小，字體越大。1．設(shè)置段落標(biāo)題從入門到精通清華大學(xué)出版社18

利用“屬性”面板“格式”下拉列表框中的選項(xiàng)，可以快速地將段落段落文本的對(duì)齊在網(wǎng)頁(yè)布局中起著十分重要的作用，Dreamweaver提供了左對(duì)齊、居中對(duì)齊、右對(duì)齊和兩端對(duì)齊4種對(duì)齊方式。2．設(shè)置段落對(duì)齊從入門到精通清華大學(xué)出版社19

段落文本的對(duì)齊在網(wǎng)頁(yè)布局中起著十分重要的作用，Dreamwe設(shè)置段落縮進(jìn)可以將整個(gè)段落文本進(jìn)行凸出或縮進(jìn)顯示。3．設(shè)置段落縮進(jìn)從入門到精通清華大學(xué)出版社20

設(shè)置段落縮進(jìn)可以將整個(gè)段落文本進(jìn)行凸出或縮進(jìn)顯示。3．設(shè)置從入門到精通清華大學(xué)出版社3.3創(chuàng)建列表編號(hào)列表3.3.13.3.2項(xiàng)目列表3.3.3定義列表3.3.4嵌套列表的創(chuàng)建從入門到精通清華大學(xué)出版社3.3創(chuàng)建列表編號(hào)列表3.3.3.3.1編號(hào)列表從入門到精通清華大學(xué)出版社22

創(chuàng)建編號(hào)列表可以使文本條理清晰，讓人一目了然。編號(hào)列表前面通常有數(shù)字前導(dǎo)字符，可以是英文字母、阿拉伯?dāng)?shù)字或羅馬數(shù)字等符號(hào)。

3.3.1編號(hào)列表從入門到精通清華大學(xué)出版社22項(xiàng)目列表可以對(duì)一些并列的，沒(méi)有先后順序的項(xiàng)目進(jìn)行格式設(shè)置，其前面一般用項(xiàng)目符號(hào)作為前導(dǎo)字符。3.3.2項(xiàng)目列表從入門到精通

清華大學(xué)出版社23

項(xiàng)目列表可以對(duì)一些并列的，沒(méi)有先后順序的項(xiàng)目進(jìn)行格式設(shè)置，其定義列表一般用在詞匯表或說(shuō)明書中，沒(méi)有項(xiàng)目符號(hào)或數(shù)字等前導(dǎo)字符。3.3.3定義列表從入門到精通清華大學(xué)出版社24

定義列表一般用在詞匯表或說(shuō)明書中，沒(méi)有項(xiàng)目符號(hào)或數(shù)字等前導(dǎo)字列表可以進(jìn)行嵌套，即在其他列表中再創(chuàng)建列表，比如可以在編號(hào)列表中嵌套項(xiàng)目列表，也可以在項(xiàng)目列表中嵌套編號(hào)列表。3.3.4嵌套列表的創(chuàng)建從入門到精通清華大學(xué)出版社25列表可以進(jìn)行嵌套，即在其他列表中再創(chuàng)建列表，比如可以在編號(hào)列從入門到精通清華大學(xué)出版社3.4為網(wǎng)頁(yè)添加圖像3.4.1網(wǎng)頁(yè)中支持的圖像格式3.4.2直接插入圖像3.4.3用占位符插入圖像從入門到精通清華大學(xué)出版社3.4為網(wǎng)頁(yè)添加圖像3.4.13.4.1網(wǎng)頁(yè)中支持的圖像格式從入門到精通清華大學(xué)出版社27

網(wǎng)頁(yè)圖像對(duì)圖像的格式有一定要求，目前網(wǎng)頁(yè)中通常使用的圖像格式為GIF、JPG和PNG這3種，各種圖像格式的特點(diǎn)如下：GIF：圖像交換格式。GIF圖像是第一個(gè)在網(wǎng)頁(yè)中應(yīng)用的圖像格式，通常用作站點(diǎn)Logo、廣告條Banner及網(wǎng)頁(yè)背景圖像等。其優(yōu)點(diǎn)是它可以使圖像文件變得相當(dāng)小，也可以在網(wǎng)頁(yè)中以透明方式顯示，并可以包含動(dòng)態(tài)信息。JPG：聯(lián)合照片專家組（JoinPhotographGraphics），也稱為JPEG。這種格式的圖像可以高效地壓縮，圖像文件變小的同時(shí)基本不失真，因?yàn)槠鋪G失的內(nèi)容是人眼不易察覺(jué)的部分，因此常用來(lái)顯示顏色豐富的精美圖像，如照片等。PNG：便攜網(wǎng)絡(luò)圖像（PortableNetworkGraphics），既有GIF能透明顯示的特點(diǎn)，又具有JPEG處理精美圖像的優(yōu)勢(shì)，常常用于制作網(wǎng)頁(yè)效果圖。

3.4.1網(wǎng)頁(yè)中支持的圖像格式從入門到精通清華大學(xué)出版社3.4.2直接插入圖像從入門到精通清華大學(xué)出版社28在網(wǎng)頁(yè)中插入圖像可以使網(wǎng)頁(yè)更生動(dòng)，表達(dá)更直觀。網(wǎng)頁(yè)中的圖像并不是直接粘貼在文檔中的，它是以一種文件鏈接的方式插入的，所以網(wǎng)頁(yè)中顯示的是保存在鏈接文件夾中的圖片文件。

3.4.2直接插入圖像從入門到精通清華大學(xué)出版社28在網(wǎng)

在網(wǎng)頁(yè)制作過(guò)程中若需要插入的圖像未制作完成，如客戶暫時(shí)未提供其Logo，則可以使用占位符的方式插入圖像。3.4.3用占位符插入圖像從入門到精通清華大學(xué)出版社29

在網(wǎng)頁(yè)制作過(guò)程中若需要插入的圖像未制作完成，如客戶暫時(shí)未提從入門到精通清華大學(xué)出版社3.5圖像的設(shè)置和應(yīng)用設(shè)置圖像屬性創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像3.5.13.5.2從入門到精通清華大學(xué)出版社3.5圖像的設(shè)置和應(yīng)用設(shè)置圖像在Dreamweaver中選中網(wǎng)頁(yè)文檔中的圖像后，在其“屬性”面板即可對(duì)圖像的屬性進(jìn)行設(shè)置，如設(shè)置圖像的大小、對(duì)齊方式等。3.5.1設(shè)置圖像屬性從入門到精通清華大學(xué)出版社31

出現(xiàn)陰影確定裁切范圍裁切后的圖像在Dreamweaver中選中網(wǎng)頁(yè)文檔中的圖像后，在其“屬要通過(guò)DreamweaverCS6向Internet服務(wù)器上傳并發(fā)布站點(diǎn)，需要先進(jìn)行站點(diǎn)的遠(yuǎn)程信息配置。3.5.2創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像從入門到精通清華大學(xué)出版社32要通過(guò)DreamweaverCS6向Internet服務(wù)器從入門到精通清華大學(xué)出版社333.6基礎(chǔ)實(shí)例3.6.1創(chuàng)建軟件下載列表3.6.2制作導(dǎo)航條頁(yè)面基礎(chǔ)實(shí)例從入門到精通清華大學(xué)出版社333.6基礎(chǔ)實(shí)例3.6.1本例將制作一個(gè)軟件下載列表的網(wǎng)頁(yè)，通過(guò)輸入文本、設(shè)置文本格式、創(chuàng)建列表和嵌套列表等方式，來(lái)達(dá)到創(chuàng)建軟件下載列表的目的，并鞏固本章網(wǎng)頁(yè)文本方面的知識(shí)。3.6.1創(chuàng)建軟件下載列表從入門到精通清華大學(xué)出版社34本例將制作一個(gè)軟件下載列表的網(wǎng)頁(yè)，通過(guò)輸入文本、設(shè)置文本格式本例制作的軟件下載列表，主要是從文本方面著手，由于是下載列表，所以少不了要添加多個(gè)下載列表和軟件項(xiàng)目，這些可以通過(guò)添加列表的方式來(lái)解決，并且由于是多個(gè)類型，所以還需要添加多個(gè)類型的列表，因此使用嵌套列表的方法最為恰當(dāng)。另外還需要通過(guò)不同的字體格式來(lái)區(qū)分類型與項(xiàng)目文本。而既然是下載列表，一般需要添加超級(jí)鏈接，即單擊一個(gè)列表項(xiàng)目后跳轉(zhuǎn)到相應(yīng)的頁(yè)面，但是由于本章主要是介紹文本的添加和設(shè)置，所以關(guān)于超級(jí)鏈接的添加，將在后面的章節(jié)專門講解。1．行業(yè)分析從入門到精通清華大學(xué)出版社35本例制作的軟件下載列表，主要是從文本方面著手，由于是下載列表2．操作思路從入門到精通清華大學(xué)出版社36輸入標(biāo)題文本設(shè)置字體格式添加項(xiàng)目列表操作思路1234嵌套編號(hào)列表2．操作思路從入門到精通清華大學(xué)出版社36輸入標(biāo)題文本設(shè)置字本例將利用制作好的一組圖片，通過(guò)圖像的各種方式，來(lái)制作一個(gè)網(wǎng)頁(yè)導(dǎo)航頁(yè)面。3.6.2制作導(dǎo)航條頁(yè)面從入門到精通清華大學(xué)出版社37本例將利用制作好的一組圖片，通過(guò)圖像的各種方式，來(lái)制作一個(gè)網(wǎng)導(dǎo)航條是很多網(wǎng)站都需要的一個(gè)網(wǎng)頁(yè)元素，在一個(gè)網(wǎng)站中，通過(guò)導(dǎo)航條可以快速瀏覽站點(diǎn)中的主要頁(yè)面，所以不管是在首頁(yè)，還是在其他主題頁(yè)面中，都需要添加導(dǎo)航條來(lái)方便瀏覽者瀏覽。導(dǎo)航條可以是純文字，也可以是圖片或Flash按鈕等，一般為了美觀，會(huì)使用自己設(shè)計(jì)的圖片作為導(dǎo)航條元件。以前版本的Dreamweaver有專門的插入導(dǎo)航條功能，其實(shí)該功能與插入鼠標(biāo)經(jīng)過(guò)圖像非常類似，所以在DreamweaverCS6中將該功能取消了。但是要實(shí)現(xiàn)利用圖片制作導(dǎo)航條的功能，只需制作好一組導(dǎo)航圖片，然后通過(guò)插入鼠標(biāo)經(jīng)過(guò)圖像的方法來(lái)實(shí)現(xiàn)導(dǎo)航功能。1．行業(yè)分析從入門到精通清華大學(xué)出版社38導(dǎo)航條是很多網(wǎng)站都需要的一個(gè)網(wǎng)頁(yè)元素，在一個(gè)網(wǎng)站中，通過(guò)導(dǎo)航2．操作思路從入門到精通清華大學(xué)出版社39插入導(dǎo)航條圖像

插入其他圖像設(shè)置圖像屬性操作思路12342．操作思路從入門到精通清華大學(xué)出版社39插入導(dǎo)航條圖像

插從入門到精通清華大學(xué)出版社403.7基礎(chǔ)練習(xí)3.7.1為時(shí)尚網(wǎng)頁(yè)添加和設(shè)置文本3.7.2制作動(dòng)物網(wǎng)頁(yè)基礎(chǔ)練習(xí)從入門到精通清華大學(xué)出版社403.7基礎(chǔ)練習(xí)3.7.13.7.1為時(shí)尚網(wǎng)頁(yè)添加和設(shè)置文本從入門到精通清華大學(xué)出版社41打開素材文檔并輸入相關(guān)文本設(shè)置字體格式和顏色添加嵌套列表3.7.1為時(shí)尚網(wǎng)頁(yè)添加和設(shè)置文本從入門到精通清華大學(xué)出3.7.2制作動(dòng)物網(wǎng)頁(yè)從入門到精通清華大學(xué)出版社42打開素材文件添加頂部單元格背景圖像添加公雞圖像及馬圖像添加“雞”字圖像和“馬”字圖像并設(shè)置屬性3.7.2制作動(dòng)物網(wǎng)頁(yè)從入門到精通清華大學(xué)出版社42打開從入門到精通清華大學(xué)出版社433.10知識(shí)問(wèn)答問(wèn)：網(wǎng)頁(yè)的字體設(shè)置有沒(méi)有固定的標(biāo)準(zhǔn)呢？問(wèn)：在網(wǎng)頁(yè)中插入圖像，必須插入站點(diǎn)文件夾中的圖像嗎？問(wèn)：在使用網(wǎng)頁(yè)圖像時(shí)，有什么講究或需注意的地方？問(wèn)：制作網(wǎng)頁(yè)時(shí)網(wǎng)頁(yè)圖像的選擇一直是最令我頭疼的事，關(guān)于網(wǎng)頁(yè)圖像的準(zhǔn)備和選擇有沒(méi)有好的方法？從入門到精通清華大學(xué)出版社433.10知識(shí)問(wèn)答問(wèn)：網(wǎng)頁(yè)的從入門到精通清華大學(xué)出版社知識(shí)關(guān)聯(lián)：網(wǎng)頁(yè)圖像的一些技巧快速插入網(wǎng)絡(luò)圖像：使用網(wǎng)絡(luò)圖像時(shí)，需要將其URL地址復(fù)制到Dreamweaver圖像“源文件”文本框中。這里介紹一種更簡(jiǎn)便的方法，在瀏覽器中找到要引用的網(wǎng)絡(luò)圖像文件，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制”命令，然后在Dreamweaver中目標(biāo)位置定位插入點(diǎn)，并單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令，即可快速插入網(wǎng)絡(luò)圖像。選擇插入網(wǎng)頁(yè)的圖像格式：在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，在jpg、gif、png等格式中，到底選擇哪種格式為宜呢？其實(shí)，這幾種格式各有特點(diǎn)，都有不可替代的作用。對(duì)于照片等色彩豐富、色彩過(guò)渡較多的圖片，使用jpg格式可以在質(zhì)量與圖像存儲(chǔ)大小之間取得平衡；對(duì)于按鈕、網(wǎng)頁(yè)元素背景（如導(dǎo)航欄背景）等較為簡(jiǎn)單的圖像，使用gif格式圖像更合適一些，同時(shí)gif格式還支持幀動(dòng)畫，這是其他兩種格式無(wú)法做到的；對(duì)于需要背景透明的圖像則使用png格式是最理想的選擇，不過(guò)要注意的是部分瀏覽器并不支持png格式。從入門到精通清華大學(xué)出版社知識(shí)關(guān)聯(lián)：網(wǎng)頁(yè)圖像的一些技巧快速插·清華大學(xué)出版社·第3章用文本和圖像充實(shí)網(wǎng)頁(yè)中文版DreamweaverCS6從入門到精通·清華大學(xué)出版社·第3章中文版DreamweaverC本章導(dǎo)讀從入門到精通清華大學(xué)出版社46Contents1添加文本2設(shè)置文本格式3創(chuàng)建列表4為網(wǎng)頁(yè)添加圖像5圖像的設(shè)置和應(yīng)用本章導(dǎo)讀從入門到精通清華大學(xué)出版社2Contents1添3.1添加文本Concept3.1.1添加普通文本3.1.2添加空格3.1.3添加水平線3.1.4添加日期3.1.5添加特殊符號(hào)3.1.6文本換行與分段3.1添加文本Concept3.1.1添加普通文本33.1.1添加普通文本從入門到精通清華大學(xué)出版社48

直接輸入文本1從其他文檔中復(fù)制文本2導(dǎo)入文本33.1.1添加普通文本從入門到精通清華大學(xué)出版社41．直接輸入文本從入門到精通清華大學(xué)出版社49在網(wǎng)頁(yè)文檔中，將鼠標(biāo)光標(biāo)定位在需添加文本的位置，切換到所需的輸入法即可進(jìn)行文本的輸入。

1．直接輸入文本從入門到精通清華大學(xué)出版社5在網(wǎng)頁(yè)文檔中，將在其他包含文本的文檔中選中所需復(fù)制的文本，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制”命令，然后將鼠標(biāo)光標(biāo)定位到網(wǎng)頁(yè)中需插入文本的位置，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令即可完成文本的插入。2．從其他文檔中復(fù)制文本從入門到精通清華大學(xué)出版社50在其他包含文本的文檔中選中所需復(fù)制的文本，單擊鼠標(biāo)右鍵，在彈除了使用復(fù)制文本的方法為網(wǎng)頁(yè)快速添加文本，Dreamweaver還可以直接將Word、Excel中的內(nèi)容導(dǎo)入到網(wǎng)頁(yè)中。3．導(dǎo)入文本從入門到精通清華大學(xué)出版社51

除了使用復(fù)制文本的方法為網(wǎng)頁(yè)快速添加文本，Dreamweav在Word等文字編輯軟件中若要添加空格只需按空格鍵即可，但是在Dreamweaver中無(wú)論按多少次空格鍵都只會(huì)出現(xiàn)一個(gè)空格，這是因?yàn)镈reamweaver中的文檔格式都是以HTML的形式存在，而HTML文檔只允許字符之間包含一個(gè)空格。要在網(wǎng)頁(yè)文檔中添加連續(xù)的空格，可以采用以下幾種方式：選擇【窗口】/【插入】命令打開“插入”面板，在“常用”下拉列表中選擇“文本”選項(xiàng)切換到“文本”插入欄，在插入列表中單擊“已編排格式”按鈕，然后在文檔中連續(xù)按空格鍵即可。3.1.2添加空格從入門到精通清華大學(xué)出版社52在Word等文字編輯軟件中若要添加空格只需按空格鍵即可，但是水平線對(duì)于信息的組織很有用。在頁(yè)面中，可以使用一條或多條水平線以可視方式分隔文本和對(duì)象，使段落區(qū)分更明顯，讓網(wǎng)頁(yè)更具層次感。3.1.3添加水平線從入門到精通清華大學(xué)出版社53水平線對(duì)于信息的組織很有用。在頁(yè)面中，可以使用一條或多條水平Dreamweaver提供了一個(gè)方便的日期對(duì)象，該對(duì)象可以以任何格式插入當(dāng)前的日期，并可在每次保存文件時(shí)都自動(dòng)更新該日期。3.1.4添加日期從入門到精通清華大學(xué)出版社54

Dreamweaver提供了一個(gè)方便的日期對(duì)象，該對(duì)象可以以在Dreamweaver中，可以為文檔添加多種特殊符號(hào)，如版權(quán)符號(hào)

、注冊(cè)商標(biāo)符號(hào)

等。3.1.5添加特殊符號(hào)從入門到精通清華大學(xué)出版社55

在Dreamweaver中，可以為文檔添加多種特殊符號(hào)，如版在Dreamweaver中輸入文本時(shí)不會(huì)自動(dòng)換行，當(dāng)在瀏覽器中預(yù)覽時(shí)，文本的行數(shù)和每行的字?jǐn)?shù)會(huì)隨著瀏覽器大小改變而改變，如果要換行，需按“Shift+Enter”鍵進(jìn)行手動(dòng)換行，如果要分段，則直接按“Enter”鍵。3.1.6文本換行與分段從入門到精通清華大學(xué)出版社56在Dreamweaver中輸入文本時(shí)不會(huì)自動(dòng)換行，當(dāng)在瀏覽器從入門到精通清華大學(xué)出版社3.2設(shè)置文本格式Text3.2.1設(shè)置文本基本格式TextText3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社3.2設(shè)置文本格式Text3.3.2.1設(shè)置文本基本格式從入門到精通清華大學(xué)出版社58

編輯字體列表1設(shè)置文本字體格式23.2.1設(shè)置文本基本格式從入門到精通清華大學(xué)出版社14不同的電腦中所安裝的字體可能不同，所以為了盡可能讓大多數(shù)電腦中顯示的網(wǎng)頁(yè)外觀保持一致，網(wǎng)頁(yè)中的文本通常都采用最常用的字體，如中文采用“宋體”、“黑體”，英文采用“Arial”等。1．編輯字體列表從入門到精通清華大學(xué)出版社59

不同的電腦中所安裝的字體可能不同，所以為了盡可能讓大多數(shù)電腦要設(shè)置文本的字體和大小，可選中要設(shè)置字體的文本，文本將以反白形式顯示，在“屬性”面板中可進(jìn)行字體、大小、顏色、對(duì)齊方式以及粗體或斜體設(shè)置。2．設(shè)置文本字體格式從入門到精通清華大學(xué)出版社60

要設(shè)置文本的字體和大小，可選中要設(shè)置字體的文本，文本將以反白3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社61

設(shè)置段落標(biāo)題123設(shè)置段落對(duì)齊設(shè)置段落縮進(jìn)3.2.2設(shè)置段落格式從入門到精通清華大學(xué)出版社17利用“屬性”面板“格式”下拉列表框中的選項(xiàng)，可以快速地將段落文本設(shè)置為一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題等標(biāo)題樣式，其中標(biāo)題號(hào)越小，字體越大。1．設(shè)置段落標(biāo)題從入門到精通清華大學(xué)出版社62

利用“屬性”面板“格式”下拉列表框中的選項(xiàng)，可以快速地將段落段落文本的對(duì)齊在網(wǎng)頁(yè)布局中起著十分重要的作用，Dreamweaver提供了左對(duì)齊、居中對(duì)齊、右對(duì)齊和兩端對(duì)齊4種對(duì)齊方式。2．設(shè)置段落對(duì)齊從入門到精通清華大學(xué)出版社63

段落文本的對(duì)齊在網(wǎng)頁(yè)布局中起著十分重要的作用，Dreamwe設(shè)置段落縮進(jìn)可以將整個(gè)段落文本進(jìn)行凸出或縮進(jìn)顯示。3．設(shè)置段落縮進(jìn)從入門到精通清華大學(xué)出版社64

設(shè)置段落縮進(jìn)可以將整個(gè)段落文本進(jìn)行凸出或縮進(jìn)顯示。3．設(shè)置從入門到精通清華大學(xué)出版社3.3創(chuàng)建列表編號(hào)列表3.3.13.3.2項(xiàng)目列表3.3.3定義列表3.3.4嵌套列表的創(chuàng)建從入門到精通清華大學(xué)出版社3.3創(chuàng)建列表編號(hào)列表3.3.3.3.1編號(hào)列表從入門到精通清華大學(xué)出版社66

創(chuàng)建編號(hào)列表可以使文本條理清晰，讓人一目了然。編號(hào)列表前面通常有數(shù)字前導(dǎo)字符，可以是英文字母、阿拉伯?dāng)?shù)字或羅馬數(shù)字等符號(hào)。

3.3.1編號(hào)列表從入門到精通清華大學(xué)出版社22項(xiàng)目列表可以對(duì)一些并列的，沒(méi)有先后順序的項(xiàng)目進(jìn)行格式設(shè)置，其前面一般用項(xiàng)目符號(hào)作為前導(dǎo)字符。3.3.2項(xiàng)目列表從入門到精通

清華大學(xué)出版社67

項(xiàng)目列表可以對(duì)一些并列的，沒(méi)有先后順序的項(xiàng)目進(jìn)行格式設(shè)置，其定義列表一般用在詞匯表或說(shuō)明書中，沒(méi)有項(xiàng)目符號(hào)或數(shù)字等前導(dǎo)字符。3.3.3定義列表從入門到精通清華大學(xué)出版社68

定義列表一般用在詞匯表或說(shuō)明書中，沒(méi)有項(xiàng)目符號(hào)或數(shù)字等前導(dǎo)字列表可以進(jìn)行嵌套，即在其他列表中再創(chuàng)建列表，比如可以在編號(hào)列表中嵌套項(xiàng)目列表，也可以在項(xiàng)目列表中嵌套編號(hào)列表。3.3.4嵌套列表的創(chuàng)建從入門到精通清華大學(xué)出版社69列表可以進(jìn)行嵌套，即在其他列表中再創(chuàng)建列表，比如可以在編號(hào)列從入門到精通清華大學(xué)出版社3.4為網(wǎng)頁(yè)添加圖像3.4.1網(wǎng)頁(yè)中支持的圖像格式3.4.2直接插入圖像3.4.3用占位符插入圖像從入門到精通清華大學(xué)出版社3.4為網(wǎng)頁(yè)添加圖像3.4.13.4.1網(wǎng)頁(yè)中支持的圖像格式從入門到精通清華大學(xué)出版社71

網(wǎng)頁(yè)圖像對(duì)圖像的格式有一定要求，目前網(wǎng)頁(yè)中通常使用的圖像格式為GIF、JPG和PNG這3種，各種圖像格式的特點(diǎn)如下：GIF：圖像交換格式。GIF圖像是第一個(gè)在網(wǎng)頁(yè)中應(yīng)用的圖像格式，通常用作站點(diǎn)Logo、廣告條Banner及網(wǎng)頁(yè)背景圖像等。其優(yōu)點(diǎn)是它可以使圖像文件變得相當(dāng)小，也可以在網(wǎng)頁(yè)中以透明方式顯示，并可以包含動(dòng)態(tài)信息。JPG：聯(lián)合照片專家組（JoinPhotographGraphics），也稱為JPEG。這種格式的圖像可以高效地壓縮，圖像文件變小的同時(shí)基本不失真，因?yàn)槠鋪G失的內(nèi)容是人眼不易察覺(jué)的部分，因此常用來(lái)顯示顏色豐富的精美圖像，如照片等。PNG：便攜網(wǎng)絡(luò)圖像（PortableNetworkGraphics），既有GIF能透明顯示的特點(diǎn)，又具有JPEG處理精美圖像的優(yōu)勢(shì)，常常用于制作網(wǎng)頁(yè)效果圖。

3.4.1網(wǎng)頁(yè)中支持的圖像格式從入門到精通清華大學(xué)出版社3.4.2直接插入圖像從入門到精通清華大學(xué)出版社72在網(wǎng)頁(yè)中插入圖像可以使網(wǎng)頁(yè)更生動(dòng)，表達(dá)更直觀。網(wǎng)頁(yè)中的圖像并不是直接粘貼在文檔中的，它是以一種文件鏈接的方式插入的，所以網(wǎng)頁(yè)中顯示的是保存在鏈接文件夾中的圖片文件。

3.4.2直接插入圖像從入門到精通清華大學(xué)出版社28在網(wǎng)

在網(wǎng)頁(yè)制作過(guò)程中若需要插入的圖像未制作完成，如客戶暫時(shí)未提供其Logo，則可以使用占位符的方式插入圖像。3.4.3用占位符插入圖像從入門到精通清華大學(xué)出版社73

在網(wǎng)頁(yè)制作過(guò)程中若需要插入的圖像未制作完成，如客戶暫時(shí)未提從入門到精通清華大學(xué)出版社3.5圖像的設(shè)置和應(yīng)用設(shè)置圖像屬性創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像3.5.13.5.2從入門到精通清華大學(xué)出版社3.5圖像的設(shè)置和應(yīng)用設(shè)置圖像在Dreamweaver中選中網(wǎng)頁(yè)文檔中的圖像后，在其“屬性”面板即可對(duì)圖像的屬性進(jìn)行設(shè)置，如設(shè)置圖像的大小、對(duì)齊方式等。3.5.1設(shè)置圖像屬性從入門到精通清華大學(xué)出版社75

出現(xiàn)陰影確定裁切范圍裁切后的圖像在Dreamweaver中選中網(wǎng)頁(yè)文檔中的圖像后，在其“屬要通過(guò)DreamweaverCS6向Internet服務(wù)器上傳并發(fā)布站點(diǎn)，需要先進(jìn)行站點(diǎn)的遠(yuǎn)程信息配置。3.5.2創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像從入門到精通清華大學(xué)出版社76要通過(guò)DreamweaverCS6向Internet服務(wù)器從入門到精通清華大學(xué)出版社773.6基礎(chǔ)實(shí)例3.6.1創(chuàng)建軟件下載列表3.6.2制作導(dǎo)航條頁(yè)面基礎(chǔ)實(shí)例從入門到精通清華大學(xué)出版社333.6基礎(chǔ)實(shí)例3.6.1本例將制作一個(gè)軟件下載列表的網(wǎng)頁(yè)，通過(guò)輸入文本、設(shè)置文本格式、創(chuàng)建列表和嵌套列表等方式，來(lái)達(dá)到創(chuàng)建軟件下載列表的目的，并鞏固本章網(wǎng)頁(yè)文本方面的知識(shí)。3.6.1創(chuàng)建軟件下載列表從入門到精通清華大學(xué)出版社78本例將制作一個(gè)軟件下載列表的網(wǎng)頁(yè)，通過(guò)輸入文本、設(shè)置文本格式本例制作的軟件下載列表，主要是從文本方面著手，由于是下載列表，所以少不了要添加多個(gè)下載列表和軟件項(xiàng)目，這些可以通過(guò)添加列表的方式來(lái)解決，并且由于是多個(gè)類型，所以還需要添加多個(gè)類型的列表，因此使用嵌套列表的方法最為恰當(dāng)。另外還需要通過(guò)不同的字體格式來(lái)區(qū)分類型與項(xiàng)目文本。而既然是下載列表，一般需要添加超級(jí)鏈接，即單擊一個(gè)列表項(xiàng)目后跳轉(zhuǎn)到相應(yīng)的頁(yè)面，但是由于本章主要是介紹文本的添加和設(shè)置，所以關(guān)于超級(jí)鏈接的添加，將在后面的章節(jié)專門講解。1．行業(yè)分析從入門到精通清華大學(xué)出版社79本例制作的軟件下載列表，主要是從文本方面著手，由于是下載列表2．操作思路從入門到精通清華大學(xué)出版社80輸入標(biāo)題文本設(shè)置字體格式添加項(xiàng)目列表操作思路1234嵌套編號(hào)列表2．操作思路從入門到精通清華大學(xué)出版社36輸入標(biāo)題文本設(shè)置字本例將利用制作好的一組圖片，通過(guò)圖像的各種方式，來(lái)制作一個(gè)網(wǎng)頁(yè)導(dǎo)航頁(yè)面。3.6.2制作導(dǎo)航條頁(yè)面從入門到精通清華大學(xué)出版社81本例將利用制作好的一組圖片，通過(guò)圖像的各種方式，來(lái)制作一個(gè)網(wǎng)導(dǎo)航條是很多網(wǎng)站都需要的一個(gè)網(wǎng)頁(yè)元素，在一個(gè)網(wǎng)站中，通過(guò)