《Dreamweaver 8案例教程》課件第8章_第1頁
《Dreamweaver 8案例教程》課件第8章_第2頁
《Dreamweaver 8案例教程》課件第8章_第3頁
《Dreamweaver 8案例教程》課件第8章_第4頁
《Dreamweaver 8案例教程》課件第8章_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

本章學(xué)習(xí)目標(biāo)CSS樣式簡介8.1

創(chuàng)建CSS樣式8.2編輯CSS樣式8.3設(shè)置CSS樣式參數(shù)8.6鏈接到CSS樣式表8.4導(dǎo)出CSS樣式表8.58.1

CSS樣式簡介

CSS是CascadingStyleSheets（層疊樣式表）的簡稱。更多的人把它稱為樣式表。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁樣式的工具。借助CSS的強(qiáng)大功能，網(wǎng)頁將在我們豐富的想象力下千變?nèi)f化。層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制Web頁面內(nèi)容的外觀。使用CSS設(shè)置頁面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容（HTML代碼）位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于另一個(gè)文件（外部樣式表）或HTML文檔的另一部分（通常為<head>部分）中。使用CSS可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。8.1

CSS樣式簡介術(shù)語“層疊”是指對同一個(gè)元素或Web頁面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè)CSS規(guī)則來應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁面中的同一文本。所定義的樣式“層疊”到我們的Web頁面上的元素，并最終創(chuàng)建出我們想要的設(shè)計(jì)。8.2創(chuàng)建CSS樣式使用CSS樣式可以使網(wǎng)頁的風(fēng)格協(xié)調(diào)統(tǒng)一。在本節(jié)中，我們將介紹CSS樣式的創(chuàng)建和應(yīng)用方法。返回8.2.1打開CSS樣式面板

單擊“窗口”|“CSS樣式”命令或按Shift+F11快捷鍵，即可打開CSS樣式面板，如圖8-1所示。圖8-1CSS樣式面板8.2.2創(chuàng)建新的CSS樣式（1）單擊“窗口”|“CSS樣式”，打開CSS樣式面板。如圖8-1所示。（2）單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，如圖8-2所示。圖8-2新建CSS規(guī)則對話框8.2.2創(chuàng)建新的CSS樣式（3）為新建的CSS樣式輸入或選擇名稱、標(biāo)簽或選擇器。（4）在“定義在”區(qū)域中選擇定義的樣式位置，可以是“新建樣式表文件”或“僅對該文檔”。設(shè)置完畢，單擊“確定”按鈕即可。

（5）“CSS規(guī)則定義”對話框中設(shè)置CSS規(guī)則定義。主要分為類型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展8項(xiàng)。每個(gè)選項(xiàng)都可以做不同方面的定義，可以根據(jù)需要進(jìn)行設(shè)定。定義完畢后，單擊“確定”按鈕，完成創(chuàng)建CSS樣式。8.2.3應(yīng)用自定義的CSS樣式創(chuàng)建了CSS樣式后，在文檔窗口中選中將要應(yīng)用該樣式的文本，然后再啟動CSS樣式面板，選擇要應(yīng)用的樣式即可，如圖8-3所示。圖8-3應(yīng)用自定義的CSS樣式

8.3編輯CSS樣式

保存了新的CSS樣式后，即可打開CSS編輯器，如圖8-8所示。在該對話框中我們可以詳細(xì)定制樣式的格式。CSS樣式表可以定義包括許多類型的格式，如文本，背景，邊框等，下面我們將一一進(jìn)行介紹。返回8.3.1文本的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“類型”，則在右邊的區(qū)域可以設(shè)置有關(guān)的格式。如字體、大小、樣式、行高、修飾、粗細(xì)、變體、大小寫、顏色等。8.3.2背景的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“背景”，則在右邊的區(qū)域可以設(shè)置CSS樣式的背景格式，如圖8-4所示。圖8-4背景的定義面板

8.3.3區(qū)塊的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“區(qū)塊”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的塊格式，如圖8-5所示。圖8-5區(qū)塊的定義面板

8.3.4方框的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“方塊”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的方框格式，如圖8-6所示。圖8-6方框的定義面板

8.3.5邊框的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“邊框”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的方框格式，如圖8-7所示。圖8-7邊框的定義面板

8.3.6列表的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“列表”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的方框格式，如圖8-8所示。圖8-8列表的定義面板

8.3.7位置的定義面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“位置”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的方框格式，如圖8-9所示。圖8-9位置的定義面板

8.3.8CSS的擴(kuò)展面板從“CSS規(guī)則定義”對話框的左邊目錄列表中選擇“擴(kuò)展”，則在右邊的區(qū)域可以設(shè)置有關(guān)CSS樣式的方框格式，如圖8-10所示。圖8-10CSS的擴(kuò)展面板

8.4鏈接到CSS樣式表方法一：在CSS樣式面板中單擊“附加樣式表”按鈕，打開“鏈接外部樣式表”對話框，如圖8-11所示。方法二：單擊“文本”|“CSS樣式”|“附加樣式表”菜單項(xiàng)，也可以打開“鏈接外部樣式表”對話框。返回圖8-11鏈接外部樣式表對話框

8.5導(dǎo)出CSS樣式表方法一：單擊“文件”|“導(dǎo)出”|“CSS樣式”菜單項(xiàng)，打開“導(dǎo)出樣式為CSS文件”對話框，如圖8-12所示。返回圖8-12導(dǎo)出CSS樣式對話框

8.5導(dǎo)出CSS樣式表方法二：單擊“文本”|“CSS樣式”|“導(dǎo)出”菜單項(xiàng)，也可以打開“導(dǎo)出樣式為CSS文件“對話框。在該對話框中，我們可以設(shè)定CSS文件的名稱和保存路徑，設(shè)置完畢，單擊“保存”按鈕即可。8.6設(shè)置CSS樣式參數(shù)1.設(shè)置CSS樣式參數(shù)：（1）單擊“編輯”|“首選參數(shù)”命令，打開Dreamweaver首選參數(shù)設(shè)置對話框。（2）從左邊選擇“CSS樣式”選項(xiàng)卡，切換到CSS樣式表參數(shù)設(shè)置面板，即可在對話框的右邊區(qū)域設(shè)置CSS樣式代碼的速記形式，如圖8-13所示。（3）在“當(dāng)創(chuàng)建CSS規(guī)則時(shí)：使用速記”區(qū)域中，允許設(shè)置在創(chuàng)建CSS樣式時(shí)要對哪些樣式格式使用速記形式。選中相應(yīng)的復(fù)選框，即可在創(chuàng)建相應(yīng)的樣式格式時(shí)，使用速記形式。

返回8.6設(shè)置CSS樣式參數(shù)（4）在“當(dāng)編輯CSS規(guī)則時(shí)：使用速記”區(qū)域中，可以選擇在什

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論