第一篇：如何實施《網頁設計》教學課堂

如何實施《網頁設計》教學課堂

袁志軍

新疆烏魯木齊 新疆職業大學

830011

摘要：新的時代，新的教育理念，教育也提出新的改革，尤其是高職教育, 以培養技術應用能力為主線,設計學生的知識、能力、素質結構和培養方案, 對我們教師的工作提出了更高的要求，那么我們應該怎樣來合理安排我們計算機類的教學設計任務呢？筆者根據自己授課的實際經驗寫出自己在教學任務安排當中的實際感受，以供大家相互探討。

關鍵詞：網頁設計

教學項目

教學課堂

How to Implement the“ Webpage Design” Teaching Class

Vocational University

Yuan Zhijun(Xinjiang Vocational University, Urumqi, Xinjiang 830011, China)Abstract: With the advance of new era and new education idea, the new education reform is proposed, especially the higher vocational education, which is based on the cultivation of application ability, designing for students' knowledge, ability, quality structure and training programs, raises higher requirements for our teachers.How should we arrange our computer teaching designing tasks? According to the author's own teaching experience, here I want to share my own teaching arrangements in the real sense with you.Key words: Webpage design, teaching project, teaching

在教學任務設計設計中由于每個教師的思想、氣質、知識結構、教學能力和審美情趣不同，針對不同的教材和學生的實際，在從事教學活動時，在方法上每位老師都有自己的選擇和側重的角度，都要采取自己得心應手的方式方法，創造出自己的授課路子和風格。不同的教學特色和授課風格可以并行，不應嵌在一個框子里，其實只要是效果好，質量高，學生愛學的就是好方法。

這學期我上的《網頁設計》課程102課時，網頁設計主要涉及到的軟件有:Dreamweaver、Flash、Firework、Photoshop加ASP動態網站基礎開發及后臺管理等，也是學生比較熱衷的一門課程，互聯網已經成為人們獲取知識、網上購物、傳遞信息、相互交流、和共享資源的重要途徑，而網站作為人們與客戶通過網絡相互交互溝通已成為了最主要的橋梁，更成為網絡應用的一大熱點。隨著網站相關技術的不斷發展，越來越多的人開始接觸網頁設計和網站開發工作，網頁設計師正成為互聯網應用領域不可或缺的職位之一，這也大大激發了學生對這門課的學習興趣。但是學生作為一個新手，對網頁設計知之甚少，而現代社會工作節奏快、時間緊，怎樣才能在有限的時間內快速掌握網頁設計的基本技能且印象深刻、既實用并能快速上手呢？我們如何通過大量實例項目演練,扎實理論與軟件基礎,注重學員實踐能力培養 ,提高就業保障呢？下面簡要結合本課程的教學方法來與大家一起探討。

一、課前準備 我們備課中不僅要備學生而且備教材備教法，根據教材內容及學生的實際，設計課的類型，擬定采用哪一種教學方法，并對教學過程的程序及時間安排都作詳細的記錄，認真寫好電子教案。每一課都做到“有備而來”，每堂課都在課前做好充分的準備，針對《網頁設計》這門課我采用的是項目分組與實例應用結合的方法來上課，上第一堂課之前先調研學生在其它課程中的學習狀態、學習能力、學習態度以及用功程度等考察學生的綜合能力。然后根據能力大小將學生搭配分組，以好的帶差的，以強的帶弱的。通過學生之間的相互輔助增加同學之間的友情，同時也可以增強小組之間的競爭能力，另外也讓同學們在學習的同時也認識到團隊合作精神的重要性。

二、第一堂課 老師確定自己的教學思路并與學生一起調研網頁設計項目和確定有網頁設計開發要求的部門單位，調研項目的大綱由老師來負責準備，然后即可安排學生中速打較快和文筆較好的同學一起來寫一封關于網頁設計應用需求的調研通知，通過學生自己的理解來表達他們與用戶溝通的技巧，并且也鍛煉了同學們的協調能力。同時要求小組通過報名或推選的方式確定小組項目負責人（小組長），小組一起探討選擇比較適合自己特點、能力、也是自己強項的工作任務，小組長負責帶領小組根據項目特點制定過程表格的具體要求。例如：需要提出的問題、采用哪種表格方式來記錄需求、需要具有怎樣相應的實施條件、項目實施的進度規劃等。教師將事先分配好的小組名單和調研通知公布在校園網上，并且發出書面通知希望能夠得到相關部門單位的協助與配合，老師在中間起協調溝通作用。

三、課堂教學 我們的教學任務是讓學生在‘教與學“當中學習掌握更多的實際操作技能，這就要求我們結合實例來教受學習任務，教會學生在已有的案例基礎上開發利用，以提高開發速度和拓展更多的學習思路。要對多年來的教學技巧和經驗進行總結，教會學生通過使用一些簡單的圖形處理軟件、抓圖軟件、和FLASH制作軟件工具來制作網頁，可大大提高學生網頁的制作速度，簡化制作步驟。以不致于把更多的精力都放在學習Flash、Firework、Photoshop中，造成本末倒置，因為制作網站繁雜而失去對學習《網頁設計》學習的興趣。教會學生們準備網業設計的素材、網頁構架、布局、顏色搭配、ASP、數據庫、網站總體規劃等最終達到動態網站設計能力。

四、課后調研 讓學生在課后到相應的部門調研需求，調研需求的方法是先找部門的基層工作人員落實需求，因為基層工作者更了解工作的性質、方法、步驟和需求，對具體的操作要求也更有發言權。這樣既鍛煉了學生的溝通能力，同時也增加了師生之間的感情交流。通過取得的調研需求小組討論進行詳細的需求分析，通過邊學邊做邊分析使學生懂得分析與取舍，將難度非常大的且無法實現的功能去除或改用其它模式來處理。在學習過程中不斷通過查閱圖書、網絡來查詢解決問題，再由老師和學生小組一起討論，將問題做到最好最滿意的解決方式，鍛煉同學們分析問題和解決問題的能力，通過不斷的摸索和討論形成整體框架。

五、項目實施與評估

學生確定各自在小組中的分工以及小組成員合作的形式，然后按照已確立的步驟和程序工作。結合項目任務開始邊學習課程內容邊實踐項目開發、學習新知識、解決新問題。在制作的同時要強調學生要養成良好的記錄信息并保存信息的習慣，以便為自己也為后期修改人員可以讀懂你的程序而做好準備。先由學生對自己的項目結果進行自我評估，再由教師進行檢查評分。師生共同討論，評判項目工作中出現的問題，學生解決問題的方法以及學習行動的特征。通過對比師生評價結果，找出造成結果差異的原因。當學生掌握網頁設計規劃的整體制作步驟時再將做好的網站模塊展示給相關部門領導審核，再度提出需求進行修改創新，當部門單位試用效果基本滿意時，再通過各個部門的網站框架將數據整合，分析、調試，制作出適合于本校的動態網站應用系統，將整個系統安裝在學校的服務器上進行應用。

六、歸檔和項目應用 項目工作結果應該歸檔保存，即進行項目文檔的收集、整理和保存工作。以供下一屆學生能夠在此項目的基礎上做更完善的二次開發，同時也是該學生團隊此門課程重要的考核依據。開發的項目應用也可投入到學校的實際應用當中去，減少部門單位人員繁雜的手工業務流程和紙張資源，在應用的基礎上可根據應用效果的好壞可適度提出給予小組成員申請資助獎勵，激發學生積極向上的學習精神，提高學生的成就感。通過這種模式的教學不但可以提高學生的學習興趣，還可以鍛煉學生的綜合素質。同時也為單位不必購買昂貴的應用軟件而投入大量的資金解決了問題。

