【熱】《網(wǎng)頁的制作》教案優(yōu)秀5篇
作為一無名無私奉獻的教育工作者，就難以避免地要準備教案，編寫教案有利于我們科學、合理地支配課堂時間。怎樣寫教案才更能起到其作用呢？下面是小編為大家整理的《網(wǎng)頁的制作》教案優(yōu)秀，供大家參考借鑒，希望可以幫助到有需要的朋友。
《網(wǎng)頁的制作》教案優(yōu)秀1
一、課程基本信息
課程編號：
中文名稱：網(wǎng)頁設計與制作
英文名稱：Web Design and Production課程類別：選修課適用專業(yè)：所有專業(yè)
開課學期：20xx—20xx第2學期總學時：24學時總學分：1課程簡介：
本課程突出網(wǎng)頁設計與制作的現(xiàn)代特點，從Internet的基礎知識入手，重點介紹HTML超文本標記語言，以及所見即所得的網(wǎng)頁設計制作工具Dreamweaver的基本操作流程。從靜態(tài)頁面到動態(tài)頁面由淺入深的介紹網(wǎng)頁設計與制作全過程。采用案例分析和親自實踐的方式突出、突破課程的重點和難點。并指導每一名選課的同學為自己建一個博客網(wǎng)站，以此提高同學對網(wǎng)頁設計與制作的興趣和愛好。參考書：
1、網(wǎng)頁設計與制作教程，熊前興閔聯(lián)營，科學出版社；
2、網(wǎng)站與網(wǎng)頁設計，張貴明，清華大學出版社；
3、網(wǎng)頁美術設計原理及實戰(zhàn)策略，王曉峰焦燕，清華大學出版社；
4、網(wǎng)站建設典型案例，張梟，清華大學出版社；
二、課程教學目標：
網(wǎng)頁和網(wǎng)站是Internet的重要組成部分，企業(yè)、公司和機構通過網(wǎng)站來宣傳推介自己的技術和產(chǎn)品，個人發(fā)布主頁展示自己的風采，人們從不同類型的網(wǎng)站來獲取需要的信息。因此，設計與制作網(wǎng)頁已經(jīng)成為計算機應用技術的一個重要方面。本課程的主要教學目的是使學生掌握網(wǎng)頁設計與制作的基礎知識，能運用網(wǎng)頁工具設計和制作常用網(wǎng)頁。
三、理論教學內(nèi)容與要求
第一章、網(wǎng)頁的基礎知識（1學時）
（1）Internet基礎知識
（2）www簡介
（3）網(wǎng)頁制作的技術和工具介紹
第二章、超文本編輯語言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屬性
第五章、可視化網(wǎng)頁設計工具
（1）網(wǎng)頁的基本操作
（2）圖像、表格與超鏈接
（3）表單與框架
（4）添加網(wǎng)頁元素
（5）發(fā)布站點
第六章、動態(tài)網(wǎng)頁設計語言ASP（4學時）
（1）ASP簡介
（2）VBScript腳本基礎
（3）ASP的內(nèi)置對象
（4）實用文件
第七章、利用AD0訪問數(shù)據(jù)庫（1學時）
（1）數(shù)據(jù)庫的'連接
（2）數(shù)據(jù)庫的檢索
（3）數(shù)據(jù)庫的操作
總結復習（1學時）
四、實驗教學內(nèi)容與要求
五、作業(yè)
六、考核方式
期末考核每個同學為自己設計制作一個博客網(wǎng)站。
七、成績評定
1、自制網(wǎng)站（80%）
2、平時考勤、作業(yè)（20%）平時成績分配：
平時考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%
八、執(zhí)行大綱時應注意的問題
根據(jù)學生對課程內(nèi)容的掌握和理解程度會對進度做適當?shù)恼{(diào)整。
《網(wǎng)頁的制作》教案優(yōu)秀2
一、教學目標
1、知道站點、主頁的概念，能在指定位置建立只有一個網(wǎng)頁的站點；
2、認識FRONTPAGE的界面；
3、掌握在主頁中插入文字、圖片、水平線；
4、掌握頁面文件與圖片的保存。
二、教學重點
1、能在指定位置建立只有一個網(wǎng)頁的站點（難點）
2、能在頁面中插入文字、圖片、水平線
3、掌握頁面文件與圖片的保存（難點）
三、學情分析
學生已經(jīng)學習了WORD、POWERPOINT與上網(wǎng)瀏覽信息，對計算機的基本操作（WORD中文檔的編輯，網(wǎng)頁的瀏覽等）比較熟練。這使得學生主動探索、自主學習成為可能。每位學生必須完成基本任務，有能力的學生還可以完成提高篇的學習，以充分發(fā)揮學生的積極性與自主性。
四、教學方法
在教學中，一方面采用比較教學的方法，促進學生知識的遷移；另一方面，提供學生一個導學課件，讓學生根據(jù)這個網(wǎng)絡環(huán)境下的課件自己探索學習，以滿足不同層次學生的需求。
五、教學過程設計
教師活動：1、引入課題：（激發(fā)興趣，活躍氣氛）
同學們喜不喜歡上網(wǎng)？經(jīng)常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網(wǎng)站）
瀏覽新浪網(wǎng)站，瀏覽的第一個頁面稱為什么？（主頁）
我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。
問題1：網(wǎng)站是不是就是網(wǎng)頁？用自己的語言描述一下網(wǎng)站的概念（網(wǎng)站包含多個網(wǎng)頁，通過超鏈接把不同的頁面鏈接起來）
問題2：網(wǎng)頁是不是就是主頁？（第一個頁面稱為主頁，網(wǎng)站設計者可以確定哪一個是主頁，主頁的文件名一般為：index.htm,主頁也是網(wǎng)頁）
設計網(wǎng)站一般必須經(jīng)過兩個步驟，首先是在計算機里做好，然后發(fā)布在internet上，讓所有的人訪問瀏覽。
今天我們學習用Frontpage建立站點，制作一個主頁。
先來研究一下沒有發(fā)布的.網(wǎng)站，打開教師做的網(wǎng)站
問：同學們看到了什么？（文件夾）
總結：
可以這樣理解網(wǎng)站：在資源管理器里，網(wǎng)站表現(xiàn)為一個文件夾，里面存放的是所有與網(wǎng)站相關的文件。
打開主頁，瀏覽頁面，這是老師做的一個導學課件，將幫助大家完成學習任務。
請學生瀏覽教師課件，了解學習任務
2、新建站點
FP的啟動
問：與word比較，有什么不同？
（增加了視圖區(qū)，編輯區(qū)有三個窗口）
總結：
視圖區(qū)：多種視圖模式是為了方便網(wǎng)站的管理。制作網(wǎng)頁時，必須在網(wǎng)頁視圖中編輯頁面
普通窗口：鼠標在閃動，可編輯、修改頁面，所見即所得的方式
預覽窗口：瀏覽器中出現(xiàn)的效果，與PowerPoint中的“放映幻燈片”類似。
Html窗口：編寫HTML（超文本標記語言，它是描述網(wǎng)頁內(nèi)容和外觀的標準。）
打開導學軟件，根據(jù)步驟，示范建立只有一個網(wǎng)頁的站點，強調(diào)新站點的位置、路徑的正確輸入，站點的名稱。
（教會學生利用導學課件，根據(jù)導學軟件完成任務）
任務1：學生根據(jù)導學課件，在d:建立自己站點
教師巡視指導
請一位學生示范如何建立站點，教師總結
問：在文件夾列表中看到了什么？
分析多出的文件夾列表欄，多了一個文件夾，里面有兩個子文件夾和主頁，圖片存放在images文件夾中）
3、編輯主頁與保存主頁
看效果圖，請學生分析主頁中的元素
總結：鮮明的主題，如：我的世界、我的寵物等，有分割頁面的水平線，與主題相關的圖片，對網(wǎng)站的簡單介紹
根據(jù)導學軟件，學生完成任務2：設計主頁、保存主頁與圖片
教師巡視指導
4、總結反饋
請學生示范，講解如何插入圖片（來自剪貼畫與來自文件）、插入水平線，如何保存
總結：必須切換到“普通”窗口下編輯
主頁的保存中存在問題：
單擊“文件”----“保存”或工具欄的“保存”按扭，彈出一個對話框，保存嵌入式文件，改變文件夾，圖片必須保存在本站點images文件夾中，便于站點的管理。
5、請學生繼續(xù)完成自己的主頁，有能力的同學完成提高篇
教師巡視指導
6、教師與學生共同評價總結
展示學生作品，教師與學生共同評價
請學生總結今天的學習內(nèi)容：建立包含一個頁面的站點，主頁的設計與保存。
學生活動：學生回答問題、學觀察鼠標指針、學生回答問題、學生觀察網(wǎng)站的表現(xiàn)形式、齊聲回答、學生瀏覽課件，并了解本節(jié)課的學習任務、學生觀察FP界面與word的不同、學生回答、學生觀察教師演示不同編輯窗口的區(qū)別。學生上機操作，在指定位置建立自己站點、請先做好的學生當小老師，輔導其它學生。學生回答、學生操作，同桌互相幫助，并參考教師做的課件，利用網(wǎng)絡環(huán)境下的課件自己探索學習，滿足不同層次學生的需求、學生總結
注：課件中包含每一個操作過程的操作步驟及拓展的知識、基本任務與提高任務的效果圖。
點評：
教學課題“網(wǎng)頁制作”作為初中階段的最后一部分內(nèi)容，難度較大，教學的深度較難掌握。這就要教師在備教材的基礎上，同時還要備學生，做到對學生的情況有較為深刻地了解，以便很好地完成教學任務，達到預期的教學效果。根據(jù)教材和《中小學信息技術課程指導綱要（試行）》中的精神，本課應以“任務驅動”的方式完成，一方面教會學生了解和熟悉具體軟件的基本功能，另一方面又能主動地掌握并深入學習思考。尋著這個思路授課教師在課前作了大量的課前準備制作出了相應的教學課件“網(wǎng)頁制作”。
一、調(diào)動學生的學習熱情，變被動學習為主動學習
整個教學過程張云老師采取了“引導加任務驅動”的模式進行。首先教師進行導入，導入概念，強調(diào)概念；再引導學生學習課件的使用，引導他們讀懂課件中的第一個任務：建立一個只有一頁的網(wǎng)站，（此處若能引導學生，由學生來完成，減少老師的操作，效果會更好），然后讓學生模仿第一步的操作進行下面內(nèi)容的學習，完成導學材料中給出的一個個任務。
二、突出重點，及時點評
張云老師在引導學生進行學習、操作后，就主動地去觀察和發(fā)現(xiàn)學生中出現(xiàn)的問題，甚至于課前對可能出現(xiàn)的問題，也進行有預見性地準備；發(fā)現(xiàn)問題及時點評。（點評分為個別點評和全班點評，點評不等于教師將操作過程演示一遍。張云老師在點評建成的網(wǎng)站時，重點若再突出些，介紹再清楚些，效果會更好。比如：站點中內(nèi)容說明不夠清楚等。）
三、發(fā)揮學生的協(xié)作學習精神
張云老師在教學過程中，對有困難的學生進行個別輔導，同時還需發(fā)揮學生的協(xié)作學習的精神，充分調(diào)動學生學習的積極性，讓學有余力的學生充當“小老師”，從而體會到學習的樂趣。（整個教學過程中，這點做地不夠，沒有充分地讓師生互動起來）
四、重點突出、目標明確
最后，張老師在整個教學過程中，應再突出教學重點，明確本節(jié)課的任務。（課前的導入，最好給出教學目標，課后的小結應讓學生總結他本堂課學習到哪些知識，所以感覺這節(jié)課重點不突出，內(nèi)容分散。）
五、教學效果較好
由于張云老師在課前對本課作了大量的準備工作，課件制作效果較好，所以學生完成情況很好，教學任務完成情況較好。
《網(wǎng)頁的制作》教案優(yōu)秀3
學習目標:
制作框架網(wǎng)頁、在網(wǎng)頁中插入字幕和超鏈接知識
1.制作框架網(wǎng)頁
框架網(wǎng)頁是一種特殊的HTML網(wǎng)頁，它將窗口劃分成若干小窗口區(qū)域（框架）。每個框架獨立顯示一個不同的網(wǎng)頁（有自己的網(wǎng)頁名字），整個框架網(wǎng)頁有一個總的名字。
框架與表格在組織網(wǎng)頁結構時相似。表格是對頁面區(qū)域進行劃分，框架是對整個瀏覽窗口進行劃分。
·創(chuàng)建框架網(wǎng)頁：單擊菜單“文件”→“新建”→“網(wǎng)頁”，選擇“框架網(wǎng)頁”標簽→選擇“嵌套式層次結構”
·選中的框架邊框為藍色，在拆分或刪除框架時應注意是否選中。
·隱藏框架間的橫線：
右擊框架網(wǎng)頁→單擊“框架屬性”→在對話框中單擊“框架網(wǎng)頁”按鈕，在“網(wǎng)頁屬性”對話框中選“框架”標簽→設置“顯示邊框”為未選中狀態(tài)。
·按住Ctrl鍵，拖動鼠標可以快速拆分框架。
·刪除框架：單擊菜單“框架”→“刪除框架”。
·保存框架網(wǎng)頁時注意要保存所涉及到的所有網(wǎng)頁。
·更改框架鏈接的網(wǎng)頁：
右擊相應的超鏈接→在彈出的快捷菜單上選擇“超鏈接屬性”命令，打開“編輯超鏈接”對話框
→可直接選擇列出的文件，或在“URL”框中輸入網(wǎng)頁的地址
→單擊“目標框架”右邊的“更改目標框架”按鈕，在“當前框架網(wǎng)頁”中選擇目標框架。
2.網(wǎng)頁中插入字幕
·插入字幕：光標定位插入點→單擊“插入”→“組件”→“字幕”打開“字幕屬性”對話框；
→在文本框中輸入文字，選擇“方向”、“速度”、“表現(xiàn)方式”等；
→選中字幕，拖動鼠標，調(diào)節(jié)字幕運動范圍。
·修改字幕：雙擊字幕，可以打開“字幕屬性”對話框，對字幕屬性進行修改。
3.超鏈接相關網(wǎng)頁
超鏈接是從一個網(wǎng)頁指向另一個目標的連接。一般在網(wǎng)頁中的某文字或圖片上設置超鏈接。
·創(chuàng)建超鏈接：單擊文字或圖片→“常用”工具欄的“超鏈接”按鈕，打開“創(chuàng)建超鏈接”對話框。
·取消超鏈接：選中具有超鏈接的文本或圖片，單擊“超鏈接”按鈕，在打開的`對話框中將URL欄中的內(nèi)容刪除。
·跟蹤超鏈接：
在超鏈接上右擊，在打開的快捷菜單上選擇“跟蹤超鏈接”命令；
或：在普通視圖中，按住Ctrl鍵，將光標移到超鏈接上，單擊，會跟蹤連接到超鏈接指向的目的位置。
·設置超鏈接文本的顏色：網(wǎng)頁中超鏈接文本的顏色共有3種：未訪問過的，當前正在訪問的，已訪問過的。FrontPage默認這3種顏色分別為藍色，紅色、深藍色。單擊“格式”→“背景”→在“網(wǎng)頁屬性”對話框→選“背景”標簽，選定“超鏈接”、“已訪問過的超鏈接”、“當前超鏈接”的顏色。
作業(yè)：
新建框架網(wǎng)頁，建立超鏈接，在網(wǎng)頁中插入字幕。7.2制作網(wǎng)頁（框架）這一教案
《網(wǎng)頁的制作》教案優(yōu)秀4
一、教材分析
首頁之外的其他網(wǎng)頁在結構上很相似，為了給這些網(wǎng)站增加一些亮點，故在網(wǎng)頁中插入了交互式按鈕，交互式按鈕不僅具有超鏈接功能，在使用過程中還會發(fā)生變化，更能引起學生的學習興趣。
二、教學目標
1、知識性目標
（1）了解交互式按鈕的功能；
（2） 了解計算機主機包括的部件；
（3）了解網(wǎng)頁動態(tài)效果。
2、技能性目標
（1）會設置網(wǎng)頁的目錄；
（2）學會插入、修改交互式按鈕；
（3）學會復制表格。
3、情感性目標
（1）加深對計算機硬件的認識；
（2）培養(yǎng)學生分工協(xié)作的精神。
三、教學重、難點
1、教學重點
（1）交互式按鈕的`功能；
（2）插入、修改交互式按鈕。
2、教學重點
（1）交互式按鈕；
（2）復制表格。
四、教學準備
制作一個具有幾個漂亮交互式按鈕的網(wǎng)頁。
五、教學過程
1、導入
教師：現(xiàn)在我們的首頁已經(jīng)做好了，可是其他的網(wǎng)頁還沒做，但是一節(jié)課內(nèi)無法做太多的，今天呀我們就來學習制作“主機”網(wǎng)頁吧！其余的以后在做.
2、學習新課。
（1）指導學生用表格布局；
教師:用表格對網(wǎng)頁進行布局方法，前一堂課我們學習了，現(xiàn)在就請同學們，對照課本用表格給 “主機”網(wǎng)頁進行設置。
學生看書練習。
（2）指導學生學習插入交互式按鈕；
教師：在網(wǎng)頁內(nèi)經(jīng)常會插入具有超鏈接功能的按鈕，單擊這些按鈕，便可打開其他網(wǎng)頁，請同學們看下面具有交互式按鈕的網(wǎng)頁。
屏幕展示。
教師：下面我們就來學習如何制作交互式按鈕。
教師示范講解，學生觀察。
學生練習、老師巡視指導。
3、鞏固練習。
請同學們試著完成書中本課的“試一試”中的練習，在遇到困難時可小組同學相互幫助，也可以舉手問老師。
4、總結評價。
教師總結后，請同學根據(jù)自己掌握的知識情況和收獲，在本節(jié)課的“評一評”中打上自己的成績。
《網(wǎng)頁的制作》教案優(yōu)秀5
一、教學目標
1、知道站點、主頁的概念，能在指定位置建立只有一個網(wǎng)頁的站點；
2、認識FRONTPAGE的界面；
3、掌握在主頁中插入文字、圖片、水平線；
4、掌握頁面文件與圖片的保存。
二、教學重點
1、能在指定位置建立只有一個網(wǎng)頁的站點（難點）
2、能在頁面中插入文字、圖片、水平線
3、掌握頁面文件與圖片的保存（難點）
三、學情分析
學生已經(jīng)學習了WORD、POWERPOINT與上網(wǎng)瀏覽信息，對計算機的基本操作（WORD中文檔的編輯，網(wǎng)頁的瀏覽等）比較熟練。這使得學生主動探索、自主學習成為可能。每位學生必須完成基本任務，有能力的'學生還可以完成提高篇的學習，以充分發(fā)揮學生的積極性與自主性。
四、教學方法
在教學中，一方面采用比較教學的方法，促進學生知識的遷移；另一方面，提供學生一個導學，讓學生根據(jù)這個網(wǎng)絡環(huán)境下的自己探索學習，以滿足不同層次學生的需求。
五、教學過程設計
教師活動：1、引入課題：（激發(fā)興趣，活躍氣氛）
同學們喜不喜歡上網(wǎng)？經(jīng)常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網(wǎng)站）
瀏覽新浪網(wǎng)站，瀏覽的第一個頁面稱為什么？（主頁）
我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。
問題1：網(wǎng)站是不是就是網(wǎng)頁？用自己的語言描述一下網(wǎng)站的概念（網(wǎng)站包含多個網(wǎng)頁，通過超鏈接把不同的頁面鏈接起來）
問題2：網(wǎng)頁是不是就是主頁？（第一個頁面稱為主頁，網(wǎng)站設計者可以確定哪一個是主頁，主頁的文件名一般為：index.ht,主頁也是網(wǎng)頁）
設計網(wǎng)站一般必須經(jīng)過兩個步驟，首先是在計算機里做好，然后發(fā)布在internet上，讓所有的人訪問瀏覽。
今天我們學習用Frntpage建立站點，制作一個主頁。
先來研究一下沒有發(fā)布的網(wǎng)站，打開教師做的網(wǎng)站
【《網(wǎng)頁的制作》教案優(yōu)秀】相關文章：
網(wǎng)頁的制作教案01-30
網(wǎng)頁制作心得07-09
網(wǎng)頁制作的教學設計01-30
網(wǎng)頁設計與制作報告11-17
制作網(wǎng)頁教學設計10-07
網(wǎng)頁制作教學設計10-01