《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目6 使用CSS美化網(wǎng)頁效果

項(xiàng)目6使用CSS美化網(wǎng)頁效果由淺入深簡(jiǎn)章易懂貼近實(shí)際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程》重慶大學(xué)出版社CONTENTS任務(wù)1初識(shí)CSS

任務(wù)2使用CSS美化文本與圖像任務(wù)3使用CSS布局網(wǎng)頁任務(wù)4使用CSS設(shè)置背景任務(wù)1初識(shí)CSS本任務(wù)可以分解為2個(gè)活動(dòng)：使用行內(nèi)樣式美化網(wǎng)頁；使用內(nèi)嵌樣式表美化網(wǎng)頁?；顒?dòng)1使用行內(nèi)樣式美化網(wǎng)頁1-1對(duì)網(wǎng)頁文件“task6-1.html”的主標(biāo)題進(jìn)行CSS樣式的設(shè)置及應(yīng)用，文件另存為task6-1-1.html，效果如下圖所示?；顒?dòng)要求活動(dòng)1使用行內(nèi)樣式美化網(wǎng)頁1-11、CSS的設(shè)置啟動(dòng)DreamweaverCS6，按【Shift+F11】組合鍵或【窗口】菜單的【CSS樣式】可打“CSS樣式”面板設(shè)置CSS樣式表，如下圖所示。知識(shí)窗活動(dòng)1使用行內(nèi)樣式美化網(wǎng)頁1-12、CSS的分類CSS層疊樣式表按可以分為三種：內(nèi)聯(lián)樣式表（行內(nèi)樣式表）、嵌入樣式表和外部樣式表。內(nèi)聯(lián)式樣式表：是在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特殊的樣式直接加入到那些控制信息的標(biāo)記中。嵌入式樣式表：通常包含在HTML，文檔的頭部，即head元素中，并且有一個(gè)專門的元素style來標(biāo)記這種樣式表。外部式樣式表：是指將樣式表作為一個(gè)獨(dú)立的文件保存在計(jì)算機(jī)上，這個(gè)文件以“.css”作為文件的擴(kuò)展名。樣式在樣式表文件中定義和在嵌入式樣式表中的定義是一樣的，只是不再需要style元素。

在DreamweaverCS6中，內(nèi)聯(lián)樣式表（行內(nèi)樣式表）可以直接通過屬性面板的CSS樣式屬性中的“目標(biāo)規(guī)則”->“新內(nèi)聯(lián)樣式”進(jìn)行創(chuàng)建，如圖A所示。內(nèi)嵌樣式表和外部樣式表一般都通過點(diǎn)擊“CSS樣式”面板的新建按鈕來創(chuàng)建，如圖所示。A

B

