教案使用表格布局網(wǎng)頁(yè)

1、精品教學(xué)教案教學(xué)內(nèi)容：項(xiàng)目五表格的應(yīng)用任務(wù)3、使用表格布局網(wǎng)頁(yè)課 程： 網(wǎng)頁(yè)設(shè)計(jì)與制作專(zhuān) 業(yè)：計(jì)算機(jī)授課課時(shí)： 1 課時(shí)教 師：授課班級(jí)：?jiǎn)?位：授課時(shí)間：教學(xué)設(shè)計(jì)說(shuō)明： 對(duì)于使用表格布局“個(gè)人寫(xiě)真”首頁(yè)的任務(wù)，我在堅(jiān)持以教 師為主導(dǎo)，學(xué)生為主體的教學(xué)原則下，通過(guò)復(fù)習(xí)提問(wèn)一一鞏固舊知；創(chuàng)設(shè)情景一 導(dǎo)入新課，明確任務(wù)；提出問(wèn)題一一分析任務(wù)，引發(fā)思考、課堂討論、獲取知 識(shí)； 講授點(diǎn)撥任務(wù)實(shí)施，引出重點(diǎn)； 師生互動(dòng)，歸納提高攻破難點(diǎn)五個(gè)環(huán)節(jié)進(jìn)行教學(xué)。在任務(wù)實(shí)施中采取小組合作完成的方法， 以小組為整體回答問(wèn)題 及完成操作性任務(wù)，小組評(píng)比采用星級(jí)制，小組得星數(shù)量從多到少評(píng)為優(yōu)、良、 合格、差。以此培養(yǎng)學(xué)

2、生的合作意識(shí)、激發(fā)學(xué)生積極性及學(xué)習(xí)熱情。授課項(xiàng)目項(xiàng)目五、表格的應(yīng)用 任務(wù)3、使用表格布局網(wǎng)頁(yè)教學(xué)目標(biāo)知識(shí)與技能目標(biāo)1理解表格在網(wǎng)頁(yè)布局中的重要功能。2掌握插入表格的相關(guān)操作，如插入表格的方法、設(shè)置表格和 單元格屬性的方法、表格結(jié)構(gòu)的調(diào)整、表格的嵌套等。3、理解網(wǎng)頁(yè)布局排版的原則4、將素材插入表格過(guò)程方法目標(biāo)1通過(guò)用表格布局網(wǎng)頁(yè)，進(jìn)一步理解表格的作用、功能。2.通過(guò)對(duì)比學(xué)習(xí)與自主探究，了解并掌握軟件學(xué)習(xí)的一般方法 及規(guī)律，提升自主學(xué)習(xí)能力。情感態(tài)度與價(jià)值觀激發(fā)學(xué)生制作網(wǎng)站的興趣，培養(yǎng)嚴(yán)謹(jǐn)?shù)膶W(xué)風(fēng)，相互協(xié)作的合作精 神。教學(xué)重點(diǎn)網(wǎng)頁(yè)布局表格結(jié)構(gòu)的設(shè)計(jì)與制作教學(xué)難點(diǎn)網(wǎng)頁(yè)布局排版的原則學(xué)情分析本課程的教

3、學(xué)對(duì)象是計(jì)算機(jī)專(zhuān)業(yè)二年級(jí)學(xué)生，具備一定的計(jì) 算機(jī)應(yīng)用、圖片處理軟件的基礎(chǔ)，并且在之前已經(jīng)學(xué)過(guò)了平面設(shè) 計(jì)及Flash動(dòng)畫(huà),在此基礎(chǔ)上學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作是有一疋的理 論及技能基礎(chǔ)的。但是也存在著問(wèn)題：綜合應(yīng)用能力薄弱，自主學(xué)習(xí)能力較差， 學(xué)生之間學(xué)習(xí)水平差異較大。教材處理教材所用實(shí)例不夠典型且與之前技能點(diǎn)聯(lián)系不夠，在此更換 實(shí)例，同時(shí)加入超級(jí)鏈接的元素，使實(shí)例成為綜合性網(wǎng)站制作實(shí) 例，以便讓學(xué)生以小組合作的形式去探索完成。教、學(xué)法1教法：案例教學(xué)法、任務(wù)驅(qū)動(dòng)法、對(duì)比教學(xué)法2、學(xué)法：自主學(xué)習(xí)法、合作學(xué)習(xí)法小組分配按照異質(zhì)分組的原則，參與指導(dǎo)小組的劃分：1、組長(zhǎng)由成績(jī)好、組織協(xié)調(diào)能力強(qiáng)的學(xué)生擔(dān)任；2

