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