七、教學模式的延伸 隨著社會的發展，目前教學手段不斷出新花樣，各高校都廣泛采取視頻教學的方式來教學，一是可以吸引學生的興趣，二是可以活躍教學氣氛，三、便于學生課后學習和復習，四、可以通過網絡的方式讓更多的學生參與到課堂教學當中，同時在社會實踐學習過程中視頻教學更能清晰的表達出教學內容和目的，對于參照物尤其是操作過程更能夠清晰的表達給學生。所以通過一種簡單實用的方法來建設一套能夠網絡實時直播的或存儲后及時上傳的網絡教學錄像設備，對于我們項目案例教學法來說是非常必要的。該設備要具備方便搭建可靈活性和可靠性，能夠適應各種復雜環境場所下錄制的可能。當然我們搭建的主要核心設備應該是一臺高清網絡攝像機，其次是我們的監視畫面和語音錄音存儲設備及相應的網絡上傳和發布軟件，具體的搭建要看投入的資金、設備、環境來決定。

通過此課程的分析歸納如下：計算機專業教學中，教師可從實際出發，精選出一些典型項目，說明其要求和要達到的效果后，為每個項目聘項目經理（小組長）一名，由學生自由報名，或通過應聘競選方式選拔出，再由項目經理去為其他同學分工，一起進行籌備，直到完成項目后交教師審核，教師在其中起指導作用，學生起主導作用，這樣學生由被動變為主動，可增強學生學習的主動性和團隊精神。高職教育的課程要求我們應把課程應用到項目中去，所以結合實際的開發工作需求，首先要讓學生明白他們的工作任務，讓學生懂得課程體系在項目中的地位和作用，使學生了解從項目需求到最終的驗收結束、資料歸檔整理等所需要經歷哪些過程，做好哪些工作準備，需要怎樣的溝通技巧、通過哪些工具來完成最后老師交給的項目。而不是把學生培養成只會解釋問題的“理論高手”，而是要培養學生具有解決實際問題的“智慧高手”，解決“怎么干”，“干什么”的問題。在教學中，教師與學生承擔著更多的教與學的責任，要求有更多的投入和參與。

參考文獻

王文惠．高校網絡課程開發中的教學設計研究[J]．昌吉學院學報，2006，4：66～69 周國燭 韓志偉．高等職業教育課程教學設計與案例．中國輕工業出版社．2009,7月

袁志軍

1972年

男

副教授

工學學士

主要研究方向：計算機

第二篇：淺談網頁設計課程教學

淺談網頁設計課程教學

摘要：網頁設計課程是計算機和藝術的交叉學科課程，應注重將技術和藝術相結合起來進行教學。本文針對“網頁設計 ”課程的特點，結合實踐應用，闡述在教學方面的一些體會。

關鍵詞：網頁設計，教學方法

Abstract: website design course is a cross computer science and artistry course, it is need to combine teaching methods of these subjects.this paper is to base on the feature of “website design” course and practice , to give some opinion about teaching.Key words : website design, a teaching method

一、引言

《網頁設計》課程是職業院校計算機類專業及電子商務專業的一門專業課程，也是一門實踐性很強的職業技術課程。由于《網頁設計》課程實踐性和更新性很強，該課程如果采用傳統的教學方式，那結果是不理想的。在這里結合自身的實際經驗，談談網頁設計課程的教學。

二、教學策略

1．課程特點

網頁設計課程是計算機和藝術的交叉學科課程。在教學過程中，除了要求學生掌握基本的技術外，也必須對藝術設計有一定的了解。網頁設計應注重技術和藝術的統一性。在進行網頁設計時，應考慮網站的總體結構，風格定位，色彩的應用，版式的設計等方面的因素，力求形式與內容的統一，讓網頁的顯示達到快捷，美觀的視覺效果。

2．教學方案

要設計一個好的網頁作品，首要的因素不是創新，而是“用戶體驗”，第一步應該站在用戶的角度去考慮設計方案，所有的形象風格都必須服從主題，服務用戶。這就對網頁的整體形象有了較高的要求，整體形象包括版式設計，色彩的應用，logo設計，素材設計，廣告設計，web圖像設計及優化，交互方式等等。在教學時，我們可以結合實際，要求學生從版式布局設計和網頁元素的處理及色彩搭配三方面著手，歸納如下：

（1）版式設計

網頁的美感來源于網頁的版式設計，它突出了網頁設計的藝術性和個性，屬于網頁的藝術設計，好的版式設計會使得網頁顯得更具有美感和創意。網頁的版式設計是基于內容的，應該從實用性和藝術性考慮。網頁內容一定要主次分明，中心突出；導航要清晰；可以圖文并茂，是網頁顯得生動和活躍。除此以外，網頁的版式設計要符合統一、分割的原則。統一即指整個網站版式風格的統一性、整體性；分割即指要科學的劃分整個頁面。

網頁的版式設計主要是表格、層等技術的應用。表格是一種最簡單的布局手法，它可以將圖像和文字做最恰當的編排，達到清晰易懂的效果。層（div）的布局，是現在正當流行的排版手法，它主要應用相對位置等的關系進行準確定位，再加上層疊樣式表的輔助，突出了它對網頁的設計具有可擴展的優勢。

文字是網頁內容的主要載體，所以文字的視覺效果在版式設計中也起著關鍵的作用。文字的設置可以分為字體、大小、顏色、行距等，通過這些屬性設置，使文字排列得整體和美觀。但要注意的是中文字體和英文等其他字體的設置，是有一定區別的。英文的字體有很多的選擇，但中文的正文字，總的來說，就兩種：宋體和黑體。在傳統的版式設計中，大家都還是傾向于英文的排版，從視覺上來看，英文字體更有韻律性，因為每個字母本身高矮不一致；但是中文字體相對來說，就顯得單調和獨立些，所以在設計時，這兩種文字要作不同的處理。另外，也不要選擇一些非常特殊的字體，除非用戶的瀏覽器認識這些特殊字體，否則將會出現亂碼。如果遇到非要使用特殊字體的情況，可將文字轉換成圖片再將其應用。對于字號而言，單位應采用em，而不是px，這點在使用層疊樣式表（css）時尤為重要，還要注意的是em和px是有差別的，所以在使用的時候也要對上號，否則也達不到預先的視覺效果。文字一行的字數最好不超過50字，首頁的標題在10-20字為佳；行距一般使用的是20-22像素的行距，這樣使得整個的文字內容部分不會顯得太緊湊或者太松散。文字的整體排列一般有四種基本形式：兩端對齊、居中對齊、左對齊或右對齊、圖文環繞排列。在整個網頁版式設計中，標題文字的設計原則應該是“醒目而不夸張”。

導航欄的設計在網頁設計中也很重要，它對整個網站內容有提綱和導航的作用，在設計的時候，要注意首先導航欄的風格也要和整個網頁風格保持統一，另外最好采用文字，因為網絡的速度可能會影響圖片的正常下載；不過現在flash按鈕的導航欄已經成為時尚，它可以實現豐富的動感效果。

（2）網頁元素的處理

網頁元素包括logo、按鈕、圖片、動畫、聲音、banner等。在網頁中包含這些對象時要注意的有：首先是logo的設計，logo代表了整個網站或者企業的文化，一個有特色、具有視覺沖擊力的logo，可以直接影響瀏覽者對網站的判斷，給瀏覽者留下記憶深刻的印象。其次，要確保網頁上的每一個元素都有存在的必要性，不要使用冗余的技術和內容；再次，要保持形式和內容的統一；最后，要盡量的使網頁具有快捷性。對于網頁的特效技術，最好采用javascript或css技術來實現。

（3）色彩的處理

