《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第1頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第2頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第3頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第4頁
《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第6課 使用CSS3美化圖像和背景_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第課使用CSS3美化圖像和背景的第課使用CSS3美化圖像和背景的基基本本PAGE1868216821使用CSS3美化圖像和背景第6821使用CSS3美化圖像和背景第課PAGE196212使用CSS3美化圖像和背景第6212使用CSS3美化圖像和背景第課PAGE1

課題使用CSS3美化圖像和背景課時2課時（90min）教學目標知識技能目標：（1）掌握使用CSS3美化圖像和設置背景的方法（2）學習CSS3對圖文混排的處理流程（3）掌握使用CSS3設置漸變的方法思政育人目標：通過對CSS3美化圖像和背景的學習，培養(yǎng)學生的邏輯思維能力，使學生懂得用技巧解決問題，以提高工作效率教學重難點教學重點：了解CSS3美化圖像、設置背景和漸變的原理教學難點：使用CSS3設置圖像漸變教學方法講授法、啟發(fā)法、問答法、演示法、討論法、練習法教學用具電腦、投影儀、多媒體課件、教材教學設計第1節(jié)課：考勤（2min）→導入新知（4min）→知識講解（24min）→課堂練習（15min）第2節(jié)課：問題導入（4min）→知識講解（16min）→小組活動（18min）→課堂小結（5min）→作業(yè)布置（2min）教學過程主要教學內(nèi)容及步驟設計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學生】班干部報請假人員及原因培養(yǎng)學生的組織紀律性，掌握學生的出勤情況新知導入

（4min）【教師】講解CSS3美化在日常生活中的使用，引出新知識點在日常生活中，可以經(jīng)?？吹骄W(wǎng)頁中圖像的大小、邊框、陰影等樣式，還有一些網(wǎng)頁總體顏色的漸變格式，這些樣式大部分都是用CSS3樣式來設計的【學生】思考、討論【教師】總結學生討論內(nèi)容和其他編程語言不一樣的地方，CSS3編程語言最大的優(yōu)勢就是對于格式的控制以及美化操作的簡潔性通過概述知識點，讓學生了解學習CSS3語言的必要性知識講解

