Dreamweaver8.0使用CSS樣式美化頁面

查看全套“dreamweaver8.0教程”

在“CSS規則對話方塊”中，我們可以通過類型、背景、區塊、方框、邊框、列表、定位和擴充項的設定，來美化我們的頁面，當然啦，我們在定義某個CSS樣式的時候，不需要對每一個項都進行設定，需要什麼效果，選擇相應的項進行設定就可以了。

1、文本樣式的設定

建立CSS樣式, “選取器類型”為類，名稱為 “style1”定義在“僅對該文檔”。儲存至網站根目錄下的CSS檔案夾內，彈出“CSS規則定義”對話方塊，預設顯示的就是對文本進行設定的“類型”項。

字型：可以在下拉式功能表種選擇相應的字型。

大小：大小就是字型大小，可以直接填入數字，然後選擇單位。

樣式：設定文字的外觀，包括正常、斜體、偏斜體。

行高：這項設定在網頁製作種很常用。設定行高，可以選擇“正常”，讓電腦自動調整行高，也可以使用數值和單位結合的形式自行設定。需要注意的是，單位應該和文字的單位一致，行高的數值是包括字型大小數值在內的。例如，文字設定為12pt，如果要建立一倍行距，則行高應該為24pt。

變數：在英文種，大寫字母的字型大小一般比較大，採用“變數”中的“小型大寫字母”設定，可以縮小大寫字母。

顏色：設定文字的色彩。

2、背景樣式的設定

在HTML中，背景只能使用單一的色彩或利用映像水平垂直方向的平鋪。使用CSS之後，有了更加靈活的設定。

在CSS規則定義”對話方塊左側選擇“背景”項，可以在右邊地區設定CSS樣式的背景格式。

背景顏色：選擇固定色作為背景。

背景映像：直接填寫背景映像的路徑，或單擊“瀏覽”按鈕找到背景映像的位置。

重複：在使用映像作為背景的時，可以使用此項設定背景映像的重複方式，包括“不重複”、“重複”、“橫向重複”、和“縱向重複“。

附件：選擇映像做背景的時候，可以設定映像是否跟隨網頁一同滾動。

水平位置：設定水平方向的位置，可以“靠左對齊“靠右對齊”、“置中”。還可以設定數值與單位結合表示位置的方式，比較常用的是像素單位。

垂直位置：可以選擇“頂部”、“底部”、“置中”。還可以設定數值和單位結合表示位置的方式。

3、區塊樣式設定

在CSS規則定義”對話方塊左側選擇“區塊”項，可以在右邊地區設定CSS樣式的區塊格式。

單詞間距“英文單詞之間的距離，一般選擇預設設定。

字母間距：設定英文字母間距，使用正值為增加字母間距，使用負值為減小字母間距。

垂直對齊：設定對象的垂直對齊。

文本對齊：設定文本的水平對齊。

文字縮排：這是最重要的項目。中文文字的首行縮排就是由它來實現的。首先填入具體的數值，然後選擇單位。文字的縮排和字型大小要保持統一。如字型大小為12px，像建立兩個中文自的縮排效果，文字縮排就應該為18px。

空格：對原始碼文字空格的控制。選擇“正常”，忽略原始碼文字之間的所有空格。選擇“保留”，將保留原始碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵建立的空格。

顯示：制定是否以及如何顯示元素。選擇“無”則關閉它被制定給的元素的顯示。在實際控制中很少使用。

4、方框樣式的設定

在前面我們設定過映像的大小、設定映像水平和垂直方向上的空白地區、設定映像是否有文字環繞效果等。方框設定進一步完善、豐富了這些設定。

在CSS規則定義”對話方塊左側選擇“方框”項，可以在右邊地區設定CSS樣式的方框格式。

寬：通過數值和單位設定對象的寬度。

高：通過設定和單位設定對象的高度。

浮動：實際就是文字等對象的環繞效果。選擇“靠右對齊”、對象居右。文字等內容從另外一側環繞對象。選擇“靠左對齊”。對象居左，文字等內容從另一側環繞。“無”取消環繞效果。

