【正文】 83 設(shè)置 CSS屬性 設(shè)置背景屬性 ? backgroundcolor：設(shè)置元素的背景顏色。 ? backgroundimage：設(shè)置元素的背景圖像。 ? backgroundrepeat：設(shè)置元素的背景圖像是否及如何排列。 ? backgroundattachment：設(shè)置背景圖像是隨元素內(nèi)容滾動還是固定的。 ? backgroundpositionx：設(shè)置元素的背景圖像橫坐標(biāo)位置。 ? backgroundpositiony：設(shè)置元素的背景圖像縱坐標(biāo)位置。 ? background：設(shè)置元素的背景樣式（復(fù)合屬性）。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“背景”類別來定義 CSS樣式的背景設(shè)置。 第 5章目錄 77／ 183 設(shè)置 CSS屬性 設(shè)置區(qū)塊屬性 ? wordspacing：設(shè)置元素中的單詞之間的間隔。 ? letterspacing：設(shè)置元素中的字母或字符之間的間隔。 ? verticalalign：設(shè)置元素內(nèi)容的垂直對齊方式。 ? textalign：設(shè)置元素中文本的對齊方式。 ? textindent：設(shè)置元素中首行文本的縮進量。 ? whitespace：設(shè)置元素內(nèi)空格的處理方式。 ? display：設(shè)置元素是否及如何顯示。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“區(qū)塊”類別來定義元素的間距和對齊屬性設(shè)置。 第 5章目錄 78／ 183 設(shè)置 CSS屬性 設(shè)置方框?qū)傩? ? width：設(shè)置元素的寬度。 ? height：設(shè)置元素的高度。 ? float：設(shè)置元素是否以及如何浮動。 ? clear：設(shè)置不允許有浮動元素的邊。 ? margintop、 marginright、 marginbottom和 marginleft：設(shè)置元素的上邊距、右邊距、下邊距和左邊距。 ? margin：設(shè)置元素四周的邊距。這是一個復(fù)合屬性。 ? paddingtop、 paddingright、 paddingbottom和 paddingleft：設(shè)置元素的內(nèi)容與上邊框、與右邊框、與下邊框或左邊框之間的距離。 ? padding：設(shè)置元素內(nèi)容與其四周邊框之間的距離。這是一個復(fù)合屬性。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“方框”類別對用于控制元素在頁面上的放置方式的方框?qū)傩赃M行設(shè)置。 第 5章目錄 79／ 183 設(shè)置 CSS屬性 設(shè)置邊框?qū)傩? ? bordertopwidth、 borderrightwidth、 borderbottomwidth和 borderleftwidth：設(shè)置元素上邊框、右邊框、下邊框和左邊框的寬度。 ? borderwidth：設(shè)置元素邊框的寬度。 ? bordertopstyle、 borderrightstyle、 borderbottomstyle和 borderleftstyle：設(shè)置元素上邊框、右邊框、下邊框和左邊框的樣式。 ? borderstyle：設(shè)置元素邊框的樣式。 ? bordertopcolor、 borderrightcolor、 borderbottomcolor和 borderleftcolor：設(shè)置元素上邊框、右邊框、下邊框和左邊框的顏色。 ? bordercolor：設(shè)置元素四周邊框的顏色。 ? bordertop、 borderright、 borderbottom和 borderleft：設(shè)置元素上邊框、右邊框、下邊框以及左邊框的寬度、樣式和顏色。 ? border：設(shè)置元素四周邊框的寬度、樣式和顏色。這是一個復(fù)合屬性。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“邊框”類別來設(shè)置元素周圍的邊框的設(shè)置（如寬度、顏色和樣式）。 第 5章目錄 80／ 183 設(shè)置 CSS屬性 設(shè)置列表屬性 ? liststyletype：設(shè)置列表項所使用的預(yù)設(shè)標(biāo)記。 ? liststyleimage：設(shè)置列表項標(biāo)記的圖像。 ? liststyle：設(shè)置列表項目的相關(guān)樣式。這是一個復(fù)合屬性。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“列表”類別來設(shè)置 CSS樣式列表屬性（例如項目符號大小和類型等）。 第 5章目錄 81／ 183 設(shè)置 CSS屬性 設(shè)置定位屬性 ? position：設(shè)置元素在頁面上的定位方式。 ? top、 left、 bottom和 right：設(shè)置元素與其最近一個具有定位設(shè)置的父元素頂邊、左邊、底邊和右邊相關(guān)的位置。 ? zindex：設(shè)置元素的堆疊順序。 ? visibility：設(shè)置是否顯示元素。 ? clip：設(shè)置絕對定位元素的可視區(qū)域。 ? overflow：設(shè)置當(dāng)元素的內(nèi)容超過其指定高度和寬度時如何管理內(nèi)容。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“定位”類別來設(shè)置 CSS樣式定位屬性。 第 5章目錄 82／ 183 設(shè)置 CSS屬性 設(shè)置擴展屬性 ? pagebreakbefore和 pagebreakafter：設(shè)置元素之前或之后出現(xiàn)的分頁符。 ? cursor：設(shè)置移動到元素上方的鼠標(biāo)指針采用的光標(biāo)形狀。 ? bordercollapse：設(shè)置表格的行和單元格的邊是合并在一起還是按照標(biāo)準(zhǔn)的 HTML樣式分開。 ? filter：作用于具有布局的元素（例如塊級元素）。也可以通過 filter屬性設(shè)置元素所應(yīng)用的一組濾鏡，此時可使用空格來分隔不同濾鏡。 ? 在 Dreamweaver CS5中，可以使用“ CSS規(guī)則定義”對話框的“擴展”類別來設(shè)置 CSS樣式擴展屬性。 第 5章目錄 83／ 183 第 6章 CSS+DIV頁面布局 div標(biāo)簽與 AP元素 CSS頁面布局 84／ 183 div標(biāo)簽與 AP元素 插入和編輯 div標(biāo)簽 ? 使用 div標(biāo)簽可創(chuàng)建 CSS布局塊并在文檔中對它們進行定位。如果已將包含定位樣式的現(xiàn)有 CSS樣式表附加到文檔，則可以在插入 div元素后對其應(yīng)用現(xiàn)有樣式。 ? 在頁面中插入 div元素 : 1. 在文檔窗口中，將插入點放置在要顯示 div元素的位置。 2. 選擇“插入” → “布局對象” → “ Div標(biāo)簽”。 3. 在“插入 Div標(biāo)簽”對話框中，對各個選項進行設(shè)置。 4. 單擊“確定”。 ? 查看和編輯應(yīng)用于 div元素的規(guī)則。 第 6章目錄 85／ 183 div標(biāo)簽與 AP元素 插入 AP Div元素 ? AP元素即絕對定位元素，也就是分配有絕對位置的 HTML頁面元素，它可以是 div元素或其他任何元素。 AP元素可以包含文本、圖像或其他任何內(nèi)容。既可以將 AP元素放置到其他 AP元素的前后，隱藏某些AP元素而顯示其他 AP元素，以及在屏幕上移動 AP元素，也可以在一個 AP元素中放置背景圖像，然后在該 AP元素的前面放置另一個包含帶有透明背景的文本的 AP元素。在 Dreamweaver中，可以使用 AP元素來設(shè)計頁面布局。 ? AP元素通常是絕對定位的 div元素，這是默認(rèn)插入的 AP元素類型。不過，也可以將任何 HTML元素（例如圖像）設(shè)置為 AP元素，方法是為其分配一個絕對位置。所有 AP元素（不僅僅是 AP Div）都將在 AP元素面板中列出。 ? 連續(xù)繪制一個或多個 AP Div： 1. 在插入面板的“布局”類別中，單擊“繪制 AP Div”按鈕。 2. 拖動鼠標(biāo)以繪制一個 AP Div，或按住 Ctrl鍵拖動以連續(xù)繪制多個AP Div。 第 6章目錄 86／ 183 div標(biāo)簽與 AP元素 設(shè)置 AP元素的首選參數(shù) 1. 選擇“編輯” → “首選參數(shù)”。 2. 在“首選參數(shù)”對話框中，從左側(cè)的“分類”列表中選擇“ AP元素”，然后對以下首選參數(shù)進行設(shè)置。 ? 可見性 ? 寬和高 ? 背景顏色 ? 背景圖像 ? 嵌套 3. 單擊“確定”。 第 6章目錄 87／ 183 div標(biāo)簽與 AP元素 使用嵌套的 AP Div ? 嵌套的 AP Div是指其 HTML代碼包含在另一個 AP Div的標(biāo)簽內(nèi)的 AP Div，外層 AP Div稱為內(nèi)層 AP Div的父元素。嵌套 AP Div將隨其父 AP Div一起移動，并且可以設(shè)置為繼承其父元素的可見性。通過嵌套可將多個 AP Div組合在一起。 ? 繪制嵌套的 AP Div ? 插入嵌套 AP Div AP元素基本操作 ? 選擇 AP元素 ? 調(diào)整 AP元素大小 ? 移動 AP元素 ? 更改 AP元素的堆疊順序 ? 對齊 AP元素 ? 顯示和隱藏 AP元素 第 6章目錄 88／ 183 div標(biāo)簽與 AP元素 設(shè)置 AP元素的屬性 ? 在 Dreamweaver CS5中，使用屬性檢查器可以查看或設(shè)置單個AP元素的屬性，也可以查看或設(shè)置多個 AP元素的屬性。 第 6章目錄 89／ 183 div標(biāo)簽與 AP元素 將 AP元素轉(zhuǎn)換為表格 ? 將 AP元素轉(zhuǎn)換為表格： ? 選擇“修改” → “轉(zhuǎn)換” → “將 APDiv轉(zhuǎn)換為表格”。 ? 在“將 AP Div轉(zhuǎn)換為表格”對話框中，對各個選項進行設(shè)置。 ? 將表格轉(zhuǎn)換為 AP Div： ? 選擇“修改” → “轉(zhuǎn)換” → “將表格轉(zhuǎn)換為 AP Div”。 ? 在“將表格轉(zhuǎn)換為 AP Div”對話框中，對各個選項進行設(shè)置。 第 6章目錄 90／ 183 CSS頁面布局 使用 CSS布局創(chuàng)建頁面 1. 選擇“文件” → “新建”。 2. 在“新建文檔”對話框中，選擇“空白頁”類別。 3. 在“頁面類型”列表中，選擇要創(chuàng)建的頁面類型。 4. 在“布局”列表中，選擇要使用的 CSS布局。 5. 從“文檔類型”下拉列表框中選擇文檔類型。 6. 從“布局 CSS位置”下拉列表框中選擇布局 CSS的位置。 7. 選擇布局 CSS位置。 第 6章目錄 91／ 183 CSS頁面布局 單列固定布局 單行單列固定居中布局 ? 單行單列固定居中布局由容器 div元素和它所包含的內(nèi)容 div元素組成，前者用于設(shè)置頁面布局（固定寬度，居中對齊），后者用于顯示頁面內(nèi)容。 ? HTML div class=container div class=content內(nèi)容 /div /div ? CSS body {fontsize: 12px。 background: 42413C。 color: 000。 margin: 0。 padding: 0。} .container {width: 960px。 background: FFF。 margin: 0 auto。} .content {padding: 10px。} 第 6章目錄 92／ 183 CSS頁面布局 單列固定布局 三行單列固定居中布局 ? 三行單列固定居中布局由一個外層容器 div元素和 3個內(nèi)部 div元素組成，其中外層 div元素具有固定寬度（以像素為單位）且居中對齊，內(nèi)部的 3個 div元素分別用于顯示標(biāo)題、內(nèi)容和腳注。 ? HTML div class=container div class=header標(biāo)題 /div div class=content內(nèi)容 /div div class=footer腳注 /div /div ? CSS body {fontsize: 12px。 background: 42413C。 margin: 0。 padding: 0。 color: 000。} .container {width: 960px。 background: FFF。 margin: 0 auto。} .header {background: ADB96E。} .content {padding: 10px。} .footer {padding: 10px。 background: CCC49F。} 第 6章目錄 93／ 183 CSS頁面布局 單列液態(tài)布局 單行單列液態(tài)居中布局 ? 單行單列液態(tài)居中布局由兩個 div布局塊組成，外層容器 div元素內(nèi)部僅包含一個 div元素，前者用于設(shè)置頁面布局（寬度以百分比為單位并指定有最大值和最小值，居中對齊），后者則用于顯示頁面內(nèi)容。 ? HTML div c