網(wǎng)頁設(shè)計教程04-06插入和編輯網(wǎng)頁基本元素-創(chuàng)建網(wǎng)頁超鏈接與頁面布局

1、第第4章章 插入和編輯網(wǎng)頁插入和編輯網(wǎng)頁基本元素基本元素教學(xué)目標(biāo)o掌握文本的插入、屬性的設(shè)置o掌握圖像的插入、屬性的設(shè)置o掌握Flash的插入、屬性的設(shè)置o掌握多媒體的插入、屬性的設(shè)置o了解其他網(wǎng)頁元素的插入、屬性的設(shè)置4.1 插入文本與修改屬性插入文本與修改屬性o4.1.1 插入文本o1、直接輸入文本o HTML只允許字符之間包含一個空格，若要在文檔中連續(xù)輸入多個空格，則可按照如下方法進(jìn)行操作：o（1）在中文輸入法的全角狀態(tài)下輸入空格。o（2）使用快捷鍵Ctrl+Shift+空格。o（3）選擇“編輯”菜單中的“首選參數(shù)”，打開“首選參數(shù)”對話框，在“常規(guī)”類別中選中“允許多個連續(xù)的空格”選項

2、。 o2、復(fù)制文本o3、導(dǎo)入文檔4.1.2 設(shè)置文本屬性o1字體設(shè)置字體設(shè)置o2字號設(shè)置字號設(shè)置o3顏色設(shè)置顏色設(shè)置o4標(biāo)題格式標(biāo)題格式o5段落格式設(shè)置段落格式設(shè)置o6應(yīng)用列表應(yīng)用列表1字體設(shè)置字體設(shè)置o有時設(shè)置字體時，在文本的“屬性”面板中，默認(rèn)沒有顯示所需要的字體，此時則需要將使用的某種字體添加到字體列表中。2字號設(shè)置字號設(shè)置o通過“屬性”面板中的“大小”下拉按鈕，用戶可以根據(jù)設(shè)計需要選擇合適的文本字號，來對選中文本進(jìn)行設(shè)置字號大小。 3顏色設(shè)置顏色設(shè)置o網(wǎng)頁中文本的顏色默認(rèn)是黑色，但是為了使文本顏色符合網(wǎng)頁設(shè)計風(fēng)格，達(dá)到更好的視覺效果，則可以按照要求設(shè)置文本的顏色。o單擊“屬性”面板中的

3、“文本顏色”按鈕 ，此時鼠標(biāo)變成“吸管”形狀，然后在打開的顏色選擇器中選擇所需要的字體顏色。 4標(biāo)題格式標(biāo)題格式o通常情況下，網(wǎng)頁中文本標(biāo)題是文本內(nèi)容的主題，因此對標(biāo)題格式的設(shè)置也是不可缺少的。 5段落格式設(shè)置段落格式設(shè)置o段落格式化是指對選定的段落進(jìn)行排版，主要包括該段落的對齊、縮進(jìn)、行間距、段間距等，要對某個段落進(jìn)行處理，需要先將光標(biāo)定位于該段落中。 （1）段落的對齊方式o段落的對齊方式有以下四種：左對齊、右對齊、居中對齊和兩端對齊。在Dreamweaver中默認(rèn)的是左對齊，可以根據(jù)用戶需要來設(shè)置相應(yīng)的對齊方式，先選中所需對齊的文本，或把光標(biāo)置于該文本的開頭處，然后單擊“屬性”面板中相應(yīng)的

4、對齊按鈕即可。（2）段落縮進(jìn)o在“屬性”面板的對齊方式下方有兩個按鈕，“文本凸出”和“文本縮進(jìn)”，單擊它們就能實現(xiàn)文本的縮進(jìn)，單擊一次移動兩個單位，并且會將標(biāo)簽應(yīng)用于文本段落。（3）段落間距o段落間距包括段間距和行間距，在Dreamweaver CS3中，提供了三種方式添加段落間距，即進(jìn)行文本換行。o自動換行：輸入文本時，當(dāng)一行的長度超多屏幕顯示的范圍，文字將自動在下一行進(jìn)行顯示。o使用Enter鍵：按回車鍵時會自動添加一個新的段落，段落間出現(xiàn)一個空白行。o使用Shift+Enter鍵：同時按下這兩個按鍵，插入換行符，不會添加新的段落，兩行之間也不會出現(xiàn)空白行。 6應(yīng)用列表應(yīng)用列表o（1）應(yīng)用