活動(dòng)1使用行內(nèi)樣式美化網(wǎng)頁1-1詳細(xì)操作步驟請(qǐng)參閱教材?；顒?dòng)實(shí)施使用行內(nèi)樣式美化網(wǎng)頁是HTML應(yīng)用CSS的第一種方法。使用HTML屬性style，將屬性和值放在style屬性中即可，適用于樣式?jīng)]有可復(fù)用性的場(chǎng)合。在實(shí)驗(yàn)操作中注意與直接設(shè)置HTML元素屬性的效果對(duì)比學(xué)習(xí)?；顒?dòng)評(píng)價(jià)活動(dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁1-2對(duì)網(wǎng)頁文件“task6-1-1.html”進(jìn)行CSS樣式的設(shè)置及應(yīng)用，文件另存為task6-1-2.html，效果如下圖所示?；顒?dòng)要求活動(dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁1-21、CSS規(guī)則類型類（可應(yīng)用于任何HTML元素）：CSS類選擇器名稱以英文句點(diǎn)（.）開頭。如圖A所示。ID（僅應(yīng)用于一個(gè)HTML元素）：ID選擇器又可以稱為標(biāo)識(shí)選擇器，它的名字以英文井號(hào)（#）開頭，這種選擇器樣式一般在頁面中只用在一個(gè)元素上。標(biāo)簽（重新定義HTML元素）：“標(biāo)簽（重新定義HTML元素）”，可以實(shí)現(xiàn)用CSS重新定義HTML標(biāo)簽的外觀的功能。復(fù)合內(nèi)容（基于選擇的內(nèi)容）：例如，針對(duì)<h1>標(biāo)簽、<h2>標(biāo)簽、<h3>標(biāo)簽同時(shí)進(jìn)行了CSS規(guī)則定義，如圖B所示。復(fù)合內(nèi)容“選擇器名稱”下拉列表框中包含4個(gè)有關(guān)超級(jí)鏈接的選擇器名稱，利用它們可以對(duì)超級(jí)鏈接的外觀進(jìn)行重新定義。a:link超級(jí)鏈接的正常狀態(tài)；a:visited訪問過的超級(jí)鏈接狀態(tài)；a:hover鼠標(biāo)指針指向超級(jí)鏈接的狀態(tài)；a:active選中超級(jí)鏈接狀態(tài)。知識(shí)窗A

B

活動(dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁1-22、CSS樣式的應(yīng)用套用樣式表的方法主要有三種：（1）在“屬性”面板中選擇應(yīng)用特定的樣式打開“屬性”面板，在“類”下拉列表框中列出了已經(jīng)定義的一些類規(guī)則。在ID下拉列表框中列出了已經(jīng)定義的一些ID規(guī)則，如下圖所示。（2）利用“標(biāo)簽選擇器”選擇樣式首先需要在“標(biāo)簽選擇器”上選定一個(gè)標(biāo)簽，如下圖所示，在<p>標(biāo)簽上右擊，在彈出的快捷菜單中選擇“設(shè)置類”->“mycss1”命令，則可以快速把已經(jīng)定義的mycss1樣式指定給<p>標(biāo)簽。活動(dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁1-2（3）使用快捷菜單可以從快捷菜單中直接給對(duì)象指定一個(gè)樣式。首先選中對(duì)象，右擊，在快捷菜單中指定樣式，如下圖所示?；顒?dòng)2使用內(nèi)嵌樣式表美化網(wǎng)頁1-2詳細(xì)操作步驟請(qǐng)參閱教材?；顒?dòng)實(shí)施使用內(nèi)嵌樣式表美化網(wǎng)頁是作為一個(gè)獨(dú)立區(qū)域內(nèi)嵌在網(wǎng)頁里，必須寫在head標(biāo)簽里面。寫在HTML頁面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫在style標(biāo)記內(nèi)。注意：style標(biāo)記不要寫在title標(biāo)記上方?；顒?dòng)評(píng)價(jià)任務(wù)2使用CSS美化文本與圖像本任務(wù)可以分解為2個(gè)活動(dòng)：認(rèn)識(shí)文本相關(guān)CSS屬性和使用CSS樣式設(shè)置網(wǎng)頁背景?；顒?dòng)1認(rèn)識(shí)文本相關(guān)CSS屬性2-1對(duì)網(wǎng)頁文件“task6-2.html”的文本進(jìn)行CSS樣式的設(shè)置及應(yīng)用，文件另存為task6-2-1.html，效果如下圖所示。活動(dòng)要求活動(dòng)1認(rèn)識(shí)文本相關(guān)CSS屬性2-11、CSS規(guī)則定義中的屬性概述知識(shí)窗活動(dòng)1認(rèn)識(shí)文本相關(guān)CSS屬性2-12、CSS規(guī)則定義中與文本相關(guān)屬性詳解（1）類型：類型選項(xiàng)主要是對(duì)文字的字體大小、顏色、效果等基本樣式進(jìn)行設(shè)置?？芍粚?duì)要改變的屬性進(jìn)行設(shè)置，不改變的屬性就使之為空。這些屬性包括：Font-family（字體）、Font-size（字體大?。ont-style（字體樣式）、Line-height（行高）、Text-decoration（修飾）、Font-weight（字體粗細(xì)）、Font-variant（變體）、Text-transform（大小寫）、Color（顏色）。如下圖所示?；顒?dòng)1認(rèn)識(shí)文本相關(guān)CSS屬性2-1（2）區(qū)塊：區(qū)塊選項(xiàng)是設(shè)置對(duì)象文本文字間距、對(duì)齊方式、上標(biāo)、下標(biāo)、排列方式、首行縮進(jìn)等。屬性包括：Word-spacing（單詞間距）、Letter-spacing（字母間距）、Vertical-align（垂直對(duì)齊）、Text-align（文本對(duì)齊）、Text-indent（文字縮進(jìn)）、White-space（空格）、Display（顯示）。如下圖所示?；顒?dòng)1認(rèn)識(shí)文本相關(guān)CSS屬性2-1詳細(xì)操作步驟請(qǐng)參閱教材?；顒?dòng)實(shí)施與文本相關(guān)CSS屬性比較多，需要通過不同的活動(dòng)實(shí)踐加強(qiáng)對(duì)各屬性應(yīng)用的理解。同時(shí)要善于結(jié)合CSS其他的分類屬性設(shè)置來美化網(wǎng)頁。活動(dòng)評(píng)價(jià)活動(dòng)2使用CSS樣式設(shè)置網(wǎng)頁背景2-2打開“task6-2-1.html”文件，使用CSS樣式設(shè)置網(wǎng)頁文檔的背景圖像，效果如下圖所示?；顒?dòng)要求活動(dòng)2使用CSS樣式設(shè)置網(wǎng)頁背景2-2CSS規(guī)則定義中與背景相關(guān)屬性詳解：背景：背景選項(xiàng)主要是對(duì)元素背景進(jìn)行設(shè)置，包括背景顏色、背景圖像、背景圖像控制。一般是對(duì)BODY（頁面）、TABLE（表格）、DIV（區(qū)域）的設(shè)置。背景屬性包括：Background-color（背景顏色）、Background-image（背景圖像）、Background-repeat（重復(fù)）、Background-attachment（附件）、Background-position（水本位置）、Background-position（垂直位置）。如下圖所示。知識(shí)窗活動(dòng)2使用CSS樣式設(shè)置網(wǎng)頁背景2-2詳細(xì)操作步驟請(qǐng)參閱教材。活動(dòng)實(shí)施與背景相關(guān)CSS屬性不多，但有些屬性不太好理解，比如Background-repeat（重復(fù)）；Background-attachment（附件）；Background-position（水本位置）；Background-position（垂直位置）。需要通過大量的實(shí)踐操作來理解相關(guān)的參數(shù)設(shè)置及應(yīng)用效果?；顒?dòng)評(píng)價(jià)任務(wù)3使用CSS布局網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：使用Div+CSS布局網(wǎng)頁；使用Div+CSS制作圖片展示頁?；顒?dòng)1使用Div+CSS布局網(wǎng)頁3-1使用Div+CSS完成微信首頁的布局與制作，如下圖所示，完成后以“task6-3-1.html”為文件名保存到“task6-3”文件夾?；顒?dòng)要求活動(dòng)1使用Div+CSS布局網(wǎng)頁3-11、盒子模型（BoxModel）盒子模型，又叫盒模型，英文即boxmodel。無論是div、span、還是a都是盒子。但是，圖片、表單元素一律看作是文本，它們并不是盒子，比如說，一張圖片里并不能放東西，它自己就是自己的內(nèi)容。2、盒子模型的屬性一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。其示意圖如下圖所示。width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）padding：內(nèi)邊距border：邊框margin：外邊距知識(shí)窗活動(dòng)1使用Div+CSS布局網(wǎng)頁3-13、盒子模型的平面結(jié)構(gòu)圖如圖A所示，三維立體結(jié)構(gòu)圖如圖B所示。A

