第三章網(wǎng)頁(yè)色彩和布局的控制第三章網(wǎng)頁(yè)色彩和布局的控制3.1表格應(yīng)用表格是用于在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具，雖然HTML代碼中通常不明確指定列，但Dreamweaver允許操作列、行和單元格。

表格有很好的兼容性，可被絕大部分的瀏覽器所支持，而且使用表格會(huì)使頁(yè)面結(jié)構(gòu)清晰、布局整齊。Dreamweaver提供了兩種查看和操作表格的方式，即“標(biāo)準(zhǔn)”模式和“布局”模式。3.1表格應(yīng)用表格是用于在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文3.1.1表格基礎(chǔ)日常生活中，最常見(jiàn)的表格是用來(lái)顯示數(shù)據(jù)的，比如Excel中的表格。在Dreamweaver中，表格除了可以顯示數(shù)據(jù)外，最主要的功能是定位與排版。這樣才能夠?qū)⑶懊娼榻B過(guò)的文本與圖像定位在網(wǎng)頁(yè)中的任何想要顯示的區(qū)域中。1.表格建立 網(wǎng)頁(yè)設(shè)計(jì)就是從創(chuàng)建表格開(kāi)始的，先學(xué)習(xí)表格的創(chuàng)建可以為后來(lái)的網(wǎng)頁(yè)設(shè)計(jì)奠定基礎(chǔ)。 3.1.1表格基礎(chǔ)日常生活中，最常見(jiàn)的表格是用來(lái)顯示數(shù)據(jù)的(1)創(chuàng)建各種表格選項(xiàng)作用行數(shù)用于確定表格的行數(shù)。列數(shù)用于確定表格的列數(shù)。表格寬度以像素或者百分比為單位確定表格的寬度。邊框粗細(xì)以像素為單位指定表格邊框的寬度。單元格邊距指定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)，如果不希望顯示邊框時(shí)，設(shè)置為0像素。單元格間距指定相鄰的單元格之間的像素?cái)?shù)。(1)創(chuàng)建各種表格選項(xiàng)作創(chuàng)建各種表格無(wú)對(duì)表不啟用列或行標(biāo)題，默認(rèn)情況下此項(xiàng)被選中。左側(cè)將表的第一列作為標(biāo)題列，便于為每一行輸入一個(gè)標(biāo)題。頂部將表的第一行作為標(biāo)題行，便于為每一列輸入一個(gè)標(biāo)題。兩者在表中輸入列標(biāo)題和行標(biāo)題。標(biāo)題指定在表格外顯示的標(biāo)題。對(duì)齊標(biāo)題指定表格標(biāo)題相對(duì)于表格的顯示位置，采用默認(rèn)方式。摘要用于說(shuō)明表格。創(chuàng)建各種表格無(wú)對(duì)表不啟用列或行標(biāo)題，默認(rèn)情況下此項(xiàng)被選中。左1.表格建立(2)在表格中插入網(wǎng)頁(yè)元素(3)設(shè)置表格屬性即使在網(wǎng)頁(yè)中插入一個(gè)最簡(jiǎn)單的表格，也具有表格的幾個(gè)重要的元素，那就是表格整體、行、列和單元格。所以插入表格后，【屬性】面板中顯示的是該表格的基本屬性。表格的基本屬性如表3.2所示。1.表格建立(2)在表格中插入網(wǎng)頁(yè)元素表3.2表格的基本屬性參數(shù)含義表格Id設(shè)置表格的名稱(chēng)，也就是表格的Id。行/列在文本框中分別輸入表格中行和列的數(shù)目寬在文本框中輸入表格寬度，以像素為單位或按占瀏覽器窗口寬度的百分比進(jìn)行計(jì)算。填充在文本框中輸入單元格內(nèi)容和單元格邊框之間的像素?cái)?shù)。間距在文本框中輸入相鄰單元格之間的像素?cái)?shù)。表3.2表格的基本屬性參數(shù)含表格的基本屬性對(duì)齊用于確定表格相對(duì)于同一段落中其他元素（例如文本或圖像）的顯示位置。包括左對(duì)齊、右對(duì)齊和居中對(duì)齊。當(dāng)對(duì)齊方式為【默認(rèn)】時(shí)，其他內(nèi)容不顯示在表格的旁邊。邊框用于指定表格邊框的寬度（以像素為單位）。類(lèi)可以將CSS規(guī)則應(yīng)用于對(duì)象。背景顏色設(shè)置表格的背景顏色。邊框顏色設(shè)置表格邊框的顏色。背景圖像為表格添加背景圖像。表格的基本屬性對(duì)齊用于確定表格相對(duì)于同一段落中其他元素（例如2．編輯表格(1)選中表格元素(2)調(diào)整表格大小2．編輯表格(1)選中表格元素2．編輯表格

(3)合并及拆分表格元素當(dāng)創(chuàng)建的表格不符合要求時(shí)，可以通過(guò)刪除或增加表格的行與列，以及合并或者拆分單元格來(lái)實(shí)現(xiàn)2．編輯表格(3)合并及拆分表格元素2．編輯表格(4)復(fù)制及粘貼單元格2．編輯表格(4)復(fù)制及粘貼單元格3．布局表格(1)創(chuàng)建布局表格與單元格(2)布局表格與單元格屬性選項(xiàng)作用寬有【固定】和【自動(dòng)伸展】?jī)蓚€(gè)選項(xiàng)：當(dāng)選中【固定】單選按鈕時(shí)，可以直接在右側(cè)的文本框中輸入表格的寬度值。當(dāng)選中【自動(dòng)伸展】單選按鈕時(shí)，則表格的寬度可以根據(jù)插入的內(nèi)容自動(dòng)進(jìn)行調(diào)整。高在其后的文本框中輸入表格的高度。背景顏色用于設(shè)置表格的背景顏色。3．布局表格(1)創(chuàng)建布局表格與單元格選項(xiàng)作布局表格與單元格屬性填充用于設(shè)置單元格內(nèi)容和邊框的距離。間距用于設(shè)置表格內(nèi)單元格之間的距離。清除行高按鈕：對(duì)行高進(jìn)行清除使單元格寬度一致按鈕：表格內(nèi)的單元格寬度自動(dòng)隨著單元格的內(nèi)容寬度變化。刪除所有間隔圖像按鈕：清除表格中的所有間隔圖像。刪除嵌套按鈕：清除嵌套表格，只有當(dāng)存在嵌套表格時(shí)，該選項(xiàng)才顯示。類(lèi)可以將CSS規(guī)則應(yīng)用于對(duì)象布局表格與單元格屬性填充用于設(shè)置單元格內(nèi)容和邊框的距離。間距4．表格制作實(shí)例（1）一像素表格（2）圓角相框4．表格制作實(shí)例（1）一像素表格4．表格制作實(shí)例（3）可隱藏的說(shuō)明書(shū)4．表格制作實(shí)例（3）可隱藏的說(shuō)明書(shū)3.1.2修飾網(wǎng)頁(yè)各種元素（1）網(wǎng)頁(yè)各種元素標(biāo)簽（2）HTML信息（3）文本標(biāo)簽（4）圖像標(biāo)簽（5）表格標(biāo)簽（6）鏈接標(biāo)簽3.1.2修飾網(wǎng)頁(yè)各種元素（1）網(wǎng)頁(yè)各種元素標(biāo)簽（5）表格標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注表格標(biāo)記<TABLE>表格標(biāo)記設(shè)定該表格的各項(xiàng)參數(shù)

<CAPTION>表格標(biāo)題做成一行通列以填入表格標(biāo)題