5、項目列表o如果網(wǎng)頁中的文本內(nèi)容不需要按順序排列時，則使用項目列表。使用“屬性”面板上的“項目列表”按鈕 進(jìn)行設(shè)置。o（2）應(yīng)用編號列表o當(dāng)網(wǎng)頁中的文本內(nèi)容需要進(jìn)行按順序排列時，則使用編號列表。使用“屬性”面板上的“編號列表”按鈕進(jìn)行設(shè)置。（3）設(shè)置列表屬性o應(yīng)用了列表之后可以更改列表的類型、樣式及編號列表的計數(shù)等。可以單擊“文本”菜單中的“列表”選項中的“屬性”，打開“列表屬性”對話框進(jìn)行修改。o列表類型：有四種，項目列表、編號列表、目錄列表和菜單列表o樣式：設(shè)置列表每行前面的列表符號。o開始計數(shù)：設(shè)置編號列表每行開始的編號。4.2 插入圖像與修改屬性插入圖像與修改屬性o4.2.1 插入圖像o

6、插入圖像是一個非常簡單的操作，只需要將光標(biāo)定位在需要插入圖像文件的位置，然后執(zhí)行下列操作之一。 o方法一：選擇菜單“插入記錄”“圖像”命令o方法二：在“常用”工具欄中，單擊“圖像”按鈕右邊的三角按鈕 ，在下拉列表中選擇“圖像” 4.2.2 修改圖像屬性o1圖像的基本屬性圖像的基本屬性o（1）寬和高：以像素為單位指定圖像的寬度和）寬和高：以像素為單位指定圖像的寬度和高度，用來設(shè)置圖像的大小。高度，用來設(shè)置圖像的大小。o（2）源文件：指定圖像的源文件，設(shè)置引用圖）源文件：指定圖像的源文件，設(shè)置引用圖像的路徑。像的路徑。o（3）鏈接：設(shè)置圖像的超級鏈接。）鏈接：設(shè)置圖像的超級鏈接。o（4）替換：與在

7、）替換：與在“圖像標(biāo)簽輔助功能屬性圖像標(biāo)簽輔助功能屬性”對對話框設(shè)置的效果相同，對于某些瀏覽器，在瀏覽話框設(shè)置的效果相同，對于某些瀏覽器，在瀏覽網(wǎng)頁時鼠標(biāo)移動到圖像上時顯示的文字。網(wǎng)頁時鼠標(biāo)移動到圖像上時顯示的文字。1圖像的基本屬性圖像的基本屬性o（5）地圖和熱點工具：設(shè)置熱區(qū)。o（6）垂直邊距和水平邊距：以像素為單位，設(shè)置圖像邊沿的邊距?！按怪边吘唷毖貓D像的頂端和底部；“水平邊距”沿圖像的左側(cè)和右側(cè)。o（7）邊框：以像素為單位，圖像邊框的寬度，默認(rèn)為無邊框。o（8）對齊按鈕：在邊框右側(cè)的三個按鈕 ，左對齊、居中和右對齊，設(shè)置圖像相對瀏覽器的左對齊、居中或右對齊。o（9）對齊：對齊同一行上的圖

8、像和文本，設(shè)置圖像和文本的排版方式。 各對齊方式的含義 對齊方式含義默認(rèn)值根據(jù)訪問者瀏覽器的不同，但通常指定基線對齊?；€、底部將文本基準(zhǔn)線（或同一行的其他元素）對齊選定對象的底部。頂端、文本上方將選定圖像的頂端與當(dāng)前行最高項（圖像或文本）的頂端對齊居中將圖像的中部與當(dāng)前行的基線對齊絕對居中將圖像的中部與當(dāng)前行文本的中部對齊絕對底部將圖像的底部與文本行（包括字母下部，如字面g的下部）的底部對齊左對齊將選定的圖像放置在左邊，文本在圖像的右側(cè)換行右對齊將選定的圖像放置在右邊，文本在圖像的左側(cè)換行2圖像的編輯圖像的編輯o通過屬性檢查器，除了可以設(shè)置圖像的基本屬性，還可以對圖像進(jìn)行相關(guān)的編輯，包括有：

