Cha03外觀、圖形樣式和圖層

1、第第3 3章章 頁面布局和使用頁面布局和使用CSSCSS美化頁面美化頁面（時(shí)間：（時(shí)間：2 2次課，次課，4 4學(xué)時(shí)）學(xué)時(shí)） 本章主要講解頁面的布局，本章主要講解頁面的布局，DreamweaverDreamweaver提供了表格提供了表格網(wǎng)頁定位技術(shù)，這些都是網(wǎng)頁制作技術(shù)的精髓。表格是在網(wǎng)頁定位技術(shù)，這些都是網(wǎng)頁制作技術(shù)的精髓。表格是在HTMLHTML頁面中排列數(shù)據(jù)與圖像的非常強(qiáng)有力的工具。使用表頁面中排列數(shù)據(jù)與圖像的非常強(qiáng)有力的工具。使用表格可以對列表數(shù)據(jù)進(jìn)行布局。格可以對列表數(shù)據(jù)進(jìn)行布局。CSSCSS樣式可以一次對若干個(gè)樣式可以一次對若干個(gè)文檔所有的樣式進(jìn)行控制。文檔所有的樣式進(jìn)行控制。

2、CSSCSS樣式表的主要優(yōu)點(diǎn)是提供方便的更新功能，在更樣式表的主要優(yōu)點(diǎn)是提供方便的更新功能，在更新新CSSCSS樣式時(shí)，使用該樣式的所有文檔格式都自動更新為樣式時(shí)，使用該樣式的所有文檔格式都自動更新為新樣式。新樣式。第第3 3章章 頁面布局和使用頁面布局和使用CSSCSS美化頁面美化頁面n3.1 3.1 使用表格布局頁面使用表格布局頁面n3.2 3.2 表格基本操作表格基本操作n3.3 3.3 什么是什么是CSSCSSn3.4 3.4 【CSS CSS 設(shè)計(jì)器】面板設(shè)計(jì)器】面板n3.5 3.5 設(shè)置設(shè)置CSSCSS屬性屬性n3.6 3.6 鏈接到或?qū)С鐾獠挎溄拥交驅(qū)С鐾獠緾SSCSS設(shè)計(jì)器表設(shè)

3、計(jì)器表n3.7 3.7 使用使用CSSCSS布局模板布局模板n3.8 3.8 上機(jī)練習(xí)上機(jī)練習(xí)網(wǎng)頁布局網(wǎng)頁布局n3.9 3.9 思考與練習(xí)思考與練習(xí)第第3 3章章 頁面布局和使用頁面布局和使用CSSCSS美化頁面美化頁面 3.1 3.1 使用表格布局頁面使用表格布局頁面 表格是網(wǎng)頁中的一個(gè)非常重要的元素，它可以控制文本和圖形在頁面上出表格是網(wǎng)頁中的一個(gè)非常重要的元素，它可以控制文本和圖形在頁面上出現(xiàn)的位置，現(xiàn)的位置， HTMLHTML本身沒有提供更多的排版手段，為了實(shí)現(xiàn)網(wǎng)頁的精細(xì)排版，本身沒有提供更多的排版手段，為了實(shí)現(xiàn)網(wǎng)頁的精細(xì)排版，我們經(jīng)常使用表格來實(shí)現(xiàn)。在頁面創(chuàng)建表格之后，我們可以為其添

4、加內(nèi)容、修我們經(jīng)常使用表格來實(shí)現(xiàn)。在頁面創(chuàng)建表格之后，我們可以為其添加內(nèi)容、修改單元格和列改單元格和列/ /行屬性，或者及復(fù)制和粘貼多個(gè)單元格等。行屬性，或者及復(fù)制和粘貼多個(gè)單元格等。 在網(wǎng)頁制作過程中，它被更多地用于網(wǎng)頁內(nèi)容排版，例如要將文字放在頁在網(wǎng)頁制作過程中，它被更多地用于網(wǎng)頁內(nèi)容排版，例如要將文字放在頁面的某個(gè)位置，就可以插入表格，然后設(shè)置表格屬性，文字放在表格的某個(gè)單面的某個(gè)位置，就可以插入表格，然后設(shè)置表格屬性，文字放在表格的某個(gè)單元格里就行了。元格里就行了。 在在DreamweaverDreamweaver中可以使用表格清晰地顯示列表數(shù)據(jù)。在中可以使用表格清晰地顯示列表數(shù)據(jù)。在

5、DreamweaverDreamweaver也可也可以利用表格將各種數(shù)據(jù)排成行和列，從而更容易閱讀信息。以利用表格將各種數(shù)據(jù)排成行和列，從而更容易閱讀信息。 在網(wǎng)頁設(shè)計(jì)中，表格不但可以用于羅列數(shù)據(jù)，它也是目前進(jìn)行頁面元在網(wǎng)頁設(shè)計(jì)中，表格不但可以用于羅列數(shù)據(jù)，它也是目前進(jìn)行頁面元素定位的主要手段之一。素定位的主要手段之一。 表格在網(wǎng)頁定位上，除了可以精確定位外，還具有規(guī)范、靈活的特點(diǎn)。表格在網(wǎng)頁定位上，除了可以精確定位外，還具有規(guī)范、靈活的特點(diǎn)。插入表格的具體操作步驟如下：插入表格的具體操作步驟如下：3.1.1 3.1.1 插入表格插入表格(1) (1) 新建一個(gè)空白的新建一個(gè)空白的HTMLHT

6、ML文件，在菜單欄中選擇【插入】文件，在菜單欄中選擇【插入】| |【表格】命令，如圖【表格】命令，如圖3.13.1所示。所示。(2) (2) 在彈出的【表格】對話框中設(shè)置【行數(shù)】設(shè)置為在彈出的【表格】對話框中設(shè)置【行數(shù)】設(shè)置為3 3，設(shè)置【列】為，設(shè)置【列】為3 3，設(shè)置，設(shè)置【表格寬度】為【表格寬度】為100100百分比，設(shè)置【邊框粗細(xì)】設(shè)為百分比，設(shè)置【邊框粗細(xì)】設(shè)為1 1像素，如圖像素，如圖3.23.2所示所示. .圖圖3.1 3.1 選擇【表格】命令選擇【表格】命令 圖圖3.2 3.2 【表格】對話框【表格】對話框 3.1.1 3.1.1 插入表格插入表格 (3) (3) 設(shè)置完成后單

7、擊【確定】按鈕，即可在頁面中才創(chuàng)建表格，如圖設(shè)置完成后單擊【確定】按鈕，即可在頁面中才創(chuàng)建表格，如圖3.33.3所示。所示。 我們還可以選擇在菜單欄中選擇【窗口】我們還可以選擇在菜單欄中選擇【窗口】| |【插入】命令，打開【插【插入】命令，打開【插入】面板，選擇【常用】選項(xiàng)，單擊【表格】入】面板，選擇【常用】選項(xiàng)，單擊【表格】 按鈕按鈕 ，如圖，如圖3.43.4所示。所示。 還可以通過快捷鍵的方式打開【表格】對話框框來創(chuàng)建表格，快捷鍵為：還可以通過快捷鍵的方式打開【表格】對話框框來創(chuàng)建表格，快捷鍵為：Ctrl+Alt+TCtrl+Alt+T組合鍵。組合鍵。圖圖3.3 3.3 創(chuàng)建的表格創(chuàng)建的表

