項(xiàng)目08制作購物網(wǎng)頁

1、主講：主講：網(wǎng)頁設(shè)計(jì)與制作Dreamweaver CS3項(xiàng)目八 制作購物網(wǎng)頁任務(wù)一 制作頁眉任務(wù)二 制作網(wǎng)頁主體項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁網(wǎng) 頁 設(shè) 計(jì) 與 制 作Dreamweaver CS3任務(wù)一任務(wù)二任務(wù)三 制作頁腳小 結(jié)任務(wù)三實(shí) 訓(xùn)任務(wù)一 制作頁眉 在現(xiàn)代網(wǎng)頁布局中，Div標(biāo)簽是經(jīng)常使用到的。但Div本身只是一個區(qū)域標(biāo)簽，不能定位與布局，真正定位的是CSS代碼。本任務(wù)主要介紹購物網(wǎng)頁頁眉的制作及使用CSS樣式控制其外觀的基本方法。Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)操作一 布局網(wǎng)

2、站標(biāo)識Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作本操作主要介紹插入本操作主要介紹插入Div標(biāo)簽以及簡單使用標(biāo)簽以及簡單使用CSS樣式的基樣式的基本方法。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：本方法。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有： 1. 插入Div標(biāo)簽 將光標(biāo)置于文檔內(nèi)，然后在主菜單中選擇將光標(biāo)置于文檔內(nèi)，然后在主菜單中選擇【插入記錄插入記錄】【布局對象布局對象】【Div標(biāo)簽標(biāo)簽】命令（或在命令（或在【插入插入】【布局布局】面面板中單擊板中單擊 按鈕）打開按鈕）打開【插入插入Div標(biāo)簽標(biāo)簽】對話框?qū)υ捒?。?xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三

3、實(shí) 訓(xùn)操作一 布局網(wǎng)站標(biāo)識Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)2.使用Div標(biāo)簽布局網(wǎng)頁 使用使用Div標(biāo)簽布局網(wǎng)頁，它的對齊方式只有標(biāo)簽布局網(wǎng)頁，它的對齊方式只有“左對齊左對齊”和和“右對齊右對齊”，如果要使，如果要使Div標(biāo)簽居中顯示，可以將它的邊界，特標(biāo)簽居中顯示，可以將它的邊界，特別是左邊界和右邊界設(shè)置為別是左邊界和右邊界設(shè)置為“自動自動”即可。即可。 Div標(biāo)簽標(biāo)簽【屬性屬性】面板比較簡單，只有面板比較簡單，只有【Div ID】和和【類類】兩個下拉菜單項(xiàng)和一個按鈕。使用兩個下拉菜單項(xiàng)和一個按鈕

4、。使用Div標(biāo)簽布局網(wǎng)頁必須和標(biāo)簽布局網(wǎng)頁必須和CSS相結(jié)合，它的大小、背景等內(nèi)容需要通過相結(jié)合，它的大小、背景等內(nèi)容需要通過CSS來控制。來控制。 操作一 布局網(wǎng)站標(biāo)識Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)3.認(rèn)識【CSS樣式】面板 在主菜單中選擇在主菜單中選擇【窗口窗口】【CSS樣式樣式】命令，即在命令，即在【CSS樣樣式式】命令前打上命令前打上“”，即可打開，即可打開【CSS樣式樣式】面板。如果想關(guān)面板。如果想關(guān)閉閉【CSS樣式樣式】面板，把該命令前的面板，把該命令前的“”去掉即可。去掉即可。 也可

5、以單擊也可以單擊【CSS樣式樣式】面板右上角菜單圖標(biāo)，在彈出的菜面板右上角菜單圖標(biāo)，在彈出的菜單中選擇單中選擇【關(guān)閉關(guān)閉CSS樣式樣式】命令，或在面板標(biāo)題欄上單擊鼠標(biāo)右命令，或在面板標(biāo)題欄上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇鍵，在彈出的快捷菜單中選擇【關(guān)閉關(guān)閉CSS樣式樣式】命令來關(guān)閉命令來關(guān)閉【CSS樣式樣式】面板。面板。Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作一 布局網(wǎng)站標(biāo)識4.創(chuàng)建CSS樣式的方法 在在【CSS樣式樣式】面板中單擊面板中單擊 （新建（新建CSS規(guī)則）按鈕，彈出規(guī)則）按鈕，彈出【新建新建CSS規(guī)則規(guī)則】對話框，在對話框中選擇選擇器類型并設(shè)置其對話框，在