并非所有的顏色都能應用于網頁，網頁中的顏色會受到硬件、瀏覽器等的影響，即使網頁中使用了非常合理、非常漂亮的配色方案，每一位用戶所看到的效果也不一定相同。所以，最好使用使用網頁安全色來避免和解決這種問題。網頁安全色是指在不同的硬件環境和軟件環境下都能在瀏覽器上正常顯示的顏色，并且現顯示的效果都一樣，不會出現失真的現象。在頁面設計中，整個網頁的色彩種類最好不要超過3種，一種或者兩種主體色，其他為輔助色。顏色種類太多，會讓人覺得很雜亂。另外，文字內容和網頁的背景顏色的對比要做到突出，比如：背景為深色，則文字的顏色可以選取淺色調；背景為淺色時，文字顏色就應該深些；這種深淺的變化在色彩學中稱為“明度變化“。比如有些主頁，背景色和文字顏色都采用的是深色，由于色彩的明度較近，所以瀏覽者來瀏覽閱讀的時候，會感覺吃力，從而影響閱讀；但是色彩的明度變化也不能太大，明度變化大會導致亮度的反差強，讓人覺得很刺眼，同樣會影響整個網頁的視覺效果。在進行顏色搭配時，還要注意的是：第一，采用的顏色應具有聯想性，不同的色彩會產生不同的聯想，所以色彩的選取也要和網頁的內涵有關。第二，色彩的合理性。根據網頁的主題的不同，選取相應的色彩，比如紅色，可以體現出網站的熱情和喜慶；藍色可體現出科技的氣息等。第三，色彩要有鮮明性，這個才能給瀏覽者深刻的印象，并有耳目一新的感覺。

（4）網頁賞析

在教學過程中對學生的引導是非常重要的，設計網頁得多看多學，網頁設計的技術和風格在日新月異地變化，所以在提高學生設計技術的同時，還要多培養學生的審美能力，知道怎么設計才是一個好的網頁。創建網頁是一個不斷學習的過程，在看一個網站的時候，找到這個網站的優點缺點，注意哪些是可以借鑒的，哪些是需要避免的，在看的同時，可以看些成熟的網站，也可以看些成長中的作品，在同期的比較中，也有助于自身的提高。另外，鼓勵學生看源文件，了解某些效果是如果實現的，在效仿的同時進行改進和創新。

（5）考核方式

網頁設計課程的考核應該打破傳統的考試方式，建議采用機考的方式，學生通過一學期的學習，應能自行設計各種網頁，熟練掌握其基本制作方法和技巧，在規定的時間內設計網 頁。這也是一種對提高學生動能能力的一種鞭策方法。

三、結束語

在網頁設計課程教學中，應當充分認識到網頁設計課程的特點，結合實際，采取相應的教學措施和方法完成教學任務，以達到良好的教學效果。對于信息科技迅猛的發展今天，必須摒棄陳舊的教學理念，及時提高自身的專業水平，完善自身的教學理念，尋找更好的教學方法，激發學生的學習興趣，培養學生追求新知的能力和動手實踐的能力，從而達到學以致用的效果。

參考資料： 田博文，《Dreamweaver8基礎培訓教程》，人民郵電出版社，2007年2月

孫素華，<< Dreamweaverms2004完美網頁設計>>，中國青年出版社，2005年10月

第三篇：網頁設計教學總結

網頁設計教學總結

這個學期我擔任了10網絡(1)(2)班和10商務班的的網頁設計這門課程。在前面半個學期的教學中，我做到了認真制定計劃，注重教學理論，認真備課和教學，努力上好每一節課，并和其它優秀老師交流，從中吸取教學經驗，取長補短，提高自己的教學水平。按照課程要求進行施教，讓學生掌握好網頁設計知識。還注意以德為本，結合網站實例進行層層善誘，多方面、多角度去培養學生的實踐能力、提升其操作技能。

下面從以下幾個方面來談談我這個半個學期的教學總結： 教學進度

按照教學進度，我們已經完成了課程的全部內容的學習。教學進度基本上按照原計劃已經完成了。教學方法

教學中我從以下幾方面進行努力：

一、課前準備。熟悉教材。解教材的結構，重點與難點，掌握知識的邏輯，能運用自如，知道應補充哪些資料，采用哪個實例作為網頁教學實例；解學生的知識結構，解他興趣、需要和習慣，知道他學習新知識可能會有哪些困難，采取相應的預防措施；結合學生情況采取何種教學方法，解決如何把教材上的知識系統地傳授給學生，包括如何組織教材、如何安排每節課、如何講解實例。設計一些實際中的商業網站案例。

二、課堂情況。網頁設計課上。課堂上引起學生的興趣，激發學生的創作興趣。網頁設計課里包含有一些圖片設計和動畫設計，這些需要有豐富的想象力才能制作出優秀的作品，課堂上，也盡力培養學生的想象力，引導學生想象。課堂上，始終以學生為學習主體，把學習的主動權交給學生，挖掘學生潛在能力，讓學生自主學習，提高學生學習的獨立性。記得在有節課，把一個網站拿來講解，讓學生先看，看了后讓學生在草稿紙上畫出自己的設計草圖。最后我再來以不同的方式講解該網站制作的方式，給學生從多角度進行分析。有時也讓學生在教師機上當場操作，讓學生的智慧、能力得到體驗，使學生成了學習的主人，使學習成了需求，讓他覺得學習中有發現、有樂趣、有收獲。課堂上關注全體學生，注意信息反饋，調動學生的注意，使其保持相對安靜，同時，激發學生的情感，使他產生愉悅的心境，創造良好的課堂氣氛，課堂語言簡潔明了努力克服重復的毛病，課堂提問面向全體學生，努力引發學生學網頁課的興趣。還要做好課后輔導工作。認真批改學生的作業。

三、課后工作。要提高教學質量。總結學生本次作業中的不足，解哪些知識學生還沒有理解并在下一節課時進行補充說明。鼓勵優秀學生，激發其它學生。課后多和學生交流，解其學習情況，以便改善教學。存在問題:

一、教學中的相互合作有待提高。

二、網絡教學資源還不是特別豐富，不能很好滿足教學需求。今后將進一步加強網絡資源建設，并提高資源利用率。

總結整個2007年上半年的教學工作，收獲是豐富的，不管從知識，還是教學管理，還是教學經驗上都是豐富的。給了我成長的道路上寶貴的一筆。雖然有很多時候都是在一種緊張，忙碌的狀態下走過，但我知道，走過了這一段，人生就會是另一個起點，有另一個更大的目標等著我去前進。

屈明 2011-12-28

第四篇：網頁制作教學設計

網頁制作教學設計

網頁制作教學設計1

教學目標：

1、知識與技能

（1）了解超級鏈接的含義及鏈接源和鏈接目標的含義，掌握同一站點內以及不同站點間網頁超級鏈接的創建方法。

（2）掌握網頁內書簽的作用及創建書簽鏈接方法，掌握交互式按鈕、框架網頁內超級鏈接的設置方法。

（3）理解熱區鏈接的含義及創建方法。

2、過程與方法

（1）通過創建網頁超級鏈接的操作，使學生了解網頁中創建超級鏈接的基本方法，破除對網頁鏈接的神秘感。

（2）通過對不同對象設置超級鏈接的操作，使學生總結出操作的規律，培養學生自主學習與操作的能力。

（3）通過網頁不同的超級鏈接方法，拓展學生思維，創建多種形式的網頁鏈接。

3、情感態度與價值觀

（1）通過鏈接我國主要自然保護區網頁，激發學生熱愛祖國、熱愛自然、熱愛生命的激情。

（2）完成超級鏈接，使學生感受成功的喜悅和快樂。

教學重、難點：

1、教學重點：

（1）超級鏈接的含義及鏈接源和鏈接目標的含義。