8、格圖圖3.4 3.4 【常用】選項(xiàng)【常用】選項(xiàng)3.1.2 3.1.2 設(shè)置表格屬性設(shè)置表格屬性 如果創(chuàng)建的表格不能滿足需要，我們可以重新設(shè)置表格的屬性。比如：如果創(chuàng)建的表格不能滿足需要，我們可以重新設(shè)置表格的屬性。比如：表格的行數(shù)、列數(shù)、表格高度、寬度等。修改表格屬性一般在【屬性】面板表格的行數(shù)、列數(shù)、表格高度、寬度等。修改表格屬性一般在【屬性】面板中進(jìn)行。中進(jìn)行。 首先選中要修改屬性的表格，在窗口界面下方的【屬性】面板中即可切首先選中要修改屬性的表格，在窗口界面下方的【屬性】面板中即可切換到表格的屬性面板中，如圖換到表格的屬性面板中，如圖3.53.5所示。所示。圖圖3.5 3.5 表格【屬性

9、】面板表格【屬性】面板 在【屬性】面板中的各項(xiàng)表格參數(shù)如下：在【屬性】面板中的各項(xiàng)表格參數(shù)如下：n 【表格】：文本框中可以為表格命名?！颈砀瘛浚何谋究蛑锌梢詾楸砀衩?。n 【行】：設(shè)置表格行數(shù)。【行】：設(shè)置表格行數(shù)。n 【Cols】：設(shè)置表格列數(shù)?！浚涸O(shè)置表格列數(shù)。n 【寬（【寬（W）】：設(shè)置表格寬度。）】：設(shè)置表格寬度。3.1.2 3.1.2 設(shè)置表格屬性設(shè)置表格屬性 n【CellpadCellpad】：單元格內(nèi)容和單元格邊界之間的像素?cái)?shù)：單元格內(nèi)容和單元格邊界之間的像素?cái)?shù)。n【allSpaceallSpace】：相鄰的表格單元格間的像素?cái)?shù)：相鄰的表格單元格間的像素?cái)?shù)。n【AlignAlig

10、n】：設(shè)置表格的對齊方式，在下拉列表中包含：設(shè)置表格的對齊方式，在下拉列表中包含【默認(rèn)默認(rèn)】、【左對左對齊齊】、【居中對齊居中對齊】和和【右對齊右對齊】4 4個(gè)選項(xiàng)。個(gè)選項(xiàng)。n【BorderBorder】：用來設(shè)置表格邊框的寬度：用來設(shè)置表格邊框的寬度。n【清除列寬清除列寬】 ：用于清除列寬用于清除列寬。n【清除行高清除行高】 ：用于清除行高用于清除行高。n【將表格寬度轉(zhuǎn)換成像素將表格寬度轉(zhuǎn)換成像素】 ：將表格寬度轉(zhuǎn)換為像素將表格寬度轉(zhuǎn)換為像素。n【將表格寬度轉(zhuǎn)換成百分比將表格寬度轉(zhuǎn)換成百分比】 ：將表格寬度轉(zhuǎn)換為百分比將表格寬度轉(zhuǎn)換為百分比。3.1.3 3.1.3 插入嵌套表格插入嵌套表格

11、當(dāng)單個(gè)表格不能滿足布局的需求時(shí)，可以創(chuàng)建嵌套表格。當(dāng)單個(gè)表格不能滿足布局的需求時(shí)，可以創(chuàng)建嵌套表格。 嵌套表格是指在表格的某個(gè)單元格中再插入另一個(gè)表格，如果嵌套表格嵌套表格是指在表格的某個(gè)單元格中再插入另一個(gè)表格，如果嵌套表格的寬度單位為百分比，插入表格的寬度受所在單元格的寬度限制；如果單位的寬度單位為百分比，插入表格的寬度受所在單元格的寬度限制；如果單位為像素，當(dāng)嵌套表格的寬度大于所在單元格寬度時(shí)，單元格寬度將隨之變大。為像素，當(dāng)嵌套表格的寬度大于所在單元格寬度時(shí)，單元格寬度將隨之變大。 插入嵌套表格的操作方法如下：插入嵌套表格的操作方法如下：(1) (1) 打開隨書附帶光盤中的打開隨書附帶

12、光盤中的CDROMCDROM素材素材Cha03Cha03裝潢公司裝潢公司.html.html素材文件，將光素材文件，將光標(biāo)置于左側(cè)的表格中，按標(biāo)置于左側(cè)的表格中，按Ctrl+Alt+TCtrl+Alt+T組合鍵，在彈出的對話框中將【行數(shù)】組合鍵，在彈出的對話框中將【行數(shù)】設(shè)置為設(shè)置為5 5，將【列】設(shè)置為，將【列】設(shè)置為1 1，將【表格寬度】設(shè)置為，將【表格寬度】設(shè)置為500500像素，將【邊框粗像素，將【邊框粗細(xì)】設(shè)置為細(xì)】設(shè)置為0 0像素，如圖像素，如圖3.63.6所示。所示。(2) (2) 設(shè)置完成后單擊【確定】按鈕，即可在表格中插入表格，如圖設(shè)置完成后單擊【確定】按鈕，即可在表格中插入

13、表格，如圖3.73.7所示。所示。圖圖3.6 3.6 【表格】對話框【表格】對話框 圖圖3.7 3.7 插入單元格插入單元格 3.1.3 3.1.3 插入嵌套表格插入嵌套表格 (3) (3) 選擇插入的表格，在【屬性】面板中將【高】設(shè)置為選擇插入的表格，在【屬性】面板中將【高】設(shè)置為2727，如圖，如圖3.83.8所示。所示。圖圖3.8 3.8 設(shè)置嵌套表格的高度設(shè)置嵌套表格的高度 3.2 3.2 表格基本操作表格基本操作 在網(wǎng)站設(shè)計(jì)時(shí)我們要清楚地了解設(shè)置表格基本操作，使我們的網(wǎng)頁樣式在網(wǎng)站設(shè)計(jì)時(shí)我們要清楚地了解設(shè)置表格基本操作，使我們的網(wǎng)頁樣式更加方面瀏覽者瀏覽網(wǎng)頁中的內(nèi)容。下面將重點(diǎn)介紹表

14、格的以下基本操作。更加方面瀏覽者瀏覽網(wǎng)頁中的內(nèi)容。下面將重點(diǎn)介紹表格的以下基本操作。3.2.1 3.2.1 選擇表格選擇表格 在網(wǎng)頁中，表格用于網(wǎng)頁內(nèi)容的排版，在使用表格具體布局網(wǎng)頁之前，首先在網(wǎng)頁中，表格用于網(wǎng)頁內(nèi)容的排版，在使用表格具體布局網(wǎng)頁之前，首先應(yīng)該學(xué)習(xí)一下表格的基本操作。在選擇表格對象的時(shí)候，可以選擇整個(gè)表格、表應(yīng)該學(xué)習(xí)一下表格的基本操作。在選擇表格對象的時(shí)候，可以選擇整個(gè)表格、表格的行或列，同時(shí)也可以選擇一個(gè)或多個(gè)單獨(dú)的單元格。格的行或列，同時(shí)也可以選擇一個(gè)或多個(gè)單獨(dú)的單元格。 打開隨書附帶光盤中的打開隨書附帶光盤中的CDROMCha03CDROMCha03素材素材 表格基本操

