《網頁的制作》教案優秀

【熱】《網頁的制作》教案優秀5篇

　　作為一無名無私奉獻的教育工作者，就難以避免地要準備教案，編寫教案有利于我們科學、合理地支配課堂時間。怎樣寫教案才更能起到其作用呢？下面是小編為大家整理的《網頁的制作》教案優秀，供大家參考借鑒，希望可以幫助到有需要的朋友。

《網頁的制作》教案優秀1

　　一、課程基本信息

　　課程編號：

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

　　英文名稱：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%

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

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

《網頁的制作》教案優秀2

　　一、教學目標

　　1、知道站點、主頁的概念，能在指定位置建立只有一個網頁的站點；

　　2、認識FRONTPAGE的界面；

　　3、掌握在主頁中插入文字、圖片、水平線；

　　4、掌握頁面文件與圖片的保存。

　　二、教學重點

　　1、能在指定位置建立只有一個網頁的站點（難點）

　　2、能在頁面中插入文字、圖片、水平線

　　3、掌握頁面文件與圖片的保存（難點）

　　三、學情分析

　　學生已經學習了WORD、POWERPOINT與上網瀏覽信息，對計算機的基本操作（WORD中文檔的編輯，網頁的瀏覽等）比較熟練。這使得學生主動探索、自主學習成為可能。每位學生必須完成基本任務，有能力的學生還可以完成提高篇的學習，以充分發揮學生的積極性與自主性。

　　四、教學方法

　　在教學中，一方面采用比較教學的方法，促進學生知識的遷移；另一方面，提供學生一個導學課件，讓學生根據這個網絡環境下的課件自己探索學習，以滿足不同層次學生的需求。

　　五、教學過程設計

　　教師活動：1、引入課題：（激發興趣，活躍氣氛）

　　同學們喜不喜歡上網？經常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網站）

　　瀏覽新浪網站，瀏覽的第一個頁面稱為什么？（主頁）

　　我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。

　　問題1：網站是不是就是網頁？用自己的語言描述一下網站的概念（網站包含多個網頁，通過超鏈接把不同的頁面鏈接起來）

　　問題2：網頁是不是就是主頁？（第一個頁面稱為主頁，網站設計者可以確定哪一個是主頁，主頁的文件名一般為：index.htm,主頁也是網頁）

　　設計網站一般必須經過兩個步驟，首先是在計算機里做好，然后發布在internet上，讓所有的人訪問瀏覽。

　　今天我們學習用Frontpage建立站點，制作一個主頁。

　　先來研究一下沒有發布的.網站，打開教師做的網站

　　問：同學們看到了什么？（文件夾）

　　總結：

　　可以這樣理解網站：在資源管理器里，網站表現為一個文件夾，里面存放的是所有與網站相關的文件。

　　打開主頁，瀏覽頁面，這是老師做的一個導學課件，將幫助大家完成學習任務。

　　請學生瀏覽教師課件，了解學習任務

　　2、新建站點

　　FP的啟動

　　問：與word比較，有什么不同？

　�。ㄔ黾恿艘晥D區，編輯區有三個窗口）

　　總結：

　　視圖區：多種視圖模式是為了方便網站的管理。制作網頁時，必須在網頁視圖中編輯頁面

　　普通窗口：鼠標在閃動，可編輯、修改頁面，所見即所得的方式

　　預覽窗口：瀏覽器中出現的效果，與PowerPoint中的“放映幻燈片”類似。

　　Html窗口：編寫HTML（超文本標記語言，它是描述網頁內容和外觀的標準。）

　　打開導學軟件，根據步驟，示范建立只有一個網頁的站點，強調新站點的位置、路徑的正確輸入，站點的名稱。

　�。ń虝�學生利用導學課件，根據導學軟件完成任務）

　　任務1：學生根據導學課件，在d:建立自己站點

　　教師巡視指導

　　請一位學生示范如何建立站點，教師總結

　　問：在文件夾列表中看到了什么？

　　分析多出的文件夾列表欄，多了一個文件夾，里面有兩個子文件夾和主頁，圖片存放在images文件夾中）

　　3、編輯主頁與保存主頁