6、對話框中選擇選擇器類型并設(shè)置其名稱，然后在名稱，然后在【定義在定義在】選項(xiàng)中選擇選項(xiàng)中選擇CSS樣式保存的位置，樣式保存的位置，最后最后在在【類型類型】等對話框中根據(jù)需要設(shè)置樣式參數(shù)即可。等對話框中根據(jù)需要設(shè)置樣式參數(shù)即可。 【定義在定義在】選項(xiàng)有兩個單選項(xiàng)，它們決定了所創(chuàng)建的選項(xiàng)有兩個單選項(xiàng)，它們決定了所創(chuàng)建的CSS樣樣式的保存方法。點(diǎn)選式的保存方法。點(diǎn)選【僅對該文檔僅對該文檔】單選按鈕，則將單選按鈕，則將CSS樣式保樣式保存在當(dāng)前的文檔中，包含在文檔的頭部標(biāo)簽存在當(dāng)前的文檔中，包含在文檔的頭部標(biāo)簽“”內(nèi)。而如果點(diǎn)選內(nèi)。而如果點(diǎn)選【新建樣式表文件新建樣式表文件】單選按鈕，則將新建一個專單選按

7、鈕，則將新建一個專門用來保存門用來保存CSS樣式的文件，它的文件擴(kuò)展名為樣式的文件，它的文件擴(kuò)展名為“*.css”。網(wǎng)頁。網(wǎng)頁文檔要使用樣式表文件中的文檔要使用樣式表文件中的CSS樣式時，將通過樣式時，將通過“附加樣式表附加樣式表”命令，將命令，將CSS文件鏈接或者導(dǎo)入到文檔中。文件鏈接或者導(dǎo)入到文檔中。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作一 布局網(wǎng)站標(biāo)識項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)操作二 布局導(dǎo)航欄Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制

8、作本操作主要介紹使用本操作主要介紹使用Div標(biāo)簽和標(biāo)簽和CSS樣式布局導(dǎo)航欄的基本方法。樣式布局導(dǎo)航欄的基本方法。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有： 1. 什么是CSS樣式 CSS是是“Cascading Style Sheet”的縮寫，可譯為的縮寫，可譯為“層疊樣層疊樣式表式表”或或“級聯(lián)樣式表級聯(lián)樣式表”。形象地說，。形象地說，CSS可以使直線顯示為虛可以使直線顯示為虛線，可以使表格只顯示一條邊框，可以使網(wǎng)頁背景固定不動，可線，可以使表格只顯示一條邊框，可以使網(wǎng)頁背景固定不動，可以使文字產(chǎn)生陰影等效果?？梢哉f，以使文字產(chǎn)生陰影等效果?？梢哉f，C

9、SS簡化了簡化了HTML中各種煩中各種煩瑣的標(biāo)簽，擴(kuò)展了原先的標(biāo)簽功能，能夠?qū)崿F(xiàn)更多的效果?，嵉臉?biāo)簽，擴(kuò)展了原先的標(biāo)簽功能，能夠?qū)崿F(xiàn)更多的效果。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄2. CSS規(guī)則的類型 在在【新建新建CSS規(guī)則規(guī)則】對話框中，對話框中，CSS樣式被劃分為樣式被劃分為3種類型。種類型。（1）類（可應(yīng)用于任何標(biāo)簽）類（可應(yīng)用于任何標(biāo)簽） 由用戶自定義的由用戶自定義的CSS樣式，能夠應(yīng)用到網(wǎng)頁中的任何標(biāo)簽上，樣式，能夠應(yīng)用到網(wǎng)頁中的任何標(biāo)簽上，需要用戶手動進(jìn)行設(shè)置。如應(yīng)用