<TR>表格列設(shè)定該表格的列

<TD>表格欄設(shè)定該表格的欄

<TH>表格標(biāo)頭相等于<TD>，但其內(nèi)之字體會(huì)變粗

（5）表格標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注表格標(biāo)記<TABLE（6）鏈接標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注鏈接標(biāo)簽<A>鏈接標(biāo)記加入鏈接

<BASE>基準(zhǔn)標(biāo)記指定一個(gè)顯式URL用于解析對(duì)于外部源的鏈接和引用，如圖像和樣式表。

影像地圖<MAP>影像地圖名稱(chēng)設(shè)定影像地圖名稱(chēng)

<AREA>鏈接區(qū)域設(shè)定各鏈接區(qū)域

（6）鏈接標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注鏈接標(biāo)簽<A>鏈接標(biāo)3.2框架的規(guī)劃與建立3.2.1框架與表格1.框架和表格的區(qū)別2.使用框架的優(yōu)缺點(diǎn)：（1）優(yōu)點(diǎn)訪問(wèn)者的瀏覽器不需為每個(gè)頁(yè)面重新加載導(dǎo)航條；每個(gè)框架都具有自己的滾動(dòng)條，因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架進(jìn)行瀏覽。（2）缺點(diǎn)①并不是所有瀏覽器都提供良好的框架支持；②難以實(shí)現(xiàn)在不同框架中精確的對(duì)齊各個(gè)頁(yè)面元素。3.2框架的規(guī)劃與建立3.2.1框架與表格3.2.2規(guī)劃框架框架最常見(jiàn)的用法就是實(shí)現(xiàn)頁(yè)面導(dǎo)航，一般是將頁(yè)面劃分為一個(gè)導(dǎo)航區(qū)和一個(gè)內(nèi)容區(qū)。這些框架中的每一個(gè)都是一個(gè)獨(dú)立的HTML頁(yè)面?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁(yè)面的URL?？蚣芗募辉跒g覽器中顯示，只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。3.2.2規(guī)劃框架框架最常見(jiàn)的用法就是實(shí)現(xiàn)頁(yè)面導(dǎo)航，一般是3.2.3創(chuàng)建框架1.選擇框架集和框架（1）在“框架”面板中選擇框架和框架集（2）在文檔窗口中選擇框架和框架集2.設(shè)置框架集和框架屬性(1)設(shè)置框架集屬性(2)設(shè)置框架屬性選擇要查看或設(shè)置屬性的框架集，在“屬性”檢查器中，查看所有框架集屬性。3.2.3創(chuàng)建框架1.選擇框架集和框架3.2.3創(chuàng)建框架設(shè)置框架集屬性邊框邊框?qū)挾冗吙蝾伾蚣艽笮?.2.3創(chuàng)建框架設(shè)置框架集屬性3.2.3創(chuàng)建框架設(shè)置框架屬性框架名稱(chēng)源文件滾動(dòng)不能調(diào)整大小邊框及邊框顏色，邊界寬度和高度3.2.3創(chuàng)建框架設(shè)置框架屬性3.2.4框架的操作1.改變框架尺寸2.嵌套框架3.拆分框架4.保存框架5.在框架中顯示頁(yè)面（1）直接在框架中編輯空文檔（2）在框架中打開(kāi)現(xiàn)有文檔（3）在屬性檢查器為框架設(shè)置源文件（4）設(shè)置超鏈接的目標(biāo)框架6.刪除框架3.2.4框架的操作1.改變框架尺寸3.2.5Spry框架（1）Spry框架概念Spry框架支持一組用標(biāo)準(zhǔn)HTML、CSS和JavaScript編寫(xiě)的可重用構(gòu)件。Spry構(gòu)件是一個(gè)頁(yè)面元素，通過(guò)啟用用戶交互來(lái)提供更豐富的用戶體驗(yàn)。（2）Spry菜單欄構(gòu)件（3）Spry選項(xiàng)卡式面板構(gòu)件（4）Spry折疊構(gòu)件3.2.5Spry框架（1）Spry框架概念（2）Spry菜單欄構(gòu)件選項(xiàng)選項(xiàng)作用菜單欄名稱(chēng)默認(rèn)菜單欄名稱(chēng)為MenuBar1，該名稱(chēng)不能以漢字命名，可以使用字母或者數(shù)字。禁用樣式單擊該按鈕，菜單欄變成項(xiàng)目列表，并且按鈕名稱(chēng)更改為【啟用樣式】。菜單欄目在【屬性】面板中包括主菜單欄目、一級(jí)菜單欄目與二級(jí)菜單欄目文本在該選項(xiàng)文本框中設(shè)置欄目名稱(chēng)。鏈接該選項(xiàng)可以為菜單欄目添加鏈接文件，默認(rèn)情況下為空鏈接。單擊【瀏覽】按鈕可以選擇鏈接文件。目標(biāo)該選項(xiàng)指定要在何處打開(kāi)所鏈接的頁(yè)面。標(biāo)題該選項(xiàng)為菜單欄目提示文本（2）Spry菜單欄構(gòu)件選項(xiàng)選項(xiàng)作（3）Spry選項(xiàng)卡式面板構(gòu)件選項(xiàng)卡式面板構(gòu)件是一組面板，用來(lái)將內(nèi)容存儲(chǔ)到緊湊空間中。訪問(wèn)者可以通過(guò)單擊要訪問(wèn)的面板上的選項(xiàng)卡，來(lái)隱藏或者顯示在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)訪問(wèn)者單擊不同的選項(xiàng)卡時(shí)，構(gòu)件的面板會(huì)相應(yīng)地打開(kāi)。（3）Spry選項(xiàng)卡式面板構(gòu)件選項(xiàng)卡式面板構(gòu)件是一組面板，用（4）Spry折疊構(gòu)件

Spry折疊構(gòu)件是可折疊的面板，可以將大量?jī)?nèi)容存儲(chǔ)在一個(gè)緊湊的空間中。訪問(wèn)者可以通過(guò)單擊該面板上的選項(xiàng)卡來(lái)隱藏或者顯示在折疊構(gòu)件中的內(nèi)容。折疊面板分為兩種：一種是多個(gè)面板的折疊式面板構(gòu)件，一種是只有一個(gè)面板的可折疊面板構(gòu)件。（4）Spry折疊構(gòu)件