清除：規定對象的一側不許有層。可以通過選擇“靠左對齊”、“靠右對齊”，選擇不允許出現層的一側。如果在清除層的一側有層，對象將自動移到層的下面。“兩者”是指左右都不允許出現層。“無”是不限制層的出現。

“填充”和“邊界”：如果對象設定了邊框，“填充”是指邊框和其中內容之間的空白地區；“邊界”是指邊框外側的空白地區。

5、邊框樣式設定

邊框樣式設定可以給對象添加邊框，設定邊框的顏色、粗細、樣式。

在CSS規則定義”對話方塊左側選擇“邊框”項，可以在右邊地區設定CSS樣式的邊框格式。

樣式設定邊框的樣式，如果選中“全部相同”複選框，則只需要設定“上”樣式，其它方向的樣式與“上”相同。

寬度：設定4個方向邊框的寬度。可以選擇相對值：細、中、粗。也可以設定邊框的寬度值和單位。

顏色：設定邊框對應的顏色，如果選中“全部相同”複選框，則其他方向的設定都與“上”相同。

6、列表樣式設定

CSS中有關列表的設定豐富了列表的外觀。在CSS規則定義”對話方塊左側選擇“列表”項，可以在右邊地區設定CSS樣式的列表格式。

類型：設定引導清單項目的符號類型。可以選擇圓點、圓圈、方塊、數字、小寫羅馬數字、大寫羅馬數字、小寫字母、大寫字母、無列表符號等。

項目符號映像：可以選擇映像作為項目的引導符號，單擊右側的“瀏覽”按鈕，找到影像檔即可。選擇ul標籤可以對整個列表應用設定，選中li標籤可對單獨的項目應用。

位置：決定清單項目縮排的程度。選擇“外”，列表貼近左側邊框，選擇“內”，列表縮排。這項設定效果不明顯。

7、定位樣式設定

“定位”項實際上是對層的設定，但是因為DW提供了可視化的層製作功能，所以此項設定在實際操作中幾乎不會使用。

8、擴充樣式的設定

CSS樣式還可以實現一些擴充功能，這些功能集中在擴充面板上。這個面板主要包括3種效果：分頁、游標和過濾器。在CSS規則定義”對話方塊左側選擇“擴充”項，可以在右邊地區設定CSS樣式的擴充格式。

分頁：通過樣式來為網頁添加分頁符號。允許使用者指定在某元素前或後進行分頁。分頁的概念是列印網頁種的內容時在某指定的位置停止，然後將接下來的內容繼續列印在下一頁紙上。

游標：通過樣式改變滑鼠形狀，滑鼠放置於被此項設定修飾的地區上的時，形狀會發生改變。具體的形狀包括：Hand（手）、crosshair（交叉十字）、text（文本選擇符號）、wait（Windows的沙漏形狀）、default（預設的滑鼠形狀）、help（帶問號的滑鼠）、e-resize（向東的箭頭）、ne-resize（指向東北方的箭頭）、n-resize（向北的箭頭）、nw-resize（指向西北的箭頭）、w-resize（向西的箭頭）、sw-resize（向西南的箭頭）、s-resize（向南的箭頭）、se-resize（向東南的箭頭）、auto（正常滑鼠）。）

　　 過濾器：使用CSS語言實現過濾器（濾鏡）效果。單擊“過濾器”下拉式清單方塊旁的按鈕，可以看見有多種濾鏡效果可供選擇。

濾鏡效果	描述
Alpha	設定透明效果
Blru	設定模糊效果
Chroma	把指定的顏色設定為透明
DropShadow	設定投射陰影
FlipH	水平反轉
FlipV	垂直反轉
Glow	為對象的外邊界增加光效
Grayscale	降低圖片的彩色度
Invert	將色彩、飽和度以及亮度值完全反轉建立底片效果
Light	設定燈光投影效果
Mask	設定遮罩效果，Color指定遮罩的顏色
Shadow	設定陰影製作效果
Wave	設定水平方向和垂直方向的波動效果
Xray	設定X光照效果

查看全套“dreamweaver8.0教程”