10、到一個段落標(biāo)簽需要用戶手動進(jìn)行設(shè)置。如應(yīng)用到一個段落標(biāo)簽“p”上，那么一上，那么一個個“class”屬性就會被添加到文本塊標(biāo)簽上（如屬性就會被添加到文本塊標(biāo)簽上（如“p class=myStyle”）。）。（2）標(biāo)簽（重新定義特定標(biāo)簽的外觀）標(biāo)簽（重新定義特定標(biāo)簽的外觀） 對現(xiàn)有的對現(xiàn)有的HTML標(biāo)簽進(jìn)行重新定義，當(dāng)創(chuàng)建或改變該樣式時，標(biāo)簽進(jìn)行重新定義，當(dāng)創(chuàng)建或改變該樣式時，所有應(yīng)用了該樣式的格式都會自動更新。例如，當(dāng)創(chuàng)建或修改所有應(yīng)用了該樣式的格式都會自動更新。例如，當(dāng)創(chuàng)建或修改“h1”標(biāo)簽（標(biāo)題標(biāo)簽（標(biāo)題1）的）的CSS樣式時，所有用樣式時，所有用“h1”標(biāo)簽進(jìn)行格式標(biāo)簽進(jìn)行格式化的文本都

11、將被立即更新?；奈谋径紝⒈涣⒓锤?。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄（3）高級（）高級（ID、偽類選擇器等）、偽類選擇器等） 該樣式是對某些標(biāo)簽組合（如該樣式是對某些標(biāo)簽組合（如“td h2”表示所有在單元格中表示所有在單元格中出現(xiàn)出現(xiàn)“h2”的標(biāo)題）或者是含有特定的標(biāo)題）或者是含有特定ID屬性的標(biāo)簽（如屬性的標(biāo)簽（如“#myStyle”表示所有屬性值中有表示所有屬性值中有“ID=myStyle”的標(biāo)簽）應(yīng)用的標(biāo)簽）應(yīng)用樣式。樣式設(shè)置好后，樣式。樣式設(shè)置好后，Dreamweave

12、r會自動應(yīng)用該樣式。而會自動應(yīng)用該樣式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3”表示可以一表示可以一次性定義相同屬性的多個次性定義相同屬性的多個CSS樣式。樣式。 另外，在另外，在【定義在定義在】選項(xiàng)中，選擇選項(xiàng)中，選擇【僅對該文檔僅對該文檔】選項(xiàng)，將選項(xiàng)，將會將新建的會將新建的CSS規(guī)則寫入到當(dāng)前網(wǎng)頁文件中，否則將新建的規(guī)則寫入到當(dāng)前網(wǎng)頁文件中，否則將新建的CSS規(guī)則保存到擴(kuò)展名為規(guī)則保存到擴(kuò)展名為“*.css”的樣式表文件中。的樣式表文件中。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweav

13、er CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄3.認(rèn)識【CSS規(guī)則定義】對話框（1）【類型類型】屬性對話框?qū)傩詫υ捒?【類型類型】屬性主要用于定義網(wǎng)頁中文本的字體、大小、顏色、屬性主要用于定義網(wǎng)頁中文本的字體、大小、顏色、樣式及文本鏈接的修飾線等，所包含的樣式及文本鏈接的修飾線等，所包含的9種種CSS屬性，全部是針屬性，全部是針對網(wǎng)頁中的文本的。對網(wǎng)頁中的文本的。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄（2）【背景背景】屬性對話框?qū)傩詫υ捒?【背景背景】分類屬性的功能主要是在網(wǎng)頁

14、元素后面加入背景顏分類屬性的功能主要是在網(wǎng)頁元素后面加入背景顏色或背景圖像。色或背景圖像。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄（3）【區(qū)塊區(qū)塊】屬性對話框?qū)傩詫υ捒?CSS中的中的【區(qū)塊區(qū)塊】屬性指的是網(wǎng)頁中的文本、圖像和層等替屬性指的是網(wǎng)頁中的文本、圖像和層等替代元素，它主要用于控制塊中內(nèi)容的間距、對齊方式和文字縮進(jìn)代元素，它主要用于控制塊中內(nèi)容的間距、對齊方式和文字縮進(jìn)等。等。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng)

15、頁 設(shè) 計(jì) 與 制 作操作二 布局導(dǎo)航欄項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)（4）【方框方框】屬性對話框?qū)傩詫υ捒?CSS將網(wǎng)頁中所有的塊元素都看作是包含在一個方框中的，將網(wǎng)頁中所有的塊元素都看作是包含在一個方框中的，這個方框共分為這個方框共分為4個部分：方框、填充、邊界和邊框個部分：方框、填充、邊界和邊框。【方框方框】屬性主要用來定義方框、填充、邊界屬性主要用來定義方框、填充、邊界3個部分。個部分。操作二 布局導(dǎo)航欄Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作4. 3種選擇器各自的特點(diǎn) 【類類】CSS樣式用來存放文檔中標(biāo)簽的共同屬性，網(wǎng)頁元素樣