（24min）【教師】講述圖像樣式和背景樣式圖像樣式1．圖像大小使用<img/>標簽的width和height屬性可以設置圖像大小，但一般不直接使用，而建議使用CSS3中的width和height屬性更加靈活地設置圖像大小。CSS3中還有以下4個設置圖像大小的屬性，設置它們可以使圖像元素在移動端正常顯示。（1）min-width屬性。設置最小寬度。（2）max-width屬性。設置最大寬度。（3）min-height屬性。設置最小高度。（4）max-height屬性。設置最大高度?！窘處煛垦菔尽纠?-7】操作流程，實現(xiàn)圖3-9的效果設置圖像的大小，頁面效果如圖3-9所示。圖3-9圖像大小的設置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，為img元素設置不同的圖像大小。<style> .ph{width:20%;} .ps{width:200px;} .pb{width:500px;}</style>……<body> <imgclass="ph"src="images\p3.jpg"alt="綠色小草"/> <imgclass="ps"src="images\p3.jpg"alt="綠色小草"/> <imgsrc="images\p3.jpg"alt="綠色小草"/> <imgclass="pb"src="images\p3.jpg"alt="綠色小草"/></body>2．圖像邊框網(wǎng)頁中的圖像元素默認是沒有邊框的，使用CSS3的border屬性可以設置不同樣式、顏色、寬度的邊框。（1）邊框樣式。在CSS3中，使用border-style屬性設置邊框樣式，具體格式為：border-style:solid|dotted|dashed;其中，solid表示單實線，此外還有double（雙線）、groove（槽線）、ridge（脊線）等表示實線的屬性值；dotted表示點線；dashed表示虛線。（2）邊框顏色。在CSS3中，使用border-color屬性設置邊框顏色，具體格式為：border-color:color;其中的屬性值color與文本顏色的設置相同。（3）邊框寬度。在CSS3中，使用border-width屬性設置邊框寬度，具體格式為：border-width:length;其中的屬性值是表示邊框寬度的數(shù)值與單位，不能使用百分比?！窘處煛垦菔尽纠?-8】操作流程，實現(xiàn)圖3-10的效果設置圖像的邊框，頁面效果如圖3-10所示。圖3-10圖像邊框的設置效果創(chuàng)建HTML5文檔，在<body>標簽中輸入以下代碼，標記圖像標簽。<imgclass="s1"src="images\p3.jpg"alt="綠色小草"/><imgclass="s2"src="images\p3.jpg"alt="綠色小草"/><imgclass="s3"src="images\p3.jpg"alt="綠色小草"/>在<head>標簽中添加<style>標簽，在其中輸入以下代碼，為img元素設置不同的邊框效果。img{width:150px;margin-right:20px;}/*設置圖像寬度為150px，右側外邊距為20px*//*設置邊框樣式為實線，邊框顏色為棕色，邊框寬度為2px*//*設置邊框樣式為點線，邊框顏色為灰色，邊框寬度為4px*//*設置邊框樣式為虛線，邊框顏色為橙色，邊框寬度為8px*/3．不透明度在CSS3中，使用opacity屬性設置圖像不透明度，具體格式為：opacity:0～1;它的取值范圍為0～1，數(shù)值越高透明度越低，0表示完全透明，1表示完全不透明。4．圓角圖像在CSS3中，使用border-radius屬性設置圓角樣式，具體格式為：border-radius:none|length;其中，none是默認值，表示沒有圓角；length表示設定弧度的數(shù)值，不可為負值。為了分別設置4個頂角的圓角，border-radius屬性和邊框樣式屬性類似，派生了4個子屬性，它們的含義如下。（1）border-top-right-radius屬性。設置右上角的圓角。（2）border-bottom-right-radius屬性。設置右下角的圓角。（3）border-bottom-left-radius屬性。設置左下角的圓角。（4）border-top-left-radius屬性。設置左上角的圓角?！窘處煛垦菔尽纠?-9】操作流程，實現(xiàn)圖3-11的效果設置圖像的透明度與圓角，頁面效果如圖3-11所示。圖3-11圖像透明度與圓角的設置效果(1)創(chuàng)建HTML5文檔，在<body>標簽中輸入以下代碼，標記圖像標簽。<imgclass="y3s5"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y3s6"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y4s7"src="images\p4.jpg"alt="金甌永固杯"/><imgclass="y4s8"src="images\p4.jpg"alt="金甌永固杯"/>(2)在<head>標簽中添加<style>標簽，在其中輸入以下代碼，為img元素設置不同的透明度與圓角效果。img{width:300px;margin:20px;border:solid3px;}/*設置圖像的寬度為300px，外邊距為20px，有3px的黑色實線邊框*/.y1{opacity:0.3;} .y2{opacity:0.5;}.y3{opacity:0.7;} .y4{opacity:0.9;}.s1{border-radius:20px;} .s2{border-radius:10px20px;}.s3{border-radius:10px20px30px;}.s4{border-radius:10px20px30px40px;}.s5{border-radius:50px/100px}.s6{border-radius:100px50px/50px100px;}.s7{border-radius:100px50px80px/60px80px100px;}.s8{border-radius:60px60px60px60px/100px100px60px60px;}/*設置不同的透明度與圓角*/5．圖像陰影在CSS3中，使用box-shadow屬性設置陰影，具體格式為：box-shadow:h-shadowv-shadowblurspreadcolorinset;其中，spread表示陰影的尺寸，inset表示內(nèi)部陰影，其余各屬性與在文本陰影中的意義相同。另外，上述各參數(shù)除h-shadow與v-shadow之外都可以省略。【教師】演示【例3-10】操作流程，實現(xiàn)圖3-12的效果設置圖像的陰影，頁面效果如圖3-12所示。圖3-12為圖像添加陰影的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，為圖像元素設置不同的陰影效果。<style> img{width:300px;margin:20px;border-radius:30px; border:solid3px#777777;}/*設置圖像寬度、外邊距、圓角及邊框*/ .y1{box-shadow:5px5px3px2px#545454;} .y2{box-shadow:-10px-8px5px2px#550000,-15px8px5px5px#55557f;}/*設置兩種圖像陰影*/</style>……<body> <imgsrc="images\p4.jpg"alt="金甌永固杯"/> <imgclass="y1"src="images\p4.jpg"alt="金甌永固杯"/> <imgclass="y2"src="images\p4.jpg"alt="金甌永固杯"/></body>【學生】聆聽、思考、記錄【教師】編寫代碼，顯示圖像不同的陰影等級設置圖像陰影等級美化視頻元素，頁面效果如圖3-13所示。圖3-13美化視頻元素后的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，設置視頻元素的邊框與圓角等樣式。<style> div{float:left;} /*設置div元素向左浮動*/ video{width:500px;height:300px;border:solid2pxlightblue; border-radius:50px;float:right;}/*設置視頻元素的寬度、高度、邊框與圓角，并向右浮動*/</style>……<body> <div><h1>風景視頻</h1><p>感受云霧山水之美</p></div> </body>【學生】跟著老師，一起編寫代碼【教師】講解背景樣式1．設置背景圖像（1）設置背景圖像。在CSS3中，使用background-image屬性設置背景圖像，具體格式為：background-image:none|url;其中，none是默認值，表示無背景圖；url表示背景圖像的地址【教師】演示【例3-12】操作流程，實現(xiàn)圖3-14的效果設置元素的背景圖像，頁面效果如圖3-14所示。圖3-14背景圖像的設置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，為div元素設置背景圖像。 h1{color:aliceblue;text-align:center; text-shadow:2px2px10px#f0f8ff;} h2{color:#f0f8ff;text-align:center;}/*設置標題文本的樣式*/ div{width:500px;height:120px; background-image:url(images/p5.jpg);}/*設置div元素的寬度、高度與背景圖像*/</style>……<body> <div> <h1>網(wǎng)上書店</h1> <h2>真誠邀請您前來選購，給您貼心的售后服務</h2> </div></body>（2）設置背景圖像的顯示方式。在CSS3中，使用background-repeat屬性設置背景圖像的顯示方式，具體格式為：background-repeat:repeat-x|repeat-y|repeat|no-repeat|round|

space;各屬性值的含義如下。①repeat-x。在水平方向上平鋪。②repeat-y。在豎直方向上平鋪。③repeat。在水平與豎直方向上平鋪。④no-repeat。不平鋪，只顯示一次。⑤round。自動縮放以適應容器。⑥space。以相同間距平鋪整個容器或某個方向。（3）設置背景圖像的顯示位置。默認情況下，背景圖像顯示在元素左上角。在CSS3中，可以使用background-position屬性重新設置背景圖像的顯示位置，具體格式為：background-position:length-xlength-y;其中，length-x表示背景圖像在水平方向的位置，具有屬性值left、center及right，默認值為left；length-y表示豎直方向的位置，具有屬性值top、center及bottom，默認值為top。這兩個屬性值都可以使用數(shù)值與單位表示，也可以使用百分比，當使用數(shù)值或百分比時，均以左上角為原點確定背景圖像的顯示位置。另外，如果只設置一個參數(shù)，那么瀏覽器將默認第二個參數(shù)為center，即50%。【教師】演示【例3-13】操作流程，實現(xiàn)圖3-15的效果設置背景圖像的顯示方式與位置，頁面效果如圖3-15所示。圖3-15為h1元素設置背景圖像的頁面效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，為h1元素設置兩層背景圖像，并設置它們的顯示方式與位置。<style> h1{text-indent:1.2em;color:#505050; background-image:url(images/p6.jpg),url(images/p7.jpg); background-repeat:no-repeat,repeat-x; background-position:12px0px,center38px;}/*首先設置標題元素的文本縮進與文本顏色，然后設置兩個背景圖像，并設置它們的顯示方式與位置*/ p{text-indent:1em;} /*設置段落文本的縮進*/</style>……<body> <h1>網(wǎng)上書店</h1><p>真誠邀請您前來選購，給您貼心的售后服務。</p> <p>濃縮圖書的庫存空間，數(shù)量大、種類多，不受時間與地域的限制，信息豐富，價格低廉，還擁有個性化服務，快來選購吧。</p></body>（4）固定背景圖像。在CSS3中，使用background-attachment屬性設置背景圖像的固定方式，具體格式為：background-attachment:scroll|fixed|local;其中，scroll是默認值，表示背景相對于元素固定；fixed表示背景相對于瀏覽器窗體固定；local表示背景相對于元素內(nèi)容固定。【教師】演示【例3-14】操作流程，實現(xiàn)圖3-16的效果。圖3-16固定背景的設置效果2．設置背景顏色在CSS3中，使用background-color屬性設置背景顏色，具體格式為：background-color:color;其中，屬性值color與文本顏色的設置相同?！窘處煛垦菔尽纠?-15】操作流程，實現(xiàn)圖3-17的效果設置元素的背景顏色，頁面效果如圖3-17所示。圖3-17背景顏色的設置效果【學生】聆聽、思考、記錄【教師】詢問學生，是否有不理解的地方【學生】提出問題，向老師請教【教師】回答學生提問通過講解知識點，讓學生知道CSS3中圖像和背景樣式的使用方法課堂練習

（15min）【教師】布置課堂練習提供已有的HTML5的圖像和背景，安排小組學生按照要求完成課堂練習（1）實現(xiàn)HTML5背景圖像的邊框顯示（2）在已有圖片的基礎上實現(xiàn)背景圖片的漸變【教師】講解課堂練習【學生】完成課堂練習【教師】巡視課堂，督促學生完成課堂練習利用練習法，加深學生對CSS3語言操作的經(jīng)驗第二節(jié)課問題導入

（4min）【教師】提出問題，讓學生思考上一節(jié)課，我們對圖像和背景的樣式進行了調(diào)整，但是操作都限制在單個對象上，如果遇到圖文混排的多個對象，甚至更為復雜的漸變處理，我們應該如何解決呢【學生】聆聽、思考、理解通過問答的方式，激發(fā)學生對使用CSS3處理復雜對象的學習興趣知識講解

（15min）【教師】講解圖文混排圖文混排圖文混排是網(wǎng)頁中較為常見的表現(xiàn)形式，也更有利于提升用戶的閱讀體驗。默認情況下，圖像作為行內(nèi)元素顯示在頁面中，也就是說它可以與文本一起放置在段落標簽中以達到圖文混排的效果。但是這樣的排版效果并不理想，無法做出文本環(huán)繞圖像的頁面效果。使用CSS樣式中的浮動屬性float，可以使元素脫離原本的文檔流，移動到容器的邊界，以達到圖文混排的效果。float屬性值可以設置為left、right或none，表示元素向左、向右浮動或不浮動?！窘處煛垦菔尽纠?-16】操作流程，實現(xiàn)圖3-18的效果使用float屬性制作圖文混排效果，頁面效果如圖3-18所示。圖3-18圖文混排的頁面效果(1)創(chuàng)建HTML5文檔，在<body>標簽中輸入以下代碼，構建圖文內(nèi)容的結構。<h2>宋代作者介紹</h2><p><imgclass="g1"src="images/p9.jpg"alt="李清照"/>

<strong>李清照</strong>號易安居士，漢族，山東省濟南章丘人。宋代（南北宋之交）女詞人，婉約詞派代表，有“千古第一才女”之稱。所作詞，前期多寫其悠閑生活，后期多悲嘆身世，情調(diào)感傷。形式上善用白描手法，自辟途徑，語言清麗。論詞強調(diào)協(xié)律，崇尚典雅，提出詞“別是一家”之說，反對以作詩文之法作詞。有《易安居士文集》《易安詞》，已散佚。后人有《漱玉詞》輯本。</p><p><imgclass="g2"src="images/p10.jpg"alt="陸游"/>

<strong>陸游</strong>，字務觀，號放翁。漢族，越州山陰（今浙江紹興）人，南宋著名詩人。中年入蜀，投身軍旅生活，官至寶章閣待制。晚年退居家鄉(xiāng)。創(chuàng)作詩歌今存九千多首，內(nèi)容極為豐富。著有《劍南詩稿》《渭南文集》《南唐書》《老學庵筆記》等。</p>(2)在<head>標簽中添加<style>標簽，在其中輸入以下代碼，設置文本內(nèi)容的樣式，并分別設置兩個圖像元素向左與向右浮動，使圖像與文本元素混合排列。h2{text-align:center;}p{text-indent:2em;text-align:justify;}/*設置標題與段落文本的樣式*/img.g1{float:left;margin:010px;}img.g2{float:right;margin:010px;}/*設置圖像向左或向右浮動，并有10px的左右外邊距*/【學生】聆聽、思考、記錄【教師】講解漸變樣式以前想要在網(wǎng)頁中實現(xiàn)漸變效果，只能通過添加具有漸變圖案的圖像，現(xiàn)在則可以直接設置CSS3的background屬性來實現(xiàn)。使用CSS3設置的漸變效果比添加漸變圖像更易修改，過渡也更自然。1．線性漸變在CSS3中，使用linear-gradient()方法設置線性漸變，具體格式為：linear-gradient(angle,color1,color2…);angle表示漸變的方向，可以使用角度（單位為deg）或關鍵字表示。其中4個關鍵字的含義如下（1）tobottom。默認值，表示漸變從上到下，等同于180deg。（2）totop。表示漸變從下到上，等同于0deg。（3）toleft。表示漸變從右到左，等同于270deg。（4）toright。表示漸變從左到右，等同于90deg。color1，color2表示漸變的顏色，還可以在它們的后面增加一個長度值或百分比，表示漸變的起點位置，顏色值與起點位置之間用空格隔開。一個線性漸變至少包含兩個漸變顏色。【教師】演示【例3-17】操作流程，實現(xiàn)圖3-19的效果為超鏈接設置線性漸變效果，頁面效果如圖3-19所示。圖3-19應用線性漸變的圓角按鈕效果(1)創(chuàng)建HTML5文檔，在<body>標簽中輸入以下代碼，標記兩個超鏈接標簽。<ahref="#">登錄</a><ahref="#">注冊</a>(2)在<head>標簽中添加<style>標簽，在其中輸入以下代碼，設置超鏈接的樣式，為其添加線性漸變效果。a{display:block;margin:20px;float:left;color:#6f6f6f;width:200px;height:50px;font-size:2em;background:linear-gradient(totop,#aaaaaa,#dfdfdf50%);}/*設置超鏈接的樣式，首先將其轉換為塊級元素，添加外邊距，向左浮動，并設置文本顏色、寬度、高度和字號，然后消除下劃線，文本居中對齊，添加圓角邊框和線性漸變*/a:hover{background:linear-gradient(#aaaaaa5%,#dfdfdf);color:#3b3b3b;}/*設置鼠標指針移動至超鏈接上時的漸變效果與文本顏色*/2．徑向漸變在CSS3中，使用radial-gradient()函數(shù)設置徑向漸變，具體格式為：radial-gradient(shapesizeposition,color1,color2…);其中，shape表示漸變的類型，包括circle（圓形）和ellipse（橢圓形）兩類；size表示圓形的半徑或者橢圓的半長軸與半短軸，可以使用數(shù)值、百分比或關鍵字，其中4個關鍵字的含義如下（1）farthest-corner。設置漸變的半徑長度為從圓心到離圓心最遠的角。（2）farthest-side。設置漸變的半徑長度為從圓心到離圓心最遠的邊。（3）closest-side。設置漸變的半徑長度為從圓心到離圓心最近的邊。（4）closest-corner。設置漸變的半徑長度為從圓心到離圓心最近的角。position表示漸變中心點的位置。一般包含兩個參數(shù)，分別表示水平位置坐標與豎直位置坐標，可以使用數(shù)值、百分比或關鍵字，關鍵字包括left（左邊線）、right（右邊線）、center（中心）、top（上邊線）和bottom（下邊線）。設置一個參數(shù)時默認第二個參數(shù)為center，百分比為50%。需要注意的是，position需位于shape和size之后，并在參數(shù)前加一個at。color1，color2與線性漸變中的設置方法相同?！窘處煛垦菔尽纠?-18】操作流程，實現(xiàn)圖3-20的效果分別設置圓形與橢圓形的徑向漸變效果，頁面效果如圖3-20所示。圖3-20圓形與橢圓形徑向漸變的設置效果創(chuàng)建HTML5文檔，參照以下代碼段分別在<style>和<body>標簽中輸入代碼，分別為兩個div元素設置圓形與橢圓形的徑向漸變效果。<style> div{width:500px;height:200px;margin:10px;float:left;}/*設置div元素的寬度、高度與外邊距，并向左浮動*/ div.d1{ background:radial-gradient(circle8em,#ffff7f,#7c4b4c);}/*設置第一個div元素的圓形徑向漸變背景*/ div.d2{background: radial-gradient(ellipse15em8em,#ffff7f,#7c4b4c);}/*設置第二個div元素的橢圓形徑向漸變背景*/</style>……<body> <divclass="d1"></div> <divclass="d2"></div></body>【學生】聆聽、思考、記錄不理解的問題，向老師提問【教師】巡視課堂，解答學生疑惑通過講解知識點，讓學生知道CSS3中圖文混排和漸變樣式的使用小組活動

（15min）【教師】組織小組活動以小組為單位進行活動，完成美化“圖書簡介”頁面的圖像、視頻與背景的任務【教師】多媒體給出部分代碼提示在樣式文檔中的body{…}內(nèi)添加以下代碼，為頁面設置背景顏色background:#e5ede2;繼續(xù)在樣式文檔中的div.b_photo{…}內(nèi)添加以下代碼，設置圖像的樣式div.b_photo{float:l

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論