《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第17課 CSS與CSS3（八）_第1頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第17課 CSS與CSS3（八）_第2頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第17課 CSS與CSS3（八）_第3頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第17課 CSS與CSS3（八）_第4頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第17課 CSS與CSS3（八）_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第17課CSS與CSS3（八）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握CSS自適應(yīng)屏幕功能的應(yīng)用（2）掌握利用HTML、CSSS網(wǎng)頁制作技術(shù)，制作某婚禮策劃?rùn)C(jī)構(gòu)首頁的具體方法和流程素質(zhì)目標(biāo)：實(shí)現(xiàn)理論與實(shí)踐相結(jié)合，鍛煉動(dòng)手能力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：自適應(yīng)屏幕功能教學(xué)難點(diǎn)：利用HTML、CSSS網(wǎng)頁制作技術(shù)，制作婚禮策劃?rùn)C(jī)構(gòu)首頁教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（25min）→頭腦風(fēng)暴（10min）第2節(jié)課：→綜合案例（35min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請(qǐng)大家了解自適應(yīng)屏幕的相關(guān)內(nèi)容?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（8min）【教師】提出以下問題如何讓網(wǎng)頁做到適應(yīng)不同屏幕大小的移動(dòng)終端呢？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（25min）3.17自適應(yīng)屏幕@mediascreen【教師】講解自適應(yīng)屏幕@mediascreen功能的具體方法【課堂互動(dòng)】?【教師】提問CSS3是通過哪項(xiàng)功能來實(shí)現(xiàn)自適應(yīng)屏幕大小的？?【學(xué)生】聆聽、思考、回答CSS3提供了@mediascreen功能來實(shí)現(xiàn)自適應(yīng)屏幕大小。具體有三種方法。3.17.1尺寸最小法min-width屬性功能：定義當(dāng)屏幕尺寸大于等于某尺寸時(shí)，要執(zhí)行的屬性。應(yīng)用格式：@mediascreenand（min-width:尺寸值px）{選擇器及其CSS樣式列表}【示例3-17-1】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，布局一個(gè)大盒子里有6個(gè)小盒子，大盒子#box尺寸為100%，所有小盒子.box向左浮動(dòng)的頁面。代碼如下：<divid="box"> <divclass="box">1</div> <divclass="box">2</div> <divclass="box">3</div> <divclass="box">4</div> <divclass="box">5</div> <divclass="box">6</div></div>在<style>標(biāo)簽內(nèi)寫入CSS選擇器：*{box-sizing:border-box;}#box{width:100%; margin:50px;}.box{font-size:40px; color:#fff; background:red; text-align:center; line-height:100px; float:left; border:1pxsolidblue; width:300px;}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“未使用@mediascreen屬性之前的效果”圖片（詳見教材），并講解效果：改變?yōu)g覽器窗口寬度時(shí)，有可能出現(xiàn)混亂的效果，顯得布局較為混亂。在<stryle>標(biāo)簽內(nèi)添加如下代碼：@mediascreenand(min-width:600px){ .box{width:30%;}}@mediascreenand(min-width:900px){ .box{width:16%; }}同時(shí)修改原代碼中粗斜體width屬性值400px為45%?！窘處煛拷M織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“應(yīng)用@mediascreen效果”圖片（詳見教材），并講解效果：通過屏幕寬度控制同類盒子一行的個(gè)數(shù)，在屏幕寬度小于等于600px時(shí)，每行有兩個(gè)盒子；在大于等于600px時(shí)，每行有三個(gè)盒子；在大于等于900px時(shí)，每行有六個(gè)盒子?！咎崾尽緾SS中同一個(gè)選擇器的同一屬性會(huì)自上而下解釋，后面的屬性值會(huì)覆蓋前面的屬性值。當(dāng)使用尺寸最小法時(shí)，如果屏幕的值較大，解釋器會(huì)依次找到那個(gè)最接近屏幕寬度所屬的屬性去執(zhí)行，所以此時(shí)必須采用尺寸“前邊的小，后邊的大”的原則。3.17.2尺寸最大法max-width屬性功能：定義當(dāng)屏幕尺寸小于等于某尺寸時(shí)，要執(zhí)行的屬性。應(yīng)用格式：@mediascreenand（max-width:尺寸值px）{ 選擇器及屬性列表}【示例3-17-2】修改【示例3-17-1】關(guān)于屏幕響應(yīng)式聲明：@mediascreenand(max-width:900px){ .box{width:30%;}}@mediascreenand(max-width:600px){ .box{width:45%;}}同時(shí)修改原代碼中粗斜體width屬性400px為16%。效果：同【示例3-17-1】最終效果?！咎崾尽客瑯佑捎贑SS選擇器由上而下解釋的原理，對(duì)于最大尺寸法要采用尺寸“前面的大，后面的小”的原則。3.17.3尺寸區(qū)間法min-widthandmax-width功能：定義屏幕尺寸在某個(gè)區(qū)間范圍時(shí)要執(zhí)行的屬性。@mediascreenand（min-width:尺寸值px）and（max-width:尺寸值px）{選擇器及其屬性列表}【示例3-17-3】修改【示例3-17-1】關(guān)于屏幕響應(yīng)式聲明：@mediascreenand(min-width:900px){ .box{width:16%; }}@mediascreenand(min-width:600px)and(max-width:900px){ .box{width:30%; }}@mediascreenand(max-width:600px){ .box{width:45%; }}【提示】由于是尺寸區(qū)間法，對(duì)不同尺寸范圍的樣式表達(dá)非常清晰，不存在互相覆蓋的問題，所以屏幕控制有關(guān)代碼不需要遵循一定規(guī)律。效果：同【示例3-17-1】最終效果。【學(xué)生】聆聽、記錄、理解通過教師講解、課堂互動(dòng)、演示操作等方式，使學(xué)生了解通過@mediascreen功能實(shí)現(xiàn)自適應(yīng)屏幕大小的具體方法頭腦風(fēng)暴（10min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何使用本節(jié)課中介紹的min-width、max-width、min-widthandmax-width這種方法?！緦W(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問題導(dǎo)入（5min）【教師】提出以下問題利用前面所學(xué)的HTML和CSSS網(wǎng)頁制作技術(shù)，可以設(shè)計(jì)什么類型的網(wǎng)站？實(shí)現(xiàn)哪些功能?【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容綜合案例