16、式用來存放文檔中標(biāo)簽的共同屬性，網(wǎng)頁元素使用該類使用該類CSS樣式時，需要添加引用。樣式時，需要添加引用。 【標(biāo)簽標(biāo)簽】CSS樣式用來改變或者擴(kuò)展文檔中某些特定的樣式用來改變或者擴(kuò)展文檔中某些特定的HTML標(biāo)簽的屬性。標(biāo)簽的屬性。 【高級高級】CSS樣式是改變標(biāo)簽組合、命名樣式是改變標(biāo)簽組合、命名ID標(biāo)簽屬性最好的標(biāo)簽屬性最好的方式。方式。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)操作二 布局導(dǎo)航欄Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作5. 創(chuàng)建高級CSS樣式的方法 在在【CSS樣式樣式】面板中直接創(chuàng)建高級面板中直接創(chuàng)建高級CSS樣式的方法是，單

17、樣式的方法是，單擊擊 （新建（新建CSS規(guī)則）按鈕，彈出規(guī)則）按鈕，彈出【新建新建CSS規(guī)則規(guī)則】對話框，選對話框，選擇擇【高級高級】選項(xiàng)。在選項(xiàng)。在【選擇器選擇器】列表框中輸入高級列表框中輸入高級CSS樣式名稱，樣式名稱，如如“#navigate”，然后在，然后在【定義在定義在】選項(xiàng)中定義選項(xiàng)中定義CSS樣式的保存樣式的保存位置，最后單擊位置，最后單擊 按鈕打開按鈕打開【CSS規(guī)則定義規(guī)則定義】對話框根據(jù)對話框根據(jù)需要設(shè)置參數(shù)即可。需要設(shè)置參數(shù)即可。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)操作二 布局導(dǎo)航欄Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制

18、 作 超級鏈接的高級超級鏈接的高級CSS樣式是經(jīng)常用到的，平時使用時通常定義兩組：樣式是經(jīng)常用到的，平時使用時通常定義兩組：一組是當(dāng)前和已訪問狀態(tài)，另一組是鼠標(biāo)懸停狀態(tài)。如果一個頁面有多一組是當(dāng)前和已訪問狀態(tài)，另一組是鼠標(biāo)懸停狀態(tài)。如果一個頁面有多種形式的超級鏈接樣式，為了區(qū)別，定義時需要在其前面加限制成分，種形式的超級鏈接樣式，為了區(qū)別，定義時需要在其前面加限制成分，例如：例如：“#navigate a:link,#navigate a:visited” 和和“#navigate a:hover”，其中其中“navigate”為導(dǎo)航欄為導(dǎo)航欄Div標(biāo)簽的名稱，這就是說只有名稱為標(biāo)簽的名稱，這

19、就是說只有名稱為“navigate”的的Div標(biāo)簽內(nèi)的超級鏈接才應(yīng)用該樣式。如果超級鏈接所在標(biāo)簽內(nèi)的超級鏈接才應(yīng)用該樣式。如果超級鏈接所在的對象使用了類樣式，在定義超級鏈接的高級的對象使用了類樣式，在定義超級鏈接的高級CSS樣式時，也可以使用樣式時，也可以使用類名稱作限制成分，例如：類名稱作限制成分，例如：“.tdstyle a:link,.tdstyle a:visited”和和“.tdstyle a:hover”（類名稱前的點(diǎn)是不能丟的），這就是說，只有應(yīng)用（類名稱前的點(diǎn)是不能丟的），這就是說，只有應(yīng)用了類了類CSS樣式樣式“.tdstyle ”的對象內(nèi)的超級鏈接才應(yīng)用該超級鏈接樣式。的對