15、作表格基本操作.html.html素材文件。素材文件。3.2.1 3.2.1 選擇表格選擇表格1. 1. 選擇整個(gè)表格選擇整個(gè)表格 選擇表格，是編輯表格的第一步，下面為選擇表格的幾種方法：選擇表格，是編輯表格的第一步，下面為選擇表格的幾種方法：n單擊表格上的任意一條邊框線，即可選擇整個(gè)表格，如圖單擊表格上的任意一條邊框線，即可選擇整個(gè)表格，如圖3.93.9所示。所示。n將光標(biāo)置于表格內(nèi)的任意位置上，在菜單欄中選擇【修改】將光標(biāo)置于表格內(nèi)的任意位置上，在菜單欄中選擇【修改】| |【表格】【表格】| |【選【選擇表格】密令，如圖擇表格】密令，如圖3.103.10所示。所示。n將光標(biāo)置于表格的任意位

16、置，單擊文檔窗口左下角的將光標(biāo)置于表格的任意位置，單擊文檔窗口左下角的標(biāo)簽，如圖標(biāo)簽，如圖3.113.11所示。所示。圖圖3.10 3.10 選擇【選擇表格】命令選擇【選擇表格】命令 圖圖3.9 3.9 單擊邊框線單擊邊框線 圖圖3.11 3.11 選擇標(biāo)簽選擇標(biāo)簽 3.2.1 3.2.1 選擇表格選擇表格2. 2. 選擇表格的行或列選擇表格的行或列 當(dāng)用戶想要選擇表格中的某一行或列時(shí)，可以使用以下幾種方法：當(dāng)用戶想要選擇表格中的某一行或列時(shí)，可以使用以下幾種方法：n當(dāng)鼠標(biāo)位于行首或列時(shí)，此時(shí)鼠標(biāo)會處于當(dāng)鼠標(biāo)位于行首或列時(shí)，此時(shí)鼠標(biāo)會處于 或或 的形狀，單擊鼠標(biāo)左鍵即可以的形狀，單擊鼠標(biāo)左鍵即

17、可以選中行或列，如圖選中行或列，如圖3.123.12、3.133.13所示。所示。圖圖3.12 3.12 選擇行選擇行 圖圖3.13 3.13 選擇列選擇列 n 選擇行或列的最開始的表格，按住鼠標(biāo)不放，拖動鼠標(biāo)至最后一個(gè)單元格，即選擇行或列的最開始的表格，按住鼠標(biāo)不放，拖動鼠標(biāo)至最后一個(gè)單元格，即n 可選擇行或列?？蛇x擇行或列。n 選擇某一行或列的第一個(gè)單元格，按住選擇某一行或列的第一個(gè)單元格，按住ShiftShift鍵然后單擊該行或列的最后一個(gè)鍵然后單擊該行或列的最后一個(gè)n 單元格，即可選擇該行或列。單元格，即可選擇該行或列。3.2.1 3.2.1 選擇表格選擇表格 3. 3. 選擇單元格選

18、擇單元格n按住鼠標(biāo)左鍵并拖動，可選擇單元格。按住鼠標(biāo)左鍵并拖動，可選擇單元格。n將光標(biāo)放置在單元格中，連續(xù)單擊三次即可選擇該單元格。將光標(biāo)放置在單元格中，連續(xù)單擊三次即可選擇該單元格。n將光標(biāo)插入要選擇的單元格中，按住將光標(biāo)插入要選擇的單元格中，按住ShiftShift鍵在該單元格以外的附近單鍵在該單元格以外的附近單 擊鼠標(biāo)左鍵，即可選中該單元格。擊鼠標(biāo)左鍵，即可選中該單元格。n在要選擇的單元格中插入光標(biāo)，然后單擊文檔窗口界面下方的【在要選擇的單元格中插入光標(biāo)，然后單擊文檔窗口界面下方的【】標(biāo)】標(biāo)簽，即可選擇該單元格，如圖簽，即可選擇該單元格，如圖3.143.14所示。所示。圖圖3.14 3.

19、14 選擇【選擇【tdtd】標(biāo)簽】標(biāo)簽 3.2.2 3.2.2 改變表格和單元格的大小改變表格和單元格的大小 當(dāng)調(diào)整整個(gè)表格的大小時(shí)，表格中的所有單元格都會按比例改變大小。當(dāng)調(diào)整整個(gè)表格的大小時(shí)，表格中的所有單元格都會按比例改變大小。如果表格的單元格指定了明確的寬度或高度，則調(diào)整表格大小將更改文檔窗如果表格的單元格指定了明確的寬度或高度，則調(diào)整表格大小將更改文檔窗口中的單元格的可視大小，但不改變這些單元格的指定寬度和高度?？谥械膯卧竦目梢暣笮。桓淖冞@些單元格的指定寬度和高度。 再次打開表格基本操作再次打開表格基本操作.tml.tml素材文件，改變表格和單元格大小的操作方素材文件，改變表格

20、和單元格大小的操作方法如下：法如下：n選擇要改變大小的表格，然后將光標(biāo)放置在表格選擇框關(guān)鍵點(diǎn)上，當(dāng)光標(biāo)變選擇要改變大小的表格，然后將光標(biāo)放置在表格選擇框關(guān)鍵點(diǎn)上，當(dāng)光標(biāo)變?yōu)闉?狀態(tài)時(shí)，單擊鼠標(biāo)左鍵并拖動鼠標(biāo)，即可改變表格大小，如圖狀態(tài)時(shí)，單擊鼠標(biāo)左鍵并拖動鼠標(biāo)，即可改變表格大小，如圖3.153.15所示。所示。n選擇要改變大小的表格，在屬性面板【寬度】文本框中輸入數(shù)值，在文本框選擇要改變大小的表格，在屬性面板【寬度】文本框中輸入數(shù)值，在文本框右側(cè)下拉列表中選擇單位，可以調(diào)整表格寬度，如圖右側(cè)下拉列表中選擇單位，可以調(diào)整表格寬度，如圖3.163.16所示。所示。圖圖3.15 3.15 拖拽鼠標(biāo)更

21、改表格的大小拖拽鼠標(biāo)更改表格的大小圖圖3.16 3.16 設(shè)置表格屬性改變表格的大小設(shè)置表格屬性改變表格的大小3.2.2 3.2.2 改變表格和單元格的大小改變表格和單元格的大小n通過拖動單元格邊框，可以改變單元格大小，如圖通過拖動單元格邊框，可以改變單元格大小，如圖3.173.17所示。所示。n將光標(biāo)置于要改變大小的單元格內(nèi)，在【屬性】面板中設(shè)置【寬】、將光標(biāo)置于要改變大小的單元格內(nèi)，在【屬性】面板中設(shè)置【寬】、【高】的數(shù)值，即可調(diào)整單元格的大小，如圖【高】的數(shù)值，即可調(diào)整單元格的大小，如圖3.183.18所示所示圖圖3.17 3.17 拖動單元格邊框調(diào)整單元格的大小拖動單元格邊框調(diào)整單元格