（2）超鏈接的制作方法——給文字、圖片制作超鏈接，制作書簽鏈接，給交互式按鈕制作超鏈接，框架頁面內的超鏈接，圖片區域制作超鏈接等。

2、教學難點

（1）書簽鏈接中名稱及對應鏈接位置的設定。

（2）在框架頁面中制作超鏈接時，目標對象所選擇的顯示窗口形式。

教學方法與教學手段：

任務驅動法、討論探究法、講解與演示法、類比知識遷移法。

教學準備：

“動物——人類的朋友”站點，包括未鏈接的網頁，如歡迎頁、表格頁、框架頁，表單頁等。

教學過程：

1、引入

展示兩個主頁，一個已經創建了鏈接，一個沒有創建鏈接，讓學生進行比較并找出區別，引出本課課題——超級鏈接。

提出：我們在先前的學習中，哪個軟件中的相關操作與它類似？什么是超級鏈接？找一個例子，分析鏈接源和鏈接目標分別是什么？

學生展開交流，通過對比找出不同點，并積極思考，回答老師的問題。

設計意圖：通過對比操作、交流，再輔以知識遷移，明確本節課教學內容。

2、新授

（1）站內超級鏈接

引導學生回顧PowerPoint中超鏈接的制作方法（教師提示：右擊鏈接源，利用快捷菜單制作超鏈接），輔以教材中的內容，讓學生自行探究并完成以下操作：

任務1同一站點內不同頁面之間的鏈接

○1制作首頁（歡迎頁）到表格頁的超鏈接。

○2給表格頁內交互式按鈕設置超級鏈接，鏈接到相關頁面。

○3給框架頁內交互式按鈕設置超級鏈接，鏈接到相關頁面。

教師巡視，及時指導，安排學生示范操作并講解如何制作超鏈接。

交互式按鈕的超鏈接制作要求在框架網頁中演示操作。老師可以提問學生：演示者操作的對嗎？有沒有問題？

引導學生發現問題：超鏈接制作完成后需要檢驗（保存后預覽）。

教師講解，突破難點，再交由學生操作。

以上是同一站點內不同網頁之間的鏈接，有時一個頁面中內容過多，需要不斷拖動滾動條實現閱讀，能否實現快速跳轉呢？

任務2同一站點內同一頁面內的跳轉（鏈接）：在“動物趣聞”頁面內制作書簽鏈接。

教師講解：由生活中的書簽引入，介紹“書簽鏈接”的概念，然后再演示如何操作。

提示：書簽鏈接的雙向性問題（返回）。

學生認真聽講后模仿制作，教師巡視進行指導并反饋學生的完成情況。

（2）站間超級鏈接

僅憑我們課堂上制作的這些頁面還不足以詳細介紹我們的主題，此時我們還可以借助超鏈接，鏈接到因特網上的其他網站，以豐富我們的內容。

任務3借助熱區鏈接，為“友情鏈接”頁面制作超鏈接，鏈接我國一些自然保護區網站。

有了以上基礎，可安排學生自學教材中有關熱區鏈接的相關內容，學生探究操作后教師再安排學生進行演示，輔助以提問的形式檢驗學生的自學情況。

3、總結與評價

開展同學間的互助，檢驗其鏈接完成情況，推薦優秀同學做展示。引導學生分類總結本節課的知識點。

網頁制作教學設計2

教學目標：

1、讓學生掌握在網頁中插入表格的方法以及表格的修改

2、學會利用表格來規劃網頁

3、培養學生創新的能力以及動手操作的能力

教學重、難點：

利用表格來規劃網頁，從中培養學生的創新能力

教學過程：

一、情境導入

同學們你們善于觀察嗎？老師先考考你們，我們一起來看一組圖片，你們看看在那里看過呢？學校緩臺的窗臺上。你們的觀察能力真的很強啊，對，這些都是我們學校美術的特色作口，盤畫。其實，我們做過很多作品：有手工作品，語文課中的作文、書法等都是作品，這節課我們以繪畫作口品為例，做一個學習園地網頁，把我們的作品展示到自己的班級網站中，以便我們更好的努力學習。現在我們就一起來制作吧！

二、新知探究

首先我們來打開上節課的班級網站，在這個網站中新建一個網頁，并保存成“學習園地”。

教師講解：如何制作學習園地網頁。

1、制作網頁的標題：輸入文字，并設置文字的格式。

2、插入表格：單擊“表格”中的“插入表格”并對表格屬性進行設置。如：行、列的操作，對齊方式等。同時講解什么是行，什么是列，以及單元格的概念。

3、修改表格：調整表格行高和列寬。

4、在學生學會插入表格的基礎上，來設計網頁，展示作品。并講解在單元格中可以插入圖片、文字。那我們就一起快快去做吧！插入圖片，并在圖片的上面或下面進行圖片的注釋。

5、進一步設置單元格的背景，來美化網頁。

6、設置超鏈接：通過導航欄目，設置文字超鏈接。選中文字，點擊右鍵選擇超鏈接在列表中選擇你要鏈接的網頁，單擊“確定”按鈕。

7、學生在教師的講解后，學生自己動手操作制作網頁。教師進行指導。（伴隨音樂）

三、作品評價

1、生評：從網頁設計上，美觀程度上，知識落實上重點評價。

2、師評：對學生作品進行評價，并對其它學生的評價加以更完整的解釋。

四、總結

我們這節課主要是利用了表格來設計網頁，以使來美化我們的網頁，通過繪畫作品的展示，學習更多的知識。

網頁制作教學設計3

一、課程基本信息

課程編號：

中文名稱：網頁設計與制作

英文名稱：Web Design and Production課程類別：選修課適用專業：所有專業

開課學期：20xx—20xx第2學期總學時：24學時總學分：1課程簡介：

本課程突出網頁設計與制作的現代特點，從Internet的基礎知識入手，重點介紹HTML超文本標記語言，以及所見即所得的網頁設計制作工具Dreamweaver的基本操作流程。從靜態頁面到動態頁面由淺入深的介紹網頁設計與制作全過程。采用案例分析和親自實踐的方式突出、突破課程的重點和難點。并指導每一名選課的同學為自己建一個博客網站，以此提高同學對網頁設計與制作的興趣和愛好。參考書：

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屬性

第五章、可視化網頁設計工具

（1）網頁的基本操作

（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%

八、執行大綱時應注意的問題

根據學生對課程內容的掌握和理解程度會對進度做適當的調整。

網頁制作教學設計4

一、學習內容分析

《H5快速制作網頁》是蘇教版《初中信息技術》8年級第3章《主題網站設計與制作》第2節《制作網頁》中第1課時的內容。H5是指第5代HTML標記語言，其搭建的站點可方便地應用于PC、Android、iOS等多種平臺，它為互聯網內容的呈現提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，H5是一種創建網頁的方式，用H5創建的網頁以文字、圖片、動畫、聲音等相結合的富媒體出現，頁面圖文并茂、生動活潑、傳達方便、易于推廣。

二、學習者分析

本節課的學習對象是八年級的學生，處于這一年齡段的學生，思維活躍，具備一定的理解能力和較強的自學能力。通過前面的學習，學生已熟練使用WPS、Photoshop等軟件，也掌握了規劃設計主題網站的方法。本節課以iH5軟件工具為平臺，學習用H5快速制作網頁。然而學生從未接觸過iH5，對于陌生軟件的學習，有些畏難情緒，覺得無從下手。但是在日常生活中，他們經常能接觸到各種各樣的手機H5網頁，如企業宣傳、個人簡歷、邀請函、紀念冊等，這些H5網頁給大家帶來了全新的體驗，技術本身帶來的新奇感讓學生心生向往。

三、學習目標