Spry折疊構(gòu)件是可折疊的面板，可以3.3層的運(yùn)用在Dreamweaver中的層分為兩種格式：CSS層和Netscape層格式。（1）CSS層：使用DIV和SPAN標(biāo)記來(lái)定位網(wǎng)頁(yè)元素的位置。CSS層的優(yōu)點(diǎn)是具有良好的兼容性，InternetExplorer4.0和NetscapeNavigator4.0及它們的更高版本的瀏覽器都支持CSS層。（2）Netscape層：在網(wǎng)頁(yè)上定位元素使用的是LAYER和ILAYER標(biāo)簽。Netscape層只能被NetscapeNavigator4.0及更高版本的瀏覽器所支持。3.3層的運(yùn)用在Dreamweaver中的層分為兩種格式：C3.3.1創(chuàng)建層1.設(shè)置層的首選參數(shù)2.創(chuàng)建層：總結(jié)了3種方法3.設(shè)置層的屬性3.3.1創(chuàng)建層1.設(shè)置層的首選參數(shù)3.設(shè)置層的屬性（1）一個(gè)層的屬性設(shè)置屬性：層編號(hào)、左和上、寬和高、Z軸、可見(jiàn)性、背景圖像、背景顏色、溢出、剪輯（2）多個(gè)層的屬性設(shè)置如果選擇多個(gè)層，在“屬性”檢查器中可以對(duì)幾個(gè)層的共同屬性進(jìn)行設(shè)置。3.設(shè)置層的屬性（1）一個(gè)層的屬性設(shè)置3.3.2層的操作1.選定層2.移動(dòng)層3.改變層的大小4.調(diào)整層的層次5.對(duì)齊層6.層的嵌套7.設(shè)置層的可見(jiàn)性：3.3.2層的操作1.選定層4.調(diào)整層的層次方法一：在“屬性”檢查器的的“Z軸”項(xiàng)中輸入要求的疊放順序方法二：直接拖動(dòng)層4.調(diào)整層的層次方法一：在“屬性”檢查器的的“Z軸”項(xiàng)中輸入6.層的嵌套在層面板中選擇一個(gè)層，然后按住Ctrl鍵將選中的層拖到要嵌入的目標(biāo)層的上方，在目標(biāo)層名稱(chēng)的周?chē)霈F(xiàn)方框時(shí)釋放鼠標(biāo)，選中的層就成為目標(biāo)層的子層。6.層的嵌套在層面板中選擇一個(gè)層，然后按住Ctrl鍵將選中的3.3.3層與表格的關(guān)系1.使用層設(shè)計(jì)表格層和表格都是定位工具，兩者之間可以互相轉(zhuǎn)換。選擇【修改】|【轉(zhuǎn)換】|【層到表格】菜單項(xiàng)，彈出“轉(zhuǎn)換層為表格”對(duì)話框。2.防止層的重疊①選擇層面板上的“防止重疊”選項(xiàng)。②選擇【修改】|【排列順序】|【防止層重疊】菜單項(xiàng)。3.3.3層與表格的關(guān)系1.使用層設(shè)計(jì)表格3.4CSS樣式布局基礎(chǔ)和應(yīng)用使用表格能呈現(xiàn)數(shù)據(jù)間的關(guān)系；能在網(wǎng)頁(yè)上組織圖形和文本實(shí)現(xiàn)網(wǎng)頁(yè)布局。如果需要網(wǎng)頁(yè)呈現(xiàn)可視化的信息，例如，用語(yǔ)語(yǔ)言合成器朗讀，那么表格就不適于用來(lái)在這類(lèi)網(wǎng)頁(yè)上實(shí)現(xiàn)布局，只有使用CSS樣式布局才能實(shí)現(xiàn)。CSS是網(wǎng)頁(yè)設(shè)計(jì)中眾多樣式的集成，它可以使頁(yè)面風(fēng)格統(tǒng)一化和標(biāo)準(zhǔn)化。CSS提供的鏈接功能可以讓所有的網(wǎng)頁(yè)使用同一種樣式，使網(wǎng)頁(yè)的維護(hù)更新變得輕松、高效。3.4CSS樣式布局基礎(chǔ)和應(yīng)用使用表格能呈現(xiàn)數(shù)據(jù)間的關(guān)系；3.4.1CSS樣式表概述CSS英文全稱(chēng)為CascadingStyleSheets，中文全稱(chēng)為級(jí)聯(lián)樣式表或?qū)盈B樣式表，更多的人把它稱(chēng)之為樣式表，以下簡(jiǎn)稱(chēng)為CSS樣式。1．CSS樣式含義CSS是“層疊樣式表”的簡(jiǎn)稱(chēng)，通過(guò)CSS可以定制網(wǎng)頁(yè)中的文本格式，不僅可以控制一個(gè)頁(yè)面的文本格式，采用外部鏈接的方式還可以控制多個(gè)頁(yè)面的文本格式。CSS樣式定義方式有多種，主要有標(biāo)簽CSS樣式、類(lèi)CSS樣式和偽類(lèi)CSS樣式3種。3.4.1CSS樣式表概述CSS英文全稱(chēng)為Cascadin3.4.1CSS樣式表概述2．CSS樣式的功能CSS樣式的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁(yè)文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。使用CSS設(shè)置頁(yè)面格式時(shí)，可將網(wǎng)頁(yè)要展示的內(nèi)容與樣式設(shè)定分開(kāi)。這樣就可讓多個(gè)網(wǎng)頁(yè)文件共同使用它，省去了大量重復(fù)設(shè)置的麻煩。使用CSS可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。3.4.1CSS樣式表概述2．CSS樣式的功能3.4.1CSS樣式表概述3．CSS樣式的語(yǔ)法規(guī)則CSS格式設(shè)置規(guī)則由兩部分組成:（1）選擇器:選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語(yǔ)（如p、h1、類(lèi)名稱(chēng)或ID）。（2）聲明:定義樣式屬性,介于大括號(hào)({})之間如：h1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}3.4.1CSS樣式表概述3．CSS樣式的語(yǔ)法規(guī)則3.4.1CSS樣式表概述4．CSS樣式的類(lèi)型（1）在Dreamweaver中可以定義的樣式類(lèi)型①類(lèi)樣式②HTML標(biāo)簽樣式③高級(jí)樣式（2）CSS規(guī)則可以位于的位置①外部CSS樣式表②Internal（或嵌入式）CSS樣式表③內(nèi)聯(lián)樣式3.4.1CSS樣式表概述4．CSS樣式的類(lèi)型3.4.2CSS樣式面板“CSS樣式”面板中包含兩種模式：“全部”模式和“正在”模式，在該面板中可進(jìn)行新建、編輯、刪除CSS樣式和鏈接外部CSS文件等操作。3.4.2CSS樣式面板“CSS樣式”面板中包含兩種模式：3.4.2CSS樣式面板“CSS樣式”面板中的按鈕，面板底部共有7個(gè)按鈕，如下所示3.4.2CSS樣式面板“CSS樣式”面板中的按鈕，面板3.4.3CSS樣式的創(chuàng)建1.設(shè)置CSS樣式類(lèi)別及使用范圍單擊面板右下角的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，這是在新建CSS規(guī)則前先要完成的工作，即設(shè)置CSS樣式類(lèi)別及使用范圍。3.4.3CSS樣式的創(chuàng)建1.設(shè)置CSS樣式類(lèi)別及使用范圍3.4.3CSS樣式的創(chuàng)建當(dāng)完成“新建CSS規(guī)則”對(duì)話框的設(shè)置，隨后會(huì)彈出“CSS規(guī)則定義”對(duì)話框3.4.3CSS樣式的創(chuàng)建當(dāng)完成“新建CSS規(guī)則”對(duì)話框的3.4.3CSS樣式的創(chuàng)建2．CSS樣式類(lèi)別中各元素的設(shè)置CSS樣式類(lèi)別中各元素的設(shè)置對(duì)話框?qū)SS樣式分為8個(gè)類(lèi)別：①類(lèi)型、②背景、③區(qū)塊、④方框、⑤邊框、⑥列表、⑦定位、⑧擴(kuò)展。3.4.3CSS樣式的創(chuàng)建2．CSS樣式類(lèi)別中各元素的設(shè)置3.4.3CSS樣式的創(chuàng)建3．創(chuàng)建CSS規(guī)則(1)基本屬性設(shè)定網(wǎng)頁(yè)中最基本的屬性設(shè)置為網(wǎng)頁(yè)背景設(shè)置與文本設(shè)置(2)區(qū)域?qū)傩栽O(shè)定為了更精確地確定網(wǎng)頁(yè)元素所在網(wǎng)頁(yè)中的位置(3)元素特效設(shè)定網(wǎng)頁(yè)中的元素除了自身的屬性外，還可以通過(guò)CSS樣式為其添加其他效果，使其顯示效果更加豐富(4)擴(kuò)展屬性設(shè)定【擴(kuò)展】樣式屬性包括濾鏡、分頁(yè)和指針選項(xiàng)3.4.3CSS樣式的創(chuàng)建3．創(chuàng)建CSS規(guī)則3.4.3CSS樣式的創(chuàng)建4．在網(wǎng)頁(yè)中插入CSS在網(wǎng)頁(yè)中可以建立三種不同的定義CSS樣式的方法①類(lèi)、②標(biāo)簽、③高級(jí)（ID、偽類(lèi)選擇器等）偽類(lèi)選擇：