　　看效果圖，請學生分析主頁中的元素

　　總結：鮮明的主題，如：我的世界、我的寵物等，有分割頁面的水平線，與主題相關的圖片，對網站的簡單介紹

　　根據導學軟件，學生完成任務2：設計主頁、保存主頁與圖片

　　教師巡視指導

　　4、總結反饋

　　請學生示范，講解如何插入圖片（來自剪貼畫與來自文件）、插入水平線，如何保存

　　總結：必須切換到“普通”窗口下編輯

　　主頁的保存中存在問題：

　　單擊“文件”----“保存”或工具欄的“保存”按扭，彈出一個對話框，保存嵌入式文件，改變文件夾，圖片必須保存在本站點images文件夾中，便于站點的管理。

　　5、請學生繼續完成自己的主頁，有能力的同學完成提高篇

　　教師巡視指導

　　6、教師與學生共同評價總結

　　展示學生作品，教師與學生共同評價

　　請學生總結今天的學習內容：建立包含一個頁面的站點，主頁的設計與保存。

　　學生活動：學生回答問題、學觀察鼠標指針、學生回答問題、學生觀察網站的表現形式、齊聲回答、學生瀏覽課件，并了解本節課的學習任務、學生觀察FP界面與word的不同、學生回答、學生觀察教師演示不同編輯窗口的區別。學生上機操作，在指定位置建立自己站點、請先做好的學生當小老師，輔導其它學生。學生回答、學生操作，同桌互相幫助，并參考教師做的課件，利用網絡環境下的課件自己探索學習，滿足不同層次學生的需求、學生總結

　　注：課件中包含每一個操作過程的操作步驟及拓展的知識、基本任務與提高任務的效果圖。

　　點評：

　　教學課題“網頁制作”作為初中階段的最后一部分內容，難度較大，教學的深度較難掌握。這就要教師在備教材的基礎上，同時還要備學生，做到對學生的情況有較為深刻地了解，以便很好地完成教學任務，達到預期的教學效果。根據教材和《中小學信息技術課程指導綱要（試行）》中的精神，本課應以“任務驅動”的方式完成，一方面教會學生了解和熟悉具體軟件的基本功能，另一方面又能主動地掌握并深入學習思考。尋著這個思路授課教師在課前作了大量的課前準備制作出了相應的教學課件“網頁制作”。

　　一、調動學生的學習熱情，變被動學習為主動學習

　　整個教學過程張云老師采取了“引導加任務驅動”的模式進行。首先教師進行導入，導入概念，強調概念；再引導學生學習課件的使用，引導他們讀懂課件中的第一個任務：建立一個只有一頁的網站，（此處若能引導學生，由學生來完成，減少老師的操作，效果會更好），然后讓學生模仿第一步的操作進行下面內容的學習，完成導學材料中給出的一個個任務。

　　二、突出重點，及時點評

　　張云老師在引導學生進行學習、操作后，就主動地去觀察和發現學生中出現的問題，甚至于課前對可能出現的問題，也進行有預見性地準備；發現問題及時點評。（點評分為個別點評和全班點評，點評不等于教師將操作過程演示一遍。張云老師在點評建成的網站時，重點若再突出些，介紹再清楚些，效果會更好。比如：站點中內容說明不夠清楚等。）

　　三、發揮學生的協作學習精神

　　張云老師在教學過程中，對有困難的學生進行個別輔導，同時還需發揮學生的協作學習的精神，充分調動學生學習的積極性，讓學有余力的學生充當“小老師”，從而體會到學習的樂趣。（整個教學過程中，這點做地不夠，沒有充分地讓師生互動起來）

　　四、重點突出、目標明確

　　最后，張老師在整個教學過程中，應再突出教學重點，明確本節課的任務。（課前的導入，最好給出教學目標，課后的小結應讓學生總結他本堂課學習到哪些知識，所以感覺這節課重點不突出，內容分散。）

　　五、教學效果較好

　　由于張云老師在課前對本課作了大量的準備工作，課件制作效果較好，所以學生完成情況很好，教學任務完成情況較好。

《網頁的制作》教案優秀3

　　學習目標:

　　制作框架網頁、在網頁中插入字幕和超鏈接知識

　　1.制作框架網頁

　　框架網頁是一種特殊的HTML網頁，它將窗口劃分成若干小窗口區域（框架）。每個框架獨立顯示一個不同的網頁（有自己的網頁名字），整個框架網頁有一個總的名字。

　　框架與表格在組織網頁結構時相似。表格是對頁面區域進行劃分，框架是對整個瀏覽窗口進行劃分。

　　·創建框架網頁：單擊菜單“文件”→“新建”→“網頁”，選擇“框架網頁”標簽→選擇“嵌套式層次結構”

　　·選中的框架邊框為藍色，在拆分或刪除框架時應注意是否選中。

　　·隱藏框架間的橫線：

　　右擊框架網頁→單擊“框架屬性”→在對話框中單擊“框架網頁”按鈕，在“網頁屬性”對話框中選“框架”標簽→設置“顯示邊框”為未選中狀態。

　　·按住Ctrl鍵，拖動鼠標可以快速拆分框架。

　　·刪除框架：單擊菜單“框架”→“刪除框架”。

　　·保存框架網頁時注意要保存所涉及到的所有網頁。

　　·更改框架鏈接的網頁：

　　右擊相應的超鏈接→在彈出的快捷菜單上選擇“超鏈接屬性”命令，打開“編輯超鏈接”對話框

　　→可直接選擇列出的文件，或在“URL”框中輸入網頁的地址

　　→單擊“目標框架”右邊的“更改目標框架”按鈕，在“當前框架網頁”中選擇目標框架。

　　2.網頁中插入字幕

　　·插入字幕：光標定位插入點→單擊“插入”→“組件”→“字幕”打開“字幕屬性”對話框；

　　→在文本框中輸入文字，選擇“方向”、“速度”、“表現方式”等；

　　→選中字幕，拖動鼠標，調節字幕運動范圍。

　　·修改字幕：雙擊字幕，可以打開“字幕屬性”對話框，對字幕屬性進行修改。

　　3.超鏈接相關網頁

　　超鏈接是從一個網頁指向另一個目標的連接。一般在網頁中的某文字或圖片上設置超鏈接。

　　·創建超鏈接：單擊文字或圖片→“常用”工具欄的“超鏈接”按鈕，打開“創建超鏈接”對話框。

　　·取消超鏈接：選中具有超鏈接的文本或圖片，單擊“超鏈接”按鈕，在打開的`對話框中將URL欄中的內容刪除。

　　·跟蹤超鏈接：

　　在超鏈接上右擊，在打開的快捷菜單上選擇“跟蹤超鏈接”命令；

　　或：在普通視圖中，按住Ctrl鍵，將光標移到超鏈接上，單擊，會跟蹤連接到超鏈接指向的目的位置。

　　·設置超鏈接文本的顏色：網頁中超鏈接文本的顏色共有3種：未訪問過的，當前正在訪問的，已訪問過的。FrontPage默認這3種顏色分別為藍色，紅色、深藍色。單擊“格式”→“背景”→在“網頁屬性”對話框→選“背景”標簽，選定“超鏈接”、“已訪問過的超鏈接”、“當前超鏈接”的顏色。

　　作業：

　　新建框架網頁，建立超鏈接，在網頁中插入字幕。7.2制作網頁（框架）這一教案

《網頁的制作》教案優秀4

　　一、教材分析

　　首頁之外的其他網頁在結構上很相似，為了給這些網站增加一些亮點，故在網頁中插入了交互式按鈕，交互式按鈕不僅具有超鏈接功能，在使用過程中還會發生變化，更能引起學生的學習興趣。

　　二、教學目標

　　1、知識性目標

　�。�1）了解交互式按鈕的功能；

　�。�2） 了解計算機主機包括的部件；

　�。�3）了解網頁動態效果。

　　2、技能性目標

　�。�1）會設置網頁的目錄；

　�。�2）學會插入、修改交互式按鈕；

　�。�3）學會復制表格。

　　3、情感性目標

　�。�1）加深對計算機硬件的認識；

　�。�2）培養學生分工協作的精神。

　　三、教學重、難點

　　1、教學重點

　�。�1）交互式按鈕的`功能；