（35min）3.18綜合案例——制作婚禮策劃?rùn)C(jī)構(gòu)首頁【教師】講解制作婚禮策劃?rùn)C(jī)構(gòu)首頁的具體操作流程在本案例中，將利用前面所學(xué)的HTML和CSSS網(wǎng)頁制作技術(shù)，制作某婚禮策劃?rùn)C(jī)構(gòu)的首頁?！菊n堂互動(dòng)】?【教師】ppt展示圖片“婚禮策劃?rùn)C(jī)構(gòu)首頁效果“（詳見教材），并提問制作婚禮策劃?rùn)C(jī)構(gòu)網(wǎng)頁的步驟有哪些？?【學(xué)生】聆聽、思考、回答具體制作時(shí)，可按照搭建頁面整體框架、制作網(wǎng)頁頭部、制作網(wǎng)頁導(dǎo)航部分、制作主體內(nèi)容的上面部分、制作主體內(nèi)容的中間部分、制作主體內(nèi)容的下面部分、制作友情鏈接部分、制作網(wǎng)頁底部的流程進(jìn)行。1.搭建網(wǎng)站（1）在C盤上創(chuàng)建文件夾，命名為“wedding”，將此文件夾作為項(xiàng)目站點(diǎn)。將本書配套素材“教材源碼和素材\綜合案例\綜合案例素材\img（婚禮策劃?rùn)C(jī)構(gòu)首頁）”文件夾中的“images”文件夾復(fù)制到“wedding”文件夾中。（2）使用快捷方式在站點(diǎn)根目錄創(chuàng)建文本文檔，并設(shè)置文件名為“index.html”。2.搭建頁面整體框架（1）整體布局分析?！菊n堂互動(dòng)】?【教師】并提問結(jié)合效果圖，分析其整體布局具有什么特點(diǎn)？?【學(xué)生】聆聽、思考、回答從效果圖上看，該網(wǎng)頁整個(gè)頁面布局是常見的三行樣式，整個(gè)頁面居中顯示。其中第一行放置網(wǎng)站logo及導(dǎo)航；第二行放置用戶登錄、圖片幻燈顯示、婚禮資訊、視頻展示、作品展示區(qū)；第三行放置友情鏈接與網(wǎng)站相關(guān)信息。分析完這些，網(wǎng)頁框架結(jié)構(gòu)也就好搭建了?！窘處煛縫pt展示圖片“整體頁面框架圖“（詳見教材），并講解【課堂互動(dòng)】?【教師】并提問在搭建整體框架時(shí)需要注意些什么？?【學(xué)生】聆聽、思考、回答在搭建婚禮策劃?rùn)C(jī)構(gòu)首頁整體框架時(shí)需要注意以下事項(xiàng)。①頁面的大結(jié)構(gòu)用的是id選擇器，里面用的是class選擇器。②在定義選擇器時(shí)，注意命名規(guī)范。如head、nav、main、foot等都是見名知意的。③含有2個(gè)以上橫向區(qū)塊的時(shí)候，需要在外面嵌套一個(gè)區(qū)塊。④具體布局時(shí)，頁面采取固定寬度且居中的辦法，構(gòu)建一個(gè)大的<div>（#all），里面放置5個(gè)<div>，分別為頭部#head，導(dǎo)航#nav，主體#main，友情鏈接#link，底部#foot；主體#main部分放置3個(gè)<div>，分別是#m1、#m2和#m3；#m1和#m2中又分別包含.login、.ad、.hlzx和.show幾個(gè)<div>，其中橫向排列的<div>使用浮動(dòng)方式進(jìn)行定位。（2）編寫HTML代碼。使用記事本打開前面新建的“index.html”網(wǎng)頁，然后根據(jù)前面的分析，在網(wǎng)頁中插入各<div>標(biāo)簽，并設(shè)置id名或class名，從而搭建好網(wǎng)頁的整體框架。代碼如下：<divid="all"> <divid="head">此處是頭部的內(nèi)容</div> <divid="nav">此處是導(dǎo)航部分的內(nèi)容</div> <divid="main"> <divid="m1"> <divclass="login">此處是登錄部分的內(nèi)容</div> <divclass="ad">此處是圖片顯示部分的內(nèi)容</div> </div>……（詳見教材）（3）編寫CSS代碼。本例使用外部樣式表來控制網(wǎng)頁，因此，首先新建一個(gè)CSS樣式表文件，將其以style.css為名保存在站點(diǎn)根文件夾中。①為了讓外部樣式表能控制網(wǎng)頁，在網(wǎng)頁的<head></head>標(biāo)簽對(duì)之間輸入如下代碼。<linkhref="style.css"rel="stylesheet"type="text/css"/>②統(tǒng)一設(shè)置頁面默認(rèn)情況下的屬性。打開style樣式表文件，輸入如下代碼。*{ margin:0; padding:0; border:0; font-size:12px; font-family:"宋體";}③設(shè)置頁面背景屬性。這里將整個(gè)頁面的背景顏色設(shè)為紅色“#580000”。<linkhref="style.css"rel="stylesheet"type="text/css"/>④設(shè)置頁面最外層div的樣式，即將頁面整體寬度設(shè)為1007px，并使其在任何瀏覽器內(nèi)居中顯示。#all{ width:1007px; margin:0auto;}⑤設(shè)置頭部層相關(guān)屬性。綜上所述，父層寬度為1007px，而這里應(yīng)該重新定義子層寬度為960px。注意：若不重新設(shè)置，則子層會(huì)繼承父層的屬性。#head{ width:960px; height:110px; margin:0auto;}⑥設(shè)置導(dǎo)航層的相關(guān)屬性。#nav{ width:1007px; height:65px; background:url(images/dh.jpg)no-repeattopcenter; clear:both; margin:0auto;⑦設(shè)置主要內(nèi)容部分的大層樣式。#main{ width:960px; background-color:#FFFAEA; height:auto; margin:0auto;}⑧#main里面含有#m1、#m2、#m3三個(gè)層。先設(shè)置#m1層的框架，其里面含有l(wèi)ogin（用戶登錄區(qū)）和ad（圖片展示區(qū)）兩個(gè)層，這兩個(gè)層都要浮動(dòng)，并且需要設(shè)置寬度、高度和背景屬性。#m1{ width:950px; height:210px; padding:5px;}……（詳見教材）⑨#m2含有hlzx（婚禮資訊區(qū)）和show（視頻展示區(qū)）兩個(gè)層，這兩個(gè)層都要設(shè)置浮動(dòng)和左邊距屬性，從而使它們橫向排列顯示。此外，還需要設(shè)置寬度、高度和背景等屬性。#m2{ height:279px; width:960px;}.hlzx{ width:596px; float:left; margin-left:6px; background-color:#f7efca; height:279px;}……（詳見教材）⑩設(shè)置m3層（圖片展示區(qū)）的樣式。#m3{ width:961px; height:240px;}?設(shè)置link層（友情鏈接部分）的樣式。#link{width:960px; height:35px; background-color:#f6e1b6; margin:0auto;}?設(shè)置foot（頁面底部）的樣式。#foot{ width:960px; margin:0auto; background:url(images/down.jpg)no-repeat; height:101px; clear:both; text-align:center; font-size:12px; line-height:25px;3.制作網(wǎng)頁頭部頁頭部分包含網(wǎng)頁logo和聯(lián)系電話，制作起來比較簡(jiǎn)單?！窘處煛縫pt展示圖片“網(wǎng)頁頭部效果“（詳見教材），并講解（1）編寫HTML代碼。在前面插入的id為head的<div>中插入logo.jpg圖片，并輸入電話號(hào)碼。注意使用行內(nèi)元素標(biāo)簽<span></span>將電話號(hào)碼單獨(dú)定義為一個(gè)區(qū)域，方便后面使用CSS控制。代碼如下：<divid="head"><imgsrc="images/logo.jpg"alt="logo"width="385"height="110"/><span>lt;/span></div>（2）編寫CSS代碼。①logo圖片是在頁面左上角顯示的，所以應(yīng)讓logo圖片向左浮動(dòng)，而電話號(hào)碼向右浮動(dòng)。head層已在前面設(shè)置，其高度是根據(jù)logo圖片的高度設(shè)置的。#headimg{ float:left;}②電話號(hào)碼部分的設(shè)置，包括文字大小、文字顏色、放置位置和浮動(dòng)方式。#headspan{ float:right; margin:40px40px0px0px; color:#FFFFFF; font-size:36px;}4.制作網(wǎng)頁導(dǎo)航部分在前面已制作好導(dǎo)航欄的框架并設(shè)置了樣式。這里我們用無序列表來制作導(dǎo)航欄，將每一個(gè)欄目放進(jìn)<li></li>標(biāo)簽對(duì)里并設(shè)置外間距寬度，然后將每一個(gè)列表項(xiàng)向左浮動(dòng)并設(shè)置間距，最后設(shè)置超鏈接樣式?！窘處煛縫pt展示圖片“導(dǎo)航部分效果“（詳見教材），并講解（1）編寫HTML代碼。在前面插入的id為nav的<div></div>標(biāo)簽對(duì)中插入無序列表標(biāo)簽<ul>和列表項(xiàng)標(biāo)簽<li>，在各<li></li>標(biāo)簽對(duì)中輸入文本并設(shè)置超鏈接，最終代碼如下。<divid="nav"> <ul> <li><ahref="#">首頁</a></li> <li><ahref="#">機(jī)構(gòu)介紹</a></li> <li><ahref="#">作品欣賞</a></li> <li><ahref="#">套系報(bào)價(jià)</a></li> <li><ahref="#">優(yōu)惠活動(dòng)</a></li> <li><ahref="#">聯(lián)系我們</a></li> </ul></div>（2）編寫CSS代碼。在前面已設(shè)置了nav層的樣式，下面設(shè)置其包含的各標(biāo)簽的樣式，各代碼可在nav層樣式代碼的下方輸入。①設(shè)置導(dǎo)航層里面無序列表的屬性，需要注意的是height+padding的值不能超過父層的高度（前面設(shè)置的父層高度為65px）。#navul{ height:30px; padding-top:30px; margin-left:80px;}②設(shè)置列表項(xiàng)的屬性。#navli{ list-style-type:none; float:left; width:80px; margin-left:40px; text-align:center;……（詳見教材）③設(shè)置列表項(xiàng)中超鏈接標(biāo)簽<a>的默認(rèn)屬性。必須將<a>標(biāo)簽設(shè)置為塊狀元素，鼠標(biāo)經(jīng)過狀態(tài)才會(huì)正常顯示背景圖片。#navlia{ color:#fff7b3; text-decoration:none; display:block;}④設(shè)置鼠標(biāo)指針移到超鏈接上面時(shí)超鏈接的屬性。#navlia:hover{ color:#8b1f1c; background-image:url(images/

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論