每個人都曾試圖在平淡的學習、工作和生活中寫一篇文章。寫作是培養人的觀察、聯想、想象、思維和記憶的重要手段。相信許多人會覺得范文很難寫？以下是我為大家搜集的優質范文，僅供參考，一起來看看吧

網頁制作教學設計篇一

課程編號：

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

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

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

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

網頁制作教學設計篇二

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、總結與評價

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

網頁制作教學設計篇三

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郵箱頁面等，引導學生總結本課內容，梳理課堂知識，并讓學生分組，推薦一些優秀作品進行全班展示。

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