9、調(diào)整圖像大小、優(yōu)化圖像、裁剪圖像、調(diào)整圖像的亮度和對比度、銳化圖像等。 4.2.3 創(chuàng)建鼠標(biāo)經(jīng)過圖像o在Dreamweaver CS3中，系統(tǒng)為用戶提供了制作簡單圖像特效的功能，使用這些特效能夠使設(shè)計的網(wǎng)頁更生動，更具瀏覽性?！笆髽?biāo)經(jīng)過圖像”就是其中一種特效。o創(chuàng)建“鼠標(biāo)經(jīng)過圖像”必須使用兩個圖像，一個是主圖像，即當(dāng)頁面剛加載時顯示的“原始圖像”；另一個是次圖像，鼠標(biāo)滑過主圖像時顯示的“鼠標(biāo)經(jīng)過圖像”。 4.3 插入插入Flash對象對象oFlash動畫是一種矢量動畫，具有體積小、圖像質(zhì)量高等特點，是當(dāng)今最流行的網(wǎng)頁動畫格式，而目前在瀏覽器中集成了播放Flash動畫的插件或控件，用戶不需要安裝

10、Flash播放器也都能欣賞到Flash動畫。o可以使用下面兩種方法之一在網(wǎng)頁中插入Flash動畫。o方法一：選擇菜單“插入記錄”“媒體”“Flash”命令 o方法二：在“常用”工具欄中，單擊“媒體”按鈕右邊的三角按鈕，在下拉列表中選擇“Flash”o在“參數(shù)”的下方，在出現(xiàn)的文本框中輸入?yún)?shù)“wmode”，然后再單擊“值”的下方，設(shè)置其值為“transparent” ，可以進(jìn)行flash透明化。4.3.2 插入Flash按鈕o在插入Flash按鈕時要注意，Dreamweaver的安裝路徑和創(chuàng)建的站點不能含有中文。 o4.3.3 插入Flash文本oFlash文本是Flash按鈕的另一種表現(xiàn)形式

11、，在Dreamweaver CS3中，F(xiàn)lash文本的效果顯示比較簡單，即在瀏覽頁面時，當(dāng)鼠標(biāo)移動經(jīng)過或離開該文本時會改變文本顏色和背景顏色。 o4.4 插入多媒體對象插入多媒體對象o4.4.1 插入音頻文件o4.4.2 插入視頻文件4.4.1 插入音頻文件oDreamweaver中支持多種類型的音頻文件，比如MIDI、MP3、WAV、Real Audio等格式都能插入到網(wǎng)頁中。插入的聲音可以用作背景音樂，但有時訪問者可能不希望聽到音頻內(nèi)容，所以也可以提供聲音播放控件，由訪問者自行控制。 o4.4.2 插入視頻文件oDreamweaver提供的插件功能，可以實現(xiàn)在網(wǎng)頁中添加音樂，也可以添加一些

12、視頻文件，視頻文件類型可以包括wmv、avi、mpeg、rmvb等。 o4.5 插入其他對象插入其他對象o文本、圖像、Flash、音頻和視頻文件等元素的使用，可以豐富整個網(wǎng)站，但還有一些功能是這些元素?zé)o法實現(xiàn)的，此時需要插入其他對象，如水平線、日期、特殊字符、頭部標(biāo)記、表格和表單等，本節(jié)將要介紹關(guān)于此類對象的使用。 4.5.1 插入水平線o水平線可以劃分網(wǎng)頁頁面的層次，分割文檔內(nèi)容，方便瀏覽。在頁面上，可以使用一條或多條水平線來組織內(nèi)容信息。o4.5.2 插入日期和時間o4.5.3 插入特殊字符o在網(wǎng)頁中輸入文本時，有時需要使用一些無法通過鍵盤正常輸入的特殊字符，此時可以利用Dreamweav

