網(wǎng)頁模板教案5篇 “網(wǎng)頁模板”

時間：2023-04-28 16:14:21 教案

　　下面是范文網(wǎng)小編收集的網(wǎng)頁模板教案5篇 “網(wǎng)頁模板”，供大家品鑒。

網(wǎng)頁模板教案1

　　第一節(jié) 制作簡單的網(wǎng)頁

（一）教學對象分析

　　學生在學習本內(nèi)容前，已經(jīng)學習了利用Word制作簡單的網(wǎng)頁，并且初步掌握了制作網(wǎng)頁的一般流程及基本操作，具有進一步學習的能力。

（二）教學目標

　　1、了解Frontpage的界面組成及基本功能。

　　2、掌握在Frontpage中編輯文字、插入圖像的方法。

　　3、掌握在Frontpage中設(shè)置電子郵件超鏈接的方法。

　　4、培養(yǎng)學生在獲取信息的能力，使學生學會利用計算機和網(wǎng)絡(luò)搜集與準備網(wǎng)頁素材。

　　5、培養(yǎng)學生的知識遷移能力。

（三）教學重點

　　利用Frontpage制作簡單的網(wǎng)頁

（四）教學方法和手段

　　教學方法：以學生自學為主，教師輔導為輔。教學手段：多媒體網(wǎng)絡(luò)教學。

（五）教學過程

　　1、創(chuàng)設(shè)情境，導入新課：

　　展示幾幅優(yōu)秀的網(wǎng)頁作品，激發(fā)學生學習專業(yè)網(wǎng)頁制作軟件的愿望。Frontpager 功能主要體現(xiàn)在：

　　1、網(wǎng)頁編輯功能。

　　2、網(wǎng)站管理功能。

　　一、啟動Frontpage 啟動Frontpage Frontpage窗口組成二、用Frontpage制作網(wǎng)頁

　　1、輸入文字

　　2、設(shè)置字體、字號

　　3、插入剪貼畫

　　4、創(chuàng)建電子郵件超鏈接

　　三、保存網(wǎng)頁

　　四、預覽網(wǎng)頁反饋操作情況情況

　　第二節(jié) 插入表格

（一）教學目標

　　了解Frontpage中使用表格的作用。掌握在Frontpage中插入表格的方法。能熟練在表格中輸入文字、插入圖片。

（二）教學重點

　　在Frontpage 中利用表格組織網(wǎng)頁結(jié)構(gòu)。

（三）教學過程

　　導入新課，表格是網(wǎng)頁中經(jīng)常使用的一種形式，表格里不僅可以存放文字、圖像等數(shù)據(jù)，還可以作為組織網(wǎng)頁內(nèi)容的框架，使網(wǎng)頁整齊、美觀。

　　新課講授：

　　1、插入空表格

　　2、在表格中插入圖片

　　3、設(shè)置圖片屬性

　　4、輸入文字

　　5、設(shè)置表格屬性

　　6、插入表格標題

　　7、保存網(wǎng)頁、預覽網(wǎng)頁本課總結(jié)

　　第三節(jié) 創(chuàng)建表單

（一）教學目標了解表單的功能。

　　掌握在Frontpage中創(chuàng)建表單的方法。掌握在Frontpage中插入表單域的方法。

（二）教學重點表單網(wǎng)頁的結(jié)果處理。

（三）教學過程

　　復習

　　1、如何制作圖文并茂的網(wǎng)頁？

　　2、表格在網(wǎng)頁中的主要作用？

　　3、在網(wǎng)頁中插入表格有幾種方法？導入新課、創(chuàng)設(shè)情境

　　展示幾幅含有表單域的網(wǎng)頁作品，例如調(diào)查表、申請表、提問：表單與表格的異同點？講授新課

　　一、利用表單網(wǎng)頁向?qū)?chuàng)建表單

　　1、建立表單

　　2、修改表單

　　3、處理表單結(jié)果

　　4、利用表單確認模板制作表單確認頁面

　　二、制作網(wǎng)頁背景反饋操作情況本課總結(jié)

　　課后任務：利用菜單欄中的命令在網(wǎng)頁中插入表單域。

　　第四節(jié) 利用框架制作首頁

（一）教學目標了解框架的功能

　　掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超鏈接的方法。

（二）教學重點利用框架制作首頁

（三）教學過程

　　復習：

　　1、如何制作表單頁？

　　2、表單的主要作用？

　　導入新課、創(chuàng)設(shè)情境：展示模范的網(wǎng)頁作品，激發(fā)學生學習的興趣。講授新課：

　　一、利用框架制作首頁

　　1、新建框架網(wǎng)頁

　　2、設(shè)置右框中的初始網(wǎng)頁

　　3、保存網(wǎng)頁

