（中職）電子商務(wù)網(wǎng)頁設(shè)計(jì)項(xiàng)目七 使用CSS控制頁面元素課件

1、YCF正版可修改PPT（中職）電子商務(wù)網(wǎng)頁設(shè)計(jì)項(xiàng)目七 使用CSS控制頁面元素ppt課件使用CSS設(shè)置頁面、文本、段落的格式1任務(wù)分析本任務(wù)是使用Dreamweaver CS5中的樣式面板,創(chuàng)建嵌入式CSS樣式表,分別對(duì)網(wǎng)頁的頁面邊距、文字、段落等格式進(jìn)行控制,詳細(xì)設(shè)置如下:(1)設(shè)置頁面的邊界為“0”,去掉網(wǎng)頁上邊緣與瀏覽器之間的空白;(2)設(shè)置網(wǎng)頁中間正文部分的文字效果:宋體、13像素、灰色、1.5倍行高;(3)設(shè)置網(wǎng)頁中間正文部分的左、右填充為“20”,上填充為“10”,使正文與所在單元格的邊緣之間產(chǎn)生一定間距;(4)將正文中后5行文字設(shè)置為列表,并設(shè)置列表部分的效果:2倍行高、添加自定義

2、的項(xiàng)目符號(hào)圖像。相關(guān)知識(shí)1. CSS2. CSS樣式面板3. CSS的創(chuàng)建及分類4. CSS規(guī)則的設(shè)置5. CSS使用規(guī)則任務(wù)實(shí)施(1)新建站點(diǎn),將project07文件夾下的task01文件夾復(fù)制到本地磁盤下站點(diǎn)目錄project07中,在Dreamweaver CS5軟件中打開網(wǎng)頁文件index.html,進(jìn)行下列操作:在CSS樣式面板的右下角,單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框。在“規(guī)則定義”區(qū)域中,選擇“僅限該文檔”;而在“選擇器類型”區(qū)域中,則選擇“標(biāo)簽”,并在“標(biāo)簽”下拉框中選擇“body”標(biāo)簽,單擊“確定”,即可進(jìn)入“CSS規(guī)則定義”對(duì)話框。(2)選擇“方框

3、”選項(xiàng)卡,在Margin(邊界)區(qū)域中,保持勾選“全部相同”,然后設(shè)置邊界全部為0px(像素),單擊“確定”。(3)由于上述操作是對(duì)HTML中的標(biāo)簽“body”進(jìn)行了重新定義,因此屬性會(huì)自動(dòng)被運(yùn)用到網(wǎng)頁中去。瀏覽網(wǎng)頁,即可以看到網(wǎng)頁上端的空白區(qū)消失了。(4)單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框。在“規(guī)則定義”區(qū)域中選擇“僅限該文檔”;在“選擇器類型”區(qū)域中選擇“類”,并在名稱框中輸入類名“text”,單擊“確定”,進(jìn)入“CSS規(guī)則定義”對(duì)話框。(5)選擇“類型”選項(xiàng)卡,設(shè)置Font-family(字體)為宋體,Font-size(字體大小)為13px,Line-height

4、(行高)為1.5,Color(字體顏色)為#666666(灰色)。(6)選擇“方框”選項(xiàng)卡,在Padding(填充)區(qū)域中,取消勾選“全部相同”,并設(shè)置Top(上間距)為10px,Left(左間距)、Right(右間距)均為20px,單擊“確定”。(7)在網(wǎng)頁中,選中正文所在的單元格(8)在其“屬性”面板中,選擇“樣式”下拉框,將類“text”應(yīng)用上去。(9)瀏覽網(wǎng)頁,會(huì)發(fā)現(xiàn)頁面中間的文本的字體、字號(hào)、顏色、行距及與單元格周圍的間距都發(fā)生了相應(yīng)的改變。(10)單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建設(shè)CSS規(guī)則”對(duì)話框。在“規(guī)則定義”區(qū)域中選擇“僅限該文檔”;在“選擇器類型”區(qū)域中選擇“類”,并