13、er提供的插入特殊字符來插入所要字符。4.5.4 插入頭部標(biāo)記o插入頭部標(biāo)記包括有插入META、關(guān)鍵字、說明、刷新、基礎(chǔ)及鏈接等。 2插入網(wǎng)頁自動刷新功能插入網(wǎng)頁自動刷新功能o自動刷新功能是指設(shè)定在一定時間自動對頁面進(jìn)行刷新，可以刷新該頁面或跳轉(zhuǎn)到另外一個頁面。4.5.5 插入表格和表單插入表格和表單o在Dreamweaver中根據(jù)需要還可以插入表格和表單。 本章小結(jié)本章小結(jié)o文本和圖像是設(shè)計網(wǎng)頁的最基本也是最重要的元素，除了這兩者，還可以添加其他的基本元素如音頻、動畫、視頻等，還有一些其他對象如水平線、日期等。合理的使用這些元素可以提高網(wǎng)頁的視覺效果，延長瀏覽者瀏覽時間，從而增強(qiáng)網(wǎng)站的目的性

14、。本章主要介紹了在Dreaweaver CS3中如何插入和編輯文本、圖像、flash對象、多媒體對象、水平線、頭部標(biāo)記等網(wǎng)頁基本元素，只有掌握這些操作，靈活的使用，才能更好的設(shè)計出一個高水準(zhǔn)的網(wǎng)站。 實訓(xùn)o完成實訓(xùn)第第4章章 插入和編輯網(wǎng)頁基本插入和編輯網(wǎng)頁基本元素實訓(xùn)元素實訓(xùn)第第5章章 創(chuàng)建網(wǎng)頁超鏈接創(chuàng)建網(wǎng)頁超鏈接教學(xué)目的o介紹了超鏈接的概念o掌握超鏈接和導(dǎo)航條的創(chuàng)建方法o會在網(wǎng)頁中靈活使用超鏈接5.1 超鏈接的基本概念o一個網(wǎng)站肯定有很多的頁面，如果頁面之間彼此是獨立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是無法運(yùn)行的，沒有意義的。為了建立起網(wǎng)頁之間的聯(lián)系我們需要實現(xiàn)從一個網(wǎng)頁指向另一個目標(biāo)的

15、跳轉(zhuǎn)，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是同一個網(wǎng)頁上的不同位置，還可以是一張圖片、一個電子郵件地址、一個文件或一個絕對定位的元素，甚至是一個應(yīng)用程序，這就是所謂的超鏈接。在創(chuàng)建超鏈接之前，首先要弄清楚目錄和路徑的關(guān)系，只有這樣才可以輕松管理網(wǎng)站的鏈接，創(chuàng)建出結(jié)構(gòu)清晰明確的網(wǎng)站。 5.1.1 URL概述oURL（統(tǒng)一資源定位器）主要用于指定網(wǎng)上資源的位置和方法。oURL一般由三個部分組成，即協(xié)議、主機(jī)和域o（1）協(xié)議，又成服務(wù)方式，如http、ftp、telnet等。o（2）主機(jī)：即存放資源的主機(jī)的IP地址，有時也包括端口號，如：o(3)域：主機(jī)的具體地址，包括路徑和文件名等。5.1.2 絕對路

16、徑 o絕對路徑就是被鏈接文檔的完整的URL，而且包含服務(wù)器協(xié)議。這個地址是精確地址而不用考慮文件的位置，如果目標(biāo)文件被移動，則鏈接無效。創(chuàng)建外部鏈接時必須用絕對路徑。5.1.3 相對路徑 o相對路徑是指以當(dāng)前文件所在位置為起點到被鏈接文件經(jīng)由的路徑。5.1.4 根路徑o根路徑是指從站點目錄到文檔所在位置的路徑，根路徑是指從站點目錄到文檔所在位置的路徑，以一個正斜杠以一個正斜杠“/”開始，該斜杠表示站點根文件夾。開始，該斜杠表示站點根文件夾。o根路徑綜合了絕對路徑和相對路徑的優(yōu)點，除了根路徑綜合了絕對路徑和相對路徑的優(yōu)點，除了鏈接時和當(dāng)前文檔位置無關(guān)，還可以在本地站點鏈接時和當(dāng)前文檔位置無關(guān)，還

