網頁制作的教學設計(優選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時采用局部“翻轉課堂”的形式,通過高效、簡短的微視頻和幾個思考題,引導學生思考探究;在學生遇到問題和困難時,師生共同分析問題,解決問題。給學生“瑞士奶酪式”知識建構時間,使學生從規律的獲得到知識的應用有一個過渡和漸進的過程。
。ㄋ模┳灾魈骄,美化h5
活動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