用Html做制作靜態(tài)網(wǎng)頁教案_第1頁
用Html做制作靜態(tài)網(wǎng)頁教案_第2頁
用Html做制作靜態(tài)網(wǎng)頁教案_第3頁
用Html做制作靜態(tài)網(wǎng)頁教案_第4頁
用Html做制作靜態(tài)網(wǎng)頁教案_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、_用Html做制作靜態(tài)網(wǎng)頁_教學(xué)設(shè)計(jì)課題名稱用html制作一個(gè)靜態(tài)網(wǎng)站設(shè)計(jì)者專業(yè)類別課時(shí)3使用教材教學(xué)對(duì)象中職二年級(jí)學(xué)生教學(xué)目標(biāo)1. 知識(shí)與技能a) 掌握html制作頁面的方法；b) 理解html制作網(wǎng)頁的標(biāo)簽；c) 靈活運(yùn)用各類標(biāo)簽制作各式的網(wǎng)面。2. 過程與方法a) 教師和學(xué)生共同分析頁面的構(gòu)成，它是由幾部分構(gòu)成，每部分該怎么做；b) 通過教師實(shí)際操作演示、學(xué)生自主探究實(shí)踐，由淺入深，完成一系列任務(wù)，使學(xué)生熟練掌握html 標(biāo)簽的運(yùn)用。3. 情感態(tài)度與價(jià)值觀體會(huì)創(chuàng)作的樂趣，提高學(xué)生對(duì)制作頁面的興趣，在學(xué)習(xí)過程中學(xué)會(huì)交流，學(xué)會(huì)擴(kuò)展創(chuàng)新。教學(xué)內(nèi)容只用html制作一個(gè)靜態(tài)的網(wǎng)站教學(xué)難點(diǎn)與重點(diǎn)重點(diǎn)

2、：靈活運(yùn)用各類標(biāo)簽。難點(diǎn)：掌握建頁的思維方式。學(xué)習(xí)者特征分析該課面向中職二年級(jí)動(dòng)畫專業(yè)學(xué)生，經(jīng)過了中一一年的學(xué)習(xí)與調(diào)整，同學(xué)們已經(jīng)具有一定的自學(xué)能力，對(duì)動(dòng)畫歷史及發(fā)展有了一定的了解，但是由于他們是中專的學(xué)生年齡還小，學(xué)習(xí)能力自覺性約束力還是稍有欠缺。教學(xué)模式與策略演示教學(xué)法、任務(wù)驅(qū)動(dòng)教學(xué)媒體選擇計(jì)算機(jī)（一般的配置就可以了，因?yàn)闆]有涉及到iis服務(wù)器 sql等的運(yùn)用）1 / 8【教學(xué)過程】教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖引入（5min）【教師提問】：大家平時(shí)都喜歡瀏覽網(wǎng)頁嗎,對(duì)網(wǎng)頁有什么要求?這節(jié)課通過上幾節(jié)課的教學(xué)，運(yùn)用我們手上緊有的標(biāo)簽知識(shí)制作一個(gè)靜態(tài)的網(wǎng)頁，熟練掌握方法后我們能布局任何的頁

3、面【學(xué)生回答】：網(wǎng)速快，頁面漂亮，簡潔.這個(gè)過程是引入話題，提高學(xué)生學(xué)習(xí)的興趣。任務(wù)一：分析結(jié)構(gòu)（5min）分析主頁（index.html）的結(jié)構(gòu)：兩個(gè)部分hand+body（里面有兩個(gè)部分）即一個(gè)片頭flash+logo和字+Enter分析第一頁（intro.html）結(jié)構(gòu)：hand+body（有三個(gè)內(nèi)容）觀看老師操作并自主實(shí)踐。分析難度，逐級(jí)深入，引導(dǎo)學(xué)生形成自己的思維方法。分析制作整個(gè)靜態(tài)網(wǎng)站的結(jié)構(gòu)(5min)分析任務(wù)二：制作hand（5min）【教師問題】：我們上節(jié)課是怎么建網(wǎng)頁的標(biāo)簽的首先要有那些？操作演示:1、 在website文件夾里建一個(gè)text文本，然后把文件名改為index

4、.html。2、首先寫上：<html><hand><title>河畔林語</title></hand><body></body></html> 【回答】：<html><hand><title></title></hand><body></body></html>邊看邊操作引導(dǎo)學(xué)生對(duì)有整體的模型。分析任務(wù)三：制作背景（2min）【教師提問】：然后我們要做什么bg先還是其它？操作演示:添加背景：<bod

5、y background="images/bg.jpg" topmargin="40" link="#ffffff" alink="#ffffff" vlink="#ffffff">【學(xué)生回答】：bg。引導(dǎo)學(xué)生形成自己的建模思維。任務(wù)四:制作頁面主體（10min）【教師問題】：bg做好后我們就要進(jìn)行主體的制作，我們要用那個(gè)標(biāo)簽最簡單？操作演示:1、制作主體_1： <table border="0" align="center"><t

6、r><td><embed src="images/index.swf" width="712" height="429"></embed></td></tr>2、制作主體_2: <tr><td align="center"><img src="images/copyright.jpg"></td></tr>3、制作主體_3：<tr><td align=&

