- 相關(guān)推薦
《網(wǎng)頁的制作》教案優(yōu)秀
作為一名教職工，常常要寫一份優(yōu)秀的教案，教案是保證教學(xué)取得成功、提高教學(xué)質(zhì)量的基本條件。教案應(yīng)該怎么寫才好呢？以下是小編精心整理的《網(wǎng)頁的制作》教案優(yōu)秀，供大家參考借鑒，希望可以幫助到有需要的朋友。
《網(wǎng)頁的制作》教案優(yōu)秀1
一、教學(xué)目標(biāo)
1、知道站點(diǎn)、主頁的概念，能在指定位置建立只有一個網(wǎng)頁的站點(diǎn)；
2、認(rèn)識FRONTPAGE的界面；
3、掌握在主頁中插入文字、圖片、水平線；
4、掌握頁面文件與圖片的保存。
二、教學(xué)重點(diǎn)
1、能在指定位置建立只有一個網(wǎng)頁的站點(diǎn)（難點(diǎn)）
2、能在頁面中插入文字、圖片、水平線
3、掌握頁面文件與圖片的保存（難點(diǎn)）
三、學(xué)情分析
學(xué)生已經(jīng)學(xué)習(xí)了WORD、POWERPOINT與上網(wǎng)瀏覽信息，對計(jì)算機(jī)的基本操作（WORD中文檔的編輯，網(wǎng)頁的瀏覽等）比較熟練。這使得學(xué)生主動探索、自主學(xué)習(xí)成為可能。每位學(xué)生必須完成基本任務(wù)，有能力的學(xué)生還可以完成提高篇的學(xué)習(xí)，以充分發(fā)揮學(xué)生的積極性與自主性。
四、教學(xué)方法
在教學(xué)中，一方面采用比較教學(xué)的方法，促進(jìn)學(xué)生知識的遷移；另一方面，提供學(xué)生一個導(dǎo)學(xué)，讓學(xué)生根據(jù)這個網(wǎng)絡(luò)環(huán)境下的自己探索學(xué)習(xí)，以滿足不同層次學(xué)生的需求。
五、教學(xué)過程設(shè)計(jì)
教師活動：1、引入課題：（激發(fā)興趣，活躍氣氛）
同學(xué)們喜不喜歡上網(wǎng)？經(jīng)常上新浪、西祠胡同等，有沒有同學(xué)知道新浪、西祠胡同稱做什么？（網(wǎng)站）
瀏覽新浪網(wǎng)站，瀏覽的`第一個頁面稱為什么？（主頁）
我們還可以瀏覽其它的頁面，點(diǎn)擊超鏈接瀏覽，當(dāng)鼠標(biāo)變成手指的形狀時有超鏈接。
問題1：網(wǎng)站是不是就是網(wǎng)頁？用自己的語言描述一下網(wǎng)站的概念（網(wǎng)站包含多個網(wǎng)頁，通過超鏈接把不同的頁面鏈接起來）
問題2：網(wǎng)頁是不是就是主頁？（第一個頁面稱為主頁，網(wǎng)站設(shè)計(jì)者可以確定哪一個是主頁，主頁的文件名一般為：index。ht，主頁也是網(wǎng)頁）
設(shè)計(jì)網(wǎng)站一般必須經(jīng)過兩個步驟，首先是在計(jì)算機(jī)里做好，然后發(fā)布在internet上，讓所有的人訪問瀏覽。
今天我們學(xué)習(xí)用Frntpage建立站點(diǎn)，制作一個主頁。
先來研究一下沒有發(fā)布的網(wǎng)站，打開教師做的網(wǎng)站
《網(wǎng)頁的制作》教案優(yōu)秀2
一、學(xué)習(xí)內(nèi)容分析
《H5快速制作網(wǎng)頁》是蘇教版《初中信息技術(shù)》8年級第3章《主題網(wǎng)站設(shè)計(jì)與制作》第2節(jié)《制作網(wǎng)頁》中第1課時的內(nèi)容。H5是指第5代HTML標(biāo)記語言，其搭建的站點(diǎn)可方便地應(yīng)用于PC、Android、iOS等多種平臺，它為互聯(lián)網(wǎng)內(nèi)容的呈現(xiàn)提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，H5是一種創(chuàng)建網(wǎng)頁的方式，用H5創(chuàng)建的網(wǎng)頁以文字、圖片、動畫、聲音等相結(jié)合的富媒體出現(xiàn)，頁面圖文并茂、生動活潑、傳達(dá)方便、易于推廣。
二、學(xué)習(xí)者分析
本節(jié)課的學(xué)習(xí)對象是八年級的學(xué)生，處于這一年齡段的學(xué)生，思維活躍，具備一定的理解能力和較強(qiáng)的自學(xué)能力。通過前面的學(xué)習(xí)，學(xué)生已熟練使用WPS、Photoshop等軟件，也掌握了規(guī)劃設(shè)計(jì)主題網(wǎng)站的方法。本節(jié)課以iH5軟件工具為平臺，學(xué)習(xí)用H5快速制作網(wǎng)頁。然而學(xué)生從未接觸過iH5，對于陌生軟件的學(xué)習(xí)，有些畏難情緒，覺得無從下手。但是在日常生活中，他們經(jīng)常能接觸到各種各樣的手機(jī)H5網(wǎng)頁，如企業(yè)宣傳、個人簡歷、邀請函、紀(jì)念冊等，這些H5網(wǎng)頁給大家?guī)砹巳碌捏w驗(yàn)，技術(shù)本身帶來的新奇感讓學(xué)生心生向往。
三、學(xué)習(xí)目標(biāo)
知識與技能：能列舉H5網(wǎng)頁的特點(diǎn)；掌握在iH5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設(shè)置對象屬性的方法，理解舞臺、頁面、對象之間的層級關(guān)系。
過程與方法：通過制作校園文化藝術(shù)節(jié)邀請函，經(jīng)歷制作H5網(wǎng)頁的基本過程。
情感態(tài)度及價值觀：感悟網(wǎng)頁制作并非難事，軟件使用有共通之處。
四、教學(xué)過程
（一）創(chuàng)設(shè)情境，初認(rèn)H5
以藝載德、以藝促智，一年一度的校園文化藝術(shù)節(jié)又開始了，同學(xué)們踴躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報演出，充分展示八年級同學(xué)的青春活力和精神面貌。
思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達(dá)、短信、紙質(zhì)邀請函等）
活動1：體驗(yàn)“校園文化藝術(shù)節(jié)邀請函H5”，初認(rèn)H5。
�。�1）二人一組，一位同學(xué)在手機(jī)瀏覽器中打開；另一位同學(xué)在電腦瀏覽器中打開（網(wǎng)址：https：//xxxxxx）。瀏覽后回答以下問題：
不同平臺的瀏覽效果是否一致？為什么？
這支H5中具有哪些媒體元素？
用戶能參與其中嗎？
你會用什么方式推廣這支H5？
小結(jié)：
�。�1）H5具有跨平臺、支持多媒體、可交互、易推廣等優(yōu)勢。以上特點(diǎn)使得H5可能成為我們發(fā)出邀請的首選。
（2）“校園文化藝術(shù)節(jié)邀請函H5”為何如此吸引人？觀看視頻，思考到底什么是H5？
小結(jié)：H5是指第5代HTML標(biāo)記語言，也指用H5語言制作的一切數(shù)字產(chǎn)品。通俗地說，H5是一種創(chuàng)建網(wǎng)頁的方式。用H5創(chuàng)建的網(wǎng)頁圖文并茂、生動活潑、傳達(dá)方便、易于推廣。
設(shè)計(jì)意圖：與H5相關(guān)的概念性知識抽象、枯燥難懂，如果采用講授法，學(xué)生并不容易理解。因此本節(jié)課創(chuàng)設(shè)了學(xué)生現(xiàn)實(shí)生活中的情境，以制作校園文化藝術(shù)節(jié)邀請函H5為主題，設(shè)計(jì)了4個問題，每個問題目標(biāo)指向明確，容易引起學(xué)生的共鳴，激發(fā)學(xué)生的思考并得出結(jié)論。通過微視頻用通俗易懂的語言幫助學(xué)生進(jìn)一步認(rèn)識H5，內(nèi)化知識。
（二）根據(jù)需求，規(guī)劃H5
凡事預(yù)則立，不預(yù)則廢，要制作匯報演出邀請函，首先對每個頁面的內(nèi)容、素材等進(jìn)行一個簡單規(guī)劃。
活動2：根據(jù)需求，選擇素材，規(guī)劃邀請函。
設(shè)計(jì)意圖：學(xué)生已經(jīng)學(xué)習(xí)過網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。教師通過搭建“規(guī)劃表”這個支架，引導(dǎo)學(xué)生根據(jù)制作校園文化藝術(shù)節(jié)邀請函的需求，對所要制作的邀請函進(jìn)行初步的規(guī)劃，幫助學(xué)生理清楚每個頁面的內(nèi)容和所需添加的元素。
（三）知識遷移，制作H5
能夠用于開發(fā)H5網(wǎng)頁的工具很多，今天以iH5軟件工具為平臺，學(xué)習(xí)使用H5快速制作網(wǎng)頁。
活動3：找“共性”，探“個性”，認(rèn)識iH5軟件。
（1）使用課前申請的賬號，登錄網(wǎng)址：，進(jìn)入在線編輯平臺。
（2）對比Photoshop界面，認(rèn)識iH5界面，找出相同之處和不同之處。
小結(jié)：相同之處：_______________________（菜單欄、工具面板、編輯區(qū)）
不同之處：_______________________（對象樹面板）
�。�3）比較PS中的圖層面板和iH5中的對象樹面板，思考對象樹面板的作用。
小結(jié)：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關(guān)系為：舞臺→頁面→文本、圖片等素材，每個頁面中的對象上層覆蓋下層。
活動4：利用iH5軟件，制作邀請函H5。
（1）觀看操作指導(dǎo)微視頻，自主探究頁面的制作，完成以下問題：
設(shè)置背景：選中頁面1，在屬性面板中找到_____________選項(xiàng)，添加背景圖片。
添加文字：選中頁面1，在工具面板中選擇_____________選項(xiàng)。
添加圖片：選中頁面1，在工具面板中選擇_____________選項(xiàng)。
小結(jié)：添加文字、圖片的一般步驟：選擇位置—添加對象。
（2）展示學(xué)生作品，師生共同分析存在的問題，尋求解決方式。
問題1：首頁、內(nèi)容頁都播放同一素材。
原因分析：素材全部都添加在了舞臺之中，其層級關(guān)系在內(nèi)容頁和首頁的上一級。
問題2：內(nèi)容頁沒有顯示內(nèi)容。
原因分析：素材全部都添加在了首頁之中，而不是對應(yīng)的內(nèi)容頁中。
設(shè)計(jì)意圖：遷移是人類認(rèn)知的一個普遍特征，因?yàn)樾碌膶W(xué)習(xí)總是建立在原有學(xué)習(xí)基礎(chǔ)之上。學(xué)生原有的知識是Photoshop軟件使用，將Photoshop和iH5進(jìn)行對比，引導(dǎo)學(xué)生發(fā)現(xiàn)界面組成的“共性”與“個性“，讓學(xué)生初步認(rèn)識對象樹面板，學(xué)會利用對象樹面板來管理素材。在制作H5時采用局部“翻轉(zhuǎn)課堂”的形式，通過高效、簡短的微視頻和幾個思考題，引導(dǎo)學(xué)生思考探究；在學(xué)生遇到問題和困難時，師生共同分析問題，解決問題。給學(xué)生“瑞士奶酪式”知識建構(gòu)時間，使學(xué)生從規(guī)律的獲得到知識的應(yīng)用有一個過渡和漸進(jìn)的過程。
（四）自主探究，美化H5
活動5：美化完善邀請函H5。
�。�1）邀請函中的標(biāo)題、內(nèi)容文字等選用什么樣的`字體、字號合適？如何設(shè)置？
（2）如何改變圖片大小，修改圖片的亮度、對比度等？
（3）如何設(shè)置元素的動態(tài)效果，使得網(wǎng)頁更生動？
小結(jié)：
�。�1）選中文字或圖片——屬性面板——修改設(shè)置�！把埡钡葮�(biāo)題文字字號一般選用大些，宜用飽滿的字體，以達(dá)到醒目的作用；內(nèi)容用于提供具體信息，文字字號可以小些。
�。�2）圖片選用要符合主題，色彩和諧。字體顏色與背景要有一定的對比度。（3）選擇要添加動態(tài)效果的對象——選擇動效命令。注意：設(shè)置合理、適度的動態(tài)效果，可以給觀賞者帶來較好的視覺體驗(yàn)。
設(shè)計(jì)意圖：對邀請函的美化可分成兩個部分：一是對邀請函中的文字、圖片進(jìn)行美化，二是合理設(shè)置動態(tài)效果。單從技術(shù)角度來講，這些操作是比較簡單的，只要學(xué)會設(shè)置屬性面板即可。但是邀請函的美化不是天馬行空，隨心所欲，還需要一定的藝術(shù)欣賞能力。因此首先讓學(xué)生帶著問題思考如何設(shè)置文字、圖片？設(shè)置動效時需要注意的問題？得出一定的結(jié)論后，讓學(xué)生帶著構(gòu)思去美化邀請函，以減少學(xué)生操作的盲目性。
�。ㄎ澹┳髌氛故荆参鯤5
活動6：發(fā)布和評價作品。
�。�1）對于制作好的作品，將其發(fā)布到網(wǎng)上，這樣其他人就可以通過電腦和手機(jī)訪問你的作品。請保存當(dāng)前的網(wǎng)頁并發(fā)布到網(wǎng)上。
�。�2）同桌之間用發(fā)布的網(wǎng)址或二維碼相互訪問對方的作品。
�。�3）根據(jù)評價表對同桌的作品進(jìn)行評價。
�。�4）根據(jù)同伴及老師意見進(jìn)一步修改作品。
設(shè)計(jì)意圖：學(xué)生在制作完成邀請函后，進(jìn)行保存，發(fā)布就可以瀏覽到自己的成品，極大地提高了學(xué)生的學(xué)習(xí)興趣。將學(xué)生的作品進(jìn)行展示，師生共同賞析作品，根據(jù)評價表進(jìn)行點(diǎn)評，給出建議，然后進(jìn)一步完善作品。
�。┲R梳理，展望H5
展示思維導(dǎo)圖，梳理本節(jié)課內(nèi)容：
總結(jié)利用iH5制作網(wǎng)頁的基本過程：
觀看視頻，結(jié)束本課：隨著信息技術(shù)的高速發(fā)展，H5可謂是無處不在。H5可以是各種宣傳網(wǎng)頁、在線游戲，甚至戶外大屏中的互動也是H5。在未來5—10年內(nèi)，H5或?qū)蔀橐苿踊ヂ?lián)網(wǎng)領(lǐng)域的主宰者。
設(shè)計(jì)意圖：借助思維導(dǎo)圖，將關(guān)鍵知識點(diǎn)結(jié)構(gòu)化，清晰形象地呈現(xiàn)出各知識點(diǎn)的脈絡(luò)關(guān)系，有助于學(xué)生從整體上把握知識，完成知識的建構(gòu)。最后觀看H5應(yīng)用視頻，了解H5的日常應(yīng)用，對未來展望，進(jìn)行情感升華。
【《網(wǎng)頁的制作》教案優(yōu)秀】相關(guān)文章：
網(wǎng)頁制作實(shí)習(xí)報告(7篇)12-26
網(wǎng)頁制作實(shí)習(xí)報告7篇12-22
網(wǎng)頁制作實(shí)習(xí)報告10篇11-22
網(wǎng)頁制作實(shí)習(xí)報告(10篇)11-22
網(wǎng)頁制作實(shí)習(xí)報告匯編10篇12-24
網(wǎng)頁制作實(shí)習(xí)報告(合集7篇)12-26