5、在“選擇器名稱”框中輸入類名“l(fā)ist”,單擊“確定”,進(jìn)入“CSS規(guī)則定義”對(duì)話框。(11)選擇“類型”選項(xiàng)卡,設(shè)置Line-height(行高)為“2倍行高”。(12)選擇“列表”選項(xiàng)卡,單擊“List-style-image(項(xiàng)目符號(hào)圖像)”右側(cè)的“瀏覽”按鈕,進(jìn)入當(dāng)前任務(wù)圖片所在的文件夾目錄,選擇圖像“dot.gif”,將List-style-Position(列表的位置)設(shè)置為“outside(外)”,單擊“確定”。(13)在網(wǎng)頁中,選中需要設(shè)置為列表的內(nèi)容的內(nèi)容文字,在“屬性”面板中單擊“項(xiàng)目列表”按鈕,將這部分文本先設(shè)置為列表格式。(14)在“屬性”面板中,選擇“樣式”下拉框,將

6、類“l(fā)ist”應(yīng)用至所選的內(nèi)容上去。(15)瀏覽網(wǎng)頁,即可看到該部分文本內(nèi)容的行距、項(xiàng)目符號(hào)圖像等都發(fā)生了相應(yīng)改變。使用CSS設(shè)置表格元素外觀2任務(wù)分析本任務(wù)使用Dreamweaver CS5中的樣式面板,創(chuàng)建外部CSS樣式表,對(duì)頁面中的表格、單元格等元素的外觀進(jìn)行美化,詳細(xì)設(shè)置如下:(1)頂部導(dǎo)航條中八個(gè)單元格內(nèi)的文字效果設(shè)置:華文新魏、22像素、白色(#FFFFFF)、居中;(2)頂部導(dǎo)航條單元格的背景圖片設(shè)置為自定義的小圖像,并使用其重復(fù)的屬性,讓小圖像重復(fù),制作出整體的導(dǎo)航背景效果;(3)頂部導(dǎo)航條單元格的邊框效果設(shè)置:凹陷、1像素、灰色(#666666)。任務(wù)實(shí)施(1)新建站點(diǎn),將p

7、roject07文件夾下的task02文件夾復(fù)制到本地磁盤下的站點(diǎn)目錄中,在Dreamweaver CS5軟件中打開網(wǎng)頁文件index.html,進(jìn)行下列操作:單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框, 在“規(guī)則定義”區(qū)域中選擇“新建樣式表文件”,在“選擇器類型”區(qū)域中選擇“類”,并在名稱中輸入類名“navigate”,單擊“確定”。(2)進(jìn)入“將樣式表文件另存為”對(duì)話框,打開當(dāng)前項(xiàng)目中選擇需要存放樣式表的文件目錄“project07task02style”,并給樣式表起名為“mycss”,單擊“保存”,即可進(jìn)入“CSS規(guī)則定義”對(duì)話框。(3)選擇“類型”選項(xiàng)卡,設(shè)置Front

8、-family(字體)為華文新魏,Font-size(字號(hào))為22像素,Color(顏色)為#FFFFFF(白色) 。(4)選擇“背景”選項(xiàng)卡,將背景圖像設(shè)置為文件夾task01images中的圖像“navigate.jpg”,Background-repeat(重復(fù)項(xiàng))設(shè)為repeat(重復(fù)) 。(5)選擇“邊框”選項(xiàng)卡,將Text-align(文本對(duì)齊方式)設(shè)為Center(居中)。(6)選擇“邊框”選項(xiàng)卡,將邊框的Style(樣式)、Width(寬度)、Color(顏色)設(shè)置為“全部相同”,樣式為Inset(凹陷),寬度為1px,顏色為#666666(灰色), 單擊“確定”。(7)在網(wǎng)頁

9、中,選中導(dǎo)航條表格中的所有單元格。(8)在“屬性”面板中,選擇“樣式”下拉框,將“navigate”應(yīng)用至所選的單元格上。(9)瀏覽網(wǎng)頁,會(huì)發(fā)現(xiàn)導(dǎo)航條中文本的字體、字號(hào)、顏色、表格背景、邊框等均發(fā)生相應(yīng)改變。使用CSS設(shè)置表單項(xiàng)目外觀3任務(wù)分析本任務(wù)使用Dreamweaver CS5中的樣式面板,創(chuàng)建CSS樣式表,對(duì)頁面中各種表單項(xiàng)目的外觀進(jìn)行美化,詳細(xì)設(shè)置如下:(1)表單中兩個(gè)按鈕的文字效果設(shè)置:黑體、16像素、黑色、居中;(2)表單中兩個(gè)按鈕的背景圖像設(shè)置:自定義圖像、不重復(fù);(3)表單中兩個(gè)按鈕的大小設(shè)置:寬90像素、高30像素;(4)表單中兩個(gè)按鈕的邊框?qū)挾仍O(shè)置:0像素;(5)表單中兩