a:link設(shè)定正常狀態(tài)下鏈接文字的樣式。

a:active設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。

a:visited設(shè)定訪問(wèn)過(guò)的鏈接的外觀。

a:hover設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。3.4.3CSS樣式的創(chuàng)建4．在網(wǎng)頁(yè)中插入CSS3.4.4應(yīng)用自定義的CSS樣式1．應(yīng)用自定義的CSS樣式（1）在文檔窗口中，選定要應(yīng)用樣式的對(duì)象?？梢栽谖臋n窗口中直接選擇對(duì)象，也可以使用窗口底部狀態(tài)欄的標(biāo)簽選擇器來(lái)選擇對(duì)象。（2）從“屬性”檢查器上的“樣式”列表中選擇要應(yīng)用的樣式。２．取消對(duì)自定義CSS樣式的應(yīng)用3.4.4應(yīng)用自定義的CSS樣式1．應(yīng)用自定義的CSS樣式3.4.5附加外部CSS樣式表CSS樣式通常只顯示在創(chuàng)建該樣式的頁(yè)面的【CSS樣式】面板中，用戶可以選用自己文檔中的所有樣式表，用戶也可以選用或鏈接已存在的樣式表并應(yīng)用到文檔中在“CSS樣式”面板，單擊面板下方的“附加樣式表”按鈕，彈出“鏈接外部樣式表”對(duì)話框。3.4.5附加外部CSS樣式表CSS樣式通常只顯示在創(chuàng)建該樣3.4.6導(dǎo)出外部CSS樣式表為了達(dá)到樣式的共享，可以導(dǎo)出文檔中存在的所有樣式，步驟如下：（1）打開(kāi)CSS樣式面板，切換到“全部”模式。（2）選擇要導(dǎo)出的樣式，并單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“導(dǎo)出”，出現(xiàn)“導(dǎo)出樣式為CSS文件”對(duì)話框。（3）設(shè)置樣式文件的文件名和文件夾位置，單擊“保存”按鈕，關(guān)閉對(duì)話框，完成樣式的導(dǎo)出。3.4.6導(dǎo)出外部CSS樣式表為了達(dá)到樣式的共享，可以導(dǎo)出文3.4.7編輯CSS樣式表1.編輯當(dāng)前文檔中創(chuàng)建的CSS樣式表2.編輯外部CSS樣式表編輯外部CSS樣式表有兩種3.刪除CSS樣式如果不再需要某個(gè)CSS樣式，則可以將其刪除。在【CSS樣式】面板中選擇要?jiǎng)h除的CSS樣式，再單擊按鈕，即可刪除該CSS樣式。

3.4.7編輯CSS樣式表1.編輯當(dāng)前文檔中創(chuàng)建的CSS樣式3.4.8CSS樣式的優(yōu)先順序（1）如果將兩種樣式應(yīng)用于同一文本，在沒(méi)有沖突的情況下，瀏覽器顯示這兩種樣式的所有屬性；在有沖突的情況下，按CSS樣式的優(yōu)先規(guī)則處理沖突屬性。（2）發(fā)生沖突時(shí)，特別說(shuō)明的屬性優(yōu)先于要繼承的屬性。例如：body{color：green；}p{color：red；}（3）如果應(yīng)用于同一文本的兩種樣式發(fā)生沖突，則瀏覽器根據(jù)在代碼中的順序優(yōu)先顯示最里面的樣式（代碼窗口中離文本本身最近的樣式）的屬性。（4）如果樣式表中的屬性與HTML標(biāo)簽中的屬性發(fā)生沖突時(shí)，則定義文本最內(nèi)層的屬性優(yōu)先顯示3.4.8CSS樣式的優(yōu)先順序（1）如果將兩種樣式應(yīng)用于同3.4.9Spry框架中的CSS設(shè)置1．Spry面板樣式設(shè)置（1）關(guān)于折疊構(gòu)件

（2）插入和編輯折疊構(gòu)件

①插入折疊構(gòu)件的操作步驟：②將面板添加到折疊構(gòu)件的操作步驟：③從折疊構(gòu)件刪除面板④打開(kāi)面板進(jìn)行編輯⑤更改面板的順序的操作步驟：（3）自定義折疊構(gòu)件

①設(shè)置折疊構(gòu)件文本的樣式②更改折疊構(gòu)件的背景顏色③限制折疊的寬度3.4.9Spry框架中的CSS設(shè)置1．Spry面板樣式設(shè)3.4.9Spry框架中的CSS設(shè)置2．Spry菜單欄樣式設(shè)置例一：背景圖案居中固定3.4.9Spry框架中的CSS設(shè)置2．Spry菜單欄樣式3.4.9Spry框架中的CSS設(shè)置2．Spry菜單欄樣式設(shè)置例二：豎排詩(shī)歌例三：多彩鏈接文字例3.4.9Spry框架中的CSS設(shè)置2．Spry菜單欄樣式3.5各種樣式表元素應(yīng)用3.5.1文字樣式3.5.2邊框樣式3.5.3顏色樣式3.6.1色彩基礎(chǔ)知識(shí)1.色彩理論(1)色相(2)飽和度(3)明度2.216網(wǎng)頁(yè)安全色3.5各種樣式表元素應(yīng)用3.5.1文字樣式3.5各種樣式表元素應(yīng)用3.6.1色彩基礎(chǔ)知識(shí)3.網(wǎng)頁(yè)配色方法(1)網(wǎng)頁(yè)自定義顏色(2)色彩推移①明度推移②色相推移③純度推移(3)色彩采集①對(duì)自然色的采集

②對(duì)傳統(tǒng)色的采集

③對(duì)民間色的采集

④對(duì)圖片色的采集

