網頁制作的教學設計(優選3篇)
作為一名無私奉獻的老師，就有可能用到教學設計，借助教學設計可以讓教學工作更加有效地進行。那么優秀的教學設計是什么樣的呢？下面是小編為大家整理的網頁制作的教學設計，歡迎大家分享。
網頁制作的教學設計1
課程編號：
1、網頁設計與制作教程，熊前興閔聯營，科學出版社；
2、網站與網頁設計，張貴明，清華大學出版社；
3、網頁美術設計原理及實戰策略，王曉峰焦燕，清華大學出版社；
4、網站建設典型案例，張梟，清華大學出版社；
網頁和網站是internet的重要組成部分，企業、公司和機構通過網站來宣傳推介自己的技術和產品，個人發布主頁展示自己的風采，人們從不同類型的網站來獲取需要的信息。因此，設計與制作網頁已經成為計算機應用技術的一個重要方面。本課程的主要教學目的是使學生掌握網頁設計與制作的基礎知識，能運用網頁工具設計和制作常用網頁。
第一章、網頁的基礎知識（1學時）
�。�1）internet基礎知識
（2）www簡介
�。�3）網頁制作的技術和工具介紹
第二章、超文本編輯語言html（8學時）
�。�1）html文件的.基本結構
�。�2）文字和段落標記
�。�3）列表標記
�。�4）圖片標記
（5）表格標記
�。�6）超鏈接標記
�。�7）表單標記
�。�8）框架標記
第三章、javascript語言（4學時）
�。�1）javascript語言簡介
（2）javascript編程基礎
�。�3）基于對象的javascript語言
�。�4）javascript程序實例
第四章、層疊樣式表css（1學時）
�。�1）css概述
（2）css屬性
�。�2）圖像、表格與超鏈接
（3）表單與框架
�。�4）添加網頁元素
�。�5）發布站點
第六章、動態網頁設計語言asp（4學時）
（1）asp簡介
（2）vbscript腳本基礎
�。�3）asp的內置對象
�。�4）實用文件
第七章、利用ad0訪問數據庫（1學時）
（1）數據庫的連接
（2）數據庫的檢索
�。�3）數據庫的操作
總結復習（1學時）
四、實驗教學內容與要求
五、作業
六、考核方式
期末考核每個同學為自己設計制作一個博客網站。
七、成績評定
1、自制網站（80%）
2、平時考勤、作業（20%）平時成績分配：
平時考勤5次，每次2分，共占10%作業5次，每次2分，共占10%
八、執行大綱時應注意的問題
根據學生對課程內容的掌握和理解程度會對進度做適當的調整。
網頁制作的教學設計2
課程編號：
1、網頁設計與制作教程，熊前興閔聯營，科學出版社；
2、網站與網頁設計，張貴明，清華大學出版社；
3、網頁美術設計原理及實戰策略，王曉峰焦燕，清華大學出版社；
4、網站建設典型案例，張梟，清華大學出版社；
網頁和網站是internet的重要組成部分，企業、公司和機構通過網站來宣傳推介自己的技術和產品，個人發布主頁展示自己的風采，人們從不同類型的網站來獲取需要的信息。因此，設計與制作網頁已經成為計算機應用技術的一個重要方面。本課程的主要教學目的是使學生掌握網頁設計與制作的'基礎知識，能運用網頁工具設計和制作常用網頁。
第一章、網頁的基礎知識（1學時）
�。�1）internet基礎知識
�。�2）www簡介
（3）網頁制作的技術和工具介紹
第二章、超文本編輯語言html（8學時）
�。�1）html文件的基本結構
�。�2）文字和段落標記
（3）列表標記
�。�4）圖片標記
�。�5）表格標記
�。�6）超鏈接標記
�。�7）表單標記
�。�8）框架標記
第三章、javascript語言（4學時）
�。�1）javascript語言簡介
（2）javascript編程基礎
（3）基于對象的javascript語言
（4）javascript程序實例
第四章、層疊樣式表css（1學時）
�。�1）css概述
�。�2）css屬性
�。�2）圖像、表格與超鏈接
（3）表單與框架
（4）添加網頁元素
�。�5）發布站點
第六章、動態網頁設計語言asp（4學時）
（1）asp簡介
（2）vbscript腳本基礎
�。�3）asp的內置對象
（4）實用文件
第七章、利用ad0訪問數據庫（1學時）
�。�1）數據庫的連接
�。�2）數據庫的檢索
（3）數據庫的操作
總結復習（1學時）
四、實驗教學內容與要求
五、作業
六、考核方式
期末考核每個同學為自己設計制作一個博客網站。
七、成績評定
1、自制網站（80%）
2、平時考勤、作業（20%）平時成績分配：
平時考勤5次，每次2分，共占10%作業5次，每次2分，共占10%
八、執行大綱時應注意的問題
根據學生對課程內容的掌握和理解程度會對進度做適當的調整。
網頁制作的教學設計3
《h5快速制作網頁》是蘇教版《初中信息技術》8年級第3章《主題網站設計與制作》第2節《制作網頁》中第1課時的內容。h5是指第5代html標記語言，其搭建的站點可方便地應用于pc、android、ios等多種平臺，它為互聯網內容的呈現提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，h5是一種創建網頁的方式，用h5創建的網頁以文字、圖片、動畫、聲音等相結合的富媒體出現，頁面圖文并茂、生動活潑、傳達方便、易于推廣。
本節課的學習對象是八年級的學生，處于這一年齡段的學生，思維活躍，具備一定的理解能力和較強的自學能力。通過前面的學習，學生已熟練使用wps、photoshop等軟件，也掌握了規劃設計主題網站的方法。本節課以ih5軟件工具為平臺，學習用h5快速制作網頁。然而學生從未接觸過ih5，對于陌生軟件的學習，有些畏難情緒，覺得無從下手。但是在日常生活中，他們經常能接觸到各種各樣的手機h5網頁，如企業宣傳、個人簡歷、邀請函、紀念冊等，這些h5網頁給大家帶來了全新的體驗，技術本身帶來的新奇感讓學生心生向往。
知識與技能：能列舉h5網頁的特點；掌握在ih5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設置對象屬性的方法，理解舞臺、頁面、對象之間的層級關系。
過程與方法：通過制作校園文化藝術節邀請函，經歷制作h5網頁的基本過程。
情感態度及價值觀：感悟網頁制作并非難事，軟件使用有共通之處。
�。ㄒ唬﹦撛O情境，初認h5
以藝載德、以藝促智，一年一度的校園文化藝術節又開始了，同學們踴躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報演出，充分展示八年級同學的青春活力和精神面貌。
思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達、短信、紙質邀請函等）
活動1：體驗“校園文化藝術節邀請函h5”，初認h5。
不同平臺的瀏覽效果是否一致？為什么？
這支h5中具有哪些媒體元素？
用戶能參與其中嗎？
你會用什么方式推廣這支h5？
小結：
（1）h5具有跨平臺、支持多媒體、可交互、易推廣等優勢。以上特點使得h5可能成為我們發出邀請的首選。
小結：h5是指第5代html標記語言，也指用h5語言制作的.一切數字產品。通俗地說，h5是一種創建網頁的方式。用h5創建的網頁圖文并茂、生動活潑、傳達方便、易于推廣。
設計意圖：與h5相關的概念性知識抽象、枯燥難懂，如果采用講授法，學生并不容易理解。因此本節課創設了學生現實生活中的情境，以制作校園文化藝術節邀請函h5為主題，設計了4個問題，每個問題目標指向明確，容易引起學生的共鳴，激發學生的思考并得出結論。通過微視頻用通俗易懂的語言幫助學生進一步認識h5，內化知識。
（二）根據需求，規劃h5
凡事預則立，不預則廢，要制作匯報演出邀請函，首先對每個頁面的內容、素材等進行一個簡單規劃。
活動2：根據需求，選擇素材，規劃邀請函。
設計意圖：學生已經學習過網站的規劃，所以容易理解規劃的重要性。教師通過搭建“規劃表”這個支架，引導學生根據制作校園文化藝術節邀請函的需求，對所要制作的邀請函進行初步的規劃，幫助學生理清楚每個頁面的內容和所需添加的元素。
�。ㄈ┲R遷移，制作h5
能夠用于開發h5網頁的工具很多，今天以ih5軟件工具為平臺，學習使用h5快速制作網頁。
活動3：找“共性”，探“個性”，認識ih5軟件。
�。�1）使用課前申請的賬號，登錄網址：，進入在線編輯平臺。
�。�2）對比photoshop界面，認識ih5界面，找出相同之處和不同之處。
小結：相同之處：_______________________（菜單欄、工具面板、編輯區）
不同之處：_______________________（對象樹面板）
�。�3）比較ps中的圖層面板和ih5中的對象樹面板，思考對象樹面板的作用。
小結：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關系為：舞臺→頁面→文本、圖片等素材，每個頁面中的對象上層覆蓋下層。
活動4：利用ih5軟件，制作邀請函h5。
�。�1）觀看操作指導微視頻，自主探究頁面的制作，完成以下問題：
設置背景：選中頁面1，在屬性面板中找到_____________選項，添加背景圖片。
添加文字：選中頁面1，在工具面板中選擇_____________選項。
添加圖片：選中頁面1，在工具面板中選擇_____________選項。
小結：添加文字、圖片的一般步驟：選擇位置—添加對象。
�。�2）展示學生作品，師生共同分析存在的問題，尋求解決方式。
問題1：首頁、內容頁都播放同一素材。
原因分析：素材全部都添加在了舞臺之中，其層級關系在內容頁和首頁的上一級。
問題2：內容頁沒有顯示內容。
原因分析：素材全部都添加在了首頁之中，而不是對應的內容頁中。
設計意圖：遷移是人類認知的一個普遍特征，因為新的學習總是建立在原有學習基礎之上。學生原有的知識是photoshop軟件使用，將photoshop和ih5進行對比，引導學生發現界面組成的“共性”與“個性“，讓學生初步認識對象樹面板，學會利用對象樹面板來管理素材。在制作h5時采用局部“翻轉課堂”的形式，通過高效、簡短的微視頻和幾個思考題，引導學生思考探究；在學生遇到問題和困難時，師生共同分析問題，解決問題。給學生“瑞士奶酪式”知識建構時間，使學生從規律的獲得到知識的應用有一個過渡和漸進的過程。
�。ㄋ模┳灾魈骄浚阑痟5
活動5：美化完善邀請函h5。
（2）如何改變圖片大小，修改圖片的亮度、對比度等？
（3）如何設置元素的動態效果，使得網頁更生動？
小結：
（1）選中文字或圖片——屬性面板——修改設置�！把埡钡葮祟}文字字號一般選用大些，宜用飽滿的字體，以達到醒目的作用；內容用于提供具體信息，文字字號可以小些。
�。�2）圖片選用要符合主題，色彩和諧。字體顏色與背景要有一定的對比度。（3）選擇要添加動態效果的對象——選擇動效命令。注意：設置合理、適度的動態效果，可以給觀賞者帶來較好的視覺體驗。
設計意圖：對邀請函的美化可分成兩個部分：一是對邀請函中的文字、圖片進行美化，二是合理設置動態效果。單從技術角度來講，這些操作是比較簡單的，只要學會設置屬性面板即可。但是邀請函的美化不是天馬行空，隨心所欲，還需要一定的藝術欣賞能力。因此首先讓學生帶著問題思考如何設置文字、圖片？設置動效時需要注意的問題？得出一定的結論后，讓學生帶著構思去美化邀請函，以減少學生操作的盲目性。
（五）作品展示，共析h5
活動6：發布和評價作品。
（1）對于制作好的作品，將其發布到網上，這樣其他人就可以通過電腦和手機訪問你的作品。請保存當前的網頁并發布到網上。
�。�2）同桌之間用發布的網址或二維碼相互訪問對方的作品。
（3）根據評價表對同桌的作品進行評價。
�。�4）根據同伴及老師意見進一步修改作品。
設計意圖：學生在制作完成邀請函后，進行保存，發布就可以瀏覽到自己的成品，極大地提高了學生的學習興趣。將學生的作品進行展示，師生共同賞析作品，根據評價表進行點評，給出建議，然后進一步完善作品。
�。┲R梳理，展望h5
展示思維導圖，梳理本節課內容：
總結利用ih5制作網頁的基本過程：
觀看視頻，結束本課：隨著信息技術的高速發展，h5可謂是無處不在。h5可以是各種宣傳網頁、在線游戲，甚至戶外大屏中的互動也是h5。在未來5-10年內，h5或將會成為移動互聯網領域的主宰者。
設計意圖：借助思維導圖，將關鍵知識點結構化，清晰形象地呈現出各知識點的脈絡關系，有助于學生從整體上把握知識，完成知識的建構。最后觀看h5應用視頻，了解h5的日常應用，對未來展望，進行情感升華。
【網頁制作的教學設計】相關文章：
網頁制作教學設計07-28
制作網頁教學設計04-20
網頁制作教學設計10-01
網頁制作的教學設計01-30
網頁制作教學設計(7篇)11-28
網頁制作教學設計7篇11-27
網頁設計與制作心得12-12
網頁設計與制作報告01-04
網頁制作教學設計匯編7篇11-30
網頁制作教學設計(通用7篇)12-06