網(wǎng)頁制作的教學(xué)設(shè)計(jì)(優(yōu)選3篇)
作為一名無私奉獻(xiàn)的老師，就有可能用到教學(xué)設(shè)計(jì)，借助教學(xué)設(shè)計(jì)可以讓教學(xué)工作更加有效地進(jìn)行。那么優(yōu)秀的教學(xué)設(shè)計(jì)是什么樣的呢？下面是小編為大家整理的網(wǎng)頁制作的教學(xué)設(shè)計(jì)，歡迎大家分享。
網(wǎng)頁制作的教學(xué)設(shè)計(jì)1
課程編號：
1、網(wǎng)頁設(shè)計(jì)與制作教程，熊前興閔聯(lián)營，科學(xué)出版社；
2、網(wǎng)站與網(wǎng)頁設(shè)計(jì)，張貴明，清華大學(xué)出版社；
3、網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)戰(zhàn)策略，王曉峰焦燕，清華大學(xué)出版社；
4、網(wǎng)站建設(shè)典型案例，張梟，清華大學(xué)出版社；
網(wǎng)頁和網(wǎng)站是internet的重要組成部分，企業(yè)、公司和機(jī)構(gòu)通過網(wǎng)站來宣傳推介自己的技術(shù)和產(chǎn)品，個(gè)人發(fā)布主頁展示自己的風(fēng)采，人們從不同類型的網(wǎng)站來獲取需要的信息。因此，設(shè)計(jì)與制作網(wǎng)頁已經(jīng)成為計(jì)算機(jī)應(yīng)用技術(shù)的一個(gè)重要方面。本課程的主要教學(xué)目的是使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的基礎(chǔ)知識，能運(yùn)用網(wǎng)頁工具設(shè)計(jì)和制作常用網(wǎng)頁。
第一章、網(wǎng)頁的基礎(chǔ)知識（1學(xué)時(shí)）
（1）internet基礎(chǔ)知識
�。�2）www簡介
（3）網(wǎng)頁制作的技術(shù)和工具介紹
第二章、超文本編輯語言html（8學(xué)時(shí)）
�。�1）html文件的.基本結(jié)構(gòu)
（2）文字和段落標(biāo)記
�。�3）列表標(biāo)記
�。�4）圖片標(biāo)記
�。�5）表格標(biāo)記
（6）超鏈接標(biāo)記
�。�7）表單標(biāo)記
�。�8）框架標(biāo)記
第三章、javascript語言（4學(xué)時(shí)）
（1）javascript語言簡介
�。�2）javascript編程基礎(chǔ)
（3）基于對象的javascript語言
�。�4）javascript程序?qū)嵗?/p>
第四章、層疊樣式表css（1學(xué)時(shí)）
�。�1）css概述
�。�2）css屬性
�。�2）圖像、表格與超鏈接
（3）表單與框架
�。�4）添加網(wǎng)頁元素
（5）發(fā)布站點(diǎn)
第六章、動態(tài)網(wǎng)頁設(shè)計(jì)語言asp（4學(xué)時(shí)）
�。�1）asp簡介
�。�2）vbscript腳本基礎(chǔ)
�。�3）asp的內(nèi)置對象
（4）實(shí)用文件
第七章、利用ad0訪問數(shù)據(jù)庫（1學(xué)時(shí)）
（1）數(shù)據(jù)庫的連接
�。�2）數(shù)據(jù)庫的檢索
�。�3）數(shù)據(jù)庫的操作
總結(jié)復(fù)習(xí)（1學(xué)時(shí)）
四、實(shí)驗(yàn)教學(xué)內(nèi)容與要求
五、作業(yè)
六、考核方式
期末考核每個(gè)同學(xué)為自己設(shè)計(jì)制作一個(gè)博客網(wǎng)站。
七、成績評定
1、自制網(wǎng)站（80%）
2、平時(shí)考勤、作業(yè)（20%）平時(shí)成績分配：
平時(shí)考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%
八、執(zhí)行大綱時(shí)應(yīng)注意的問題
根據(jù)學(xué)生對課程內(nèi)容的掌握和理解程度會對進(jìn)度做適當(dāng)?shù)恼{(diào)整。
網(wǎng)頁制作的教學(xué)設(shè)計(jì)2
課程編號：
1、網(wǎng)頁設(shè)計(jì)與制作教程，熊前興閔聯(lián)營，科學(xué)出版社；
2、網(wǎng)站與網(wǎng)頁設(shè)計(jì)，張貴明，清華大學(xué)出版社；
3、網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)戰(zhàn)策略，王曉峰焦燕，清華大學(xué)出版社；
4、網(wǎng)站建設(shè)典型案例，張梟，清華大學(xué)出版社；
網(wǎng)頁和網(wǎng)站是internet的重要組成部分，企業(yè)、公司和機(jī)構(gòu)通過網(wǎng)站來宣傳推介自己的技術(shù)和產(chǎn)品，個(gè)人發(fā)布主頁展示自己的風(fēng)采，人們從不同類型的網(wǎng)站來獲取需要的信息。因此，設(shè)計(jì)與制作網(wǎng)頁已經(jīng)成為計(jì)算機(jī)應(yīng)用技術(shù)的一個(gè)重要方面。本課程的主要教學(xué)目的是使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的'基礎(chǔ)知識，能運(yùn)用網(wǎng)頁工具設(shè)計(jì)和制作常用網(wǎng)頁。
第一章、網(wǎng)頁的基礎(chǔ)知識（1學(xué)時(shí)）
（1）internet基礎(chǔ)知識
�。�2）www簡介
�。�3）網(wǎng)頁制作的技術(shù)和工具介紹
第二章、超文本編輯語言html（8學(xué)時(shí)）
�。�1）html文件的基本結(jié)構(gòu)
�。�2）文字和段落標(biāo)記
（3）列表標(biāo)記
�。�4）圖片標(biāo)記
（5）表格標(biāo)記
�。�6）超鏈接標(biāo)記
�。�7）表單標(biāo)記
�。�8）框架標(biāo)記
第三章、javascript語言（4學(xué)時(shí)）
�。�1）javascript語言簡介
�。�2）javascript編程基礎(chǔ)
�。�3）基于對象的javascript語言
�。�4）javascript程序?qū)嵗?/p>
第四章、層疊樣式表css（1學(xué)時(shí)）
�。�1）css概述
�。�2）css屬性
�。�2）圖像、表格與超鏈接
�。�3）表單與框架
�。�4）添加網(wǎng)頁元素
（5）發(fā)布站點(diǎn)
第六章、動態(tài)網(wǎng)頁設(shè)計(jì)語言asp（4學(xué)時(shí)）
�。�1）asp簡介
�。�2）vbscript腳本基礎(chǔ)
（3）asp的內(nèi)置對象
�。�4）實(shí)用文件
第七章、利用ad0訪問數(shù)據(jù)庫（1學(xué)時(shí)）
�。�1）數(shù)據(jù)庫的連接
�。�2）數(shù)據(jù)庫的檢索
�。�3）數(shù)據(jù)庫的操作
總結(jié)復(fù)習(xí)（1學(xué)時(shí)）
四、實(shí)驗(yàn)教學(xué)內(nèi)容與要求
五、作業(yè)
六、考核方式
期末考核每個(gè)同學(xué)為自己設(shè)計(jì)制作一個(gè)博客網(wǎng)站。
七、成績評定
1、自制網(wǎng)站（80%）
2、平時(shí)考勤、作業(yè)（20%）平時(shí)成績分配：
平時(shí)考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%
八、執(zhí)行大綱時(shí)應(yīng)注意的問題
根據(jù)學(xué)生對課程內(nèi)容的掌握和理解程度會對進(jìn)度做適當(dāng)?shù)恼{(diào)整。
網(wǎng)頁制作的教學(xué)設(shè)計(jì)3
《h5快速制作網(wǎng)頁》是蘇教版《初中信息技術(shù)》8年級第3章《主題網(wǎng)站設(shè)計(jì)與制作》第2節(jié)《制作網(wǎng)頁》中第1課時(shí)的內(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á)方便、易于推廣。
本節(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è)宣傳、個(gè)人簡歷、邀請函、紀(jì)念冊等，這些h5網(wǎng)頁給大家?guī)砹巳碌捏w驗(yàn)，技術(shù)本身帶來的新奇感讓學(xué)生心生向往。
知識與技能：能列舉h5網(wǎng)頁的特點(diǎn)；掌握在ih5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設(shè)置對象屬性的方法，理解舞臺、頁面、對象之間的層級關(guān)系。
過程與方法：通過制作校園文化藝術(shù)節(jié)邀請函，經(jīng)歷制作h5網(wǎng)頁的基本過程。
情感態(tài)度及價(jià)值觀：感悟網(wǎng)頁制作并非難事，軟件使用有共通之處。
�。ㄒ唬﹦�(chuàng)設(shè)情境，初認(rèn)h5
以藝載德、以藝促智，一年一度的校園文化藝術(shù)節(jié)又開始了，同學(xué)們踴躍報(bào)名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報(bào)演出，充分展示八年級同學(xué)的青春活力和精神面貌。
思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達(dá)、短信、紙質(zhì)邀請函等）
活動1：體驗(yàn)“校園文化藝術(shù)節(jié)邀請函h5”，初認(rèn)h5。
不同平臺的瀏覽效果是否一致？為什么？
這支h5中具有哪些媒體元素？
用戶能參與其中嗎？
你會用什么方式推廣這支h5？
小結(jié)：
（1）h5具有跨平臺、支持多媒體、可交互、易推廣等優(yōu)勢。以上特點(diǎn)使得h5可能成為我們發(fā)出邀請的首選。
小結(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個(gè)問題，每個(gè)問題目標(biāo)指向明確，容易引起學(xué)生的共鳴，激發(fā)學(xué)生的思考并得出結(jié)論。通過微視頻用通俗易懂的語言幫助學(xué)生進(jìn)一步認(rèn)識h5，內(nèi)化知識。
�。ǘ└鶕�(jù)需求，規(guī)劃h5
凡事預(yù)則立，不預(yù)則廢，要制作匯報(bào)演出邀請函，首先對每個(gè)頁面的內(nèi)容、素材等進(jìn)行一個(gè)簡單規(guī)劃。
活動2：根據(jù)需求，選擇素材，規(guī)劃邀請函。
設(shè)計(jì)意圖：學(xué)生已經(jīng)學(xué)習(xí)過網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。教師通過搭建“規(guī)劃表”這個(gè)支架，引導(dǎo)學(xué)生根據(jù)制作校園文化藝術(shù)節(jié)邀請函的需求，對所要制作的邀請函進(jìn)行初步的規(guī)劃，幫助學(xué)生理清楚每個(gè)頁面的內(nèi)容和所需添加的元素。
�。ㄈ┲R遷移，制作h5
能夠用于開發(fā)h5網(wǎng)頁的工具很多，今天以ih5軟件工具為平臺，學(xué)習(xí)使用h5快速制作網(wǎng)頁。
活動3：找“共性”，探“個(gè)性”，認(rèn)識ih5軟件。
�。�1）使用課前申請的賬號，登錄網(wǎng)址：，進(jìn)入在線編輯平臺。
（2）對比photoshop界面，認(rèn)識ih5界面，找出相同之處和不同之處。
小結(jié)：相同之處：_______________________（菜單欄、工具面板、編輯區(qū)）
不同之處：_______________________（對象樹面板）
�。�3）比較ps中的圖層面板和ih5中的對象樹面板，思考對象樹面板的作用。
小結(jié)：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關(guān)系為：舞臺→頁面→文本、圖片等素材，每個(gè)頁面中的對象上層覆蓋下層。
活動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)知的一個(gè)普遍特征，因?yàn)樾碌膶W(xué)習(xí)總是建立在原有學(xué)習(xí)基礎(chǔ)之上。學(xué)生原有的知識是photoshop軟件使用，將photoshop和ih5進(jìn)行對比，引導(dǎo)學(xué)生發(fā)現(xiàn)界面組成的“共性”與“個(gè)性“，讓學(xué)生初步認(rèn)識對象樹面板，學(xué)會利用對象樹面板來管理素材。在制作h5時(shí)采用局部“翻轉(zhuǎn)課堂”的形式，通過高效、簡短的微視頻和幾個(gè)思考題，引導(dǎo)學(xué)生思考探究；在學(xué)生遇到問題和困難時(shí)，師生共同分析問題，解決問題。給學(xué)生“瑞士奶酪式”知識建構(gòu)時(shí)間，使學(xué)生從規(guī)律的獲得到知識的應(yīng)用有一個(gè)過渡和漸進(jìn)的過程。
�。ㄋ模┳灾魈骄�，美化h5
活動5：美化完善邀請函h5。
�。�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ì)意圖：對邀請函的美化可分成兩個(gè)部分：一是對邀請函中的文字、圖片進(jìn)行美化，二是合理設(shè)置動態(tài)效果。單從技術(shù)角度來講，這些操作是比較簡單的，只要學(xué)會設(shè)置屬性面板即可。但是邀請函的美化不是天馬行空，隨心所欲，還需要一定的藝術(shù)欣賞能力。因此首先讓學(xué)生帶著問題思考如何設(shè)置文字、圖片？設(shè)置動效時(shí)需要注意的問題？得出一定的結(jié)論后，讓學(xué)生帶著構(gòu)思去美化邀請函，以減少學(xué)生操作的盲目性。
�。ㄎ澹┳髌氛故�，共析h5
活動6：發(fā)布和評價(jià)作品。
�。�1）對于制作好的作品，將其發(fā)布到網(wǎng)上，這樣其他人就可以通過電腦和手機(jī)訪問你的作品。請保存當(dāng)前的網(wǎng)頁并發(fā)布到網(wǎng)上。
�。�2）同桌之間用發(fā)布的網(wǎng)址或二維碼相互訪問對方的作品。
�。�3）根據(jù)評價(jià)表對同桌的作品進(jìn)行評價(jià)。
�。�4）根據(jù)同伴及老師意見進(jìn)一步修改作品。
設(shè)計(jì)意圖：學(xué)生在制作完成邀請函后，進(jìn)行保存，發(fā)布就可以瀏覽到自己的成品，極大地提高了學(xué)生的學(xué)習(xí)興趣。將學(xué)生的作品進(jìn)行展示，師生共同賞析作品，根據(jù)評價(jià)表進(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)頁制作的教學(xué)設(shè)計(jì)】相關(guān)文章：
網(wǎng)頁制作教學(xué)設(shè)計(jì)07-28
制作網(wǎng)頁教學(xué)設(shè)計(jì)04-20
網(wǎng)頁制作教學(xué)設(shè)計(jì)10-01
網(wǎng)頁制作的教學(xué)設(shè)計(jì)01-30
網(wǎng)頁制作教學(xué)設(shè)計(jì)(7篇)11-28
網(wǎng)頁制作教學(xué)設(shè)計(jì)7篇11-27
網(wǎng)頁設(shè)計(jì)與制作報(bào)告01-04