Java Web程序設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)（微課版）教案 項(xiàng)目二 JSP技術(shù)

766-項(xiàng)目二JSP技術(shù)主題任務(wù)2.1化妝品框架設(shè)計(jì)序號(hào)1課時(shí)2教學(xué)手段啟發(fā)引導(dǎo)法項(xiàng)目教學(xué)法任務(wù)教學(xué)法教學(xué)方法演示法教學(xué)課型□理論□實(shí)訓(xùn)R一體化□（其它）教學(xué)目標(biāo)知識(shí)目標(biāo)熟悉HTML常用標(biāo)簽的綜合應(yīng)用能力目標(biāo)能綜合應(yīng)用HTML標(biāo)簽完成項(xiàng)目任務(wù)育人目標(biāo)培養(yǎng)學(xué)生對(duì)國(guó)產(chǎn)品牌的認(rèn)同，提升專業(yè)自信和職業(yè)底氣，增強(qiáng)民族自信，深化愛國(guó)主義情懷教學(xué)重點(diǎn)HTML常用標(biāo)簽的綜合應(yīng)用教學(xué)難點(diǎn)HTML常用標(biāo)簽的綜合應(yīng)用教學(xué)過程設(shè)計(jì)備注一、創(chuàng)建情境，導(dǎo)入新課（5分鐘）首先引入《2020中國(guó)消費(fèi)品牌發(fā)展報(bào)告》分析：“國(guó)貨崛起正當(dāng)時(shí)，在‘?dāng)?shù)字賦能、綠色發(fā)展、國(guó)貨創(chuàng)新、扶貧助農(nóng)、助力實(shí)體’政策引領(lǐng)下，中國(guó)消費(fèi)品牌和品質(zhì)共舉。”從而引導(dǎo)學(xué)生依靠專業(yè)技能支持國(guó)貨、支持民族企業(yè)，科技報(bào)國(guó)、技術(shù)強(qiáng)國(guó)，進(jìn)一步培養(yǎng)學(xué)生對(duì)國(guó)產(chǎn)品牌的認(rèn)同，提升專業(yè)自信和職業(yè)底氣，增強(qiáng)民族自信，深化愛國(guó)主義情懷。從而引出“化妝品網(wǎng)站設(shè)計(jì)”。二、教學(xué)實(shí)施（80分鐘）1．任務(wù)演示當(dāng)我們?cè)诰W(wǎng)上購(gòu)買化妝品時(shí)，需要在網(wǎng)上注冊(cè)、依據(jù)注冊(cè)的用戶名和密碼進(jìn)行登錄、然后瀏覽化妝品、選擇自己所需要的化妝品，本任務(wù)頁面將包括一個(gè)導(dǎo)航條，該導(dǎo)航條由注冊(cè)、登錄、瀏覽化妝品、查看訂單等組成。如圖所示：2．知識(shí)準(zhǔn)備（1）font字體標(biāo)簽（2）<hn></hn>標(biāo)題標(biāo)簽（3）<div>標(biāo)簽（4）<p>標(biāo)簽（5）<br>標(biāo)簽（6）<hr>標(biāo)簽（7）<B></B><I></I><U></U>標(biāo)簽<I>標(biāo)簽顯示斜體文本效果。<B>標(biāo)簽規(guī)定粗體文本。<U>標(biāo)簽可定義下劃線文本。（8）img標(biāo)簽（9）超級(jí)鏈接標(biāo)簽（10）表格課堂練習(xí)（教師演示、學(xué)生操作）課堂練習(xí)1：在網(wǎng)頁上顯示我是字體標(biāo)簽，并修改字體為宋體，顏色為紅色，如圖所示。課堂練習(xí)2：常用標(biāo)簽的應(yīng)用1，如圖所示課堂練習(xí)3：常用標(biāo)簽應(yīng)用2，如圖所示課堂練習(xí)4：使用img標(biāo)簽顯示一張照片。并修改寬高和邊框?qū)傩?，如圖所示。課堂練習(xí)5：超級(jí)鏈接示例課堂練習(xí)6：基本表格示例，如圖所示3．任務(wù)實(shí)施（教師演示、學(xué)生操作）關(guān)鍵代碼：<bodybgcolor="f0fff0"><divalign="center"><fontcolor="019858"><h3>歡迎進(jìn)入化妝品網(wǎng)站，祝你購(gòu)物愉快!</h3></font><tablecellSpacing="1"cellPadding="1"width="660"align="center"border="0"><trvalign="bottom"><td><ahref="">登錄</a></td><td><ahref="">注冊(cè)</a></td><td><ahref="">瀏覽化妝品</a></td><td><ahref="">查看化妝品</a></td><td><ahref="">查看購(gòu)物車</a></td><td><ahref="">查看訂單</a></td><td><ahref="">退出</a></td><td><ahref="">主頁</a></td></tr></table><imgalt=""src="image/hzp.JPG"></body>4．任務(wù)拓展（1）head與title標(biāo)簽（2）<meta>標(biāo)簽課堂練習(xí)：顯示標(biāo)題為七大傳統(tǒng)節(jié)日，如圖所示。課堂練習(xí)：進(jìn)入head2.html，5秒后自動(dòng)跳轉(zhuǎn)到head21.html頁面，如圖所示。三、教學(xué)小結(jié)（3分鐘）通過本節(jié)課的學(xué)習(xí)，問學(xué)生掌握了哪些知識(shí)？HTML的常用標(biāo)簽的基本格式，屬性，應(yīng)用。作業(yè)布置（2分鐘）實(shí)訓(xùn)一設(shè)計(jì)中秋節(jié)主界面教學(xué)反思注重培養(yǎng)學(xué)生實(shí)踐動(dòng)手能力7612-項(xiàng)目二JSP技術(shù)主題任務(wù)2.2設(shè)計(jì)一天的溫馨提示語序號(hào)1課時(shí)2教學(xué)手段啟發(fā)引導(dǎo)法項(xiàng)目教學(xué)法任務(wù)教學(xué)法教學(xué)方法演示法教學(xué)課型□理論□實(shí)訓(xùn)R一體化□（其它）教學(xué)目標(biāo)知識(shí)目標(biāo)1．了解什么是JSP以及JSP頁面的基本結(jié)構(gòu)2．掌握J(rèn)SP程序的腳本元素3.熟悉JSP注釋能力目標(biāo)1．能應(yīng)用JSP腳本元素完成簡(jiǎn)單程序的編寫育人目標(biāo)培養(yǎng)團(tuán)隊(duì)合作的精神教學(xué)重點(diǎn)熟悉集成開發(fā)環(huán)境的搭建教學(xué)難點(diǎn)開發(fā)環(huán)境的安裝、環(huán)境配置、環(huán)境測(cè)試教學(xué)過程設(shè)計(jì)備注一、創(chuàng)建情境，導(dǎo)入新課（5分鐘）溫馨提示語的好處多多，首先溫馨就讓人舒服，提示語讓人免受傷害，比如，小心路滑，上電梯時(shí)必免摔倒，小心碰頭，在公共場(chǎng)所，提醒客人，為了別人的身體健康，請(qǐng)勿吸煙，吸煙有害，在飯店吃飯，請(qǐng)客，會(huì)提示您，喝酒不要開車，開車不能喝酒…從而引出本節(jié)課的內(nèi)容。二、教學(xué)實(shí)施（80分鐘）1．任務(wù)演示設(shè)計(jì)一個(gè)程序，在各時(shí)間段有不同的溫馨提示語，如表所示，運(yùn)行結(jié)果，如圖所示：時(shí)間段溫馨提示6:00-8:00早上好！吃個(gè)營(yíng)養(yǎng)豐盛的早餐8:00-12:00早上上班，美好開始12:00-14:00把工作暫時(shí)放在一邊，對(duì)自己的努力微笑著給予肯定，然后吃個(gè)營(yíng)養(yǎng)美味的午餐吧14:00-18:00在這樣一個(gè)不錯(cuò)的午后，給自己的心情加點(diǎn)陽光，然后愉悅的讓今天繼續(xù)18:00-21:00下午下班，輕松過關(guān)21:00-24:00已經(jīng)是深夜，注意休息24:00-6:00時(shí)間還早，再睡會(huì)吧！2．知識(shí)準(zhǔn)備（1）什么是JSP（2）JSP頁面的基本結(jié)構(gòu)變量和方法的聲明表達(dá)式腳本程序（3）JSP注釋課堂練習(xí)（教師演示、學(xué)生操作）課堂練習(xí)1：JSP頁面的基本結(jié)構(gòu)應(yīng)用，運(yùn)行結(jié)果如圖所示。課堂練習(xí)2：設(shè)計(jì)簡(jiǎn)單的計(jì)數(shù)器，如圖所示課堂練習(xí)3：通過方法調(diào)用，計(jì)算兩個(gè)數(shù)的乘和除,如圖所示課堂練習(xí)4：在JSP頁面中通過JSP表達(dá)式輸出“保護(hù)環(huán)境,愛護(hù)地球！”文字，如圖所示。課堂練習(xí)5：獲得一個(gè)7至19之間的隨機(jī)數(shù)，如果獲得的數(shù)小于或等于13就顯示一幅重慶小面的圖像，否則顯示一幅紅燒牛肉面的圖像，程序運(yùn)行的效果如圖所示3．任務(wù)實(shí)施（教師演示、學(xué)生操作）任務(wù)要求：首先獲取當(dāng)前系統(tǒng)的時(shí)間，根據(jù)當(dāng)前的時(shí)間，輸出對(duì)應(yīng)的溫馨提示語。關(guān)鍵代碼：<%@pageimport="java.util.Date,java.text.*"%><body><%Datenowday=newDate();inthour=nowday.getHours();SimpleDateFormatformat=newSimpleDateFormat("yyyy-MM-ddHH:mm:ss");Stringtime=format.format(nowday);%><center> <tableborder="1"width="300"> <trheight="40"><tdalign="center">溫馨提示!</td></tr> <trheight="90"><td>現(xiàn)在時(shí)間為:<%=time%></td></tr> <trheight="50"> <tdalign="center"> <% if(hour>=6&&hour<8) out.print("早上好！吃個(gè)營(yíng)養(yǎng)豐盛的早餐"); elseif(hour>=8&&hour<12) out.print("早上上班，美好開始"); elseif(hour>=12&&hour<=14) out.print("把工作暫時(shí)放在一邊，對(duì)自己的努力微笑著給予肯定，然后吃個(gè)營(yíng)養(yǎng)美味的午餐吧"); elseif(hour>=14&&hour<18) out.print("在這樣一個(gè)不錯(cuò)的午后，給自己的心情加點(diǎn)陽光，然后愉悅的讓今天繼續(xù)"); elseif(hour>=18&&hour<21) out.print("下午下班，輕松過關(guān)"); elseif(hour>=21&&hour<24) out.print("已經(jīng)是深夜，注意休息!"); elseif(hour>=24&&hour<6) out.print("時(shí)間還早，再睡會(huì)吧！"); %> </td> </table></center></body>4．任務(wù)拓展設(shè)計(jì)一個(gè)鄉(xiāng)村振興歡迎網(wǎng)站要求：網(wǎng)站包括標(biāo)題、圖片，訪問網(wǎng)站的次數(shù)以及版權(quán)，如圖所示三、教學(xué)小結(jié)（3分鐘）通過本節(jié)課的學(xué)習(xí)，問學(xué)生掌握了哪些知識(shí)？JSP的基本概念以及基本結(jié)構(gòu)，JSP程序的變量和方法的聲明、腳本元素和表達(dá)式。作業(yè)布置（2分鐘）完成實(shí)訓(xùn)任務(wù)和拓展任務(wù)教學(xué)反思注重培養(yǎng)學(xué)生實(shí)踐動(dòng)手能力項(xiàng)目二JSP技術(shù)主題任務(wù)2.3欣賞美景序號(hào)1課時(shí)2教學(xué)手段啟發(fā)引導(dǎo)法項(xiàng)目教學(xué)法任務(wù)教學(xué)法教學(xué)方法演示法教學(xué)課型□理論□實(shí)訓(xùn)R一體化□（其它）教學(xué)目標(biāo)知識(shí)目標(biāo)1．熟悉page指令2.掌握include指令、<jsp:include><jsp:forward>動(dòng)作元素的應(yīng)用能力目標(biāo)能進(jìn)行JSP指令標(biāo)識(shí)和動(dòng)作元素制作小型網(wǎng)站育人目標(biāo)培養(yǎng)學(xué)生的審美情操。教學(xué)重點(diǎn)JSP指令標(biāo)識(shí)和動(dòng)作元素教學(xué)難點(diǎn)JSP的動(dòng)作元素教學(xué)過程設(shè)計(jì)備注一、創(chuàng)建情境，導(dǎo)入新課（5分鐘）許多人都很喜歡春天，因?yàn)槟抢锷矫?、水美、花更美，讓我們?yīng)用專業(yè)知識(shí)來完成美景網(wǎng)站。二、教學(xué)實(shí)施（80分鐘）1．任務(wù)演示人生處處皆風(fēng)景，只要你的心中有風(fēng)景，只要你的眼中有風(fēng)景，只要你學(xué)會(huì)欣賞身邊的風(fēng)景美景…,下面編寫一個(gè)風(fēng)景圖片和花的世界網(wǎng)站，如圖所示。欣賞美景頁面花的世界風(fēng)景圖2．知識(shí)準(zhǔn)備（1）JSP的指令標(biāo)識(shí)指令通常以“<%@”標(biāo)記開始，以“%>”標(biāo)記結(jié)束，通用格式如下：<%@指令名稱屬性1=“屬性值”屬性2=“屬性值”…%>page指令page指令即頁面指令，可以定義在整個(gè)JSP頁面范圍內(nèi)有效的屬性，其使用格式如下：<%@page屬性名1=“屬性值1”屬性名2=“屬性值2”…%>include指令在實(shí)際的開發(fā)中，有時(shí)需要在JSP頁面中包含另一個(gè)JSP頁面，這時(shí)可以通過include指令實(shí)現(xiàn),include指令的具體語法格式是：<%@includefile=“fileurl”說明：file指定包含的靜態(tài)文件的路徑，其值fileurl可以為相對(duì)路徑和絕對(duì)路徑，一般為相對(duì)路徑。 （2）JSP動(dòng)作元素JSP動(dòng)作元素用于控制JSP的行為，執(zhí)行一些常見的JSP頁面動(dòng)作。通過動(dòng)作元素可以實(shí)現(xiàn)使用多行Java代碼才能夠?qū)崿F(xiàn)的效果，例如包含頁面文件，實(shí)現(xiàn)請(qǐng)求轉(zhuǎn)發(fā)等。常用的動(dòng)作元素有：<jsp:include>、<jsp:forward>、<jsp:param>、<jsp:useBean>、<jsp:setProperty>、<jsp:getProperty>、<jsp:fallback>、<jsp:plugin>，下面介紹比較常用的幾個(gè)動(dòng)作元素。課堂練習(xí)（教師演示、學(xué)生操作）課堂練習(xí)1：在JSP頁面中能顯示中文，并顯示當(dāng)前的時(shí)間，如圖所示。課堂練習(xí)2：設(shè)計(jì)兩個(gè)jsp文件，一個(gè)為head.jsp,用于顯示框架的頭部，另一個(gè)jsp頁面，命名為includedemo.jsp，該頁為化妝品主界面，如圖所示。課堂練習(xí)3：設(shè)計(jì)一個(gè)用戶登錄的界面，包含用戶名、密碼和驗(yàn)證碼的輸入，如圖所示。課堂練習(xí)4：計(jì)算三角形的面積，并顯示在頁面上。課堂練習(xí)5：<jsp:forward>請(qǐng)求轉(zhuǎn)發(fā)元素應(yīng)用，如圖所示3．任務(wù)實(shí)施（教師演示、學(xué)生操作）任務(wù)要求：編寫4個(gè)JSP頁面：one.jsp,two.jsp,three.jsp和error1.jsp。one.jsp,two.jsp,three.jsp頁面包含一個(gè)導(dǎo)航條，可以超鏈接訪問這三個(gè)頁面。one.jsp,two.jsp,three.jsp通過應(yīng)用include動(dòng)態(tài)加載導(dǎo)航條文件head1.jsp。依據(jù)在one.jsp頁面輸入的數(shù)據(jù)進(jìn)行判斷執(zhí)行那個(gè)頁面，如果輸入的是1-300，執(zhí)行風(fēng)景圖頁面，如果輸入的是301-400，執(zhí)行花的世界頁面，否則，跳到error1.jsp頁面。關(guān)鍵代碼：第一步創(chuàng)建head1.jsp頁面<body><tablecellspacing="1"cellpadding="1"width="60%"align="center"border="0"><trvalign="bottom"><td><ahref="one.jsp">首頁</a></td><td><ahref="two.jsp">風(fēng)景圖片</a></td><td><ahref="three.jsp">花的世界</a></td></tr></table></body>第二步創(chuàng)建one.jsp<bodybgcolor="f0fff0"><jsp:includepage="head1.jsp"></jsp:include><formaction=""method="get"name="form">請(qǐng)輸入1~400之間的整數(shù)：<inputtype="text"name="number"><br/><inputtype="submit"value="送出"name="submit"/></form><%Stringnum=request.getParameter("number");if(num==null) num="0";try{ intn=Integer.parseInt(num); if(n>=1&&n<=300) { %><jsp:forwardpage="two.jsp"><jsp:paramvalue="<%=n%>"name="number"/></jsp:forward><%}elseif(n>300&&n<=400){%><jsp:forwardpage="three.jsp"><jsp:paramvalue="<%=n%>"name="number"/></jsp:forward><%}elseif(n>400){%><jsp:forwardpage="error.jsp"><jsp:paramvalue="<%=n%>"name="mess"/></jsp:forward><%}%><%}catch(Exceptione){ %><jsp:forwardpage="error.jsp"><jsp:paramvalue="<%=e.toString()%>"name="mess"/></jsp:forward><%}%></body>第三步創(chuàng)建two.jsp<bodybgcolor="f0fff0"><divalign="center"><jsp:includepage="head1.jsp"></jsp:include><h1>風(fēng)景圖</h1><%Strings=request.getParameter("number");%><h2>瀑布</h2><imgalt=""src="image/pb.JPG"width="<%=s%>"height="<%=s%>"/><p>日照香爐生紫煙，遙看瀑布掛前川;<br/>飛流直下三千尺，疑是銀河落九天。</p><h2>登高</h2><imgalt=""src="image/cj.JPG"width="<%=s%>"height="<%=s%>"/><p>風(fēng)急天高猿嘯哀，渚清沙白鳥飛回;<br/>無邊落木蕭蕭下，不盡長(zhǎng)江滾滾來。</p></div></body>第四步創(chuàng)建three.jsp<bodybgcolor="f0fff0"><divalign="center"><jsp:includepage="head1.jsp"></jsp:include><h1>花的世界</h1><%Strings=request.getParameter("number");%><h2>郁金香</h2><imgalt=""src="image/yjx.JPG"width="<%=s%>"height="<%=s%>"/><p>蘭陵美酒郁金香，玉碗盛來琥珀光;<br/>但使主人能醉客，不知何處是他鄉(xiāng)。</p><h2>朱頂紅</h2><imgalt=""src="image/zdh.JPG"width="<%=s%>"height="<%=s%>"/>