17、可以在本地站點中進(jìn)行測試。中進(jìn)行測試。5.2創(chuàng)建超鏈接 5.1創(chuàng)建內(nèi)部超鏈接 內(nèi)部鏈接主要是鏈接站點內(nèi)部的文件，一般使用相對路徑。常見的有文本鏈接、圖像鏈接和熱點鏈接 1.文本鏈接 2.圖像鏈接 3.圖像熱區(qū)鏈接5.2.2 創(chuàng)建錨記超鏈接o如果一個網(wǎng)頁上的內(nèi)容過長，那么通過滾動條需找需要的內(nèi)容并不是一件容易的事。應(yīng)用錨記鏈接可以在頁面內(nèi)或不同頁面內(nèi)快速定位，找到所需的內(nèi)容。創(chuàng)建錨記連接的具體操作步驟如下：o1.插入命名錨記o2.創(chuàng)建錨記鏈接5.2.3 創(chuàng)建郵件超鏈接o郵件超鏈接是一種特殊的鏈接方式，其鏈接對象為郵箱地址。o1.使用“插入”菜單創(chuàng)建郵件鏈接o2.直接給文檔創(chuàng)建郵件鏈接o如果需要在

18、網(wǎng)頁中提供下載資料，就需要為文件提供下載鏈接。如果鏈接指向的不是一個網(wǎng)頁文件，而是其他格式的文件，如.rar、 .mp3 、 .exe等，單擊鏈接的時候就會彈出是否選中下載文件的對話框。5.2.4 創(chuàng)建下載超鏈接5.2.5 創(chuàng)建腳本超鏈接o腳本超鏈接是一種特殊類型的鏈接，通過單擊帶有腳本超鏈接的文本或?qū)ο螅梢赃\(yùn)行相應(yīng)的腳本代碼及函數(shù)。5.2.6 創(chuàng)建空鏈接o空鏈接是指沒有指定鏈接對象的鏈接。利用空鏈接可以向網(wǎng)頁上的對象或文本附加行為，以便當(dāng)鼠標(biāo)指針滑過該鏈接時 ，交換圖像或顯示層等動作。5.3管理超鏈接5.4創(chuàng)建跳轉(zhuǎn)菜單o跳轉(zhuǎn)菜單是頁面中的彈出式菜單，在菜單中列舉出鏈接到文件或文件夾的選項。

19、5.5創(chuàng)建導(dǎo)航條o導(dǎo)航條由按鈕、圖像或一組圖像組成。導(dǎo)航條就像網(wǎng)站的橋梁，網(wǎng)站通過它把站點中的各個頁面聯(lián)系起來，使瀏覽者更加方便清晰地在各個頁面間進(jìn)行切換，是網(wǎng)站的結(jié)構(gòu)更加層次分明。思考題o1絕對路徑和相對路徑有什么區(qū)別？o2. 如何創(chuàng)建不同形狀的熱點超鏈接？o3. 如何創(chuàng)建郵件超鏈接？o4. 創(chuàng)建腳本鏈接有什么作用?o5. 如何快速檢查網(wǎng)頁中的超鏈接？本章小結(jié)本章小結(jié)o為了把Internet上眾多的網(wǎng)站和網(wǎng)頁聯(lián)系起來，將其構(gòu)成一個整體，就要在網(wǎng)頁中加入鏈接。這樣一來，能讓瀏覽者很輕松地瀏覽自己想看的內(nèi)容。所以我們在整合網(wǎng)站內(nèi)容后，系統(tǒng)地考慮站點鏈接的易用性、條理性尤為重要。總之，掌握超鏈接的