3.5各種樣式表元素應(yīng)用3.6.1色彩基礎(chǔ)知識(shí)3.5各種樣式表元素應(yīng)用3.6.2網(wǎng)頁(yè)色彩搭配的原則(配色方案)1．色相對(duì)比2．明度對(duì)比3．純度對(duì)比3.5各種樣式表元素應(yīng)用3.6.2網(wǎng)頁(yè)色彩搭配的原則(配3.6.2網(wǎng)頁(yè)色彩搭配的原則4．綜合對(duì)比及色調(diào)變化鮮色調(diào)、灰色調(diào)、深色調(diào)、淺色調(diào)、中色調(diào)5．色彩的面積與位置對(duì)比6．色彩的肌理對(duì)比7．色彩的連續(xù)對(duì)比8．同時(shí)對(duì)比（1）面積法

（2）阻隔法

又稱(chēng)色彩間隔法、分離法等

（3）統(tǒng)調(diào)法、削弱法、綜合法

3.6.2網(wǎng)頁(yè)色彩搭配的原則4．綜合對(duì)比及色調(diào)變化3.6.2網(wǎng)頁(yè)色彩搭配的原則9．色彩調(diào)和(1)同一調(diào)和混入同一白色調(diào)和、混入同一白色調(diào)和、混入同一灰色調(diào)和、混入同一原色調(diào)和、混入同一間色、復(fù)色調(diào)和互混調(diào)和、點(diǎn)綴色同一調(diào)和、連貫同一色調(diào)和、同色相的調(diào)和、同明度的調(diào)和、同彩度的調(diào)和。

(2)近似調(diào)和(3)秩序的調(diào)和(4)面積的調(diào)和(5)同類(lèi)調(diào)和(6)分割調(diào)和3.6.2網(wǎng)頁(yè)色彩搭配的原則9．色彩調(diào)和3.6.3網(wǎng)站中的色彩應(yīng)用1.網(wǎng)站色彩分析(1)網(wǎng)站風(fēng)格與色彩設(shè)計(jì):①公司色、②風(fēng)格色、③習(xí)慣色(2)網(wǎng)站主題與色彩設(shè)計(jì)(3)全球網(wǎng)站的主色調(diào)3.6.3網(wǎng)站中的色彩應(yīng)用1.網(wǎng)站色彩分析(3)全球網(wǎng)站的主色調(diào)

全球網(wǎng)站的主色調(diào)是以藍(lán)色和紅色為主

(3)全球網(wǎng)站的主色調(diào)

全球網(wǎng)站的主色調(diào)是以藍(lán)色和紅色為主3.6.3網(wǎng)站中的色彩應(yīng)用2.網(wǎng)頁(yè)色彩規(guī)則（1）色彩搭配原則：色彩的鮮明性、色彩的獨(dú)特性、色彩的藝術(shù)性、色彩搭配的合理性。（2）網(wǎng)頁(yè)色彩搭配方法：同種色彩搭配、近色彩搭配、對(duì)比色彩搭配、暖色色彩搭配、冷色色彩搭配、有主色的混合色彩搭配、文字與網(wǎng)頁(yè)的背景色對(duì)比要突出、（3）網(wǎng)頁(yè)設(shè)計(jì)中幾種色彩分析及其之間的搭配：①紅色、②黃色、③藍(lán)色、④綠色、⑤紫色、⑥橙色、⑦白色、⑧黑色、⑨灰色、3.6.3網(wǎng)站中的色彩應(yīng)用2.網(wǎng)頁(yè)色彩規(guī)則3.7網(wǎng)頁(yè)布局控制3.7.1布局控制的作用3.7.2常見(jiàn)的網(wǎng)頁(yè)布局1.結(jié)構(gòu)布局：（1）“國(guó)”字型網(wǎng)頁(yè)布局、（2）拐角型網(wǎng)頁(yè)布局、（3）左右框架型網(wǎng)頁(yè)布局、（4）上下框架型網(wǎng)頁(yè)布局、（5）綜合框架型網(wǎng)頁(yè)布局、（6）變化型網(wǎng)頁(yè)布局、（7）封面型網(wǎng)頁(yè)布局3.7網(wǎng)頁(yè)布局控制3.7.1布局控制的作用3.7.2常見(jiàn)的網(wǎng)頁(yè)布局

2.藝術(shù)布局（1）標(biāo)題正文型

（2）Flash型

3.7.2常見(jiàn)的網(wǎng)頁(yè)布局

2.藝術(shù)布局3.7.3網(wǎng)頁(yè)布局補(bǔ)遺1．關(guān)于第一屏所謂第一屏，是指到達(dá)一個(gè)網(wǎng)站在不拖動(dòng)滾動(dòng)條時(shí)能夠看到的部分

2．有關(guān)導(dǎo)航欄的位置導(dǎo)航欄能讓用戶在瀏覽時(shí)容易的到達(dá)不同的頁(yè)面，是網(wǎng)頁(yè)元素非常重要的部分，所以導(dǎo)航欄一定要清晰、醒目。3.7.3網(wǎng)頁(yè)布局補(bǔ)遺1．關(guān)于第一屏第三章網(wǎng)頁(yè)色彩和布局的控制第三章網(wǎng)頁(yè)色彩和布局的控制3.1表格應(yīng)用表格是用于在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具，雖然HTML代碼中通常不明確指定列，但Dreamweaver允許操作列、行和單元格。

表格有很好的兼容性，可被絕大部分的瀏覽器所支持，而且使用表格會(huì)使頁(yè)面結(jié)構(gòu)清晰、布局整齊。Dreamweaver提供了兩種查看和操作表格的方式，即“標(biāo)準(zhǔn)”模式和“布局”模式。3.1表格應(yīng)用表格是用于在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文3.1.1表格基礎(chǔ)日常生活中，最常見(jiàn)的表格是用來(lái)顯示數(shù)據(jù)的，比如Excel中的表格。在Dreamweaver中，表格除了可以顯示數(shù)據(jù)外，最主要的功能是定位與排版。這樣才能夠?qū)⑶懊娼榻B過(guò)的文本與圖像定位在網(wǎng)頁(yè)中的任何想要顯示的區(qū)域中。1.表格建立 網(wǎng)頁(yè)設(shè)計(jì)就是從創(chuàng)建表格開(kāi)始的，先學(xué)習(xí)表格的創(chuàng)建可以為后來(lái)的網(wǎng)頁(yè)設(shè)計(jì)奠定基礎(chǔ)。 3.1.1表格基礎(chǔ)日常生活中，最常見(jiàn)的表格是用來(lái)顯示數(shù)據(jù)的(1)創(chuàng)建各種表格選項(xiàng)作用行數(shù)用于確定表格的行數(shù)。列數(shù)用于確定表格的列數(shù)。表格寬度以像素或者百分比為單位確定表格的寬度。邊框粗細(xì)以像素為單位指定表格邊框的寬度。單元格邊距指定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)，如果不希望顯示邊框時(shí)，設(shè)置為0像素。單元格間距指定相鄰的單元格之間的像素?cái)?shù)。(1)創(chuàng)建各種表格選項(xiàng)作創(chuàng)建各種表格無(wú)對(duì)表不啟用列或行標(biāo)題，默認(rèn)情況下此項(xiàng)被選中。左側(cè)將表的第一列作為標(biāo)題列，便于為每一行輸入一個(gè)標(biāo)題。頂部將表的第一行作為標(biāo)題行，便于為每一列輸入一個(gè)標(biāo)題。兩者在表中輸入列標(biāo)題和行標(biāo)題。標(biāo)題指定在表格外顯示的標(biāo)題。對(duì)齊標(biāo)題指定表格標(biāo)題相對(duì)于表格的顯示位置，采用默認(rèn)方式。摘要用于說(shuō)明表格。創(chuàng)建各種表格無(wú)對(duì)表不啟用列或行標(biāo)題，默認(rèn)情況下此項(xiàng)被選中。左1.表格建立(2)在表格中插入網(wǎng)頁(yè)元素(3)設(shè)置表格屬性即使在網(wǎng)頁(yè)中插入一個(gè)最簡(jiǎn)單的表格，也具有表格的幾個(gè)重要的元素，那就是表格整體、行、列和單元格。所以插入表格后，【屬性】面板中顯示的是該表格的基本屬性。表格的基本屬性如表3.2所示。1.表格建立(2)在表格中插入網(wǎng)頁(yè)元素表3.2表格的基本屬性參數(shù)含義表格Id設(shè)置表格的名稱(chēng)，也就是表格的Id。行/列在文本框中分別輸入表格中行和列的數(shù)目寬在文本框中輸入表格寬度，以像素為單位或按占瀏覽器窗口寬度的百分比進(jìn)行計(jì)算。填充在文本框中輸入單元格內(nèi)容和單元格邊框之間的像素?cái)?shù)。間距在文本框中輸入相鄰單元格之間的像素?cái)?shù)。表3.2表格的基本屬性參數(shù)含表格的基本屬性對(duì)齊用于確定表格相對(duì)于同一段落中其他元素（例如文本或圖像）的顯示位置。包括左對(duì)齊、右對(duì)齊和居中對(duì)齊。當(dāng)對(duì)齊方式為【默認(rèn)】時(shí)，其他內(nèi)容不顯示在表格的旁邊。邊框用于指定表格邊框的寬度（以像素為單位）。類(lèi)可以將CSS規(guī)則應(yīng)用于對(duì)象。背景顏色設(shè)置表格的背景顏色。邊框顏色設(shè)置表格邊框的顏色。背景圖像為表格添加背景圖像。表格的基本屬性對(duì)齊用于確定表格相對(duì)于同一段落中其他元素（例如2．編輯表格(1)選中表格元素(2)調(diào)整表格大小2．編輯表格(1)選中表格元素2．編輯表格

