網(wǎng)頁制作：項目08使用CSS控制購物網(wǎng)頁外觀課件_第1頁
網(wǎng)頁制作：項目08使用CSS控制購物網(wǎng)頁外觀課件_第2頁
網(wǎng)頁制作：項目08使用CSS控制購物網(wǎng)頁外觀課件_第3頁
網(wǎng)頁制作：項目08使用CSS控制購物網(wǎng)頁外觀課件_第4頁
網(wǎng)頁制作：項目08使用CSS控制購物網(wǎng)頁外觀課件_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

主講：——Dreamweaver8項目八使用CSS控制購物網(wǎng)頁外觀任務(wù)一設(shè)置頁眉CSS規(guī)則任務(wù)二設(shè)置購物網(wǎng)頁主體的CSS樣式項目八：

使用CSS控制購物網(wǎng)頁外觀網(wǎng)頁設(shè)計與制作Dreamweaver8任務(wù)一任務(wù)二任務(wù)三設(shè)置頁腳的CSS規(guī)則小結(jié)任務(wù)三實(shí)訓(xùn)任務(wù)一設(shè)置頁眉CSS規(guī)則CSS是“CascadingStyleSheet”的縮寫，可譯為“層疊樣式表”或“級聯(lián)樣式表”。形象地說，CSS可以使直線顯示為虛線，可以使表格只顯示一條邊框，可以使網(wǎng)頁背景固定不動，可以使文字產(chǎn)生陰影等效果?？梢哉f，CSS簡化了HTML中各種繁瑣的標(biāo)簽，擴(kuò)展了原先的標(biāo)簽功能，能夠?qū)崿F(xiàn)更多的效果。購物網(wǎng)頁頁眉部分放置的內(nèi)容通常有站標(biāo)、網(wǎng)站標(biāo)題和商品導(dǎo)航欄等。本任務(wù)主要介紹購物網(wǎng)頁頁眉的制作及使用CSS樣式控制其外觀的基本方法。Dreamweaver8網(wǎng)頁設(shè)計與制作項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作一定義“body”的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作【CSS樣式】面板項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作一定義“body”的CSS規(guī)則2.重新定義特定標(biāo)簽外觀的方法

在【CSS樣式】面板中單擊（新建CSS規(guī)則）按鈕，彈出【新建CSS規(guī)則】對話框，在對話框中【選擇器類型】選擇【標(biāo)簽（重新定義特定標(biāo)簽的外觀）】選項，在【標(biāo)簽】下拉列表框中選擇需要重新定義樣式的標(biāo)簽，如“body”，然后根據(jù)需要在【定義在】選項選擇適合的選項，最后在【類型】、【背景】、【方框】等對話框中根據(jù)需要設(shè)置參數(shù)即可。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作一定義“body”的CSS規(guī)則3.CSS規(guī)則的類型

在【新建CSS規(guī)則】對話框中，CSS樣式被劃分為3種類型。（1）類（可應(yīng)用于任何標(biāo)簽）由用戶自定義的CSS樣式，能夠應(yīng)用到網(wǎng)頁中的任何標(biāo)簽上，需要用戶手動進(jìn)行設(shè)置。如應(yīng)用到一個段落標(biāo)簽“p”上，那么一個“class”屬性就會被添加到文本塊標(biāo)簽上（如“pclass="myStyle"”）。（2）標(biāo)簽（重新定義特定標(biāo)簽的外觀）對現(xiàn)有的HTML標(biāo)簽進(jìn)行重新定義，當(dāng)創(chuàng)建或改變該樣式時，所有應(yīng)用了該樣式的格式都會自動更新。例如，當(dāng)創(chuàng)建或修改“h1”標(biāo)簽（標(biāo)題1）的CSS樣式時，所有用“h1”標(biāo)簽進(jìn)行格式化的文本都將被立即更新。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作一定義“body”的CSS規(guī)則4.認(rèn)識【CSS規(guī)則定義】對話框（1）【類型】屬性對話框

【類型】屬性主要用于定義網(wǎng)頁中文本的字體、大小、顏色、樣式及文本鏈接的修飾線等，其中包含9種CSS屬性，全部是針對網(wǎng)頁中的文本的。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作一定義“body”的CSS規(guī)則（2）【背景】屬性對話框

【背景】分類屬性的功能主要是在網(wǎng)頁元素后面加入固定的背景顏色或圖像?！颈尘啊繉傩悦姘逯邪韵?種CSS屬性。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作一定義“body”的CSS規(guī)則（3）【區(qū)塊】屬性對話框

CSS中的【區(qū)塊】屬性指的是網(wǎng)頁中的文本、圖像和層等替代元素，它主要用于控制塊中內(nèi)容的間距、對齊方式和文字縮進(jìn)等。該屬性面板中包含以下7種CSS屬性。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作二定義頁眉的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作本操作主要是制作購物網(wǎng)頁頁眉的內(nèi)容并使用CSS樣式控制其外觀。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：