22、的大小 圖圖3.18 3.18 在【屬性】面板中設(shè)置單元格的大小在【屬性】面板中設(shè)置單元格的大小 3.2.3 3.2.3 添加或刪除行或列添加或刪除行或列 在做一些大型的網(wǎng)頁時(shí)，創(chuàng)建的網(wǎng)格往往不能供我們使用，或者有多余的行在做一些大型的網(wǎng)頁時(shí)，創(chuàng)建的網(wǎng)格往往不能供我們使用，或者有多余的行或列，那么，這樣的情況下我們就需要將多余的行或列進(jìn)行刪除，或者是添加我或列，那么，這樣的情況下我們就需要將多余的行或列進(jìn)行刪除，或者是添加我們需要的行或列。們需要的行或列。1. 1. 選擇單元格選擇單元格 面介紹如何添加或刪除表格的行或列。面介紹如何添加或刪除表格的行或列。(1) (1) 繼續(xù)使用【表格基本操作

23、繼續(xù)使用【表格基本操作.html.html】素材文件，將光標(biāo)插入需要添加行的單元】素材文件，將光標(biāo)插入需要添加行的單元格中，在菜單欄中選擇【修改】格中，在菜單欄中選擇【修改】| |【表格】【表格】| |【插入行】命令，如圖【插入行】命令，如圖3.193.19所示。所示。(2) (2) 執(zhí)行完該命令后便可以發(fā)現(xiàn)，表格由原來的執(zhí)行完該命令后便可以發(fā)現(xiàn)，表格由原來的8 8行變成了現(xiàn)在的行變成了現(xiàn)在的9 9行，如圖行，如圖3.203.20所示。所示。圖圖3.19 3.19 選擇【插入行】命令選擇【插入行】命令圖圖3.20 3.20 插入行后的效果插入行后的效果3.2.3 3.2.3 添加或刪除行或列添

24、加或刪除行或列 使用同樣的方法插入列，我們還可以在菜單欄中選擇【修改】使用同樣的方法插入列，我們還可以在菜單欄中選擇【修改】| |【表格】【表格】| |【插入行或列】命令，打開【插入行或列】對話框。在該對話框中可設(shè)置要【插入行或列】命令，打開【插入行或列】對話框。在該對話框中可設(shè)置要插入的行數(shù)或列數(shù)以及插入行或列的位置，單擊【確定】按鈕，即可插入行插入的行數(shù)或列數(shù)以及插入行或列的位置，單擊【確定】按鈕，即可插入行或列，如圖或列，如圖3.213.21所示。所示。圖圖3.21 3.21 【插入行或列】命令【插入行或列】命令 2. 2. 刪除行或列刪除行或列 將光標(biāo)處于要刪除行的任意一個(gè)單元格內(nèi)，在

25、菜單欄中選擇【修改】將光標(biāo)處于要刪除行的任意一個(gè)單元格內(nèi)，在菜單欄中選擇【修改】| |【表【表格】格】| |【刪除行】命令，即可將當(dāng)前行刪除，如圖【刪除行】命令，即可將當(dāng)前行刪除，如圖3.223.22所示。刪除列的方法所示。刪除列的方法與刪除行的方法相同。與刪除行的方法相同。圖圖3.22 3.22 選擇【刪除行】命令選擇【刪除行】命令 3.2.4 3.2.4 合并、拆分單元格合并、拆分單元格 在表格的使用過程中，有時(shí)需要通過合并、拆分單元格達(dá)到所需要的效在表格的使用過程中，有時(shí)需要通過合并、拆分單元格達(dá)到所需要的效果，下面來介紹如何添加或刪除表格行或列：果，下面來介紹如何添加或刪除表格行或列：

26、1. 1. 合并單元格合并單元格 (1) (1) 打開一個(gè)素材，在文檔中選擇要合并的單元格，在菜單欄中選擇【修改】打開一個(gè)素材，在文檔中選擇要合并的單元格，在菜單欄中選擇【修改】| |【表格】【表格】| |【合并單元格】命令，如圖【合并單元格】命令，如圖3.233.23所示。所示。(2) (2) 選擇命令后即可將單元格合并，合并后的效果如圖選擇命令后即可將單元格合并，合并后的效果如圖3.243.24所示。所示。圖圖3.23 3.23 選擇【合并單元格】命令選擇【合并單元格】命令圖圖3.24 3.24 合并單元格后的效果合并單元格后的效果3.2.4 3.2.4 合并、拆分單元格合并、拆分單元格2

27、. 2. 拆分單元格拆分單元格(1) (1) 打開一個(gè)素材，將光標(biāo)置于要拆分的單元格中，在菜單欄中選擇【修改】打開一個(gè)素材，將光標(biāo)置于要拆分的單元格中，在菜單欄中選擇【修改】| |【表格】【表格】| |【拆分單元格】命令，如圖【拆分單元格】命令，如圖3.253.25所示，所示，(2) (2) 執(zhí)行完該命令后即可打開【拆分單元格】對話框，在對話框中選擇將單元執(zhí)行完該命令后即可打開【拆分單元格】對話框，在對話框中選擇將單元格拆分為行或列，并設(shè)置拆分?jǐn)?shù)，設(shè)置完成后單擊【確定】按鈕，如圖格拆分為行或列，并設(shè)置拆分?jǐn)?shù)，設(shè)置完成后單擊【確定】按鈕，如圖3.263.26所示。所示。 圖圖3.25 3.25

28、選擇【拆分單元格】命令選擇【拆分單元格】命令圖圖3.26 3.26 【拆分單元格】對話框【拆分單元格】對話框3.2.4 3.2.4 合并、拆分單元格合并、拆分單元格 但是創(chuàng)建表格，好像并不能滿足我們的需求，我們可以重新設(shè)置表格的但是創(chuàng)建表格，好像并不能滿足我們的需求，我們可以重新設(shè)置表格的屬性。比如：表格的行數(shù)、列數(shù)、表格高度、寬度等。修改表格屬性一般在屬性。比如：表格的行數(shù)、列數(shù)、表格高度、寬度等。修改表格屬性一般在【屬性】面板中進(jìn)行?！緦傩浴棵姘逯羞M(jìn)行。 下面我們通過對打開的素材進(jìn)行修改表格屬性的操作步驟如下：下面我們通過對打開的素材進(jìn)行修改表格屬性的操作步驟如下：(1) (1) 啟動啟動

29、Dreamweaver CCDreamweaver CC軟件后，在菜單欄中選擇【文件】軟件后，在菜單欄中選擇【文件】| |【打開】命令，在【打開】命令，在對話框中選擇隨書附帶光盤中的對話框中選擇隨書附帶光盤中的CDROMCDROM素材素材Cha03Cha03裝潢公司裝潢公司.html.html素材文件，素材文件，單擊【打開】按鈕即可將其打開，如圖單擊【打開】按鈕即可將其打開，如圖3.273.27所示。所示。(2) (2) 在最下方的表格中插入一個(gè)在最下方的表格中插入一個(gè)1 1行行1 1列的單元格，如圖列的單元格，如圖3.283.28所示。所示。圖圖3.27 3.27 打開的素材文件打開的素材文