4、、各小組均有一名技術(shù)操作能力較強(qiáng)的學(xué)生；3、各小組均有成績(jī)優(yōu)秀、中等和較差的學(xué)生；每組選出組長(zhǎng)負(fù)責(zé)分工，確保每人都有分工。本項(xiàng)目以小組 （每組56人）為單位，通過(guò)分析任務(wù)單，展開(kāi)討論、自主探究、 完成任務(wù)。由組員推薦或者自薦，進(jìn)行小組間交流展示。教學(xué)資源1、多媒體網(wǎng)絡(luò)教室、互動(dòng)多媒體軟件。2、參考多本同類(lèi)教材并結(jié)合實(shí)際需要整合資源。3、選用教參上的典型網(wǎng)頁(yè)布局實(shí)例。教學(xué)評(píng)價(jià) 體系教師評(píng)價(jià)；學(xué)生自評(píng)；學(xué)生互評(píng)教學(xué)過(guò)程設(shè)計(jì)教師活動(dòng)教學(xué)內(nèi)容學(xué)生活動(dòng)教學(xué)準(zhǔn)備 將本項(xiàng)目完成所 需素材、效果圖 打包發(fā)給學(xué)生。學(xué)生依據(jù)此文件 夾創(chuàng)建網(wǎng)站的站 點(diǎn)。復(fù)習(xí)回顧 帶領(lǐng)學(xué)生回顧與 本課學(xué)習(xí)相關(guān)的 技能點(diǎn)，為進(jìn)入 新課

5、的學(xué)習(xí)做好 準(zhǔn)備。導(dǎo)入新課引導(dǎo)學(xué)生觀察 2 個(gè)網(wǎng)頁(yè)中的文 本、圖片等元素 的布局，強(qiáng)調(diào)兩 個(gè)網(wǎng)頁(yè)在制作中 的區(qū)別是前者運(yùn) 用表格進(jìn)行合理 布局，可見(jiàn)布局 在網(wǎng)頁(yè)制作中的 重要作用。一、復(fù)習(xí)回顧1、你所了解的網(wǎng)頁(yè)有哪些基本元素？2、請(qǐng)總結(jié)在網(wǎng)頁(yè)中插入這些網(wǎng)頁(yè)元素的方法？3、請(qǐng)創(chuàng)建名為“ mywb”的站點(diǎn)，站點(diǎn)根目為D:/myweb 素材二、導(dǎo)入新課看圖觀察對(duì)比2張網(wǎng)頁(yè)效果圖圖1圖21、復(fù)習(xí)鞏固舊知， 小組討論總結(jié)2、明確網(wǎng)頁(yè)制作 員的工作素養(yǎng)一 有序、嚴(yán)謹(jǐn)【觀看效果圖】 觀看老師展示的 2 張頁(yè)面效果圖?！緦W(xué)生感受】 學(xué)生明確表格在 網(wǎng)頁(yè)制作中的的 重要作用。提出本次課的任 務(wù)。首頁(yè)效果圖學(xué)生明

6、確本課的學(xué)習(xí)任務(wù)。三、進(jìn)入新課1、任務(wù)分析【學(xué)生討論】學(xué)生 在教師的引導(dǎo)下， 分析、歸納該頁(yè)面 布局規(guī)律。任務(wù)分析 請(qǐng)同學(xué)們觀察首 頁(yè)的布局，分析 首頁(yè)的版面 構(gòu)，得出首頁(yè)表 格布局圖。任務(wù)實(shí)施2、任務(wù)實(shí)施（一）、插入布局頁(yè)面的表格并在表格、單元 格屬性面板中設(shè)置表格向?qū)W生展示首頁(yè) 表格尺寸圖1 bannerbody.3Cpz-【操作步驟】步驟1：?jiǎn)螕舨藛螜诓迦胗涗?/表格1，設(shè)演示操作步驟請(qǐng)學(xué)生到教師機(jī) 上演示表格四的 操作。巡回檢查學(xué)生制 作，并針對(duì)制作 過(guò)程出現(xiàn)問(wèn)題進(jìn) 行及時(shí)指正。置：1*1，邊框、邊距、間距：0；步驟2：?jiǎn)螕魻顟B(tài)欄table標(biāo)簽，設(shè)置表格 對(duì)齊方式為“居中”；步驟3 :