(3)合并及拆分表格元素當(dāng)創(chuàng)建的表格不符合要求時(shí)，可以通過(guò)刪除或增加表格的行與列，以及合并或者拆分單元格來(lái)實(shí)現(xiàn)2．編輯表格(3)合并及拆分表格元素2．編輯表格(4)復(fù)制及粘貼單元格2．編輯表格(4)復(fù)制及粘貼單元格3．布局表格(1)創(chuàng)建布局表格與單元格(2)布局表格與單元格屬性選項(xiàng)作用寬有【固定】和【自動(dòng)伸展】?jī)蓚€(gè)選項(xiàng)：當(dāng)選中【固定】單選按鈕時(shí)，可以直接在右側(cè)的文本框中輸入表格的寬度值。當(dāng)選中【自動(dòng)伸展】單選按鈕時(shí)，則表格的寬度可以根據(jù)插入的內(nèi)容自動(dòng)進(jìn)行調(diào)整。高在其后的文本框中輸入表格的高度。背景顏色用于設(shè)置表格的背景顏色。3．布局表格(1)創(chuàng)建布局表格與單元格選項(xiàng)作布局表格與單元格屬性填充用于設(shè)置單元格內(nèi)容和邊框的距離。間距用于設(shè)置表格內(nèi)單元格之間的距離。清除行高按鈕：對(duì)行高進(jìn)行清除使單元格寬度一致按鈕：表格內(nèi)的單元格寬度自動(dòng)隨著單元格的內(nèi)容寬度變化。刪除所有間隔圖像按鈕：清除表格中的所有間隔圖像。刪除嵌套按鈕：清除嵌套表格，只有當(dāng)存在嵌套表格時(shí)，該選項(xiàng)才顯示。類(lèi)可以將CSS規(guī)則應(yīng)用于對(duì)象布局表格與單元格屬性填充用于設(shè)置單元格內(nèi)容和邊框的距離。間距4．表格制作實(shí)例（1）一像素表格（2）圓角相框4．表格制作實(shí)例（1）一像素表格4．表格制作實(shí)例（3）可隱藏的說(shuō)明書(shū)4．表格制作實(shí)例（3）可隱藏的說(shuō)明書(shū)3.1.2修飾網(wǎng)頁(yè)各種元素（1）網(wǎng)頁(yè)各種元素標(biāo)簽（2）HTML信息（3）文本標(biāo)簽（4）圖像標(biāo)簽（5）表格標(biāo)簽（6）鏈接標(biāo)簽3.1.2修飾網(wǎng)頁(yè)各種元素（1）網(wǎng)頁(yè)各種元素標(biāo)簽（5）表格標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注表格標(biāo)記<TABLE>表格標(biāo)記設(shè)定該表格的各項(xiàng)參數(shù)

<CAPTION>表格標(biāo)題做成一行通列以填入表格標(biāo)題

<TR>表格列設(shè)定該表格的列

<TD>表格欄設(shè)定該表格的欄

<TH>表格標(biāo)頭相等于<TD>，但其內(nèi)之字體會(huì)變粗

（5）表格標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注表格標(biāo)記<TABLE（6）鏈接標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注鏈接標(biāo)簽<A>鏈接標(biāo)記加入鏈接

<BASE>基準(zhǔn)標(biāo)記指定一個(gè)顯式URL用于解析對(duì)于外部源的鏈接和引用，如圖像和樣式表。

影像地圖<MAP>影像地圖名稱(chēng)設(shè)定影像地圖名稱(chēng)

<AREA>鏈接區(qū)域設(shè)定各鏈接區(qū)域

（6）鏈接標(biāo)簽標(biāo)簽類(lèi)型譯名或意義作用備注鏈接標(biāo)簽<A>鏈接標(biāo)3.2框架的規(guī)劃與建立3.2.1框架與表格1.框架和表格的區(qū)別2.使用框架的優(yōu)缺點(diǎn)：（1）優(yōu)點(diǎn)訪問(wèn)者的瀏覽器不需為每個(gè)頁(yè)面重新加載導(dǎo)航條；每個(gè)框架都具有自己的滾動(dòng)條，因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架進(jìn)行瀏覽。（2）缺點(diǎn)①并不是所有瀏覽器都提供良好的框架支持；②難以實(shí)現(xiàn)在不同框架中精確的對(duì)齊各個(gè)頁(yè)面元素。3.2框架的規(guī)劃與建立3.2.1框架與表格3.2.2規(guī)劃框架框架最常見(jiàn)的用法就是實(shí)現(xiàn)頁(yè)面導(dǎo)航，一般是將頁(yè)面劃分為一個(gè)導(dǎo)航區(qū)和一個(gè)內(nèi)容區(qū)。這些框架中的每一個(gè)都是一個(gè)獨(dú)立的HTML頁(yè)面?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁(yè)面的URL?？蚣芗募辉跒g覽器中顯示，只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。3.2.2規(guī)劃框架框架最常見(jiàn)的用法就是實(shí)現(xiàn)頁(yè)面導(dǎo)航，一般是3.2.3創(chuàng)建框架1.選擇框架集和框架（1）在“框架”面板中選擇框架和框架集（2）在文檔窗口中選擇框架和框架集2.設(shè)置框架集和框架屬性(1)設(shè)置框架集屬性(2)設(shè)置框架屬性選擇要查看或設(shè)置屬性的框架集，在“屬性”檢查器中，查看所有框架集屬性。3.2.3創(chuàng)建框架1.選擇框架集和框架3.2.3創(chuàng)建框架設(shè)置框架集屬性邊框邊框?qū)挾冗吙蝾伾蚣艽笮?.2.3創(chuàng)建框架設(shè)置框架集屬性3.2.3創(chuàng)建框架設(shè)置框架屬性框架名稱(chēng)源文件滾動(dòng)不能調(diào)整大小邊框及邊框顏色，邊界寬度和高度3.2.3創(chuàng)建框架設(shè)置框架屬性3.2.4框架的操作1.改變框架尺寸2.嵌套框架3.拆分框架4.保存框架5.在框架中顯示頁(yè)面（1）直接在框架中編輯空文檔（2）在框架中打開(kāi)現(xiàn)有文檔（3）在屬性檢查器為框架設(shè)置源文件（4）設(shè)置超鏈接的目標(biāo)框架6.刪除框架3.2.4框架的操作1.改變框架尺寸3.2.5Spry框架（1）Spry框架概念Spry框架支持一組用標(biāo)準(zhǔn)HTML、CSS和JavaScript編寫(xiě)的可重用構(gòu)件。Spry構(gòu)件是一個(gè)頁(yè)面元素，通過(guò)啟用用戶交互來(lái)提供更豐富的用戶體驗(yàn)。（2）Spry菜單欄構(gòu)件（3）Spry選項(xiàng)卡式面板構(gòu)件（4）Spry折疊構(gòu)件3.2.5Spry框架（1）Spry框架概念（2）Spry菜單欄構(gòu)件選項(xiàng)選項(xiàng)作用菜單欄名稱(chēng)默認(rèn)菜單欄名稱(chēng)為MenuBar1，該名稱(chēng)不能以漢字命名，可以使用字母或者數(shù)字。禁用樣式單擊該按鈕，菜單欄變成項(xiàng)目列表，并且按鈕名稱(chēng)更改為【啟用樣式】。菜單欄目在【屬性】面板中包括主菜單欄目、一級(jí)菜單欄目與二級(jí)菜單欄目文本在該選項(xiàng)文本框中設(shè)置欄目名稱(chēng)。鏈接該選項(xiàng)可以為菜單欄目添加鏈接文件，默認(rèn)情況下為空鏈接。單擊【瀏覽】按鈕可以選擇鏈接文件。目標(biāo)該選項(xiàng)指定要在何處打開(kāi)所鏈接的頁(yè)面。標(biāo)題該選項(xiàng)為菜單欄目提示文本（2）Spry菜單欄構(gòu)件選項(xiàng)選項(xiàng)作（3）Spry選項(xiàng)卡式面板構(gòu)件選項(xiàng)卡式面板構(gòu)件是一組面板，用來(lái)將內(nèi)容存儲(chǔ)到緊湊空間中。訪問(wèn)者可以通過(guò)單擊要訪問(wèn)的面板上的選項(xiàng)卡，來(lái)隱藏或者顯示在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)訪問(wèn)者單擊不同的選項(xiàng)卡時(shí)，構(gòu)件的面板會(huì)相應(yīng)地打開(kāi)。（3）Spry選項(xiàng)卡式面板構(gòu)件選項(xiàng)卡式面板構(gòu)件是一組面板，用（4）Spry折疊構(gòu)件

