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