Dreamweaver 入門：使用CSS設(shè)置頁(yè)面格式-Dreamweaver教程

2024-09-12 12:30:13

字體：大中小

供稿：網(wǎng)友

　　本文章介紹如何在 dreamweaver 中使用層疊樣式表 (css) 設(shè)置頁(yè)面中的文本格式。您可以使用 css 以 html 無(wú)法提供的方式來(lái)設(shè)置文本格式和定位文本，從而能更加靈活自如地控制頁(yè)面的外觀。

　　了解 css

　　層疊樣式表 (css) 是一系列格式設(shè)置規(guī)則，它們控制 web 頁(yè)面內(nèi)容的外觀。使用 css 設(shè)置頁(yè)面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開(kāi)的。頁(yè)面內(nèi)容(html 代碼)位于自身的 html 文件中，而定義代碼表現(xiàn)形式的 css 規(guī)則位于另一個(gè)文件(外部樣式表)或 html 文檔的另一部分(通常為部分)中。使用 css 可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。

　　css 使您可以控制許多僅使用 html 無(wú)法控制的屬性。例如，您可以為所選文本指定不同的字體大小和單位(像素、磅值等)。通過(guò)使用 css 從而以像素為單位設(shè)置字體大小，還可以確保在多個(gè)瀏覽器中以更一致的方式處理頁(yè)面布局和外觀。

　　css 格式設(shè)置規(guī)則由兩部分組成:選擇器和聲明。選擇器是標(biāo)識(shí)已設(shè)置格式元素(如 p、h1、類名稱或 id)的術(shù)語(yǔ)，而聲明則用于定義樣式元素。在下面的示例中，h1 是選擇器，介于大括號(hào) ({}) 之間的所有內(nèi)容都是聲明:

　　h1 {

　　font-size:16 pixels;

　　font-family:helvetica;

　　font-weight:bold;

　　}

　　聲明由兩部分組成:屬性(如 font-family)和值(如 helvetica)。上述示例為 h1 標(biāo)簽創(chuàng)建了樣式:鏈接到此樣式的所有 h1 標(biāo)簽的文本都將是 16 像素大小并使用 helvetica 字體和粗體。

　　術(shù)語(yǔ)"層疊"是指對(duì)同一個(gè)元素或 web 頁(yè)面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè) css 規(guī)則來(lái)應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來(lái)應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁(yè)面中的同一文本。所定義的樣式"層疊"到您的 web 頁(yè)面上的元素，并最終創(chuàng)建您想要的設(shè)計(jì)。

　　css 的主要優(yōu)點(diǎn)是輕易更新;只要對(duì)一處 css 規(guī)則進(jìn)行更新，則使用該定義樣式的所有文檔的格式都會(huì)自動(dòng)更新為新樣式。

　　在 dreamweaver 中可以定義以下規(guī)則類型:

　　自定義 css 規(guī)則(也稱為"類樣式")使您可以將樣式屬性應(yīng)用到任何文本范圍或文本塊。所有類樣式均以句點(diǎn) (.) 開(kāi)頭。例如，您可以創(chuàng)建稱為 .red 的類樣式，設(shè)置規(guī)則的 color 屬性為紅色，然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。

　　html 標(biāo)簽規(guī)則重定義特定標(biāo)簽(如 p 或 h1)的格式。創(chuàng)建或更改 h1 標(biāo)簽的 css 規(guī)則時(shí)，所有用 h1 標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新。