30、件圖圖3.28 3.28 插入單元格插入單元格3.2.4 3.2.4 合并、拆分單元格合并、拆分單元格 (3) (3) 將光標(biāo)置于插入的單元格中，打開【屬性】面板，切換至【將光標(biāo)置于插入的單元格中，打開【屬性】面板，切換至【CSSCSS】選項(xiàng)卡，】選項(xiàng)卡，在該選項(xiàng)卡中單擊【拆分單元格為行或列】在該選項(xiàng)卡中單擊【拆分單元格為行或列】 按鈕按鈕 ，如圖，如圖3.293.29所示。所示。(4) (4) 打開【拆分單元格】對話框，將【把單元格拆分】定義為【列】，將【列打開【拆分單元格】對話框，將【把單元格拆分】定義為【列】，將【列數(shù)】設(shè)置為數(shù)】設(shè)置為2 2，如圖，如圖3.303.30所示。所示。(5)

31、 (5) 設(shè)置完成后單擊【確定】按鈕，在文檔中觀察拆分后的單元格效果，如圖設(shè)置完成后單擊【確定】按鈕，在文檔中觀察拆分后的單元格效果，如圖3.313.31所示。所示。圖圖3.29 3.29 【屬性】面板【屬性】面板 圖圖3.30 3.30 【拆分單元格】對話框【拆分單元格】對話框圖圖3.31 3.31 拆分單元格后的效果拆分單元格后的效果3.2.4 3.2.4 合并、拆分單元格合并、拆分單元格(6) (6) 選擇拆分后的單元格，在【屬性】面板中將【高】設(shè)置為選擇拆分后的單元格，在【屬性】面板中將【高】設(shè)置為150150，【寬】設(shè)置，【寬】設(shè)置為為50%50%，如圖，如圖3.323.32所示。所

32、示。圖圖3.32 3.32 拆分單元格后的效果拆分單元格后的效果 3.3.1 CSS3.3.1 CSS的概念的概念 CSS CSS（Cascading Style SheetCascading Style Sheet）可譯為【層疊樣式表或級聯(lián)樣式表】，）可譯為【層疊樣式表或級聯(lián)樣式表】，它定義如何顯示它定義如何顯示 HTML HTML 元素，用于控制元素，用于控制WebWeb頁面的外觀。對于設(shè)計(jì)者來說，頁面的外觀。對于設(shè)計(jì)者來說，CSSCSS是一個(gè)非常靈活的工具，用戶不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)是一個(gè)非常靈活的工具，用戶不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中，而可以將所有有關(guān)文檔的樣式

33、指定內(nèi)容全部脫離出來，在行內(nèi)定義、在中，而可以將所有有關(guān)文檔的樣式指定內(nèi)容全部脫離出來，在行內(nèi)定義、在標(biāo)題中定義，甚至作為外部樣式文件供標(biāo)題中定義，甚至作為外部樣式文件供HTMLHTML調(diào)用。調(diào)用。3.3 3.3 什么是什么是CSSCSSCSSCSS提供了功能強(qiáng)大而全面的格式控制，是如今網(wǎng)頁制作中必不可少的格式工具。提供了功能強(qiáng)大而全面的格式控制，是如今網(wǎng)頁制作中必不可少的格式工具。3.3.2 CSS3.3.2 CSS的特點(diǎn)的特點(diǎn) CSS CSS具有以下的特點(diǎn)：具有以下的特點(diǎn)：n將將格式和結(jié)構(gòu)分離格式和結(jié)構(gòu)分離 將將設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中，設(shè)計(jì)部分剝離出來放在一個(gè)獨(dú)立樣式文件中

34、，HTMLHTML文件中只存放文本文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。信息。這樣的頁面對搜索引擎更加友好。n有效有效的控制頁面布局的控制頁面布局 HTMLHTML語言對頁面總體上的控制很有限。如精確定位、行間距或字間距等，語言對頁面總體上的控制很有限。如精確定位、行間距或字間距等，這些都可以通過這些都可以通過CSSCSS來完成。來完成。n提高提高頁面瀏覽速度頁面瀏覽速度n對于同一個(gè)頁面視覺效果，采用對于同一個(gè)頁面視覺效果，采用CSSCSS布局的頁面容量要比布局的頁面容量要比TABLETABLE編碼的頁面文編碼的頁面文件容量小得多，前者一般只有后者的件容量小得多，前者一般只有后者

35、的1/21/2大小。瀏覽器就不用去編譯大量冗大小。瀏覽器就不用去編譯大量冗長的標(biāo)簽。長的標(biāo)簽。3.3.2 CSS3.3.2 CSS的特點(diǎn)的特點(diǎn)n可同時(shí)更新許多網(wǎng)頁可同時(shí)更新許多網(wǎng)頁 沒有樣式表時(shí)，如果要更新整個(gè)站點(diǎn)中所有主體文本的字體，必須一頁一沒有樣式表時(shí)，如果要更新整個(gè)站點(diǎn)中所有主體文本的字體，必須一頁一頁的修改每個(gè)網(wǎng)頁。樣式表的主旨就是將格式和結(jié)構(gòu)分離。利用樣式表，可以頁的修改每個(gè)網(wǎng)頁。樣式表的主旨就是將格式和結(jié)構(gòu)分離。利用樣式表，可以將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個(gè)將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個(gè)CSSCSS文件，只要修改文件，只要修改CSSCSS文件中某一行，文件中某一行，整個(gè)站

36、點(diǎn)都會隨之發(fā)生變動。整個(gè)站點(diǎn)都會隨之發(fā)生變動。n瀏覽界面更加友好瀏覽界面更加友好 樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個(gè)插件時(shí)不樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個(gè)插件時(shí)不會發(fā)生中斷，或者使用舊版本的瀏覽器時(shí)不會出現(xiàn)亂碼。只要是可以識別串接會發(fā)生中斷，或者使用舊版本的瀏覽器時(shí)不會出現(xiàn)亂碼。只要是可以識別串接樣式表的瀏覽器就可以應(yīng)用它。樣式表的瀏覽器就可以應(yīng)用它。 3.4 3.4 【CSS CSS 設(shè)計(jì)器】面板設(shè)計(jì)器】面板 在在DreamweaverDreamweaver中，使用【中，使用【CSSCSS設(shè)計(jì)器】面板可以查看文檔所有的設(shè)計(jì)器】面板可以查看文檔所

37、有的CSSCSS規(guī)規(guī)則和屬性，也可以查看所選擇的頁面元素的則和屬性，也可以查看所選擇的頁面元素的CSSCSS規(guī)則和屬性。在規(guī)則和屬性。在CSSCSS面板中科面板中科研創(chuàng)建、編輯和刪除研創(chuàng)建、編輯和刪除CSSCSS設(shè)計(jì)器，還可以添加外部樣式到文檔中。設(shè)計(jì)器，還可以添加外部樣式到文檔中。 在菜單欄中選擇【窗口】在菜單欄中選擇【窗口】| |【CSSCSS設(shè)計(jì)器】命令，如圖設(shè)計(jì)器】命令，如圖3.333.33所示。打開所示。打開【CSSCSS設(shè)計(jì)器】面板。在【設(shè)計(jì)器】面板。在【CSSCSS設(shè)計(jì)器】面板中會顯示已有設(shè)計(jì)器】面板中會顯示已有CSSCSS設(shè)計(jì)器，如圖設(shè)計(jì)器，如圖3.343.34所示。所示。 圖