　　4、建立左框中的網(wǎng)頁

　　二、建立超鏈接

　　二、制作網(wǎng)頁背景保存網(wǎng)頁、游覽網(wǎng)頁反饋操作情況本課總結(jié)

　　課后任務：練習其他幾種超鏈接方式。宛善網(wǎng)頁。

　　第五節(jié) 站點管理

（一）教學目標了解站點的基本知識。

　　掌握利用Frontpage建立站點的方法。掌握向站點中導入網(wǎng)頁的方法。

（二）教學重點導入超鏈接

（三）教學過程復習：

　　導入新課、創(chuàng)設(shè)情境：Frontpage不僅具有強大的網(wǎng)頁編輯功能，而且具有強大的管理站點的功能。講授新課：

　　一、建立站點

　　二、導入網(wǎng)頁

　　三、導入超鏈接本課總結(jié)

　　第六節(jié) 發(fā)布站點

（一）教學目標了解發(fā)布站點的一般流程

（二）教學重點

　　把站點發(fā)布到因特網(wǎng)上是本節(jié)的重點。

（三）教學過程復習：

　　導入新課、創(chuàng)設(shè)情境：展示因特網(wǎng)上的優(yōu)秀個人網(wǎng)站。講授新課：

　　一、把站點發(fā)布到本機

　　二、測試網(wǎng)站的表單功能

　　三、把網(wǎng)站發(fā)布到因特網(wǎng)上（介紹）本課總結(jié)

網(wǎng)頁模板教案2

　　第二章：一簡單的網(wǎng)頁（5節(jié)，含上操作課）

　　一、表格的處理

　　1、表格的寬度

　　原則：在任何一臺電腦上不應出現(xiàn)水平滾動條（垂直滾動條則允許），760。

　　2、表格的對齊方式：隱含表格的對齊方式應設(shè)為：居中對齊

　　3、表格邊框的粗細：隱含表格（邊框的值為0）

　　4、表格相應單元格“自動擴張”的解決

　　二、水平線的設(shè)置

　　1、利用標簽

　　Align:對齊方式Center:居中Right: 右對齊left: 左對齊 color:水平線的顏色width：水平線的寬度（即線有多長）

　　size：水平線的厚度（即線有多粗）noshade：是否有陰影

　　2、利用Photoshop制作水平線

　　單的水平線（垂直線）混色水平線（垂直線）

　　三、文字的輸入及編輯

　　1、空格的輸入

　　2、換行

　　1）硬換行： Enter（前后兩個段落）2)軟換行：Shift+ Enter（前后為一個段落）

　　四、圖片與文字混排

　　1、加載圖片

　　2、文字輸入項目符號和編號

　　3、圖片和文字的排列方式

　　五、波浪線的制作

　　六、加載日期（不會自動更新，僅是最近保存網(wǎng)頁的系統(tǒng)日期）

　　七、給文字增加滾動條

　　1、層的應用

　　2、層與表格的混合應用注意： 1）先加載表格

　　2）向表格中插入層，調(diào)整層的大?。ㄒ簿褪俏谋疽@示的區(qū)域）3）將層的溢出屬性設(shè)置為：Auto Position:relative(相對定位)Left:0px Top:0px

　　八、利用Photoshop處理圖片

　　1、抓取圖片

　　2、裁切圖片

　　3、在圖片上添加文字

　　4、保存圖片

　　九、設(shè)置頁面屬性

　　上

　　機

　　實

　　驗

　　一、實驗題目：

　　制作一個簡單的網(wǎng)頁

　　二、實驗目的：

　　熟悉水平線的制作方法、體會表格在網(wǎng)頁布局中的作用，當多個元素被加載在頁面中時如何排版。

　　三、實驗要求：

　　1、利用層將文本區(qū)域增加滾動條

　　2、設(shè)置水平線

　　3、對圖片和文字進行排版

　　4、增加系統(tǒng)日期

　　三、實驗步驟（請寫出在網(wǎng)頁中對文本區(qū)域設(shè)置滾動條時的操作步驟）

網(wǎng)頁模板教案3

　　網(wǎng)頁制作與設(shè)計教案

　　第一講網(wǎng)頁設(shè)計概述....................................................................................................................3 和URL.....................................................................................................................3 的使用............................................................................................................................3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 制作網(wǎng)頁的基本方法............................................................................................................4 第二講 HTML的基本標志與格式標志.......................................................................................4 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標志...........................................................................5 插入文字................................................................................................................................6 插入圖片................................................................................................................................8 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標志.......................................................................................9 插入表格................................................................................................................................9 表單的應用..........................................................................................................................10 框架窗口..............................................................................................................................10 第五講 HTML標志綜合運用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計.............................................................................13 在頁面中加入文字和圖像..................................................................................................14 超級鏈接的運用..................................................................................................................14 表格的應用.........................................................................................................................14 在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動態(tài)網(wǎng)頁設(shè)計.............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 基本數(shù)據(jù)類型.......................................................................................................................18 表達式和運算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 VBSCRIPT基本語句.............................................................................................................20