10、個(gè)文本域的大小設(shè)置:寬100像素、高20像素;(6)表單中兩個(gè)本文域的邊框設(shè)置:實(shí)線、1像素、灰色(#999999)。任務(wù)實(shí)施(1)新建站點(diǎn),將project07文件夾下的task03文件夾復(fù)制到本地磁盤下的站點(diǎn)目錄中,在Dreamweaver CS5軟件中打開網(wǎng)頁文件index.html,進(jìn)行下列操作:單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框,在“規(guī)則定義”區(qū)域中選擇“mycss.css”,在“選擇器類型”區(qū)域中選擇“類”,并在“選擇器名稱”框中輸入類名“mybutton”,單擊“確定”,進(jìn)入“CSS規(guī)則定義”對(duì)話框。(2)選擇“類型”選項(xiàng)卡,設(shè)置字體為黑體,大小為16px(

11、像素),顏色為黑色(#000000)。(3)選擇“背景”選項(xiàng)卡,將背景圖像設(shè)置為文件夾project07/task03/images中的圖像文件“mybutton.png”,重復(fù)項(xiàng)設(shè)為no-repeat(不重復(fù))。(4)選擇“區(qū)塊”選項(xiàng)卡,設(shè)置文本對(duì)齊方式為Center(居中)。(5)選擇“方框”選項(xiàng)卡,設(shè)置寬為90px(像素)、高為30px(像素)。(6)選擇“邊框”選項(xiàng)卡,保持勾選“全部相同”,并將寬度設(shè)置為0px(像素),如圖 ,單擊“確定”。(7)在網(wǎng)頁中,選中左側(cè)表單中的按鈕“用戶注冊”。(8)在“屬性”面板中,選擇“樣式”下拉框,將“mybutton”樣式應(yīng)用至所選的按鈕上去。(9

12、)同樣,在選中表單中的“用戶登錄”按鈕,將“mybutton”樣式應(yīng)用上去。(10)瀏覽網(wǎng)頁,會(huì)發(fā)現(xiàn)左側(cè)表單中的兩個(gè)按鈕樣式均已發(fā)生改變。(11)單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框,在“規(guī)則定義”區(qū)域中選擇“mycss.css”,在“選擇器類型”區(qū)域中選擇“類”,并在名稱框中輸入類名“mytextfield”,單擊“確定”,進(jìn)入“CSS規(guī)則定義”對(duì)話框。(12)選擇“背景”選項(xiàng)卡,將背景色設(shè)置為#A2F15C(淺綠色)。(13)選擇“方框”選項(xiàng)卡,設(shè)置寬為100px(像素)、高為20px(像素)。(14)選擇“邊框”選項(xiàng)卡,保持勾選“全部相同”,并將Style(樣式)設(shè)置

13、為solid(實(shí)線),Width(寬度)設(shè)置為1px(像素),Color(顏色)設(shè)置為#999999(灰色),單擊“確定”。(15)在網(wǎng)頁中,選中“用戶名”后面的文本域 。(16)在“屬性”面板中選擇“樣式”下拉框,將“mytextfield”樣式應(yīng)用至所選的文本域上去 。(17)同樣,再選中“密碼”后面的文本域,將“mytextfield”樣式應(yīng)用上去。(18)瀏覽網(wǎng)頁,會(huì)發(fā)現(xiàn)左側(cè)表單中的兩個(gè)文本域的樣式均已發(fā)生改變 。使用CSS濾鏡制作電子商務(wù)網(wǎng)頁特效請(qǐng)?jiān)诖溯斎肽母睒?biāo)題4任務(wù)分析本任務(wù)使用Dreamweaver CS5中的樣式面板,創(chuàng)建CSS濾鏡樣式,對(duì)頁面中的文本、圖像等對(duì)象添加絢麗的