Spry折疊構(gòu)件是可折疊的面板，可以將大量?jī)?nèi)容存儲(chǔ)在一個(gè)緊湊的空間中。訪問(wèn)者可以通過(guò)單擊該面板上的選項(xiàng)卡來(lái)隱藏或者顯示在折疊構(gòu)件中的內(nèi)容。折疊面板分為兩種：一種是多個(gè)面板的折疊式面板構(gòu)件，一種是只有一個(gè)面板的可折疊面板構(gòu)件。（4）Spry折疊構(gòu)件

Spry折疊構(gòu)件是可折疊的面板，可以3.3層的運(yùn)用在Dreamweaver中的層分為兩種格式：CSS層和Netscape層格式。（1）CSS層：使用DIV和SPAN標(biāo)記來(lái)定位網(wǎng)頁(yè)元素的位置。CSS層的優(yōu)點(diǎn)是具有良好的兼容性，InternetExplorer4.0和NetscapeNavigator4.0及它們的更高版本的瀏覽器都支持CSS層。（2）Netscape層：在網(wǎng)頁(yè)上定位元素使用的是LAYER和ILAYER標(biāo)簽。Netscape層只能被NetscapeNavigator4.0及更高版本的瀏覽器所支持。3.3層的運(yùn)用在Dreamweaver中的層分為兩種格式：C3.3.1創(chuàng)建層1.設(shè)置層的首選參數(shù)2.創(chuàng)建層：總結(jié)了3種方法3.設(shè)置層的屬性3.3.1創(chuàng)建層1.設(shè)置層的首選參數(shù)3.設(shè)置層的屬性（1）一個(gè)層的屬性設(shè)置屬性：層編號(hào)、左和上、寬和高、Z軸、可見(jiàn)性、背景圖像、背景顏色、溢出、剪輯（2）多個(gè)層的屬性設(shè)置如果選擇多個(gè)層，在“屬性”檢查器中可以對(duì)幾個(gè)層的共同屬性進(jìn)行設(shè)置。3.設(shè)置層的屬性（1）一個(gè)層的屬性設(shè)置3.3.2層的操作1.選定層2.移動(dòng)層3.改變層的大小4.調(diào)整層的層次5.對(duì)齊層6.層的嵌套7.設(shè)置層的可見(jiàn)性：3.3.2層的操作1.選定層4.調(diào)整層的層次方法一：在“屬性”檢查器的的“Z軸”項(xiàng)中輸入要求的疊放順序方法二：直接拖動(dòng)層4.調(diào)整層的層次方法一：在“屬性”檢查器的的“Z軸”項(xiàng)中輸入6.層的嵌套在層面板中選擇一個(gè)層，然后按住Ctrl鍵將選中的層拖到要嵌入的目標(biāo)層的上方，在目標(biāo)層名稱(chēng)的周?chē)霈F(xiàn)方框時(shí)釋放鼠標(biāo)，選中的層就成為目標(biāo)層的子層。6.層的嵌套在層面板中選擇一個(gè)層，然后按住Ctrl鍵將選中的3.3.3層與表格的關(guān)系1.使用層設(shè)計(jì)表格層和表格都是定位工具，兩者之間可以互相轉(zhuǎn)換。選擇【修改】|【轉(zhuǎn)換】|【層到表格】菜單項(xiàng)，彈出“轉(zhuǎn)換層為表格”對(duì)話框。2.防止層的重疊①選擇層面板上的“防止重疊”選項(xiàng)。②選擇【修改】|【排列順序】|【防止層重疊】菜單項(xiàng)。3.3.3層與表格的關(guān)系1.使用層設(shè)計(jì)表格3.4CSS樣式布局基礎(chǔ)和應(yīng)用使用表格能呈現(xiàn)數(shù)據(jù)間的關(guān)系；能在網(wǎng)頁(yè)上組織圖形和文本實(shí)現(xiàn)網(wǎng)頁(yè)布局。如果需要網(wǎng)頁(yè)呈現(xiàn)可視化的信息，例如，用語(yǔ)語(yǔ)言合成器朗讀，那么表格就不適于用來(lái)在這類(lèi)網(wǎng)頁(yè)上實(shí)現(xiàn)布局，只有使用CSS樣式布局才能實(shí)現(xiàn)。CSS是網(wǎng)頁(yè)設(shè)計(jì)中眾多樣式的集成，它可以使頁(yè)面風(fēng)格統(tǒng)一化和標(biāo)準(zhǔn)化。CSS提供的鏈接功能可以讓所有的網(wǎng)頁(yè)使用同一種樣式，使網(wǎng)頁(yè)的維護(hù)更新變得輕松、高效。3.4CSS樣式布局基礎(chǔ)和應(yīng)用使用表格能呈現(xiàn)數(shù)據(jù)間的關(guān)系；3.4.1CSS樣式表概述CSS英文全稱(chēng)為CascadingStyleSheets，中文全稱(chēng)為級(jí)聯(lián)樣式表或?qū)盈B樣式表，更多的人把它稱(chēng)之為樣式表，以下簡(jiǎn)稱(chēng)為CSS樣式。1．CSS樣式含義CSS是“層疊樣式表”的簡(jiǎn)稱(chēng)，通過(guò)CSS可以定制網(wǎng)頁(yè)中的文本格式，不僅可以控制一個(gè)頁(yè)面的文本格式，采用外部鏈接的方式還可以控制多個(gè)頁(yè)面的文本格式。CSS樣式定義方式有多種，主要有標(biāo)簽CSS樣式、類(lèi)CSS樣式和偽類(lèi)CSS樣式3種。3.4.1CSS樣式表概述CSS英文全稱(chēng)為Cascadin3.4.1CSS樣式表概述2．CSS樣式的功能CSS樣式的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁(yè)文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。使用CSS設(shè)置頁(yè)面格式時(shí)，可將網(wǎng)頁(yè)要展示的內(nèi)容與樣式設(shè)定分開(kāi)。這樣就可讓多個(gè)網(wǎng)頁(yè)文件共同使用它，省去了大量重復(fù)設(shè)置的麻煩。使用CSS可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。3.4.1CSS樣式表概述2．CSS樣式的功能3.4.1CSS樣式表概述3．CSS樣式的語(yǔ)法規(guī)則CSS格式設(shè)置規(guī)則由兩部分組成:（1）選擇器:選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語(yǔ)（如p、h1、類(lèi)名稱(chēng)或ID）。（2）聲明:定義樣式屬性,介于大括號(hào)({})之間如：h1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}3.4.1CSS樣式表概述3．CSS樣式的語(yǔ)法規(guī)則3.4.1CSS樣式表概述4．CSS樣式的類(lèi)型（1）在Dreamweaver中可以定義的樣式類(lèi)型①類(lèi)樣式②HTML標(biāo)簽樣式③高級(jí)樣式（2）CSS規(guī)則可以位于的位置①外部CSS樣式表②Internal（或嵌入式）CSS樣式表③內(nèi)聯(lián)樣式3.4.1CSS樣式表概述4．CSS樣式的類(lèi)型3.4.2CSS樣式面板“CSS樣式”面板中包含兩種模式：“全部”模式和“正在”模式，在該面板中可進(jìn)行新建、編輯、刪除CSS樣式和鏈接外部CSS文件等操作。3.4.2CSS樣式面板“CSS樣式”面板中包含兩種模式：3.4.2CSS樣式面板“CSS樣式”面板中的按鈕，面板底部共有7個(gè)按鈕，如下所示3.4.2CSS樣式面板“CSS樣式”面板中的按鈕，面板3.4.3CSS樣式的創(chuàng)建1.設(shè)置CSS樣式類(lèi)別及使用范圍單擊面板右下角的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，這是在新建CSS規(guī)則前先要完成的工作，即設(shè)置CSS樣式類(lèi)別及使用范圍。3.4.3CSS樣式的創(chuàng)建1.設(shè)置CSS樣式類(lèi)別及使用范圍3.4.3CSS樣式的創(chuàng)建當(dāng)完成“新建CSS規(guī)則”對(duì)話框的設(shè)置，隨后會(huì)彈出“CSS規(guī)則定義”對(duì)話框3.4.3CSS樣式的創(chuàng)建當(dāng)完成“新建CSS規(guī)則”對(duì)話框的3.4.3CSS樣式的創(chuàng)建2．CSS樣式類(lèi)別中各元素的設(shè)置CSS樣式類(lèi)別中各元素的設(shè)置對(duì)話框?qū)SS樣式分為8個(gè)類(lèi)別：①類(lèi)型、②背景、③區(qū)塊、④方框、⑤邊框、⑥列表、⑦定位、⑧擴(kuò)展。3.4.3CSS樣式的創(chuàng)建2．CSS樣式類(lèi)別中各元素的設(shè)置3.4.3CSS樣式的創(chuàng)建3．創(chuàng)建CSS規(guī)則(1)基本屬性設(shè)定網(wǎng)頁(yè)中最基本的屬性設(shè)置為網(wǎng)頁(yè)背景設(shè)置與文本設(shè)置(2)區(qū)域?qū)傩栽O(shè)定為了更精確地確定網(wǎng)頁(yè)元素所在網(wǎng)頁(yè)中的位置(3)元素特效設(shè)定網(wǎng)頁(yè)中的元素除了自身的屬性外，還可以通過(guò)CSS樣式為其添加其他效果，使其顯示效果更加豐富(4)擴(kuò)展屬性設(shè)定【擴(kuò)展】樣式屬性包括濾鏡、分頁(yè)和指針選項(xiàng)3.4.3CSS樣式的創(chuàng)建3．創(chuàng)建CSS規(guī)則3.4.3CSS樣式的創(chuàng)建4．在網(wǎng)頁(yè)中插入CSS在網(wǎng)頁(yè)中可以建立三種不同的定義CSS樣式的方法①類(lèi)、②標(biāo)簽、③高級(jí)（ID、偽類(lèi)選擇器等）偽類(lèi)選擇：