　　第一講網(wǎng)頁設(shè)計概述

【教學內(nèi)容】

　　講解網(wǎng)頁設(shè)計的相關(guān)術(shù)語及網(wǎng)站制作的基本流程?！窘虒W目的】

　　使學生對網(wǎng)站及網(wǎng)頁有一定的認識，激發(fā)學生學習網(wǎng)頁設(shè)計的興趣。【教學重點】

　　網(wǎng)頁設(shè)計中的若干術(shù)語?！窘虒W難點】

　　理解網(wǎng)頁設(shè)計中的若干術(shù)語?！窘虒W方式】

　　講授式、討論式、案例分析式?！窘虒W參考】

　　1、《網(wǎng)頁設(shè)計與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

　　2、《Internet 網(wǎng)頁工場》Wittime工作室重慶出版社。

　　3、《WEB網(wǎng)站設(shè)計》Joel Sklar著高等教育出版社。

　　4、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社。【新課內(nèi)容】

WWW和URL Web的起源

　　Web是World Wide Web的簡稱，一般也稱之為WWW或3W Web的特點和結(jié)構(gòu)

　　Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務器）工作模式

　　在瀏覽器和服務器之間應用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應用層通信協(xié)議 URL URL的完整格式

　　協(xié)議://主機名或IP地址：端口號/路徑名/文件名

IE5的使用

　　Web瀏覽器是瀏覽Internet資源的客戶端軟件

　　在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等

IE5的界面 IE5的使用

　　列表標志的使用?！窘虒W方式】

　　討論式、案例分析式、練習式?！窘虒W參考】

　　1、《網(wǎng)頁設(shè)計與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

　　2、《WEB網(wǎng)站設(shè)計》Joel Sklar著高等教育出版社。

　　3、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社。【新課內(nèi)容】

HTML文檔的基本結(jié)構(gòu)

HTML語法

　　1、雙標記

　　語法：

　　內(nèi)容

　　2、單標記語法：最常用的單標記是

　　3、標記屬性語法

　　屬性1 屬性2 屬性3 … > 例子

　　4、注釋語句格式

　　例子

HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】

　　通過本次課的學習,要求能熟練掌握網(wǎng)頁面的基本標志與格式標志,并能靈活運用列表,有序列表,無序列表標志及屬性。

　　第三講 HTML的文本、圖片與超級鏈接標志

【教學內(nèi)容】

　　講解HTML標準中的文本、圖片與超級鏈接標志【教學目的】

* 使學生了解標題元素,掌握字體,上下標,及特殊字符的標志。

......，強調(diào)文字，通常用斜體。

......，特別強調(diào)的文字，通常用黑體。

......，以等寬體顯示西文字符。

......，使文字大小相對于前面的文字增大一級。

......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標。......，使文字成為前一個字符的下標。......，使文字顯示為閃爍效果。

　　文本修飾

　　預格式化文本使用預格式化標記不再忽略在此之間的空格、制表符與回車符等元素轉(zhuǎn)義字符與特殊字符

　　一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個轉(zhuǎn)義符之間不能有空格文本強制換行和不換行文本強制換行

　　不換行插入水平線使用標記

　　屬性：Width，Size，Align，Noshade，color 使用列表

　　1、無序列表列表條目1 列表條目2......2、有序列表

　　列表條目1 列表條目2......3、定義列表列表條目1 條目1的說明列表條目2 條目2的說明 ……

...... 圖像地圖【課后小結(jié)】

　　本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標志與相應屬性，熟練運用這些標志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學習HTML中超級鏈接標志的難點。

　　第四講 HTML表格、表單與框架標志

【教學內(nèi)容】

　　講解HTML中制作表格、表單與框架的標志?！窘虒W目的】

　　使學生掌握簡單表格、表單與框架的制作?！窘虒W重點】

* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性?！窘虒W難點】

* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現(xiàn)的基本思想。* 理解框架屬性name、target的意義。

* 理解表單中相應元素對應標志及屬性的含義?！窘虒W方式】

　　案例分析式、項目教學【教學參考】

　　1、《網(wǎng)頁設(shè)計與制作》楊尚森曲宏山賈文峰等著電子工業(yè)出版社。

　　2、《WEB網(wǎng)站設(shè)計》Joel Sklar著高等教育出版社。

　　3、《HTML網(wǎng)頁制作教程》材義語編著鐵道出版社。【新課內(nèi)容】