20、象內(nèi)的超級鏈接才應(yīng)用該超級鏈接樣式。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn) 在本項(xiàng)目制作的購物網(wǎng)頁中，購物網(wǎng)頁在本項(xiàng)目制作的購物網(wǎng)頁中，購物網(wǎng)頁左側(cè)部分仍然是商品的導(dǎo)航欄，中間和右側(cè)左側(cè)部分仍然是商品的導(dǎo)航欄，中間和右側(cè)部分為具體商品介紹和新品推薦等。本任務(wù)部分為具體商品介紹和新品推薦等。本任務(wù)主要介紹購物網(wǎng)頁主體部分的制作及使用主要介紹購物網(wǎng)頁主體部分的制作及使用CSS樣式控制網(wǎng)頁外觀的基本方法。樣式控制網(wǎng)頁外觀的基本方法。Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作任務(wù)二 制作網(wǎng)頁主體項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)

21、任務(wù)三實(shí) 訓(xùn)操作一 制作左側(cè)欄目Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作 本操作主要是制作購物網(wǎng)頁左側(cè)欄目。通過本操作的學(xué)習(xí)，本操作主要是制作購物網(wǎng)頁左側(cè)欄目。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：應(yīng)該掌握的內(nèi)容主要有： 1. 【邊框】分類對話框【邊框邊框】分類對話框主要用于設(shè)置網(wǎng)頁元素的邊框效果。分類對話框主要用于設(shè)置網(wǎng)頁元素的邊框效果。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作一 制作左側(cè)欄目2.創(chuàng)建和應(yīng)用類樣式的方法項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三

22、實(shí) 訓(xùn) 在在【CSS樣式樣式】面板中單擊面板中單擊 （新建（新建CSS規(guī)則）按鈕，彈出規(guī)則）按鈕，彈出【新建新建CSS規(guī)則規(guī)則】對話框，在對話框，在【選擇器類型選擇器類型】選項(xiàng)中選擇選項(xiàng)中選擇【類類】單選按鈕，在單選按鈕，在【名稱名稱】文本框中輸入文本框中輸入CSS樣式名稱樣式名稱“.leftdiv”，單，單擊擊 按鈕后在按鈕后在【CSS規(guī)則定義規(guī)則定義】對話框中根據(jù)需要設(shè)置參對話框中根據(jù)需要設(shè)置參數(shù)即可。數(shù)即可。CSS樣式定義完畢后，在單元格樣式定義完畢后，在單元格【屬性屬性】面板的面板的【樣式樣式】下拉列表中選擇定義的樣式名稱下拉列表中選擇定義的樣式名稱“l(fā)eftdiv”，將其應(yīng)用到對象上

23、。，將其應(yīng)用到對象上。 Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作一 制作左側(cè)欄目項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)3.【改變屬性】行為 選中選中Div標(biāo)簽標(biāo)簽“mainleft-1”，然后選擇，然后選擇【窗口窗口】【行為行為】命令打開命令打開【行為行為】面板，單擊面板，單擊 按鈕，在彈出的菜單中選擇按鈕，在彈出的菜單中選擇【改變屬性改變屬性】命令打開命令打開【改變屬性改變屬性】對話框并進(jìn)行參數(shù)設(shè)置，最對話框并進(jìn)行參數(shù)設(shè)置，最后在后在【行為行為】面板中將觸發(fā)事件設(shè)置為面板中將觸發(fā)事件設(shè)置為“onMouseOver”。運(yùn)用。運(yùn)用同樣的方法再

24、添加一次該行為，中將觸發(fā)事件設(shè)置為同樣的方法再添加一次該行為，中將觸發(fā)事件設(shè)置為“onMouseOut”。注意兩次設(shè)置的背景顏色不一樣，觸發(fā)事件也。注意兩次設(shè)置的背景顏色不一樣，觸發(fā)事件也不一樣。不一樣。Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作一 制作左側(cè)欄目項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 制作右側(cè)欄目 本操作主要是制作購物網(wǎng)頁右側(cè)部分的內(nèi)容。通過本操作的本操作主要是制作購物網(wǎng)頁右側(cè)部分的內(nèi)容。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：1. CS

