網(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