38、圖3.33 3.33 選擇【選擇【CSSCSS設(shè)計(jì)器】對話框設(shè)計(jì)器】對話框圖圖3.34 3.34 【CSSCSS設(shè)計(jì)器】面板設(shè)計(jì)器】面板3.5 3.5 設(shè)置設(shè)置CSSCSS屬性屬性 CSS CSS設(shè)計(jì)器用來定義字體、顏色、邊距和字間距等屬性，可以使用設(shè)計(jì)器用來定義字體、顏色、邊距和字間距等屬性，可以使用Dreamweaver CCDreamweaver CC來對所有的來對所有的CSSCSS屬性進(jìn)行設(shè)置。屬性進(jìn)行設(shè)置。CSSCSS屬性被分為屬性被分為9 9大類，分大類，分別是類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展和過度，在后面別是類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展和過度，在后

39、面的內(nèi)容中我們會對齊分別進(jìn)行介紹。的內(nèi)容中我們會對齊分別進(jìn)行介紹。 3.5.1 3.5.1 設(shè)置設(shè)置CSSCSS類型屬性類型屬性 在我們打開一個(gè)文件場景時(shí)，選擇定義好的要編輯的樣式，將【屬性】在我們打開一個(gè)文件場景時(shí)，選擇定義好的要編輯的樣式，將【屬性】面板定義為【面板定義為【CSSCSS】將【目標(biāo)規(guī)則】定義為要編輯的規(guī)則，然后單擊【編】將【目標(biāo)規(guī)則】定義為要編輯的規(guī)則，然后單擊【編輯規(guī)則】輯規(guī)則】 按鈕，即可打開當(dāng)前規(guī)則的【按鈕，即可打開當(dāng)前規(guī)則的【CSSCSS規(guī)則定義】對話框，規(guī)則定義】對話框，如圖如圖3.353.35所示。在【分類】列表框中選擇【類型】選項(xiàng)，用于設(shè)置文本的所示。在【分類】

40、列表框中選擇【類型】選項(xiàng)，用于設(shè)置文本的屬性。屬性。 圖圖3.35 3.35 【CSSCSS規(guī)則定義】對話框規(guī)則定義】對話框 3.5.1 3.5.1 設(shè)置設(shè)置CSSCSS類型屬性類型屬性在【類型】選項(xiàng)中具體參數(shù)如下：在【類型】選項(xiàng)中具體參數(shù)如下：nFont-familyFont-family：用戶可以在下拉菜單中選擇需要的字體。如果系統(tǒng)安裝了某：用戶可以在下拉菜單中選擇需要的字體。如果系統(tǒng)安裝了某種字體，但在下拉菜單中沒有顯示，可以在下拉列表中選擇【管理字體】命種字體，但在下拉菜單中沒有顯示，可以在下拉列表中選擇【管理字體】命令，如圖令，如圖3.363.36所示。所示。在打開的【管理字體】對話

41、框中選擇【自定義字體堆棧】選項(xiàng)，在【可用字在打開的【管理字體】對話框中選擇【自定義字體堆棧】選項(xiàng)，在【可用字體】窗口中選擇需要添加的字體，單擊按鈕即可添加到【選擇的字體】窗口體】窗口中選擇需要添加的字體，單擊按鈕即可添加到【選擇的字體】窗口中，然后單擊左上角的按鈕可繼續(xù)添加下一個(gè)字體。單擊【完成】確定添加中，然后單擊左上角的按鈕可繼續(xù)添加下一個(gè)字體。單擊【完成】確定添加并關(guān)閉【管理字體】對話框，如圖并關(guān)閉【管理字體】對話框，如圖3.373.37所示。所示。nFont-sizeFont-size：用于調(diào)整文本的大小。用戶可以在列表中選擇字號，也可以直：用于調(diào)整文本的大小。用戶可以在列表中選擇字號

42、，也可以直接輸入數(shù)字，然后在后面的列表中選擇單位，如圖接輸入數(shù)字，然后在后面的列表中選擇單位，如圖3.383.38所示。所示。圖圖3.36 3.36 選擇【管理字體】命令選擇【管理字體】命令圖圖3.37 3.37 【管理字體】對話框【管理字體】對話框 圖3.37 調(diào)整文本的大小 圖圖3.38 3.38 調(diào)整文本的大小調(diào)整文本的大小 3.5.1 3.5.1 設(shè)置設(shè)置CSSCSS類型屬性類型屬性 nFont-styleFont-style：提供了【：提供了【normalnormal（正常）】、【（正常）】、【ItalicItalic（斜體）】【（斜體）】【obliqueoblique（偏斜體）】和

43、【（偏斜體）】和【inheritinherit（繼承）】三種字體樣式，默認(rèn)為（繼承）】三種字體樣式，默認(rèn)為normalnormal。如圖。如圖3.3.3939所示。所示。nLine-heightLine-height：設(shè)置文本所在行的高度。該設(shè)置傳統(tǒng)上稱為：設(shè)置文本所在行的高度。該設(shè)置傳統(tǒng)上稱為【前導(dǎo)前導(dǎo)】。選擇。選擇【正常正?！窟x項(xiàng)將自動計(jì)算字體大小的行高，也可以輸入一個(gè)確切的值并選擇選項(xiàng)將自動計(jì)算字體大小的行高，也可以輸入一個(gè)確切的值并選擇一種度量單位，如圖一種度量單位，如圖3.403.40所示。所示。提提 示：示： 建議使用【點(diǎn)數(shù)（建議使用【點(diǎn)數(shù)（ptpt）】作為單位?！军c(diǎn)數(shù)】是計(jì)算機(jī)字

44、體的標(biāo)準(zhǔn)單位，）】作為單位?！军c(diǎn)數(shù)】是計(jì)算機(jī)字體的標(biāo)準(zhǔn)單位，這一單位的好處是設(shè)定的字號會隨著顯示器分辨率的變化而調(diào)整大小，這一單位的好處是設(shè)定的字號會隨著顯示器分辨率的變化而調(diào)整大小，可以防止在不同分辨率的顯示器中字體大小不一致?？梢苑乐乖诓煌直媛实娘@示器中字體大小不一致。圖圖3.39 3.39 字體樣式字體樣式 圖圖3.40 3.40 調(diào)整文本的大小調(diào)整文本的大小 3.5.1 3.5.1 設(shè)置設(shè)置CSSCSS類型屬性類型屬性 nText-decorationText-decoration：向文本中添加下劃線、上劃線、刪除線，或：向文本中添加下劃線、上劃線、刪除線，或使文本閃爍。正常文本的默

45、認(rèn)設(shè)置是【無】。鏈接的默認(rèn)設(shè)置是使文本閃爍。正常文本的默認(rèn)設(shè)置是【無】。鏈接的默認(rèn)設(shè)置是【下劃線】。將鏈接設(shè)置為【無】時(shí)，可以通過定義一個(gè)特殊的【下劃線】。將鏈接設(shè)置為【無】時(shí)，可以通過定義一個(gè)特殊的類刪除鏈接中的下劃線，如圖類刪除鏈接中的下劃線，如圖3.413.41所示。所示。nFont-weightFont-weight：對字體應(yīng)用特定或相對的粗細(xì)量。【正?！康扔冢簩ψ煮w應(yīng)用特定或相對的粗細(xì)量?！菊！康扔?00400；【粗體】等于；【粗體】等于700700。nFont-variantFont-variant：設(shè)置文本的小型大寫字母變體。：設(shè)置文本的小型大寫字母變體。Dreamweaver