25、S樣式與表格的結(jié)合 在本部分，應(yīng)進(jìn)一步熟悉如何使用在本部分，應(yīng)進(jìn)一步熟悉如何使用CSS樣式控制表格及其單樣式控制表格及其單元格的樣式，包括兩種方式：元格的樣式，包括兩種方式：（1）ID名稱高級名稱高級CSS樣式，樣式， 即利即利用表格和單元格的用表格和單元格的ID名稱定義高級名稱定義高級CSS樣式，但這種方式只能用樣式，但這種方式只能用1次，在實(shí)際網(wǎng)頁制作中應(yīng)用的情況相對少；（次，在實(shí)際網(wǎng)頁制作中應(yīng)用的情況相對少；（2）類）類CSS樣式，樣式，即創(chuàng)建通用的類即創(chuàng)建通用的類CSS樣式，將其應(yīng)用到表格或單元格上，這是比樣式，將其應(yīng)用到表格或單元格上，這是比較好的方式，也是比較常用的方式，因?yàn)樗梢?/p>

26、反復(fù)被引用。較好的方式，也是比較常用的方式，因?yàn)樗梢苑磸?fù)被引用。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 制作右側(cè)欄目2. 【列表】屬性對話框項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn) 用于控制列表內(nèi)的各項(xiàng)元素，包含以下用于控制列表內(nèi)的各項(xiàng)元素，包含以下3種種CSS屬性。屬性。 （1）【類型類型】屬性用于確定列表內(nèi)每一項(xiàng)前使用的符號。屬性用于確定列表內(nèi)每一項(xiàng)前使用的符號。 （2）【項(xiàng)目符號圖像項(xiàng)目符號圖像】作用是將列表前面的符號換為圖形。作用是將列表前面的符號換為圖形

27、。 （3）【位置位置】屬性用于描述列表的位置，有屬性用于描述列表的位置，有【外外】（在方框（在方框之外顯示）和之外顯示）和【內(nèi)內(nèi)】（在方框之內(nèi)顯示）兩個選項(xiàng)。（在方框之內(nèi)顯示）兩個選項(xiàng)。Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 制作右側(cè)欄目3. 【定位】屬性對話框 可疑使網(wǎng)頁元素隨處浮動，這對于一些固定元素（如表格）可疑使網(wǎng)頁元素隨處浮動，這對于一些固定元素（如表格）來說，是一種功能的擴(kuò)展，而對于一些浮動元素（如來說，是一種功能的擴(kuò)展，而對于一些浮動元素（如AP Div）來）來說，卻是有效地、用于精確控制其位置的方法。說，卻是有效地、用于精確控制其位置的方法。 項(xiàng)目八：項(xiàng)

28、目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作操作二 制作右側(cè)欄目4. 【擴(kuò)展】屬性對話框 包含兩部分：包含兩部分：【分頁分頁】的作用是為打印的頁面設(shè)置分頁符；的作用是為打印的頁面設(shè)置分頁符；【視覺效果視覺效果】的作用是為網(wǎng)頁中的元素施加特殊效果，其中的作用是為網(wǎng)頁中的元素施加特殊效果，其中【光光標(biāo)標(biāo)】選項(xiàng)可以指定在某個元素上要使用的光標(biāo)形狀，選項(xiàng)可以指定在某個元素上要使用的光標(biāo)形狀，【濾鏡濾鏡】可可以為網(wǎng)頁元素施加多種特殊的顯示效果，如陰影、模糊、透明、以為網(wǎng)頁元素施加多種特殊的顯示效果，如陰影、模糊、透明、光暈等。光暈

29、等。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作任務(wù)三 制作頁腳 本任務(wù)主要是制作購物網(wǎng)頁頁腳部分的內(nèi)容。通過本任務(wù)的本任務(wù)主要是制作購物網(wǎng)頁頁腳部分的內(nèi)容。通過本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：1. 關(guān)于標(biāo)簽CSS樣式 前面已經(jīng)介紹了高級前面已經(jīng)介紹了高級CSS樣式和類樣式和類CSS樣式的創(chuàng)建方法，關(guān)樣式的創(chuàng)建方法，關(guān)于標(biāo)簽于標(biāo)簽CSS樣式的創(chuàng)建過程類似，只不過它是重新定義現(xiàn)有標(biāo)簽樣式的創(chuàng)建過程類似，只不過它是重新定義現(xiàn)有標(biāo)簽的的CSS樣式。這種方法用的場合比較少，因?yàn)橐坏┒x