　�。�2）插入、修改交互式按鈕。

　　2、教學重點

　�。�1）交互式按鈕；

　�。�2）復制表格。

　　四、教學準備

　　制作一個具有幾個漂亮交互式按鈕的網頁。

　　五、教學過程

　　1、導入

　　教師：現在我們的首頁已經做好了，可是其他的網頁還沒做，但是一節課內無法做太多的，今天呀我們就來學習制作“主機”網頁吧！其余的以后在做.

　　2、學習新課。

　�。�1）指導學生用表格布局；

　　教師:用表格對網頁進行布局方法，前一堂課我們學習了，現在就請同學們，對照課本用表格給 “主機”網頁進行設置。

　　學生看書練習。

　�。�2）指導學生學習插入交互式按鈕；

　　教師：在網頁內經常會插入具有超鏈接功能的按鈕，單擊這些按鈕，便可打開其他網頁，請同學們看下面具有交互式按鈕的網頁。

　　屏幕展示。

　　教師：下面我們就來學習如何制作交互式按鈕。

　　教師示范講解，學生觀察。

　　學生練習、老師巡視指導。

　　3、鞏固練習。

　　請同學們試著完成書中本課的“試一試”中的練習，在遇到困難時可小組同學相互幫助，也可以舉手問老師。

　　4、總結評價。

　　教師總結后，請同學根據自己掌握的知識情況和收獲，在本節課的“評一評”中打上自己的成績。

《網頁的制作》教案優秀5

　　一、教學目標

　　1、知道站點、主頁的概念，能在指定位置建立只有一個網頁的站點；

　　2、認識FRONTPAGE的界面；

　　3、掌握在主頁中插入文字、圖片、水平線；

　　4、掌握頁面文件與圖片的保存。

　　二、教學重點

　　1、能在指定位置建立只有一個網頁的站點（難點）

　　2、能在頁面中插入文字、圖片、水平線

　　3、掌握頁面文件與圖片的保存（難點）

　　三、學情分析

　　學生已經學習了WORD、POWERPOINT與上網瀏覽信息，對計算機的基本操作（WORD中文檔的編輯，網頁的瀏覽等）比較熟練。這使得學生主動探索、自主學習成為可能。每位學生必須完成基本任務，有能力的'學生還可以完成提高篇的學習，以充分發揮學生的積極性與自主性。

　　四、教學方法

　　在教學中，一方面采用比較教學的方法，促進學生知識的遷移；另一方面，提供學生一個導學，讓學生根據這個網絡環境下的自己探索學習，以滿足不同層次學生的需求。

　　五、教學過程設計

　　教師活動：1、引入課題：（激發興趣，活躍氣氛）

　　同學們喜不喜歡上網？經常上新浪、西祠胡同等，有沒有同學知道新浪、西祠胡同稱做什么？（網站）

　　瀏覽新浪網站，瀏覽的第一個頁面稱為什么？（主頁）

　　我們還可以瀏覽其它的頁面，點擊超鏈接瀏覽，當鼠標變成手指的形狀時有超鏈接。

　　問題1：網站是不是就是網頁？用自己的語言描述一下網站的概念（網站包含多個網頁，通過超鏈接把不同的頁面鏈接起來）

　　問題2：網頁是不是就是主頁？（第一個頁面稱為主頁，網站設計者可以確定哪一個是主頁，主頁的文件名一般為：index.ht,主頁也是網頁）

　　設計網站一般必須經過兩個步驟，首先是在計算機里做好，然后發布在internet上，讓所有的人訪問瀏覽。

　　今天我們學習用Frntpage建立站點，制作一個主頁。

　　先來研究一下沒有發布的網站，打開教師做的網站

【《網頁的制作》教案優秀】相關文章：

《網頁的制作》教案優秀03-29

網頁的制作教案01-30

網頁制作教學設計優秀10-17

網頁制作合同[優秀]07-12

網頁制作心得07-09

網頁制作的教學設計01-30

網頁設計與制作報告11-17

制作網頁教學設計10-07

網頁制作教學設計10-01