20、制作是基礎(chǔ)，如何合理的安排、靈活的運(yùn)用它才是關(guān)鍵。第第6章章 網(wǎng)頁頁面布局設(shè)網(wǎng)頁頁面布局設(shè)計計教學(xué)目的o掌握表格的創(chuàng)建方法o掌握表格和單元格屬性的設(shè)置o學(xué)會在網(wǎng)頁中靈活使用表格o學(xué)會如何利用布局表格進(jìn)行頁面的布局設(shè)計教學(xué)重點o使用表格進(jìn)行頁面布局教學(xué)難點o使用布局表格進(jìn)行頁面布局6.1 頁面布局的概念頁面布局的概念o6.1.1 頁面布局設(shè)計o設(shè)計頁面布局的一般步驟。 o（1）設(shè)計草案o新建的HTML文檔是一個空白的文檔，相當(dāng)于一張白紙，可以任由設(shè)計者在上面發(fā)揮想象，將所要設(shè)計的頁面的大概框架構(gòu)思好，最好能夠先在紙上或是使用軟件如photoshop把自己的構(gòu)思畫出來，只需畫出整體布局，打下草稿，

21、不必考慮細(xì)節(jié)問題。可以設(shè)計多份草案，以供選擇。設(shè)計頁面布局的一般步驟o（2）粗略布局o在設(shè)計好的草案的基礎(chǔ)上，確定好各個功能模塊的擺放，合理安排它們的結(jié)構(gòu)，需要達(dá)到主次分明，層次突出。o（3）具體布局o對網(wǎng)頁粗略布局了之后就是具體布局，給粗略布局添枝加葉，使之具體化，精確化。6.1.2 頁面布局的方法o（1）表格布局o（2）層布局o（3）框架布局6.2 表格的創(chuàng)建及編輯表格的創(chuàng)建及編輯o表格是網(wǎng)頁設(shè)計中最常用的工具，它既可像字處理軟件中的表格一樣，用來顯示表格式數(shù)據(jù)，也可以用作頁面布局的一個強(qiáng)有力工具。表格是由“行”和“列”構(gòu)成的，利用“行”和“列”的分隔，可以更方便靈活的在適合的位置插入和排

22、列文本、圖像等網(wǎng)頁元素，從而使頁面更具條理性、更加美觀。6.2.1 創(chuàng)建表格o表格的功能這么強(qiáng)大，就需要掌握如何應(yīng)用它，在Dreamweaver CS3中可以很方便地創(chuàng)建表格，下面介紹如何創(chuàng)建表格。o創(chuàng)建表格可以執(zhí)行下列方法之一，都會彈出一個“表格”對話框，根據(jù)需要在該對話框中設(shè)置相關(guān)的參數(shù)。o方法一：選擇菜單“插入記錄”“表格”命令。o方法二：單擊“常用”工具中的“表格”按鈕 ?！氨砀瘛睂υ捒騾?shù)說明 參數(shù)說明行數(shù)和列數(shù)確定表格的具有多少行和列，直接輸入數(shù)目。表格寬度以像素為單位或按瀏覽器窗口寬度的百分比指定表格的寬度。邊框粗細(xì)以像素為單位的表格邊框的寬度。設(shè)置為0時，將在瀏覽器中不顯示邊框

23、。單元格邊距用來指定單元格內(nèi)容與邊框的距離。如不明確指定，則大多瀏覽器按1顯示。單元格間距相鄰的兩個單元格之間的距離。如不明確指定，則大多瀏覽器按2顯示。頁眉指定表格標(biāo)題顯示方式，有“無”、“左”、“頂部”、和“兩者”4種。標(biāo)題指定表格標(biāo)題，顯示在該表格外面。對齊標(biāo)題如果設(shè)置有表格標(biāo)題，則用來指定表格標(biāo)題相對于表格的對齊方式。主要有“默認(rèn)”、“底部”、“頂部”、“左”和“右”5種，“默認(rèn)”為“頂部”。摘要用來說明表格信息，不會顯示在瀏覽器上。6.2.2 表格的選定o1選定表格選定表格o選定表格的方法有以下幾種：o（1）單擊表格的邊框線。o（2）將光標(biāo)定位在表格內(nèi)部任意位置，選擇“修改” “表格