插入表格

在網(wǎng)頁中插入表格

　　表格的基本構(gòu)成元素：表頭，單元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列

　　FrameSpacing="2“

　　BorderColor="#008000“ >

子窗口屬性設(shè)置

常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分

（3）目錄和標題，分為左上、左下、右三部分

（4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分不支持框架的網(wǎng)頁

　　很抱歉，饋下使用的瀏覽器不支援框架功能，請轉(zhuǎn)用新的瀏覽器。

網(wǎng)頁模板教案4

　　注意：做為一個優(yōu)秀的網(wǎng)站工作者及維護者應該有很強的邏輯思維能力（即所有的文件都放在什么位置自己心里要有譜，管理維護起來能夠得心應手），不能讓打開你網(wǎng)站的用戶感到“亂的一塌糊涂”。

　　第一章：站點的管理及文本的應用

（15節(jié)，含上機操作課）

　　一、站點的操作

　　1、新建站點（a）：

　　新建一個網(wǎng)站，所有資源手動放置在站點所對應的文件夾（或者子文件夾）下面。

　　2、新建站點（b）：

　　網(wǎng)站已事先做好，新建一個站點是為了維護網(wǎng)站的方便，即修改網(wǎng)頁內(nèi)容的方便。

　　3、刪除站點：站點所對應的主文件夾及里面的資源依然存在。

　　4、編輯站點：若改變站點所對應的路徑，則文件夾里面的資源將丟失。

　　二、為什么要引入“站點”的概念

　　1、管理維護的方便

　　2、解決文件調(diào)用時絕對路徑（站點根目錄）和相對路徑（文檔）的問題

　　3、一般情況下，站點與網(wǎng)站的主文件夾是一一對應的，不能出現(xiàn)冗余的情況。

　　三、建立站點時應注意

　　1、站點名稱、網(wǎng)站對應的主文件夾及主文件夾下所對應的所有資源的名稱一律不能用漢字命名

　　2、本地根文件夾書寫時避免發(fā)生以下錯誤： 1）D;toyato2)D:/toyato3) 4)D: toyato(不要留有空格)5）D： toyato

　　3、能夠正確區(qū)分站點名稱與本地根文件夾（網(wǎng)站所對應的主文件夾）的異同

　　4、切忌將所有的資源全部放在根文件夾下，合理利用子文件夾

　　5、文件夾的層次不要太深，一般合理就行

　　四、文本字體的輸入及屬性的設(shè)置

　　1、文本的輸入

　　2、空格的輸入

　　3、標點符號的輸入

　　4、如何將文本類型設(shè)置為特殊字體（操作系統(tǒng)中默認沒有的字體）

　　五、將文本設(shè)置為動態(tài)文本

　　1、將文本放置在和之間

　　2、中參數(shù)的設(shè)置及輸入方法

　　3、中參數(shù)的意義 1）behavior：滾動方式

　　Alternate：左右或者上下交替滾動 Scroll：循環(huán)滾動

　　slide：滾動一次到達邊界后靜止

　　2）bgcolor：滾動區(qū)域的背景顏色3）height、width：滾動區(qū)域高度及寬度 4）direction：文本的滾動方向

　　up ：向上滾動 down：向下滾動 left：向左滾動 right：向右滾動

　　5）onClick(單擊)、onDblClick（雙擊）、onMouseOut（鼠標移開）、onMouseOver（鼠標經(jīng)過）時文本的運動狀態(tài)

　　例如：onMouseOut="()" onMouseOver="()" 說明：

()：當前的對象停止運動 ()：當前的對象開始運動

　　6）scrollamount：設(shè)定活動字幕的滾動速度，單位為像素 7）scrolldelay：設(shè)定活動字幕兩次之間的延遲時間，單位為毫秒，值大了會有一步一停的效果。

　　8）loop：循環(huán)滾動的次數(shù) 若值為-1，無限循環(huán)

　　注意：N(n>=o)，循環(huán)n次后停止?jié)L動，若n為小數(shù)，則自動取整，為去掉小數(shù)點后的整數(shù)

　　上機實驗

　　一、實驗題目：

　　1、熟悉站點的常規(guī)操作

　　2、文本的輸入及屬性設(shè)置

　　二、實驗要求：

　　1、建立一個站點，并將所有文件放在站點對應的文件夾下

　　2、建立一個網(wǎng)頁，向其中輸入文本

　　3、對文本的屬性進行設(shè)置

　　4、將文本設(shè)置為滾動文本，當鼠標經(jīng)過文本時停止?jié)L動，鼠標移開文本時開始滾動。

　　三、實驗步驟（請寫出在對文本進行相關(guān)設(shè)置后，“代碼視圖”中關(guān)于文字修飾的相應代碼）