　　css 選擇器規(guī)則(高級(jí)樣式)重定義特定元素組合的格式，或其它 css 答應(yīng)的選擇器形式的格式(例如，每當(dāng) h2 標(biāo)題出現(xiàn)在表格單元格內(nèi)時(shí)，就應(yīng)用選擇器 td h2)。高級(jí)樣式還可以重定義包含特定 id 屬性的標(biāo)簽的格式(例如，由 #mystyle 定義的樣式可以應(yīng)用到所有包含屬性/值對(duì) id="mystyle" 的標(biāo)簽)。

　　創(chuàng)建新的樣式表

　　首先，您將創(chuàng)建包含 css 規(guī)則(定義段落文本樣式)的外部樣式表。在外部樣式表中創(chuàng)建樣式時(shí)，可以在一個(gè)中心位置同時(shí)控制多個(gè) web 頁(yè)面的外觀，而不需要為每個(gè) web 頁(yè)面分別設(shè)置樣式。

　　css 規(guī)則可以位于以下位置:

　　外部 css 樣式表是存儲(chǔ)在一個(gè)單獨(dú)的外部 .css 文件(并非 html 文件)中的一系列 css 規(guī)則。利用文檔 head 部分中的鏈接，該 .css 文件被鏈接到 web 站點(diǎn)中的一個(gè)或多個(gè)頁(yè)面。

　　內(nèi)部(或嵌入式)css 樣式表是包含在 html 文檔 head 部分的 style 標(biāo)簽內(nèi)的一系列 css 規(guī)則。例如，下面的示例為已設(shè)置段落標(biāo)簽的文檔中的所有文本定義字體大小:|||

　　內(nèi)聯(lián)樣式是在 html 文檔中的特定標(biāo)簽實(shí)例中定義的。例如，<p style="font-size: 9px"> 僅對(duì)用含有內(nèi)聯(lián)樣式的標(biāo)簽設(shè)置了格式的段落定義字體大小。

　　dreamweaver 會(huì)呈現(xiàn)您所應(yīng)用的大多數(shù)樣式屬性并在"文檔"窗口中顯示它們。您也可以在瀏覽器窗口中預(yù)覽文檔以查看樣式的應(yīng)用情況。有些 css 樣式屬性在 microsoft internet explorer、netscape navigator、opera 和 apple safari 中呈現(xiàn)的外觀不相同。

　　選擇"文件">"新建"。

　　在"新建文檔"對(duì)話框中的"類別"列中選擇"基本頁(yè)"，在"基本頁(yè)"列中選擇"css"，然后單擊"創(chuàng)建"。

　　空白樣式表將出現(xiàn)在"文檔"窗口中。"設(shè)計(jì)"視圖和"代碼"視圖按鈕已被禁用。css 樣式表是純文本文件，其內(nèi)容將不會(huì)用于在瀏覽器中查看。

　　將該頁(yè)保存("文件">"保存")為 cafe_townsend.css。

　　保存樣式表時(shí)，請(qǐng)確保將其保存到 cafe_townsend folder 文件夾(您的 web 站點(diǎn)的根文件夾)中。

　　在樣式表中鍵入以下代碼:

　　p{
　　font-family: verdana, sans-serif;
　　font-size: 11px;
　　color: #000000;
　　line-height: 18px;
　　padding: 3px;
　　}

　　當(dāng)您鍵入代碼時(shí)，dreamweaver 將使用代碼提示為您建議一些選項(xiàng)，以幫您完成輸入。當(dāng)看到希望 dreamweaver 為您完成鍵入的代碼時(shí)，請(qǐng)按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　不要忘記在每行結(jié)尾處的屬性值后面加上一個(gè)分號(hào)。

　　完成后的代碼類似于下面的示例:

　　若要顯示該指南，請(qǐng)選擇"幫助">"參考"，然后從"參考"面板的彈出式菜單中選擇"o'reilly css 參考"。保存樣式表。

　　附加樣式表

　　當(dāng)您將樣式表附加到 web 頁(yè)面中時(shí)，在樣式表中定義的規(guī)則將應(yīng)用到頁(yè)面上的相應(yīng)元素。例如，當(dāng)您將 cafe_townsend.css 樣式表附加到 index.html 頁(yè)時(shí)，將根據(jù)您定義的 css 規(guī)則設(shè)置所有段落文本(用 html 代碼中的標(biāo)簽設(shè)置格式的文本)的格式。

　　在"文檔"窗口中，打開(kāi) cafe townsend 的 index.html 文件。(假如該文件已打開(kāi)，則請(qǐng)單擊它的選項(xiàng)卡。)

　　選擇在教程:向頁(yè)面添加內(nèi)容中粘貼到頁(yè)面中的第一段文本。

　　在"屬性"檢查器中查看，并確保使用段落標(biāo)簽設(shè)置了該段落的格式。

　　假如"屬性"檢查器中的"格式"彈出式菜單顯示"段落"，則已使用段落標(biāo)簽設(shè)置了段落的格式。假如"屬性"檢查器中的"格式"彈出式菜單顯示"無(wú)"或其它內(nèi)容，則選擇"段落"來(lái)設(shè)置段落的格式。

　　對(duì)第二段重復(fù)第 3 步。

　　在"css 樣式"面板("窗口">"css 樣式")中，單擊位于面板右下角的"附加樣式表"按鈕。

　　在"附加外部樣式表"對(duì)話框中，單擊"瀏覽"并瀏覽到上一節(jié)創(chuàng)建的 cafe_townsend.css 文件。

　　單擊"確定"。

　　"文檔"窗口中的文本將根據(jù)外部樣式表中的 css 規(guī)則來(lái)設(shè)置格式。|||

　　研究"css 樣式"面板

　　"css 樣式"面板可讓您跟蹤影響當(dāng)前所選頁(yè)面元素的 css 規(guī)則和屬性，或影響整個(gè)文檔的規(guī)則和屬性，還可以在不打開(kāi)外部樣式表的情況下修改 css 屬性。

　　請(qǐng)確保 index.html 頁(yè)在"文檔"窗口中打開(kāi)。

　　在"css 樣式"面板("窗口">"css 樣式")中，單擊面板頂部的"所有"，然后檢查您的 css 規(guī)則。

　　在"所有"模式下，css 面板向您顯示應(yīng)用到當(dāng)前文檔的所有 css 規(guī)則，不管這些規(guī)則是在外部樣式表中，還是在自身文檔中。您應(yīng)在"所有規(guī)則"窗格中看到兩個(gè)主要類別:一個(gè)<style> 標(biāo)簽類別和一個(gè) cafe_townsend.css 類別。

　　若未展開(kāi)<style> 標(biāo)簽類別，則請(qǐng)單擊加號(hào) ( ) 展開(kāi)該類別。

　　單擊正文規(guī)則。

　　值為 #000000 的 background-color 屬性出現(xiàn)在下面的"屬性"窗格中。

　　注重您可能需要折疊其它面板，如"文件"面板，以便看到完整的"css 樣式"面板，還可以通過(guò)拖動(dòng)窗格之間的邊界來(lái)更改"css 樣式"面板的長(zhǎng)度。

　　您在教程:創(chuàng)建基于表格的頁(yè)面布局中通過(guò)使用"修改頁(yè)面屬性"對(duì)話框設(shè)置了頁(yè)面的背景色。以此方式設(shè)置頁(yè)面屬性時(shí)，dreamweaver 會(huì)編寫一個(gè)內(nèi)置于文檔的 css 樣式。

　　單擊加號(hào) ( ) 展開(kāi) cafe_townsend.css 類別。

　　單擊 p 規(guī)則。

　　在外部樣式表中為 p 規(guī)則定義的所有屬性和值將顯示在下面的"屬性"窗格中。

　　在"文檔"窗口中，在剛設(shè)置格式的兩個(gè)段落中的任何位置單擊一次。

　　在"css 樣式"面板中，單擊面板頂部的"當(dāng)前"，然后檢查您的 css 樣式。在"當(dāng)前"模式中，css 面板向您顯示當(dāng)前所選內(nèi)容的屬性的摘要。顯示的屬性與外部樣式表中 p 規(guī)則的屬性相對(duì)應(yīng)。

　　在下一節(jié)中，您將使用"css 樣式"面板創(chuàng)建新規(guī)則。使用"css 樣式"面板創(chuàng)建新規(guī)則比手動(dòng)鍵入規(guī)則輕易得多，后者如同最初創(chuàng)建外部樣式表時(shí)的操作一樣。

　　創(chuàng)建新的 css 規(guī)則

　　在本節(jié)中，您將使用"css 樣式"面板創(chuàng)建自定義的 css 規(guī)則或類樣式。類樣式使您可以設(shè)置任何范圍或文本塊的樣式屬性，并可以應(yīng)用到任何 html 標(biāo)簽。有關(guān)不同類型的 css 規(guī)則的更多信息，請(qǐng)參見(jiàn)了解 css。

　　在"css 樣式"面板中，單擊面板右下角的"新建 css 規(guī)則"。

　　在"新建 css 規(guī)則"對(duì)話框中，從"選擇器類型"選項(xiàng)中選擇"類"。該選項(xiàng)應(yīng)該是默認(rèn)選中的。

　　在"名稱"文本框中輸入 .bold。

　　確保在單詞"bold"前鍵入句點(diǎn) (.)。所有類樣式必須以句點(diǎn)開(kāi)頭

　　在"定義在"彈出式菜單中，選擇 cafe_townsend.css。該文件應(yīng)該是默認(rèn)選中的。

　　單擊"確定"。

　　出現(xiàn)"css 規(guī)則定義"對(duì)話框，表示您正在 cafe_townsend.css 文件中創(chuàng)建一個(gè)稱為 .bold 的類樣式。

　　在"css 規(guī)則定義"對(duì)話框中，執(zhí)行下面的操作:

　　在"字體"文本框中，輸入 verdana, sans-serif。

　　在"大小"文本框中，輸入 11，并在緊靠其右的彈出式菜單中選擇像素。

　　在"行高"文本框中，輸入 18，并在緊靠其右的彈出式菜單中選擇像素。

　　從"粗細(xì)"彈出式菜單中選擇"粗體"。

　　在"顏色"文本框中，輸入 #990000。

　　|||

　　提示有關(guān) css 屬性的更多信息，請(qǐng)參見(jiàn) dreamweaver 中包含的 o'reilly 參考指南。若要顯示該指南，請(qǐng)選擇"幫助">"參考"，然后從"參考"面板的彈出式菜單中選擇"o'reilly css 參考"。

　　單擊"確定"。

　　單擊"css 樣式"面板頂部的"所有"按鈕。

　　若未展開(kāi) cafe_townsend.css 類別，則單擊該類別旁邊的加號(hào) ( ) 按鈕。

　　您可以看到，dreamweaver 已將 .bold 類樣式添加到在外部樣式表中定義的規(guī)則列表中。假如您在"所有規(guī)則"窗格中單擊 .bold 規(guī)則，則該規(guī)則的屬性將出現(xiàn)在"屬性"窗格中。新規(guī)則還出現(xiàn)在"屬性"檢查器的"樣式"彈出式菜單中。

　　將類樣式應(yīng)用到文本

　　現(xiàn)在，您已經(jīng)創(chuàng)建了一個(gè)類規(guī)則，并將該規(guī)則應(yīng)用到某些段落文本。

　　在"文檔"窗口中，選擇第一段中文本的前四個(gè)單詞:cafe townsend's visionary chef。

　　在"屬性"檢查器("窗口">"屬性")中，從"樣式"彈出式菜單中選擇"bold"。

　　"粗體"類樣式將應(yīng)用到您的文本。

　　重復(fù)第 2 步，將"粗體"類樣式應(yīng)用到第二段的前四個(gè)單詞。

　　保存頁(yè)面。

　　設(shè)置導(dǎo)航條文本的格式

　　接下來(lái)，您將使用 css 將樣式應(yīng)用到導(dǎo)航條的鏈接文本。許多 web 頁(yè)面使用內(nèi)含文本的彩色矩形圖像來(lái)創(chuàng)建導(dǎo)航條。但是，假如使用 css，您所需要設(shè)置的只是鏈接文本和一些格式。通過(guò)使用 display: block 屬性并設(shè)置塊的寬度，您可以有效地創(chuàng)建矩形，而不需要另外使用圖像。

　　為導(dǎo)航創(chuàng)建新規(guī)則

　　若未打開(kāi) cafe_townsend.css 文件，則打開(kāi)該文件，或單擊其選項(xiàng)卡來(lái)顯示該文件。

　　定義一個(gè)新規(guī)則，方法是在該文件的 .bold 類樣式后面鍵入以下代碼:

　　.navigation {

　　}

　　這是一個(gè)空規(guī)則。

　　文件中的代碼應(yīng)類似于下面的示例:

　　保存 cafe_townsend.css 文件。

　　接下來(lái)，您將使用"css 樣式"面板向規(guī)則添加屬性。

　　若未打開(kāi) index.html 文件，則打開(kāi)該文件。

　　在"css 樣式"面板中，確保選中了"全部"模式，選擇新的 .navigation 規(guī)則，然后單擊面板右下角的"編輯樣式"。

　　在"css 規(guī)則定義"對(duì)話框中，執(zhí)行下面的操作:

　　在"字體"文本框中，輸入 verdana, sans-serif。

　　從"大小"彈出式菜單中選擇 16，然后從緊靠其右的彈出式菜單中選擇像素。

　　從"樣式"彈出式菜單中選擇"正常"。

　　從"修飾"列表中選擇"無(wú)"。

　　從"粗細(xì)"彈出式菜單中選擇"粗體"。

　　在"顏色"文本框中，輸入 #ffffff。

　　若要顯示該指南，請(qǐng)選擇"幫助">"參考"，然后從"參考"面板的彈出式菜單中選擇"o'reilly css 參考"。

　　單擊"確定"。

　　現(xiàn)在，您將使用"css 樣式"面板向 .navigation 規(guī)則添加更多屬性。

　　在"css 樣式"面板中，確保選中了 .navigation 規(guī)則，然后單擊"顯示列表視圖"。

　　|||

　　列表視圖可使"屬性"窗格按字母順序顯示所有可用屬性(與"設(shè)置屬性"視圖不同，"設(shè)置屬性"視圖只顯示已設(shè)置的屬性)。

　　單擊 background-color 屬性右邊的列。

　　若要查看屬性的完整內(nèi)容，請(qǐng)將鼠標(biāo)指針停留在該屬性上。

　　輸入十六進(jìn)制值 #993300，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　提示若要查看您的工作對(duì)外部樣式表的影響，請(qǐng)?jiān)谀ぷ鲿r(shí)保持 cafe_townsend.css 文件在"文檔"窗口中處于打開(kāi)狀態(tài)。當(dāng)您在"css 樣式"面板中做出選擇時(shí)，同時(shí)將看到 dreamweaver 在樣式表中寫入 css 代碼。

　　找到 display 屬性(可能需要向下滾動(dòng))，在右邊的列中單擊一次，然后從彈出式菜單中選擇 block。

　　找到 padding 屬性，在右邊的列中單擊一次，輸入值 8px，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　找到 width 屬性，在右邊的列中單擊一次，在第一個(gè)文本框中輸入 140，從彈出式菜單中選擇像素，然后按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　單擊"顯示設(shè)置屬性"，以便在"屬性"窗格中僅顯示您設(shè)置的屬性。

　　單擊 cafe_townsend.css 文件以顯示該文件。您將看到，dreamweaver 已經(jīng)將您指定的所有屬性添加到該文件中。

　　保存并關(guān)閉 cafe_townsend.css 文件。

　　現(xiàn)在，您已經(jīng)創(chuàng)建了一個(gè)設(shè)置導(dǎo)航條文本格式的規(guī)則。接下來(lái)，您要將該規(guī)則應(yīng)用到所選鏈接。

　　應(yīng)用規(guī)則

　　在"文檔"窗口中打開(kāi) index.html 頁(yè)，單擊單詞 cuisine 將插入點(diǎn)置于該單詞中的某個(gè)位置。

　　在標(biāo)簽選擇器中，單擊最右邊的標(biāo)簽。

　　此操作將為指定的標(biāo)簽或鏈接選擇所有文本。

　　在"屬性"檢查器("窗口">"屬性")中，從"樣式"彈出式菜單中選擇"navigation"。

　　在"文檔"窗口中，cuisine 文本的外觀完全發(fā)生了變化。根據(jù)您在上一節(jié)中為 .navigation 規(guī)則所定義的屬性，該文本的格式現(xiàn)在已被設(shè)置為導(dǎo)航條按鈕。

　　對(duì)于導(dǎo)航條中的每個(gè)鏈接，重復(fù)第 1 步到第 3 步。

　　您必須為每個(gè) 標(biāo)簽或鏈接分配一個(gè)導(dǎo)航類樣式，因此，使用標(biāo)簽選擇器分別選擇每個(gè)鏈接，然后逐個(gè)為每一個(gè)鏈接分配類樣式是很重要的。

　　在設(shè)置鏈接文本的格式時(shí)假如有困難，請(qǐng)確保每個(gè)(或每組)鏈接的單詞之間有空格(不是回車)。還要確保兩個(gè)鏈接之間的空格本身未被鏈接。假如空格已鏈接，請(qǐng)小心選擇鏈接的空格，在"屬性"檢查器中清除"鏈接"文本框，并按 enter 鍵 (windows) 或 return 鍵 (macintosh)。

　　完成對(duì)導(dǎo)航條的所有單詞的格式設(shè)置后，保存該頁(yè)面，然后在瀏覽器中預(yù)覽您的工作("文件">"在瀏覽器中預(yù)覽")。

　　您可以單擊鏈接以確保其有效。

　　添加鼠標(biāo)經(jīng)過(guò)效果

　　現(xiàn)在，您將添加一個(gè)鼠標(biāo)經(jīng)過(guò)效果，使導(dǎo)航條塊的背景色在每次鼠標(biāo)指針經(jīng)過(guò)某個(gè)鏈接時(shí)改變顏色。若要添加鼠標(biāo)經(jīng)過(guò)效果，請(qǐng)?zhí)砑影?:hover 偽類的新規(guī)則。|||

　　關(guān)于…關(guān)于 :hover 偽類偽類是一種影響 html 文檔中的某些元素的方式，它不是基于文檔本身的 html 代碼，而是基于 web 瀏覽器應(yīng)用的其它外部條件。偽類可以是動(dòng)態(tài)的，這表明當(dāng)用戶與文檔交互時(shí)，頁(yè)面上的元素可能會(huì)獲取或丟失偽類。

　　當(dāng)用戶把鼠標(biāo)指針停留在已設(shè)置格式的頁(yè)面元素上時(shí)，:hover 偽類會(huì)影響該元素的變化。例如，將 :hover 偽類添加到 .navigation 類樣式 (.navigation:hover) 以創(chuàng)建新規(guī)則時(shí)，根據(jù) .navigation:hover 規(guī)則的屬性，所有用 .navigation 規(guī)則設(shè)置格式的文本元素都會(huì)發(fā)生變化。

　　打開(kāi) cafe_townsend.css 文件。

　　選擇整個(gè) .navigation 規(guī)則。