知識與技能：能列舉H5網頁的特點；掌握在iH5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設置對象屬性的方法，理解舞臺、頁面、對象之間的層級關系。

過程與方法：通過制作校園文化藝術節邀請函，經歷制作H5網頁的基本過程。

情感態度及價值觀：感悟網頁制作并非難事，軟件使用有共通之處。

四、教學過程

（一）創設情境，初認H5

以藝載德、以藝促智，一年一度的校園文化藝術節又開始了，同學們踴躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報演出，充分展示八年級同學的青春活力和精神面貌。

思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達、短信、紙質邀請函等）

活動1：體驗“校園文化藝術節邀請函H5”，初認H5。

（1）二人一組，一位同學在手機瀏覽器中打開；另一位同學在電腦瀏覽器中打開（網址：xxxxxx）。瀏覽后回答以下問題：

不同平臺的瀏覽效果是否一致？為什么？

這支H5中具有哪些媒體元素？

用戶能參與其中嗎？

你會用什么方式推廣這支H5？

小結：

（1）H5具有跨平臺、支持多媒體、可交互、易推廣等優勢。以上特點使得H5可能成為我們發出邀請的首選。

（2）“校園文化藝術節邀請函H5”為何如此吸引人？觀看視頻，思考到底什么是H5？

小結：H5是指第5代HTML標記語言，也指用H5語言制作的一切數字產品。通俗地說，H5是一種創建網頁的方式。用H5創建的網頁圖文并茂、生動活潑、傳達方便、易于推廣。

設計意圖：與H5相關的概念性知識抽象、枯燥難懂，如果采用講授法，學生并不容易理解。因此本節課創設了學生現實生活中的情境，以制作校園文化藝術節邀請函H5為主題，設計了4個問題，每個問題目標指向明確，容易引起學生的共鳴，激發學生的思考并得出結論。通過微視頻用通俗易懂的語言幫助學生進一步認識H5，內化知識。

（二）根據需求，規劃H5

凡事預則立，不預則廢，要制作匯報演出邀請函，首先對每個頁面的內容、素材等進行一個簡單規劃。

活動2：根據需求，選擇素材，規劃邀請函。

設計意圖：學生已經學習過網站的規劃，所以容易理解規劃的重要性。教師通過搭建“規劃表”這個支架，引導學生根據制作校園文化藝術節邀請函的需求，對所要制作的邀請函進行初步的規劃，幫助學生理清楚每個頁面的內容和所需添加的元素。

（三）知識遷移，制作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。

（1）邀請函中的標題、內容文字等選用什么樣的字體、字號合適？如何設置？

（2）如何改變圖片大小，修改圖片的亮度、對比度等？

（3）如何設置元素的動態效果，使得網頁更生動？

小結：

（1）選中文字或圖片——屬性面板——修改設置。“邀請函”等標題文字字號一般選用大些，宜用飽滿的字體，以達到醒目的作用；內容用于提供具體信息，文字字號可以小些。

（2）圖片選用要符合主題，色彩和諧。字體顏色與背景要有一定的對比度。（3）選擇要添加動態效果的對象——選擇動效命令。注意：設置合理、適度的動態效果，可以給觀賞者帶來較好的視覺體驗。

設計意圖：對邀請函的美化可分成兩個部分：一是對邀請函中的文字、圖片進行美化，二是合理設置動態效果。單從技術角度來講，這些操作是比較簡單的，只要學會設置屬性面板即可。但是邀請函的美化不是天馬行空，隨心所欲，還需要一定的藝術欣賞能力。因此首先讓學生帶著問題思考如何設置文字、圖片？設置動效時需要注意的問題？得出一定的結論后，讓學生帶著構思去美化邀請函，以減少學生操作的盲目性。

（五）作品展示，共析H5

活動6：發布和評價作品。

（1）對于制作好的作品，將其發布到網上，這樣其他人就可以通過電腦和手機訪問你的作品。請保存當前的網頁并發布到網上。

（2）同桌之間用發布的網址或二維碼相互訪問對方的作品。

（3）根據評價表對同桌的作品進行評價。

（4）根據同伴及老師意見進一步修改作品。

設計意圖：學生在制作完成邀請函后，進行保存，發布就可以瀏覽到自己的成品，極大地提高了學生的學習興趣。將學生的作品進行展示，師生共同賞析作品，根據評價表進行點評，給出建議，然后進一步完善作品。

（六）知識梳理，展望H5

展示思維導圖，梳理本節課內容：

總結利用iH5制作網頁的基本過程：

觀看視頻，結束本課：隨著信息技術的高速發展，H5可謂是無處不在。H5可以是各種宣傳網頁、在線游戲，甚至戶外大屏中的互動也是H5。在未來5-內，H5或將會成為移動互聯網領域的主宰者。

設計意圖：借助思維導圖，將關鍵知識點結構化，清晰形象地呈現出各知識點的脈絡關系，有助于學生從整體上把握知識，完成知識的建構。最后觀看H5應用視頻，了解H5的日常應用，對未來展望，進行情感升華。

網頁制作教學設計5

1、教學目標知識與技能：靈活運用添加超鏈接和在網頁中插入表格方法，根據網頁內容進行頁面布局，完善網頁,掌握網頁布局的技能和技巧。

過程與方法：培養學生加工信息和應用信息的能力及培養學生思維能力，規劃能力、創新能力、及合作能力。

情感與態度：使學生感受中國源遠流長的歷史文明，并通過網頁傳遞給世界；幫助學生樹立良好的信息道德意識；讓學生享受成就感，樹立自信心。

2、學生分析初中二年級學生感知能力較強,理解能力和抽象思維較弱;學生基本學會使用在網頁中插入表格的方法，但分析信息、處理信息和應用信息能力較弱;對教學內容的了解程度較強。

3、內容分析

教學重點：利用表格對網頁頁面進行布局。

教學難點：怎樣合理、美觀地設計網頁頁面布局。

此部分教學內容在整個網頁設計知識體系中處于綜合處理信息的重要部分。

4、教學策略設計

（1）．教學方法設計

我根據教學主題及其教學目標確定的教學指導思想是以學生為主體，以學生自己的親身體驗展開探究式小組合作學習。本節課采用研究體驗式教學法,建構主義模式下的任務驅動式教學法組織教學。首先設計“總任務”，再細分成若干“小任務”，實現教學目標。

（2）．教-學流程和教-學活動的設計思路

整個教學活動，尤其是學習活動，我采用探究式學習法，又稱研究性學習，我強調的是學生在教師指導下，根據各自的興趣、愛好和條件，再結合與自己有相同或相近的興趣、愛好的同學組成合作伙伴，共同選擇西安不同的旅游景點，確定研究課題，借助“表格布局”功能規劃七天的旅游行程，獨立自主結合小組合作開展研究，進行合理的網頁布局設計，達到從中培養創新精神和創造能力及審美能力的一種學習方式，實現“雙贏”。建構主義學習理論認為，學習過程不是學習者被動地接受知識，而是積極地建構知識的過程，把學過的網頁設計知識綜合應用起來，由于建構主義學習活動是以學習者為中心，而且是真實的，并且以完成特定的任務為動力，因而學習者就更具有興趣和動機，能夠鼓勵學習者進行批判型思維，能夠更易于提供個體的學習風格，展現自己的獨特思維，不受現有網頁模式的拘束。基于構建主義的探究性學習模式，我的設想是整個教學過程是動態的，學生是學習的主體，教師是學生學習環境的創設者、學習動力的激發者、學習過程的指引者和學生學習的協作者。

（3）．應用信息技術的依據或考慮