a:link設(shè)定正常狀態(tài)下鏈接文字的樣式。

a:active設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。

a:visited設(shè)定訪問(wèn)過(guò)的鏈接的外觀。

a:hover設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。3.4.3CSS樣式的創(chuàng)建4．在網(wǎng)頁(yè)中插入CSS3.4.4應(yīng)用自定義的CSS樣式1．應(yīng)用自定義的CSS樣式（1）在文檔窗口中，選定要應(yīng)用樣式的對(duì)象?？梢栽谖臋n窗口中直接選擇對(duì)象，也可以使用窗口底部狀態(tài)欄的標(biāo)簽選擇器來(lái)選擇對(duì)象。（2）從“屬性”檢查器上的“樣式”列表中選擇要應(yīng)用的樣式。２．取消對(duì)自定義CSS樣式的應(yīng)用3.4.4應(yīng)用自定義的CSS樣式1．應(yīng)用自定義的CSS樣式3.4.5附加外部CSS樣式表CSS樣式通常只顯示在創(chuàng)建該樣式的頁(yè)面的【CSS樣式】面板中，用戶可以選用自己文檔中的所有樣式表，用戶也可以選用或鏈接已存在的樣式表并應(yīng)用到文檔中在“CSS樣式”面板，單擊面板下方的“附加樣式表”按鈕，彈出“鏈接外部樣式表”對(duì)話框。3.4.5附加外部CSS樣式表CSS樣式通常只顯示在創(chuàng)建該樣3.4.6導(dǎo)出外部CSS樣式表為了達(dá)到樣式的共享，可以導(dǎo)出文檔中存在的所有樣式，步驟如下：（1）打開(kāi)CSS樣式面板，切換到“全部”模式。（2）選擇要導(dǎo)出的樣式，并單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“導(dǎo)出”，出現(xiàn)“導(dǎo)出樣式為CSS文件”對(duì)話框。（3）設(shè)置樣式文件的文件名和文件夾位置，單擊“保存”按鈕，關(guān)閉對(duì)話框，完成樣式的導(dǎo)出。3.4.6導(dǎo)出外部CSS樣式表為了達(dá)到樣式的共享，可以導(dǎo)出文3.4.7編輯CSS樣式表1.編輯當(dāng)前文檔中創(chuàng)建的CSS樣式表2.編輯外部CSS樣式表編輯外部CSS樣式表有兩種3.刪除CSS樣式如果不再需要某個(gè)CSS樣式，則可以將其刪除。在【CSS樣式】面板中選擇要?jiǎng)h除的CSS樣式，再單擊按鈕，即可刪除該CSS樣式。

3.4.7編輯CSS樣式表1.編輯當(dāng)前文檔中創(chuàng)建的CSS樣式3.4.8CSS樣式的優(yōu)先順序（1）如果將兩種樣式應(yīng)用于同一文本，在沒(méi)有沖突的情況下，瀏覽器顯示這兩種樣式的所有屬性；在有沖突的情況下，按CSS樣式的優(yōu)先規(guī)則處理沖突屬性。（2）發(fā)生沖突時(shí)，特別說(shuō)明的屬性優(yōu)先于要繼承的屬性。例如：body{color：green；