24、” “選擇表格”命令。o（3）將光標(biāo)定位在表格內(nèi)部任意位置，單擊“標(biāo)簽”選擇器中的如圖6-3所示的標(biāo)簽。 2選定單元格選定單元格o單元格的選定包括選定一個單元格、選定連續(xù)的多個單元格和選定不連續(xù)的多個單元格。o（1）選定一個單元格的方法有以下幾種： oA.按下Ctrl鍵的同時，在單元格內(nèi)單擊即可選中該單元格。oB.將光標(biāo)定位在所要選定的單元格內(nèi)，單擊“標(biāo)簽”選擇器中的如圖6-5所示的標(biāo)簽。2選定單元格選定單元格o（2）選定連續(xù)的多個單元格的方法：oA.用鼠標(biāo)左鍵在連續(xù)的多個單元格中拖動。oB.將光標(biāo)定位在所選單元格的第一個單元格中，按住Shift，單擊最后一個單元格。o（3）選定不連續(xù)的多個單

25、元格的方法是按住Ctrl鍵，同時單擊要選定的單元格。3選定行或列選定行或列o在Dreamweaver中，可選擇單個行或列也以及多個行或列，被選中的行或列的邊框線都是以黑色粗線顯示。6.2.3 表格的編輯o對表格的編輯包括修改表格的屬性、調(diào)整表格的結(jié)構(gòu)。 （1）表格屬性的修改）表格屬性的修改o選定了表格之后，就可以在相應(yīng)的“屬性”面板中查看或修改屬性值。表格的屬性包括表格的大小、背景顏色、表格間距等。 表格“屬性”面板的參數(shù) 屬性參數(shù)說明表格ID指定表格的名稱行和列指定表格的行數(shù)和列數(shù)寬以像素為單位或按瀏覽器窗口寬度的百分比指定表格的寬度。填充單元格內(nèi)容和單元格邊框之間的距離，相當(dāng)于創(chuàng)建表格時的

26、“單元格邊距”。間距相鄰的兩個單元格之間的距離，相對于創(chuàng)建表格時的“單元格間距”。表格“屬性”面板的參數(shù)(續(xù))對齊表格在瀏覽器中的對齊方式，有默認(rèn)、左對齊、居中對齊和右對齊4種。邊框以像素為單位的表格邊框的寬度。類設(shè)置表格的樣式清除列寬清除所設(shè)置的列寬，根據(jù)內(nèi)容調(diào)整表格各列寬度。清除行高清除所設(shè)置的行高，根據(jù)內(nèi)容調(diào)整表格各行高度。將表格寬度轉(zhuǎn)換為像素將原來寬度為百分比的表格轉(zhuǎn)換為相應(yīng)的像素將表格寬度轉(zhuǎn)換為百分比將原來寬度為像素的表格轉(zhuǎn)換為相應(yīng)的百分比背景顏色設(shè)置整個表格的背景色。邊框顏色設(shè)置表格邊框顏色。背景圖像設(shè)置圖像作為表格背景。（2）單元格屬性的修改 o為了對放置在表格的文本進(jìn)行排版，有

27、時也需要對單元格進(jìn)行屬性設(shè)置。選定了單元格之后，就可以在相應(yīng)的“屬性”面板中查看或修改屬性值。單元格的屬性包括單元格對齊方式、高度、寬度和背景等。 單元格“屬性”面板參數(shù) 參數(shù)說明水平設(shè)置單元格內(nèi)容在水平方向上的對齊方式，有默認(rèn)、左對齊、居中對齊和右對齊4種。垂直設(shè)置單元格內(nèi)容在垂直方向上的對齊方式，有默認(rèn)、頂端、 中間、底部和基線4種。寬和高設(shè)置單元格的寬度和高度不換行防止單元格自動換行，所有內(nèi)容一行顯示。建議不使用。標(biāo)題將單元格的某行內(nèi)容作為標(biāo)題，并且其內(nèi)容會居中和加粗顯示。背景設(shè)置圖像作為單元格的背景背景顏色設(shè)置單元格的背景顏色邊框設(shè)置單元格的邊框顏色2調(diào)整表格的結(jié)構(gòu)調(diào)整表格的結(jié)構(gòu)o新創(chuàng)

