Dreamweaver 8 使用CSS樣式美化頁面(轉)

Dreamweaver 8 使用CSS樣式美化頁面(轉)[@more@]

　　

　　在“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光照效果