14、效果,詳細(xì)設(shè)置如下:(1)正文標(biāo)題“惠普HP Pavilion 11-n015tu x360 電腦(能源之星)”的字體效果設(shè)置:黑體、20像素、粗體、綠色(#33CC00);并對(duì)其添加DropShadow陰影濾鏡,設(shè)置該濾鏡參數(shù)為:陰影顏色為灰色(#666666)、水平偏移2像素、垂直偏移2像素、給非透明像素建立可見陰影。(2)網(wǎng)站標(biāo)題“成就未來”的字體效果設(shè)置:華文琥珀、72像素、鮮綠色(#009900);對(duì)其添加Glow發(fā)光濾鏡參數(shù)為:發(fā)光顏色為紅色(CE0B2B)、發(fā)光強(qiáng)度為15像素。相關(guān)知識(shí)1. CSS濾鏡CSS濾鏡可以給網(wǎng)頁中的文字、圖像等元素添加特殊的效果,如可以讓素材元素發(fā)光、反

15、轉(zhuǎn)、透明、有陰影、出現(xiàn)波紋等。2.不同濾鏡的效果不同的濾鏡可以讓元素呈現(xiàn)不一樣的奇妙效果,而這些效果具體都是通過各個(gè)濾鏡自帶的參數(shù)來實(shí)現(xiàn)的。(1)Alpha濾鏡:制作透明效果(2)Blur濾鏡:制作模糊效果(3)Glow濾鏡:制作發(fā)光效果(4)Shadow濾鏡:制作陰影效果,可以指定陰影的方向(5)DropShadow濾鏡:制作陰影效果,可以指定陰影的偏移量(6)Wave濾鏡:制作波紋效果(7)FlipV濾鏡:制作垂直翻轉(zhuǎn)效果任務(wù)實(shí)施(1)新建站點(diǎn),將project07文件夾下的task05文件夾復(fù)制到本地磁盤下的站點(diǎn)目錄中,在Dreamweaver CS5軟件中打開網(wǎng)頁文件index.htm

16、l,進(jìn)行下列操作:單擊“新建CSS規(guī)則”按鈕,進(jìn)入“新建CSS規(guī)則”對(duì)話框 ,在“規(guī)則定義”區(qū)域中選擇“mycss.css”,在“選擇器類型”區(qū)域中選擇“類”,在“選擇器名稱”框中輸入類名“biaoti”,單擊“確定”,進(jìn)入“CSS規(guī)則定義”對(duì)話框。(2)選擇“類型”選項(xiàng)卡,設(shè)置字體為黑體,大小為20px(像素),顏色為#33cc00(淺綠色)。(3)選擇“擴(kuò)展”選項(xiàng)卡,在“濾鏡器”中設(shè)置使用濾鏡“DropShadow”,并設(shè)置其各項(xiàng)參數(shù)分別為“Color=#666666,OffX=2,OffY=2,Positive=1” ,單擊“確定”。(4)選中網(wǎng)頁上端標(biāo)題所在的表格 。(5)在“屬性”面板中,選擇“樣式”下拉框,將“biaoti”樣式應(yīng)用至所選的表格上去 。(6)瀏覽網(wǎng)頁,會(huì)發(fā)現(xiàn)標(biāo)題變?yōu)閹ш幱暗奈淖至?。(7)新建一個(gè)CSS規(guī)則,進(jìn)入“新建CSS規(guī)則”對(duì)話框 ,在“規(guī)則定義”區(qū)域中選擇“mycss.css”,在“選擇器類型”區(qū)域中選擇“類”,在名稱框中輸入類名“mybanner”,