28、建好的表格的結(jié)構(gòu)都是有一定規(guī)則的，但在制表時，有時會需要一個不規(guī)則的行列來安排的表格，此時，可以對表格的結(jié)構(gòu)進(jìn)行相關(guān)的調(diào)整，如插入和刪除行或列、合并和拆分單元格等 （1）插入和刪除行或列o為了符合網(wǎng)頁的布局需要，可以對表格中的行或列進(jìn)行插入或刪除。插入的行按照選定行的格式插入，但是插入列時會根據(jù)表格寬度壓縮列寬。使用下列方法之一可以插入行或列。（2）合并和拆分單元格o合并單元格是將選中的多個連續(xù)單元格合并成一個單元格，拆分單元格即根據(jù)需要將一個單元格拆分成由多行多列組成的多個單元格。合并和拆分單元格在表格操作中非常重要，利用合并和拆分單元格，使表格的布局更符合要求。6.2.4 利用表格進(jìn)行頁面

29、布局o表格既可像字處理軟件中的表格一樣，用來顯示表格式數(shù)據(jù)，也可以用作頁面布局的一個強(qiáng)有力工具，合理的使用表格來對頁面進(jìn)行排版，可以更方便的定位頁面中的各種元素。如果需要利用表格來進(jìn)行布局，則將其邊框隱藏起來，在表格“屬性”面板中的“邊框”設(shè)置為0即可。 6.3 使用布局表格進(jìn)行頁面布局使用布局表格進(jìn)行頁面布局設(shè)計設(shè)計oDreamweaver CS3提供了幾種不同的表格模式，包括標(biāo)準(zhǔn)模式、擴(kuò)展表格模式和布局模式。 o在布局模式下，通過添加布局表格和布局單元格來進(jìn)行頁面排版。 布局模式o使用布局模式前先需要將模式切換到布局模式，其方法如下：o方法一：選擇“查看”“表格模式”“布局模式”命令。o方

30、法二：使用快捷鍵Alt+F6。 6.3.1 繪制布局表格和布局單元格o在布局模式中，可以繪制多個布局表格和布局單元格，但是布局單元格不能單獨存在，只能放在布局表格當(dāng)中，所以一般是先繪制好布局表格，然后在布局表格中繪制所需的布局單元格，如果沒有繪制表格，直接繪制單元格，Dreamveamer會自動創(chuàng)建一個布局表格來容納該布局單元格。 1繪制布局表格繪制布局表格o布局表格可以在頁面布局的空白區(qū)域，也可以在原有的布局表格中創(chuàng)建，如果頁面原已插入內(nèi)容，則布局表格不能在原來內(nèi)容上面繪制，此時鼠標(biāo)指針出現(xiàn)禁止?fàn)顟B(tài)，只能移動鼠標(biāo)在該內(nèi)容的下方繪制 2繪制布局單元格繪制布局單元格o布局單元格不能脫離布局表格，

31、只能存在布局表格當(dāng)中。6.3.2在布局單元格添加內(nèi)容o在布局模式中可以添加文本、圖像等任何類型的數(shù)據(jù)，添加方法與在標(biāo)準(zhǔn)模式中添加類似，選中需要添加內(nèi)容的單元格，然后添加內(nèi)容。所有需要添加的內(nèi)容都必須添加到布局單元格當(dāng)中，而不能添加到布局表格 6.3.3 調(diào)整及移動布局表格和布局單元格o為了使繪制的布局表格和布局單元格更符合設(shè)計要求，則可以調(diào)整布局表格和布局單元格的大小、移動它們在頁面的位置。移動布局表格或布局單元格o要移動布局表格和布局單元格的位置，則執(zhí)行下列過程：o用鼠標(biāo)單擊邊框，選中需要移動的布局表格或布局單元格，此時它們的邊框線周圍出現(xiàn)控制點。o用鼠標(biāo)拖動需要移動的表格或單元格即可。但是要注意只有嵌套的布局表格才可以任意移動。調(diào)整布局表格或布局單元格大小o要調(diào)整布局表格