信息技術在本次教-學活動有不可替代的功能。利用信息技術中計算機技術進行網頁設計，實現教學目標，完成讓世界各地的人實現“網上游古都”。在教學中計劃通過探究式教學方式，小組合作學習方式和“任務驅動式”教學策略，自主設計網頁，發布網頁，運用網絡使信息技術的這些潛在優勢發揮作用并真正促進學生能夠結合實際應用，通過自主實踐，完成“網上游古都”任務，并同時完成了學習任務，進一步建構了自己的知識體系，并實時地享受到巨大的成就感。

（三）、教與學的過程

1．教與學的過程

活動內容

教師活動

學生活動

設計意圖

創設情境

激發興趣

［創設情境］

“要想了解中國上下五千年文明歷史，請到西安來！”近幾年，越來越多的外地游客涌向西安。“十一黃金周”即將來臨，大家想不想用網頁形式向外地游客介紹宣傳西安，讓更多的人來西安，領略其古老的魅力！我們上節課把利用搜索引擎找到的有關西安的歷史文物古跡的文字信息和圖片信息整理制作成有關不同景點的網頁，但信息是否顯得很零散？怎樣把景點信息整合規劃，讓人們先在網上一飽眼福，輕松網上游古都？

設計一個含有指向各旅游景點網頁的超鏈接的主頁。

提供信息活條件，激發起學生的興趣。

［導語］

我們可在主頁中制作一個西安旅游景點導航欄，但怎樣合理規劃各旅游景點，并且使頁面布局美觀，整潔，分類清晰？

利用“表格”。

為細化任務埋下伏筆;并且激發學生的認知沖突。

［出示課題］

今天我們就圍繞“西安七日游”，在主頁中利用表格規劃設計旅游行程，本節課的課題是《“黃金周”—規劃網上西安七日游》

學生明確本節課課題，初步了解任務。

出示課題，介紹總任務。

［分組方法］

根據對各旅游景點的興趣及當初搜索信息的分工情況及本節課任務分工，四人一小組。

學生進行分組

為細化任務做準備

出示任務

明確分工

［出示總任務］

每個組圍繞主題，利用表格規劃設計旅游行程，并建立好超鏈接，利用主頁展示出來。

學生明確任務

明確總任務

［作品形式及分工參考］

形式：創建并完善主頁，并展示整個網站。

分工參考：

內容版式規劃

整理七個旅游景點網頁

超鏈接的建立與維護

作品演示解說

學生明確匯報形式，分工參考。

使學生明確各自任務后，通過研究，探討，操作，通過電腦媒體來完成任務。

活動內容

教師活動

學生活動

設計意圖

出示任務

明確分工

[角色分工]

學生自由分組后,共同研究選組長，組長進行給組員分配任務。

學生共同研究選組長,并協調分配好任務.

鍛煉學生自主協調分工能力。

［出示作品評價標準］

教師出示作品評價標準：

作品內容：設計含有七個鏈接網頁的主頁，資料豐富，內容準確。

技術表現：頁面布局設計合理，顏色搭配和諧，主題突出，作品演示運行正常，操作熟練。

創新特色：作品布局規劃有獨特之處，有新意。

提示學生有三條幫助熱線：

1、組長2、鄰座學習伙伴3、教師4、自學課件

學生明確要求。

培養學生的創新能力，規劃能力，思維能力和合作能力。

學生研究探索合作交流創作作品

［創作作品］

播放舒緩音樂，為學生營造自由和諧氣氛。

（提示學生利用網上鄰居把各組員的作品組合在一起，共同完成此任務。）

學生根據角色分工，按小組形式開始完善網站。

學生體會了超鏈接的作用，練習了超鏈接的使用，理解了表格強大的頁面布局功能；培養學生處理信息和應用信息的能力；通過學生間交流合作，老師及時點撥與指導，培養學生發現問題和解決問題的能力。

［展示作品］

下面請各組派代表，到教師機前展示以下你們的旅游行程。其他同學觀察后，可提意見或建議。

由小組代表展示組內作品，并詳細說明旅游景點規劃的呈現形式，內容選擇及整體構思。

鍛煉學生口語表達能力和分析說明問題能力。

合作成功展示作品成果匯報交流探討

［交流探討］

教師引導學生探討頁面布局的方法和技巧；談看完作品后，對其改進意見；進行組間互評和組內自評。

評出“最受歡迎獎”（即如果此網站上傳到網上，點擊率最高），“最具創意獎”“最佳布局獎”作品。

學生間相互交流探討。

培養學生合作交流能力。

［教師點評及檢測］

教師從頁面布局，整體規劃合理性，創意等幾方面進行點評。

學生思考，怎樣完善作品。

教師鼓勵學生發展創新思維，頁面布局規劃能力，邏輯思維能力及合作能力。

教師或其他同學提問頁面布局的方法。

學生代表演示

及時檢測學生對表格的掌握情況。

你受到的最大啟示和收到的最大收獲？成功經驗和失敗教訓？

學生回答

鞏固知識，培養情感

[完成旅游規劃，培養情感]

同學們已熟練掌握表格的使用方法，并且加工和應用信息的能力增強。

悠久的歷史積淀和豐富的人文資源，使西安居中國六大古都之首，是世界四大文明古都之一，著名的旅游中心城市。希望你們熱愛中國博大精深的歷史，感受西安古老的魅力！

學生感悟。

全課總結，培養道德情感。

全課總結知識延伸

［達到目標，知識延伸］

網站制作好了，怎樣讓世界各地的人都看到你們的網站呢？

想當我們的故鄉—大慶的小導游嗎？趕快制作一個“鐵人故鄉—大慶”的網站吧！

學生思考。

學生課后實踐。

為激發下一節課內容（上傳主頁）的興趣奠定基礎。

讓學生可把本課內容應用到實際生活中去。

培養學生自發探究能力。

2．關鍵環節提煉

利用信息技術創設情境，播放一段自拍的錄像，內容大體是：一位外國友人，想要來中國四大古都之一“西安”旅游，但想要自助游，想借助因特網，先在網上了解一下西安，并參考一下旅游行程。通過此錄像激發學生興趣并利用信息技術呈現問題，使學生產生認知沖突，培養學生發現問題、分析問題、解決問題的能力。我通過學生利用信息技術完成此項任務，促進學生對基礎知識、基本技能的學習。我利用信息技術，尤其是網絡提供的有關“西安”豐富的旅游景點介紹資源，幫助和拓展學生的學習。讓學生借助信息技術手段開展探索、總結并進行創作。我利用信息技術展示學生自評，學生互評，教師評價的評價表，為學生的學習提供評價、反饋和矯正。我利用網頁自學課件和網絡教室教學廣播系統支持師生間、生生間的交流對話。

3.教學反思

本節課主題明確、集中，讓學生分成小組，合作探究學習，給出特定的總任務，有利于學習效果評判的可比較性，也便于學生之間的廣泛交流和良性競爭。通過利用信息技術規劃規劃網上西安七日游，對西安七個主要景點的介紹，讓世界了解西安，每個學生在共同完成“網上游古都”網站作品后，讓每個學生都有完成任務和宣傳中國源遠流長的文明歷史的成就感，并感到自豪。

本節課，在小組合作學習過程中，學生之間互學互教，彼此交流探討，經歷了提出問題、分析問題和解決問題過程，每個學生都承擔一定學習任務，防止濫竽充數，促進了學生的參與程度、認知深度，高質量地實現了課程的目標，增強學生的責任感。但個別學生沒有認識到合作學習的重要意義，自主探究能力較弱，容易喪失信心。

教學實際實施過程，有學生提出：我對中國的少數民族文化感興趣，能否制作一個宣傳中國五十六個少數民族文化的特色網站？于是我了解到學生對中國的不同文化感興趣，可在課外活動小組完成此任務或作為課外自主探究性學習課題來探究。