1.3種選擇器各自的特點(diǎn)【類】CSS樣式用來存放文檔中標(biāo)簽的共同屬性，網(wǎng)頁元素使用該類CSS樣式時，需要添加引用。

【標(biāo)簽】CSS樣式用來改變或者擴(kuò)展文檔中某些特定的HTML標(biāo)簽的屬性。

【高級】CSS樣式是改變標(biāo)簽組合、命名ID標(biāo)簽屬性最好的方式。項目八：

使用CSS控制購物網(wǎng)頁外觀定義頁眉的CSS規(guī)則操作動畫任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作二定義頁眉的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作

對話框中的【定義在】選項右側(cè)是兩個單選項，它們決定了所創(chuàng)建的CSS樣式的保存方法。點(diǎn)選【僅對該文檔】單選鈕，則將CSS樣式保存在當(dāng)前的文檔中，包含在文檔的頭部標(biāo)簽“<head>…</head>”內(nèi)。而如果點(diǎn)選【新建樣式表文件】單選按鈕，則將新建一個專門用來保存CSS樣式的文件，它的文件擴(kuò)展名為“*.css”。網(wǎng)頁文檔要使用樣式表文件中的CSS樣式時，將通過“附加樣式表”命令，將CSS文件鏈接或者導(dǎo)入到文檔中。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作二定義頁眉的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作2.創(chuàng)建高級CSS樣式的方法

以表格為例，首先設(shè)置表格Id名稱，如“TopTable”，在表格被選中的狀態(tài)下，在【CSS樣式】面板中單擊（新建CSS規(guī)則）按鈕，彈出【新建CSS規(guī)則】對話框，創(chuàng)建相應(yīng)名稱為“#TopTable”的高級CSS樣式，然后在【類型】、【背景】、【方框】等對話框中根據(jù)需要設(shè)置參數(shù)即可。要設(shè)置表格的【填充】和【間距】屬性可以通過表格【屬性】面板進(jìn)行設(shè)置，不能通過【方框】分類中的【填充】和【邊界】進(jìn)行設(shè)置。對表格應(yīng)用【方框】中的【邊界】屬性只影響表格本身所在塊元素周圍的空格填充數(shù)量，與表格本身無關(guān)。需要注意的是，在【方框】分類中的【填充】和【邊界】選項與表格【屬性】面板中的【填充】和【間距】選項是兩個不同的概念。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作二定義頁眉的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作4.創(chuàng)建基于表格的超級鏈接高級CSS樣式的方法

首先設(shè)定表格Id名稱，如“NavTable”，然后創(chuàng)建基于該表格的超級鏈接高級CSS樣式，如“#NavTablea:link,#NavTablea:visited”。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作二定義頁眉的CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作接著創(chuàng)建超級鏈接懸停效果的高級CSS樣式“#NavTablea:hover”。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)

在本項目制作的購物網(wǎng)頁中，購物網(wǎng)頁左側(cè)部分仍然是商品的導(dǎo)航欄，中間和右側(cè)部分為具體商品介紹和新品推薦等。本任務(wù)主要介紹購物網(wǎng)頁主體部分的制作及使用CSS樣式控制網(wǎng)頁外觀的基本方法。Dreamweaver8網(wǎng)頁設(shè)計與制作任務(wù)二設(shè)置購物網(wǎng)頁主體的CSS樣式項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作一設(shè)置左側(cè)欄目CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作2.左側(cè)欄目內(nèi)容單元格CSS樣式的設(shè)置方法

選定單元格，右鍵單擊文檔左下角的“<td>”標(biāo)簽，在彈出的快捷菜單中選擇【快速標(biāo)簽編輯器】命令，打開快速標(biāo)簽編輯器，在其中添加ID名稱，如“id=”LeftTableNavTD””，然后分別選定其他單元格，并右鍵單擊文檔左下角的“<td>”標(biāo)簽，在彈出的快捷菜單中選擇【設(shè)置ID】／【LeftTableNavTD】命令即可設(shè)置與上一單元格相同的ID。最后創(chuàng)建基于該單元格的超級鏈接高級CSS樣式“#LeftTableNavTDa:link,#LeftTableNavTDa:visited”和“#LeftTableNavTDa:hover”。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)操作一設(shè)置左側(cè)欄目CSS規(guī)則Dreamweaver8網(wǎng)頁設(shè)計與制作

在本操作中，沒有設(shè)置CSS樣式之前，左側(cè)偶數(shù)單元格中的內(nèi)容是“擠”在一起的，當(dāng)為命名ID的單元格設(shè)置樣式以后，每個帶鏈接的文本都成行排列，這主要是由于設(shè)置了【區(qū)塊】分類中的【顯示】屬性為“塊”，這是設(shè)置文本鏈接的技巧。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作二設(shè)置中間欄目的CSS規(guī)則

本操作主要是制作購物網(wǎng)頁中間部分的內(nèi)容。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：