30、了該種樣樣式。這種方法用的場合比較少，因?yàn)橐坏┒x了該種樣式，網(wǎng)頁中的所有對應(yīng)的式，網(wǎng)頁中的所有對應(yīng)的HTML標(biāo)簽都將應(yīng)用該樣式，這必將破標(biāo)簽都將應(yīng)用該樣式，這必將破壞整個網(wǎng)頁的外觀。如果該種樣式是放在單獨(dú)的壞整個網(wǎng)頁的外觀。如果該種樣式是放在單獨(dú)的CSS樣式表文件樣式表文件中，那影響范圍就更大了，所以通常不建議使用標(biāo)簽中，那影響范圍就更大了，所以通常不建議使用標(biāo)簽CSS樣式。樣式。這也是本部分為什么創(chuàng)建高級這也是本部分為什么創(chuàng)建高級CSS樣式樣式“#foot p”，而不創(chuàng)建標(biāo)簽，而不創(chuàng)建標(biāo)簽CSS樣式樣式“p”的原因。當(dāng)然，如果創(chuàng)建類的原因。當(dāng)然，如果創(chuàng)建類CSS樣式來控制樣式來控制“p”更

31、更好。好。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作任務(wù)三 制作頁腳2. 修改CSS樣式的方法 （1）第）第1種是在種是在【CSS樣式樣式】面板中雙擊樣式名稱，或先選面板中雙擊樣式名稱，或先選中樣式再單擊面板底部的中樣式再單擊面板底部的 （編輯）按鈕，或在鼠標(biāo)右鍵快捷菜（編輯）按鈕，或在鼠標(biāo)右鍵快捷菜單中選擇單中選擇【編輯編輯】命令打開命令打開【CSS規(guī)則定義規(guī)則定義】對話框進(jìn)行可視化對話框進(jìn)行可視化定義或修改。定義或修改。 （2）第）第2種是在種是在【CSS樣式樣式】面板中先選中樣式名稱，然后面板中先選中樣

32、式名稱，然后在在【CSS樣式樣式】面板的屬性列表框中進(jìn)行定義或修改。面板的屬性列表框中進(jìn)行定義或修改。 （3）第）第3種是在種是在【CSS樣式樣式】面板中用鼠標(biāo)右鍵單擊樣式名面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼轉(zhuǎn)到代碼】命令將進(jìn)入文檔中源代碼命令將進(jìn)入文檔中源代碼處，可以直接修改源代碼。處，可以直接修改源代碼。項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作任務(wù)三 制作頁腳3. 刪除CSS樣式的方法 （1）第）第1種是在種是在【CSS樣式樣式】面板中先選中樣式名稱再單擊面

33、板中先選中樣式名稱再單擊面板底部的面板底部的 （刪除）按鈕進(jìn)行刪除。（刪除）按鈕進(jìn)行刪除。 （2）第）第2種是在種是在【CSS樣式樣式】面板中用鼠標(biāo)右鍵單擊樣式名面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇稱，在其快捷菜單中選擇【刪除刪除】命令。命令。 （3）第）第3種是在種是在【CSS樣式樣式】面板中用鼠標(biāo)右鍵單擊樣式名面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼轉(zhuǎn)到代碼】命令進(jìn)入文檔源代碼處，命令進(jìn)入文檔源代碼處，直接刪除源代碼。直接刪除源代碼。4.對樣式重新命名的方法 在在【CSS樣式樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇菜單中選擇【重命名重命名】命令或直接在源代碼中進(jìn)行修改。命令或直接在源代碼中進(jìn)行修改。 項(xiàng)目八：項(xiàng)目八： 制作購物網(wǎng)頁制作購物網(wǎng)頁任務(wù)一任務(wù)二小 結(jié)任務(wù)三實(shí) 訓(xùn)Dreamweaver CS3網(wǎng) 頁 設(shè) 計(jì) 與 制 作任務(wù)三 設(shè)置頁腳的CSS規(guī)則5.應(yīng)用CSS樣式的方式 應(yīng)用應(yīng)用CSS樣式包括自定義樣式包括自定義CSS樣式的應(yīng)用和鏈接外部樣式的應(yīng)用和鏈接外部CSS樣式樣式的應(yīng)用兩種方式。在的應(yīng)用兩種方式。在CSS樣式中的樣式中的HTML標(biāo)簽樣式和標(biāo)簽樣式和C