本節課讓學生掌握了“表格”的妙用，還提高了加工信息和應用信息的能力，而且使學生感悟到了中國上下五千年的博大精深，對祖國更加熱愛。

（四）、教學評析：

在新課程標準的理念中，明確提出要關注全體學生，建設有特色的信息技術課程。在教材因篇幅的限制，提供給學生感知的背景材料極其有限，“信息”且都處于“靜止、儲存”狀態，不利于學生的感知和抽象概括。因此，允許教師在不改變教材內容、體系、結構的前提下，經教學法的加工，營造引入新課的“情境問題”的氛圍。學生在積極的參與、體驗、研究并在已有知識經驗的支持下，自主能動地探索，實現知識的再創造。

教學活動在面向全體的同時更注重學生情感的`交流協作意識與因材施教。更注重學生個性培養和創新智能的開發。

學生自主性學習，需要有一個適應的過程，開始階段，布置任務要明確具體。

學生之間的交流和幫助比較少，自主學習的能力還要不斷提高等。

附：學生學習過程及典型成果

另附：小組成員分工表

第________組組長________作品題目______________

小組成員

主要負責工作

網頁制作教學設計6

一、教學目標：

1、知識與技能：

（1）、了解框架結構網頁的概念及在網頁中的作用，了解它與表格網頁的區別。

（2）、掌握框架結構網頁的建立、框架結構的拆分、框架的刪除等。

（3）、掌握框架中頁面設置及保存的方法，如設置初始網頁按鈕、新建網頁按鈕等。

2、過程與方法：

（1）、能夠區分框架結構屬性設置與網頁屬性設置的不同點。

（2）、通過框架結構網頁設計，使學生對網頁的整體結構有更進一步的認識。

3、情感態度與價值觀：

（1）、能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。

（2）、培養學生網頁設計的審美意識、創新意識。

二、教學重點難點：

1、教學重點：

（1）、框架網頁的作用和功能，框架的建立與屬性設置。

（2）、框架中各個頁面之間的關聯，每個框中頁面的設置方法。

（3）、框架網頁的保存方法。

2、教學難點：

（1）、框架結構網頁中框架屬性與頁面屬性的設置方法。

（2）、理解框架結構的多頁面存儲方法及各頁面之間的關聯。

三、教學過程：

1、創設情境、導入新課

（1）、教師展示一組表格制作的網頁，引導學生找出它們的共同特點。并提問如何快捷地制作這種網頁（學生回答：使用復制、粘貼快捷地制作）。

（2）、教師又提問：有沒有更好的方法呢？相同的區域我們能否只做一遍呢？從而導入新課——框架網頁的制作。

設計意圖：通過對比、比較，引導學生思考，激發學生學習的樂趣。

2、任務驅動、自主學習

（1）、教師展示一個框架網頁，引導學生理解框架網頁的概念。

（2）、出示任務一：框架網頁的新建與保存。教師要求學生先閱讀教材中的操作步驟，再嘗試完成書本第227頁的實踐學習。

（3）、教師講解框架結構中的每個框都是一個獨立的選項文件，即網頁文件，因此當框架確定之后，需要為每個框分別指定其網頁文件的來源，可以通過每個框中的“新建網頁”按鈕和“設置初始網頁”按鈕進行選擇。

（4）、學生理解框架網頁的概念，通過閱讀教材中的內容，自學新建框架網頁的操作，初步了解“新建網頁”和“設置初始網頁”兩個按鈕的不同，并認真聆聽教師的講解，注意觀察，按要求模仿操作。

（5）、出示任務二：相關頁面的制作與設置。教師要求學生先閱讀教材中的操作步驟，再嘗試完成書本第228、229頁的實踐學習。

（6）、學生制作相關頁面，同時也是對前面所學內容的復習和回顧。教師反饋學生的操作情況，開展評比活動，對表現好的學生給與表揚。

（7）、出示任務三：框架網頁屬性的設置。學生自主探究學習，有問題可向教師尋求幫助。教師基礎扎實的同學完成任務后可進行拓展學習。

（8）、教師請學生示范操作，并說明自己設置的方法和原因。同時鼓勵做的比較好的學生。

設計意圖：培養學生的自主學習能力，對于課堂教學難點，學生在教師的講解后模仿操作，有效突破難點。

3、展示作品、課堂小結

（1）、教師給出一些常見的框架結構應用界面，如Web郵箱頁面等，引導學生總結本課內容，并讓學生分組，推進一些優秀作品在全班展示。

（2）、教師點評，并鼓勵完成作品比較好的學生。

設計意圖：拓展學生的視野，使學生了解框架的應用方法。展示優秀作品鼓勵學生，激發學生的創作欲望。

四、教學反思：

1、本節課是在學習完簡單網頁、表格布局網頁、交互式網頁的基礎上，進一步頁的設計方法。由于學生已經具備了一定的網頁設計基礎知識與技能，所以教師可以根據學生的實際情況，采用更靈活

的教學方法。教師可以簡單介紹框架結構網頁的功能及框架的建立與編輯方法，以及框架屬性設置與網頁屬性設置的方法與區別。然后由學生根據教師提供的學案及演示動畫，完成框架網頁設計任務。

網頁制作教學設計7

教學目標：

1、知識與技能：

（1）理解框架的概念及用途。

（2）掌握框架網頁的新建、制作、編輯與保存，了解框架的拆分方法。

（3）初步掌握將框架結構與表格布局結合使用來制作網頁。

2、過程與方法：

（1）通過對表格網頁的分析，體驗新知識（框架結構網頁）的優點，從而促進其學習新知識。

（2）理解框架的概念與組成，學會分析網站的結構。

3、情感態度與價值觀：

（1）通過以“人與動物”為主題的框架結構網頁制作活動，了解更多有關人與動物和諧相處的知識，通過故事趣聞，增強學生關注動物的興趣和意識。

（2）能夠將表格與框架結構網頁結合使用，在創作中體驗樂趣。

教學重、難點：

1、重點：框架的概念、用途， 創建、編輯與保存框架網頁的方法。

2、難點：框架的拆分。

教學方法：

對比教學法、探究學習法、模仿學習法。

教學準備：

整理、歸類相關素材，并按要求擺放。

教學過程：

1、引入

老師展示一組利用表格制作的網頁，要求學生仔細觀察，找出它們的一個共同特點（學生答：網頁上方和左側內容都是相同的，僅右下部分內容不一樣），并提問如何快捷地制作這種網頁？（學生答：使用復制粘貼快捷地制作）

盡管復制、粘貼能為我們節省時間，但有沒有更好的方法呢？相同的區域我們能否只做一遍呢？今天我們要學習的內容——框架網頁制作，就能給我們帶來更多便捷。（讓學生明確框架網頁使用的場合）

2、新授

（1）框架網頁概念

由以上例子入手，再展示一個框架網頁，教師引導學生理解框架網頁的概念

（2）框架網頁的新建與保存

教師要求學生先閱讀教材中的操作步驟，再嘗試進行探究操作。

任務1 創建“橫幅和目錄”結構的框架網頁，新建top和left頁面，并學會保存。

框架結構中的每個框都是一個獨立的選項文件，即網頁文件，因此當框架確定之后，需要為每個框分別指定其網頁文件的來源，可以通過每個框中的“新建網頁”按鈕和“設置初始網頁”按鈕進行選擇。在top和left頁面中，單擊“保存”按鈕，隨即開始保存。

此處為教學難點，可先由框架的概念入手，再針對保存頁面中的藍色部分，教師進行講解，教會學生注意觀察。

學生要理解框架網頁的概念，通過閱讀教材中的內容，自學新建框架網頁的操作，初步了解“新建網頁”和“設置初始網頁”兩個按鈕的不同，并認真聆聽教師的講解，注意觀察，按要求模仿操作。

設計意圖：培養學生自主

學習能力，課堂教學難點在教師的講解后模仿操作，有效突破難點。

（3）相關頁面的制作與設置

框架網頁中相關頁面的制作，需要結合表格來布局，插入文字、圖片和交互式按鈕。

任務2 top和left頁面的制作。

要求：

○1top頁面內插入1行2列的表格，左邊單元格插入logo圖片，右邊單元格插入banner圖片。

○2 left頁面內插入5行1列的表格，在每個單元格內依次插入交互式按鈕（共4個），交互式按鈕文字為展示介紹的相關內容概括，在第5個單元格內插入一個郵箱指示的圖片。

○3調整表格邊框的粗細。

○4為main區域設置初始頁面。（該網頁由教師提供現成的）

學生制作相關頁面，同時也是對前面所學內容的復習和回顧。老師反饋學生的操作情況，開展比一比、評一評活動，對表現好的學生給予表揚。

（4）框架網頁屬性的設置

創建好框架網頁后，可以根據實際需要改變框架的屬性。

任務3 調整框架的大小、設置框架的邊框、設置框架窗口中的滾動條等。

提高任務：框架的拆分。

學生自主探究學習，可向老師尋求幫助。完成設置后請同學示范操作，并說明自己設置的方法和原因。操作基礎扎實的同學完成任務后可進行擴展學習。

3、總結與評價

老師可以給出一些常見的框架結構應用界面，如Web郵箱頁面等，引導學生總結本課內容，梳理課堂知識，并讓學生分組，推薦一些優秀作品進行全班展示。

設計意圖：開拓學生的視野，使學生了解框架的應用，教會學生要善于總結，要學會學習的方法。

第五篇：第8課 美化網頁教學設計(課堂語言)

《第8課

美化網頁》教學設計

營前中心小學

吳麗琴

【教學內容分析】

這節課是閩教版《信息技術》小學五年級下冊第8課的內容，是在前一節課學生學會創建站點和制作簡單的文字網頁基礎上，學習在網頁中添加圖片、編輯加工圖片、設置網頁背景，從而完成對網頁的修飾、美化任務，使網站有與眾不同的風格，提高自身藝術修養。【教學對象分析】

從五年級學生的認知特點來看，他們愛問好動、求知欲強、想象力豐富，對實際操作活動有著濃厚的興趣，對直觀事物感知較強，正處在形象思維向抽象思維逐步過渡的階段。因此，在學習過程中，應鼓勵學生自己觀察，親自動手操作，進行學生討論和交流，師生共同歸納總結，體驗學習。

在講此課之前，學生已經學過如何制作一個簡單的網頁，并且添加圖片的技能學生已經在Word文字處理軟件中學習過。這為學生美化網頁作好了充分準備。【教學目標】

1、知識與能力

（1）了解網站的整體風格。

（2）掌握在網頁中添加圖片、編輯加工圖片的方法。（3）會設置網頁背景。

2、過程與方法 通過學生自主學習過程中，掌握美化網頁的方法。

3、情感目標

（1）通過師生協作和學生相互配合，培養學生合作團結的精神。（2）培養學生熱愛美的情感，激發學生表現美的欲望，使學生的審美能力得到提高。【教學重、難點】 1.教學重點

插入圖片、設置圖片屬性、編輯圖片、設置網頁背景。2.教學難點

網站的整體風格、設置圖片屬性、編輯圖片 【教學準備】 多媒體設備、課件、【教學過程】

一、導課

1、師：今天老師接到學校的一個重要通知，幫助學校招聘小小編輯員（課件出示通知內容），參與校園網站的建設，同學們想不想去試一試呢？同學們真是熱情高漲，但是要成為小小編輯員可不是一件簡單的事，必須通過重重的挑戰，你們準備好了嗎？那就讓我們馬上進入基礎小測驗，看看大家是否具有火眼金睛，能夠“慧眼識美”。

2、師：請同學們認真觀看以下幾張網頁，以同桌為小組進行討論，優秀的網頁具備哪些條件呢？

課件出示三坊七巷、土樓等網站實例，教師參與討論并提示學生可以從網頁的色彩、主題、布局等入手。（30秒）

3、指答，教師引導。

師：通過同學們的回答，我們可以總結出一個優秀的網頁需要有，色彩合理，主題鮮明，版面協調，圖文并茂… …

4、師：通過上節課的學習，同學們還記得編輯網頁需要用到什么軟件嗎？請同學們跟著老師一起來回顧一下如何打開Frontpage。

教師操作，學生口述。

5、師：老師這里有一張網頁，根據優秀網頁具有的條件，你有什么想法呢？

展示 “洞江小學學校簡介”的網頁，指答。

6、師引入課題：是的，今天就讓我們一起來《美化網頁》。馬上迎接我們成為小小編輯員的第一個挑戰——為網頁插入圖片，讓網頁圖文并茂。

二、新課

挑戰一：“梳妝打扮” ——給網頁添加圖片，讓網頁圖文并茂。

1、師：還記得我們曾經學過哪些軟件也有插入圖片嗎？軟件的操作總是想通的，在Frontpage中插入圖片的方式與word非常相似。

指答，同時通過課件截圖引導學生復習Word插入圖片的方法。

2、師：請同學們打開學習包里的這張網頁，為網頁梳妝打扮，插入學習包挑戰一里的圖片，可以參考課本P44—45頁或者挑戰一里的錦囊1。看看哪個小組的同學們完成得最快。（3分鐘）

師巡視指導。

3、師：請已經完成的同學舉手示意老師，看來第*小組的同學完成得最快呀！現在老師想邀請同學們指導老師完成這個挑戰。

教師做快速演示，并且總結操作注意點——光標的位置。挑戰二：“修剪邊幅”——對添加的圖片進行編輯，協調版面結構。

4、師：現在圖片插入好了，但是這畫面協調美觀嗎？我們需要修剪邊幅——對圖片進行調整，總是有更大的挑戰等待著我們，請同學們參考課本P45—47或者挑戰二里的錦囊2，設置圖片的屬性，對圖片進行編輯。（5分鐘）

同學之間可相互討論，師巡視指導。邀請學生上臺演示設置圖片屬性，師轉述。

5、師：已經有小伙們為我們演示過了，相信同學們對這個操作有更加清晰的認識，請還未完成的同學繼續完成，已經完成的同學可以嘗試繼續美化網頁。（5分鐘）

師巡視指導，展示學生作品。

6、師：看看這位同學的作品，大家有發現圖片新的變化嗎？那么這位同學是如何達到這樣的效果呢？老師邀請這位同學上臺為我們演示。

學生演示，師轉述。

挑戰三：“穿花衣”——給網頁添加背景圖片。

7、師：再來看看這位同學的作品，又有什么新的變化呢？這位同學真棒，這是老師還沒有布置的終極目標，看來終極目標也沒有難住他。那有沒有難住你呢？請同學們給網頁穿上花衣裳，添加背景圖片，可以參看挑戰三里的錦囊3，完成挑戰三。（5分鐘）

學生演示，師轉述。

三、小結

1、師：同學們不斷突破重重的挑戰，老師發現好多合格的小小編輯員，但是你覺得誰是今天最優秀的小小編輯員呢？老師想邀請這幾位同學加入編輯員的隊伍，你們愿意嗎？

2、師：通過這節課的學習，你有什么收獲？（指答）

3、師小結：老師希望同學們能夠善于打開思維，豐富想法，養成自主學習的習慣，勇于動手實踐操作。

板書：

8、美化網頁

1、插入圖片（先定位光標）

2、設置圖片屬性、編輯圖片

3、設置網頁背景