7、單擊狀態(tài)欄td標(biāo)簽，設(shè)置單元格高； 步驟4:表格2、3、4的創(chuàng)建方法同上?！咎岢鰡?wèn)題】如果表格屬性填充、間距、邊框不設(shè)為0是什么效果？練習(xí)一：帶著問(wèn)題完成表格插入及屬性設(shè)置 操作?！究偨Y(jié)】如果沒(méi)有指明單元格邊距和單元格 間距，大多數(shù)瀏覽器按單元格邊距為1、單元 格間距為2來(lái)顯示表格。學(xué)生到前面操作， 及時(shí)發(fā)現(xiàn)操作存 在的普遍問(wèn)題?！緦W(xué)生操作】學(xué)生 帶著問(wèn)題練習(xí)完 成的表格插入及 設(shè)置操作。并操作 總結(jié)表格的填充、 間距、邊框?qū)傩砸庖龑?dǎo)學(xué)生建立調(diào) 整表格結(jié)構(gòu)的思 路，參照WOR軟 件中相關(guān)操作。 演示操作步驟（二）調(diào)整表格結(jié)構(gòu)1、合并、拆分表格1ineilil 的iX斟I*t1.2* 【操作步驟

8、】步驟1：光標(biāo)定位于表格2中，單擊單元格屬 性面板“拆分”按鈕，將單元格差分成10列;步驟2:按住Ctrl鍵選擇不連續(xù)單元格，設(shè) 置奇數(shù)單元格為80px，偶數(shù)單元格為20px;2、表格嵌套衛(wèi)屮43第二51踏亂+教師巡回檢查學(xué) 生制作，并針對(duì) 制作過(guò)程出現(xiàn)問(wèn) 題進(jìn)行及時(shí)指【操作步驟】光標(biāo)定位于表格3第二例，插入一個(gè)2*3，寬 度80%勺表格?！咎岢鰡?wèn)題】如何使嵌套的表格置于單元格的最頂端并居中？練習(xí)二：完成表格的結(jié)構(gòu)調(diào)整操作。【總結(jié)】表格中的第二種對(duì)齊單元格中的對(duì)象相對(duì)該單元格的對(duì)齊方式， 在屬性面板中展開(kāi)水平對(duì)齊/垂直對(duì)齊下 拉列表，選擇相應(yīng)的水平方向和垂直方向的義。學(xué)生首先建立調(diào) 整表格結(jié)構(gòu)

9、的方 法，其次再具體學(xué) 習(xí)操作方法，并與WORD中的操作 進(jìn)行對(duì)比?！緦W(xué)生操作】學(xué)生 帶著問(wèn)題練習(xí)完 成的表格結(jié)構(gòu)調(diào)正。對(duì)齊方式。整操作。聯(lián)系網(wǎng)站實(shí)際應(yīng) 用，讓學(xué)生理解 此布局排版的原 則。3、歸納提高網(wǎng)頁(yè)布局排版的原則：網(wǎng)頁(yè)布局最好用多個(gè) 表格疊加在一起來(lái)實(shí)現(xiàn)，即網(wǎng)頁(yè)中有多個(gè)表 格從上到下獨(dú)立的排放。學(xué)生思考，結(jié)合實(shí) 際，判斷該原則的 合理性，真正理解通過(guò)新舊知識(shí)的 綜合性應(yīng)用讓學(xué) 生鞏固舊知，同 時(shí)更好地掌握新 知。課堂總結(jié)4、任務(wù)拓展根據(jù)首頁(yè)效果圖運(yùn)用已學(xué)知識(shí)技能將圖片、 文字等對(duì)象插入到相應(yīng)位置。提示：在同一個(gè)單元格里文字下方還有圖片該如何處理？【學(xué)生自主練習(xí)】 學(xué)生自主探究、自 主創(chuàng)新，避免一味 聽(tīng)老師講解。板書(shū)設(shè)計(jì)教學(xué)反思四、任務(wù)總結(jié)、評(píng)價(jià)1、學(xué)生對(duì)技能點(diǎn)插入表格及屬性設(shè)置、調(diào)整 表格結(jié)構(gòu)和將素材插入表格適當(dāng)位置的掌握 情況.2、各小組對(duì)任務(wù)完成情