B

活動(dòng)1使用Div+CSS布局網(wǎng)頁3-14、外邊距（margin）用于控制元素與元素之間的距離，可設(shè)置盒子模型上、右、下、左4個(gè)方向的外邊距值，如下表所示：也可以同時(shí)設(shè)置4個(gè)方向的外邊距，如下表所示：活動(dòng)1使用Div+CSS布局網(wǎng)頁3-15、內(nèi)邊距（padding）用于控制內(nèi)容與邊框之間的距離，可設(shè)置盒子模型上、右、下、左4個(gè)方向的內(nèi)邊距值，設(shè)置方式與margin屬性相同?；顒?dòng)1使用Div+CSS布局網(wǎng)頁3-1詳細(xì)操作步驟請(qǐng)參閱教材?；顒?dòng)實(shí)施盒模型是Div+CSS網(wǎng)頁布局中一個(gè)比較重要的概念，也是一個(gè)難點(diǎn)，通過本次活動(dòng)，掌握盒模型的概念，并能實(shí)際運(yùn)用到網(wǎng)頁制作當(dāng)中，能靈活運(yùn)用盒模型相關(guān)知識(shí)對(duì)網(wǎng)頁進(jìn)行布局操作?；顒?dòng)評(píng)價(jià)活動(dòng)2使用Div+CSS制作圖片展示頁3-2使用Div+CSS完成圖片展示頁的制作，如下圖所示，完成后以“task6-3-2.html”為文件名保存到“task6-3”文件夾。活動(dòng)要求活動(dòng)2使用Div+CSS制作圖片展示頁3-21、標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流指的是元素排版布局過程中，元素會(huì)默認(rèn)自動(dòng)從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標(biāo)準(zhǔn)文檔流分兩類：塊級(jí)元素（blocklevel）：以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿，占有獨(dú)立空間，如div標(biāo)簽就是一個(gè)通用的塊級(jí)元素。行內(nèi)元素（inline）：各個(gè)元素之間橫向排列，到最右端自動(dòng)折行，標(biāo)簽本身不占有獨(dú)立的區(qū)域，僅僅在其他元素的基礎(chǔ)上指定了一定的范圍，如span標(biāo)簽就是一個(gè)通用的行內(nèi)元素。塊級(jí)元素與行內(nèi)元素的演示效果如下圖所示。知識(shí)窗活動(dòng)2使用Div+CSS制作圖片展示頁3-22、display屬性用于指定HTML標(biāo)簽的顯示方式，常用的屬性值有3個(gè)，如下表所示：3、float屬性用于定義元素的浮動(dòng)方向，其屬性值有3個(gè)，如下表所示：活動(dòng)2使用Div+CSS制作圖片展示頁3-24、clear屬性用于規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素，常用于清除浮動(dòng)帶來的影響和擴(kuò)展盒子高度，其屬性值有4個(gè)，如下表所示：5、overflow屬性用于處理盒子中的內(nèi)容溢出，overflow需要必須配合width屬性使用，其屬性值有4個(gè)，如下表所示：活動(dòng)2使用Div+CSS制作圖片展示頁3-2詳細(xì)操作步驟請(qǐng)參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握使用Div+CSS對(duì)網(wǎng)頁內(nèi)容進(jìn)行布局與美化操作，進(jìn)一步理解盒模型的概念及應(yīng)用，在活動(dòng)中，通過具體案例——圖片展示區(qū)的制作，能更好地理解與掌握Div+CSS布局與美化網(wǎng)頁思想?；顒?dòng)評(píng)價(jià)任務(wù)4使用CSS設(shè)置背景本任務(wù)可以分解為2個(gè)活動(dòng)：認(rèn)識(shí)背景相關(guān)CSS屬性；制作淘寶登錄頁面?；顒?dòng)1認(rèn)識(shí)背景相關(guān)CSS屬性4-1結(jié)合背景相關(guān)CSS樣式，完成“支付寶-我的應(yīng)用”的制作，如下圖所示，完成后以“task6-4-1.html”為文件名保存到“task6-4”文件夾?；顒?dòng)要求活動(dòng)1認(rèn)識(shí)背景相關(guān)CSS屬性4-11、CSS背景CSS背景屬性用于定義HTML元素的背景，如下圖所示，可在DreamweaverCS6的“CSS規(guī)則定義”對(duì)話框的“背景”選項(xiàng)卡中進(jìn)行CSS背景設(shè)置。CSS背景包含以下幾個(gè)常用屬性：

背景顏色（background-color）：用于設(shè)置網(wǎng)頁元素的背景顏色。背景圖像（background-image）：用于設(shè)置網(wǎng)頁元素的背景圖像。背景重復(fù)（background-repeat）：用于控制圖像平鋪的方式和方向。背景定位（backgroun