46、Dreamweaver不不在文檔窗口中顯示該屬性。在文檔窗口中顯示該屬性。nText-transformText-transform：將選定內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽模簩⑦x定內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。本設(shè)置為全部大寫或小寫。nColorColor：設(shè)置文本顏色：設(shè)置文本顏色 圖圖3.41 3.41 字體樣式字體樣式 3.5.2 3.5.2 設(shè)置設(shè)置CSSCSS背景屬性背景屬性 在【分類】列表框中選擇【背景】選項(xiàng)，背景屬性的功能主要是在在【分類】列表框中選擇【背景】選項(xiàng)，背景屬性的功能主要是在網(wǎng)頁元素后面加入固定的背景色或圖像。網(wǎng)頁元素后面加入固定的背景色

47、或圖像。nBackground-colorBackground-color：設(shè)置元素的背景顏色，如圖：設(shè)置元素的背景顏色，如圖3.423.42所示所示nBackground-imageBackground-image：設(shè)置元素的背景圖像，單擊該選項(xiàng)右側(cè)的【瀏覽】按：設(shè)置元素的背景圖像，單擊該選項(xiàng)右側(cè)的【瀏覽】按鈕，在彈出的對話框中選擇要設(shè)置的背景圖像。鈕，在彈出的對話框中選擇要設(shè)置的背景圖像。 圖圖3.42 3.42 設(shè)置元素的背景顏色設(shè)置元素的背景顏色3.5.2 3.5.2 設(shè)置設(shè)置CSSCSS背景屬性背景屬性 nBackground-repeatBackground-repeat：確定是否

48、以及如何重復(fù)背景圖像，包括如下：確定是否以及如何重復(fù)背景圖像，包括如下4 4個(gè)選項(xiàng)，個(gè)選項(xiàng)，如圖如圖3.433.43所示。所示。 圖圖3.43 3.43 背景圖像重復(fù)方式背景圖像重復(fù)方式 u 【no-repeatno-repeat（不重復(fù)）】：用于在元素開始處顯示一次圖像。（不重復(fù)）】：用于在元素開始處顯示一次圖像。u【repeatrepeat（重復(fù)）】：用于在元素的后面水平和垂直平鋪圖像。（重復(fù)）】：用于在元素的后面水平和垂直平鋪圖像。u【repeat-xrepeat-x（水平重復(fù)）】：用于在元素前將圖像在水平方向重復(fù)排列。（水平重復(fù)）】：用于在元素前將圖像在水平方向重復(fù)排列。u【repea

49、t-yrepeat-y（垂直重復(fù)）】：用于在元素前將圖像在垂直方向重復(fù)排列。（垂直重復(fù)）】：用于在元素前將圖像在垂直方向重復(fù)排列。 選用水平重復(fù)或垂直重復(fù)后，圖像都會被剪裁以適合元素的邊界。選用水平重復(fù)或垂直重復(fù)后，圖像都會被剪裁以適合元素的邊界。3.5.2 3.5.2 設(shè)置設(shè)置CSSCSS背景屬性背景屬性nBackground-attachmentBackground-attachment：確定背景圖像是固定在它的原始位置還是隨內(nèi)：確定背景圖像是固定在它的原始位置還是隨內(nèi)容一起滾動，如圖容一起滾動，如圖3.443.44所示。所示。nBackground-positionBackground-

50、position（X/YX/Y）：指定背景圖像相對于元素的初始位置?？桑褐付ū尘皥D像相對于元素的初始位置?？捎糜趯⒈尘皥D像與頁面中心垂直（用于將背景圖像與頁面中心垂直（Y Y）和水平（）和水平（X X）對齊。如果附件屬性為）對齊。如果附件屬性為【固定固定】，則位置相對于文檔窗口而不是元素，如圖，則位置相對于文檔窗口而不是元素，如圖3.453.45所示。所示。圖圖3.44 3.44 背景圖像滾動方式背景圖像滾動方式 圖圖3.45 3.45 指定背景圖像相對于元素的初始位置指定背景圖像相對于元素的初始位置 3.5.3 3.5.3 設(shè)置設(shè)置CSSCSS區(qū)塊屬性區(qū)塊屬性 【分類】列表框中選擇【區(qū)塊】

51、選項(xiàng)，【分類】列表框中選擇【區(qū)塊】選項(xiàng)，CSSCSS中的區(qū)塊屬性指的是網(wǎng)頁中中的區(qū)塊屬性指的是網(wǎng)頁中的文本、圖像、層等替代元素，它主要用于控制塊中內(nèi)容的間距、對齊方式的文本、圖像、層等替代元素，它主要用于控制塊中內(nèi)容的間距、對齊方式和文字縮進(jìn)等。和文字縮進(jìn)等。nWord-spacingWord-spacing：調(diào)整單詞之間的距離。若要設(shè)置特定的值，在其下拉列表中：調(diào)整單詞之間的距離。若要設(shè)置特定的值，在其下拉列表中選擇【值】選項(xiàng)，然后輸入一個(gè)數(shù)值，并在右側(cè)的下拉列表中選擇度量單位，選擇【值】選項(xiàng)，然后輸入一個(gè)數(shù)值，并在右側(cè)的下拉列表中選擇度量單位，如圖如圖3.463.46所示。所示。nLett

52、er-spacingLetter-spacing：增加或減小字母或字符的間距。若要減少字符間距，可指：增加或減小字母或字符的間距。若要減少字符間距，可指定一個(gè)負(fù)值。字母間距用于設(shè)置覆蓋對齊的文本設(shè)置。定一個(gè)負(fù)值。字母間距用于設(shè)置覆蓋對齊的文本設(shè)置。nVertical-alignVertical-align：指定應(yīng)用它的元素的垂直對齊方式。僅當(dāng)應(yīng)用于：指定應(yīng)用它的元素的垂直對齊方式。僅當(dāng)應(yīng)用于標(biāo)標(biāo)簽時(shí)，簽時(shí)，DreamweaverDreamweaver才在文檔窗口中顯示該屬性。才在文檔窗口中顯示該屬性。nText-alignText-align：設(shè)置元素中的文本對齊方式，如圖：設(shè)置元素中的文本對

53、齊方式，如圖3.473.47所示。所示。圖圖3.46 3.46 調(diào)整單詞之間的距離調(diào)整單詞之間的距離 圖圖3.47 3.47 設(shè)置文字對齊方式設(shè)置文字對齊方式3.5.3 3.5.3 設(shè)置設(shè)置CSSCSS區(qū)塊屬性區(qū)塊屬性n Text-indentText-indent：指定第一行文本縮進(jìn)的程度。可以使用負(fù)值創(chuàng)建凸出，但：指定第一行文本縮進(jìn)的程度?？梢允褂秘?fù)值創(chuàng)建凸出，但顯示取決于瀏覽器。僅當(dāng)標(biāo)簽應(yīng)用于塊級元素時(shí)，顯示取決于瀏覽器。僅當(dāng)標(biāo)簽應(yīng)用于塊級元素時(shí)，Dreamweaver Dreamweaver 才在文檔才在文檔窗口中顯示該屬性。窗口中顯示該屬性。nWhite-spaceWhite-spa

