Dreamweaver CC 2014如何定義背景樣式?
定義背景樣式
使用“頁面屬性”對話框可以定義網(wǎng)頁背景顏色和背景圖像,實際就是利用CSS為<body>標簽
【操作步驟】
第 1 步,啟動 Dreamweaver CC,打開orig.html 文件,另卷為 effect.html。
第2步,選擇“插入” 結(jié)構(gòu)” |Div命令,打開“插入Div標簽”對話框,忽略該對話框設置, 直接單擊“新建CSS規(guī)則”按鈕,打開“新建CSS規(guī)則”對話框,設置選擇器類型為“ID (僅應用 于一個HTML元素)”,并把樣式保存在文檔內(nèi)部,設置“規(guī)則定義”為“(僅限該文檔)”。
第3步,單擊“確定”按鈕,打開CSS規(guī)則定義對話框,在左側(cè)“分類”列表框中選擇“背景” 選項,然后在右側(cè)選項區(qū)域設置背景CSS樣式,如圖所示。
(1) Background-color (背景顏色)下拉列表框:設置指定頁面元素的背景色。
(2) Background-image (背景圖像)下拉列表框:設置指定頁面元素的背景圖像。單擊“瀏覽,, 按鈕可以方便地選擇圖像。如果同時定義背景顏色和背景圖像,則只顯示背景圖像效果;如果沒有發(fā) 現(xiàn)背景圖像,才會顯示背景顏色。
(3) Background-repeat (重復)下拉列表框:設置當使用圖像作為背景時是否需要重復顯示, 包括以下4個選項。
no-repeat (不重復):表示只在應用樣式的元素中顯示一次該圖像。
repeat (重復):表示在應用樣式的元素背景上的水平方向和垂直方向上重復顯示該圖像。
repeat-x (橫向重復):表示在應用樣式的元素背景上的水平方向上重復顯示該圖像。
repeat-y (縱向重復):表示在應用樣式的元素背景上的垂直方向上重復顯示該圖像。
⑷Background-attachment (附件)下拉列表框:包括fixed (固定)和scroll (滾動)兩個選項, 用來設置元素的背景圖是隨對象內(nèi)容滾動的還是固定的=fixed選項為固定,scroll選項為滾動。注意 —些瀏覽器會將固定方式始終作為滾動方式處理,如IE7及其以下版本的瀏覽器。
(5) Background-position(X) C水平位置)下拉列表框:設置背景圖像相對于應用樣式的元素的 水平位置,包括left (左對齊)、right (右對齊)和center (居中對齊)選項,也可以直接輸入數(shù)值。 如果輸入數(shù)值,還可以在右邊的下拉列表框中選擇數(shù)值單位,常用單位為px。如果前面的 Background-attachment設置為fixed,則元素的位置是相對于文檔窗口,而不是元素本身的。
(6) Background-position(Y)(垂直位置)下拉列表框:設置背景圖像相對于應用樣式的元素的 垂直位置,包括top (頂部)、bottom (底部)和center (居中對齊)選項,也可以直接輸入數(shù)值,并 在右邊的下拉列表框中選擇數(shù)值單位。如果前面的Background-attacinment設置為fixed,則元素的位 置是相對于文檔窗口,而不是元素本身的。
例如,在“背景”選項中選擇一張背景圖像,設置Background-repeat為no-repeat、Background- position(X)和 Background-position(Y)都為 center。
第4步,定義完畢后,單擊“確定”按鈕關閉對話框,回到文檔編輯狀態(tài),保存文件,按F12 鍵在瀏覽器中預覽網(wǎng)頁。
點擊加載更多評論>>