7、quot;center"><font color="#FFFFFF" size="4" face="Arial"><a href="intro.html">ENTER</a></font></td></tr> </table>【學(xué)生回答】：<table></table>。引導(dǎo)學(xué)生形成自己的建模思維。任務(wù)五：整體測試（2min）教師巡視、指導(dǎo)【教師提問】：大的模型已經(jīng)做好了，還有那些細(xì)節(jié)？在IE

8、Tester用不用版本的瀏覽器進(jìn)行測試?！緦W(xué)生回答】：測試。引導(dǎo)學(xué)生形成自己的思維方式。第一部分總結(jié)：（3min）1、 標(biāo)簽的選擇2、 很重要的，就是要一邊制作一邊測試，而不是制作完了再測試。任務(wù)六:制作hand（5min）1、 在website文件夾里建一個(gè)text文本，然后把文件名改為intro.html。2、首先寫上：<html><hand><title>河畔林語</title></hand><body></body></html>分析任務(wù)7：制作背景（2min）添加背景：<body b

9、ackground="images/bg.jpg" topmargin="40" link="#ffffff" alink="#ffffff" vlink="#ffffff">任務(wù)八：制作頁面主體（10min）1、主體_1：<table border="0" align="center" width="719" cellpadding="0" cellspacing="0">&l

10、t;tr><td><embed src="images/top.swf" width="719" height="289"></embed></td></tr>2、主體_2：<tr><td><img src="images/link1.jpg"><a href="intro.html"><img src="images/link2.jpg"></

11、a><a href="news.html"><img src="images/link3.jpg"></a><a href="area.html"><img src="images/link4.jpg"></a><a href="look.html"><img src="images/link5.jpg"></a><a href="structur

12、e.html"><img src="images/link6.jpg"></a><a href="sever.html"><img src="images/link7.jpg"></a><a href="contract.html"><img src="images/link8.jpg"></a><img src="images/link9.jpg">&

13、lt;/td></tr>3、主體_3：<tr><td><img src="images/lanmu1.jpg"></td></tr>引導(dǎo)學(xué)生形成自己的思維方式解決問題的方式。 <tr><td background="images/lmbg.jpg" height="600" valign="top"> <table align="center" width="80%"

14、border="0"> <tr><td> <img src="images/pic1.jpg" align="left" vspace="5" hspace="5"> <img src="images/text18.jpg"> </div> <p>水本不是藍(lán)色，是蔚藍(lán)天空映藍(lán)的這護(hù)城河水；水也本 不是綠色，是夾岸的垂柳染綠了這古老的城池。水本無漣 漪，是風(fēng)，是魚，是朝氣蓬勃的賽艇健兒撥弄著靜靜的水

15、面，也撥弄著每個(gè)來到這里的人的心。</p><p>我從秋季來到陽春門，一夜大雨過后，筆直而幽靜的人 行道上鋪滿了金黃色的落葉，仿佛童話但又觸手可及。我在 冬季守侯陽春門，沒有大雪為伴，讓我不能見到她銀裝素裹 的模樣。然而，我卻在一個(gè)十分晴朗的午后透過樹影見到了那蔚藍(lán)、那波光粼粼、那給人海的錯(cuò)覺的 護(hù)城河。我醉了，竟把冬日當(dāng)夏日，興奮的撥通電話，與遠(yuǎn)方的朋友回憶著那快樂的夏日海灘。我在 春季走進(jìn)陽春門，綠樹相依、古城為伴、微風(fēng)送暖、城池獻(xiàn)瑞</p> <p>一切是那么的生機(jī)盎然，讓人不自主的去熱愛生活、熱愛這個(gè)美麗的地方。每次靠近她，總能發(fā) 現(xiàn)有新的花

16、朵綻放，黃色迎春、紅色春梅、白色玉蘭還有人面桃花夏天應(yīng)該是陽春門最熱鬧的時(shí) 候，初夏時(shí)節(jié)每天都有幸福的新人們來這里拍婚裟，每個(gè)新娘都是那么笑容的迷人，而每個(gè)新郎的眼 神又都是那么的深邃和明亮。而他們的笑絲毫沒有打擾樹下偎依的戀人，他們相擁、相視、相吻眼中 只有對(duì)方，心中只有彼此。散步和遛鳥的老人們看到他們笑了，而孩子們是最高興的。他們和家人一 起蕩舟、在小商店里搜索著自己喜歡的美食和冷飲，跟小狗在草地上追逐，直到夕陽落到了仲宣樓 上，直到晚霞映紅了天空和云朵，人們才漸漸散去。而這時(shí)，閃亮的彩燈又把陽春門推向了另一個(gè)新 的高潮，飯后涼爽的晚風(fēng)中，一對(duì)對(duì)中年夫婦在音樂聲中翩翩起舞，旋律帶走了他們一

17、身的疲憊，帶 來了無盡的歡樂</p> </td></tr>4、 主體_4、主體_5：主體_4與主體_3是一樣的，大家自己練習(xí)做，效果如下：5、主體_6：</tr></td> <tr><td align="center"> <img src="images/pic7.jpg"> <img src="images/pic9.jpg"> </td></tr> <tr><td align=&qu

18、ot;center"><font size="4px"><a href="#">Top</a></font></tr></td> </table>6、主體_7: </td></tr><tr><td align="center"><img src="images/down.jpg"></td></tr>7、主體_8：<tr><td align="center"

溫馨提示

  • 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)論