54、ce：確定如何處理元素中的空白，包括：確定如何處理元素中的空白，包括3 3個(gè)選項(xiàng)，個(gè)選項(xiàng)，【正常正常】收縮收縮空白；空白；【保留保留】的處理方式與文本被括在的處理方式與文本被括在prepre標(biāo)簽中一樣（即保留所有空標(biāo)簽中一樣（即保留所有空白，包括空格、制表符和回車）；白，包括空格、制表符和回車）；【不換行不換行】指定僅當(dāng)遇到指定僅當(dāng)遇到brbr標(biāo)簽時(shí)文本標(biāo)簽時(shí)文本才換行。才換行。DreamweaverDreamweaver不在文檔窗口中顯示該屬性，如圖不在文檔窗口中顯示該屬性，如圖3.483.48所示。所示。nDisplayDisplay：指定是否顯示以及如何顯示元素，選擇：指定是否顯示以及如

55、何顯示元素，選擇【無無】將會關(guān)閉該樣式將會關(guān)閉該樣式被指定的元素的，如圖被指定的元素的，如圖3.493.49所示。所示。圖圖3.48 3.48 處理元素中的空白處理元素中的空白圖圖3.49 3.49 設(shè)置是否顯示元素和元素的表現(xiàn)形式設(shè)置是否顯示元素和元素的表現(xiàn)形式3.5.4 3.5.4 設(shè)置設(shè)置CSSCSS方框?qū)傩苑娇驅(qū)傩詧D圖3.51 3.51 定義定義DivDiv邊邊 在【分類】列表框中選擇【方框】選項(xiàng)，可以設(shè)置控制元素在頁面上的在【分類】列表框中選擇【方框】選項(xiàng)，可以設(shè)置控制元素在頁面上的放置方式的標(biāo)簽和屬性。放置方式的標(biāo)簽和屬性。 在【方框】選項(xiàng)中具體參數(shù)如下：在【方框】選項(xiàng)中具體參數(shù)如

56、下：nWidthWidth與與HeightHeight：用于設(shè)置元素的寬度和高度。：用于設(shè)置元素的寬度和高度。nFloatFloat：用于設(shè)置文字等對象的指環(huán)繞效果。選擇【右對齊】，對象居右，：用于設(shè)置文字等對象的指環(huán)繞效果。選擇【右對齊】，對象居右，文字等內(nèi)容從另一側(cè)環(huán)繞對象；選擇【左對齊】，對象居左，文字等內(nèi)容從文字等內(nèi)容從另一側(cè)環(huán)繞對象；選擇【左對齊】，對象居左，文字等內(nèi)容從另一側(cè)環(huán)繞；選擇【無】則取消環(huán)繞效果，如圖另一側(cè)環(huán)繞；選擇【無】則取消環(huán)繞效果，如圖3.503.50所示。所示。nClearClear：定義不允許：定義不允許DivDiv的邊。如果清除邊上出現(xiàn)的邊。如果清除邊上出現(xiàn)D

57、ivDiv，則帶清除設(shè)置的元素，則帶清除設(shè)置的元素移到該移到該DivDiv的下方，如圖的下方，如圖3.513.51所示。所示。圖圖3.50 3.50 設(shè)置文字等對象的指環(huán)繞效果設(shè)置文字等對象的指環(huán)繞效果3.5.4 3.5.4 設(shè)置設(shè)置CSSCSS方框?qū)傩苑娇驅(qū)傩詎PaddingPadding：指定元素內(nèi)容與元素邊框（如果沒有邊框，則為邊距）之間的間：指定元素內(nèi)容與元素邊框（如果沒有邊框，則為邊距）之間的間距。取消選中【全部相同】復(fù)選框可設(shè)置元素各個(gè)邊的填充；選中【全部相距。取消選中【全部相同】復(fù)選框可設(shè)置元素各個(gè)邊的填充；選中【全部相同】復(fù)選框可將相同的填充屬性設(shè)置為應(yīng)用于元素的【上】、【右】

58、、【下】同】復(fù)選框可將相同的填充屬性設(shè)置為應(yīng)用于元素的【上】、【右】、【下】和【左】側(cè)。和【左】側(cè)。nMarginMargin：指定一個(gè)元素的邊框（如果沒有邊框，則為填充）與另一個(gè)元素之：指定一個(gè)元素的邊框（如果沒有邊框，則為填充）與另一個(gè)元素之間的間距。僅當(dāng)應(yīng)用于塊級元素（段落、標(biāo)題、列表等）時(shí)，間的間距。僅當(dāng)應(yīng)用于塊級元素（段落、標(biāo)題、列表等）時(shí)，DreamweaverDreamweaver才在文檔窗口中顯示該屬性。取消選中【全部相同】復(fù)選框可設(shè)置元素各個(gè)才在文檔窗口中顯示該屬性。取消選中【全部相同】復(fù)選框可設(shè)置元素各個(gè)邊的邊距；選中【全部相同】復(fù)選框可將相同的邊距屬性設(shè)置為應(yīng)用于元素邊的

59、邊距；選中【全部相同】復(fù)選框可將相同的邊距屬性設(shè)置為應(yīng)用于元素的【上】、【右】、【下】和【左】側(cè)。的【上】、【右】、【下】和【左】側(cè)。3.5.5 3.5.5 設(shè)置設(shè)置CSSCSS邊框?qū)傩赃吙驅(qū)傩?在【分類】列表框中選擇【邊框】選項(xiàng)，可以定義元素周圍邊框的設(shè)置。在【分類】列表框中選擇【邊框】選項(xiàng)，可以定義元素周圍邊框的設(shè)置。如圖如圖3.523.52所示。所示。 在【邊框】選項(xiàng)中具體參數(shù)如下：在【邊框】選項(xiàng)中具體參數(shù)如下：nStyleStyle：用于設(shè)置邊框的樣式外觀，樣式的顯示方式取決于瀏覽器。：用于設(shè)置邊框的樣式外觀，樣式的顯示方式取決于瀏覽器。DreamweaverDreamweaver在文

60、檔窗口中將所有樣式呈現(xiàn)為實(shí)線。其中的在文檔窗口中將所有樣式呈現(xiàn)為實(shí)線。其中的【全部相同全部相同】復(fù)復(fù)選框表示將相同的邊框樣式屬性設(shè)置為應(yīng)用于元素的選框表示將相同的邊框樣式屬性設(shè)置為應(yīng)用于元素的【上上】、【右右】、【下下】和和【左左】側(cè)側(cè)。nWidthWidth：用于設(shè)置元素邊框的粗細(xì)。其中的：用于設(shè)置元素邊框的粗細(xì)。其中的【全部相同全部相同】復(fù)選框表示將相同復(fù)選框表示將相同的邊框?qū)挾仍O(shè)置為應(yīng)用于元素的的邊框?qū)挾仍O(shè)置為應(yīng)用于元素的【上上】、【右右】、【下下】和和【左左】側(cè)側(cè)。nColorColor：用于設(shè)置邊框?qū)?yīng)位置的顏色?？梢苑謩e設(shè)置每條邊框的顏色，但：用于設(shè)置邊框?qū)?yīng)位置的顏色?？梢苑謩e設(shè)