網(wǎng)頁元素邊框的效果是在【CSS規(guī)則定義】對話框的【邊框】分類對話框中進(jìn)行設(shè)置的，該屬性對話框中共包括3種CSS屬性。

【樣式】：屬性名為“border-style”，用于設(shè)定邊框線的樣式，包括【無】（none，無邊框）、【虛線】（dotted，邊框?yàn)辄c(diǎn)線）、【點(diǎn)劃線】（dashed，邊框?yàn)殚L短線）、【實(shí)線】（solid，邊框?yàn)閷?shí)線）、【雙線】（double，邊框?yàn)殡p線）、【槽狀】（groove）、【脊?fàn)睢浚╮idge）、【凹陷】（inset）、【凸出】（outset，前面4種選擇根據(jù)不同顏色設(shè)置不同的三維效果）9個選項。項目八：

使用CSS控制購物網(wǎng)頁外觀設(shè)置中間欄目的CSS規(guī)則操作動畫任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作二設(shè)置中間欄目的CSS規(guī)則【邊框】分類對話框項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作操作三設(shè)置右側(cè)欄目的CSS規(guī)則

本操作主要是制作購物網(wǎng)頁右鍘部分的內(nèi)容。通過本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：1.【列表】屬性對話框

用于控制列表內(nèi)的各項元素，包含以下3種CSS屬性。（1）【類型】屬性用于確定列表內(nèi)每一項前使用的符號。（2）【項目符號圖像】作用是將列表前面的符號換為圖形。（3）【位置】屬性用于描述列表的位置，有【外】（在方框之外顯示）和【內(nèi)】（在方框之內(nèi)顯示）兩個選項。項目八：

使用CSS控制購物網(wǎng)頁外觀設(shè)置右側(cè)欄目的CSS規(guī)則操作動畫任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作任務(wù)三設(shè)置頁腳的CSS規(guī)則

本任務(wù)主要是制作購物網(wǎng)頁頁腳部分的內(nèi)容。通過本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：1.通過CSS樣式制作方框效果的方法

創(chuàng)建類樣式“.FootP”，在CSS規(guī)則定義對話框的【類型】分類中設(shè)置【行高】為“40像素”，在【背景】分類中設(shè)置背景顏色為“#3DA4A3”，在【方框】分類中設(shè)置寬度為“775像素”，邊界均為“0”，在【邊框】分類中設(shè)置所有邊框樣式均為“實(shí)線”，寬度為“1像素”，顏色為“#0082FE”。將光標(biāo)置于頁腳文本上，然后在【屬性】面板的【樣式】下拉列表中選擇“FootP”，即實(shí)現(xiàn)如圖所示效果。項目八：

使用CSS控制購物網(wǎng)頁外觀設(shè)置頁腳的CSS規(guī)則操作動畫任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作任務(wù)三設(shè)置頁腳的CSS規(guī)則2.修改CSS樣式的方法

（1）第1種是在【CSS樣式】面板中雙擊樣式名稱，或先選中樣式再單擊面板底部的（編輯）按鈕，或在鼠標(biāo)右鍵快捷菜單中選擇【編輯】命令打開【CSS規(guī)則定義】對話框進(jìn)行可視化定義或修改。（2）第2種是在【CSS樣式】面板中先選中樣式名稱，然后在【CSS樣式】面板的屬性列表框中進(jìn)行定義或修改。（3）第3種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼】命令將進(jìn)入文檔中源代碼處，可以直接修改源代碼。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作任務(wù)三設(shè)置頁腳的CSS規(guī)則3.刪除CSS樣式的方法

（1）第1種是在【CSS樣式】面板中先選中樣式名稱再單擊面板底部的（刪除）按鈕進(jìn)行刪除。（2）第2種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【刪除】命令。（3）第3種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼】命令進(jìn)入文檔源代碼處，直接刪除源代碼。4.對樣式重新命名的方法

在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【重命名】命令或直接在源代碼中進(jìn)行修改。項目八：

使用CSS控制購物網(wǎng)頁外觀任務(wù)一任務(wù)二小結(jié)任務(wù)三實(shí)訓(xùn)Dreamweaver8網(wǎng)頁設(shè)計與制作任務(wù)三設(shè)置頁腳的CSS規(guī)則5.應(yīng)用CSS樣式的方式

應(yīng)用CSS樣式包括自定義CSS樣式的應(yīng)用和鏈接外部CSS樣式的應(yīng)用兩種方式。在CSS樣式中的HTML標(biāo)簽樣式和CSS選擇器樣式是自動應(yīng)用的，只有自定義的類CSS樣式需要手動操作進(jìn)行應(yīng)用，應(yīng)用方式包括通過【屬性】面板的【樣式】、【類】下拉列表或者在【CSS樣式】面板的右鍵快捷菜單中選擇【套用】命令或者在網(wǎng)頁元素的右鍵快

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論