第一篇:HTML 教案
HTML語言
一、基本元素
1.html元素:… 2.head元素:
… 3.title元素:在瀏覽器標(biāo)題欄和windows任務(wù)欄上顯示第二篇:html教案
《HTML基礎(chǔ)》教案
教材:《dreamweaver cs3網(wǎng)頁制作與實(shí)訓(xùn)》
執(zhí)教:羅執(zhí)清
一、教學(xué)目標(biāo):
1、了解HTML的概念、作用及特點(diǎn)
2、理解HTML文檔結(jié)構(gòu)
3、掌握標(biāo)簽的使用規(guī)范
4、了解常用標(biāo)簽的用法
二、教學(xué)重點(diǎn):
1、HTML文件結(jié)構(gòu)
2、標(biāo)簽使用規(guī)范
3、常用標(biāo)簽的使用
三、教學(xué)難點(diǎn): HTML概念的理解
四、教學(xué)方法:
直觀演示和任務(wù)驅(qū)動相結(jié)合
五、教學(xué)過程:
1、回顧站點(diǎn)管理相關(guān)操作
2、HTML概念及作用
3、HTML文件結(jié)構(gòu)
:HTML文檔開始。
:文檔頭部開始。HTML基礎(chǔ):文檔標(biāo)題。
:文檔頭部結(jié)束。
:文檔主體開始。一個簡單的網(wǎng)頁:文檔主體內(nèi)容,它是網(wǎng)頁的最主要部分。
第三篇:HTML教案第四章
第9次課 CSS基礎(chǔ) 課時:4課時
一、教學(xué)目標(biāo)
1.2.3.4.會創(chuàng)建無下劃線的超鏈接樣式 會創(chuàng)建統(tǒng)一外觀的字體文本 會創(chuàng)建個性化的表單 會創(chuàng)建個性化的表格
二、教學(xué)重點(diǎn)
1.樣式的基本語法
2.會創(chuàng)建常見的樣式:統(tǒng)一的文字、顏色等外觀、無下劃線的超鏈接、細(xì)邊框輸入框
三、教學(xué)難點(diǎn)
內(nèi)嵌樣式、行內(nèi)樣式、樣式表文件的使用場合
四、教學(xué)過程
【回顧】[10分鐘] 回顧之前所學(xué)基本標(biāo)簽,引導(dǎo)學(xué)生在網(wǎng)頁美化以及格式修改中遇到的問難。從而引入樣式表。
前幾次課所學(xué)的標(biāo)簽,在網(wǎng)頁中呈現(xiàn)出的效果,比較簡單,樣式比較單一。CSS主要用于改變網(wǎng)頁中標(biāo)簽的樣式,使網(wǎng)頁變得更華麗。可以從外觀上更能吸引讀者。CSS相當(dāng)于華麗的衣服樣式表能實(shí)現(xiàn)內(nèi)容與樣式的分離,方便團(tuán)隊開發(fā)。
1.樣式表的基本語法[10分鐘]
1)樣式表的基本結(jié)構(gòu)。2)樣式規(guī)則并舉例說明。3)引入類樣式。
? 課堂案例:樣式表的基本語法
2.文本屬性[10分鐘] 引入:
首先從文本的大小,顏色,字體等來描述文本屬性。強(qiáng)調(diào)用樣式來實(shí)現(xiàn)文本的大小顏色字體的顯示的好處
5.方框?qū)傩訹15分鐘]
? 引入:
首先從文本的大小,顏色,字體等來描述文本屬性。? 講解要點(diǎn):
1)盒子模式:以網(wǎng)頁中放入的一副圖片,說明盒子模式設(shè)計的各種邊界、填充、邊框的含義。
2)應(yīng)用邊框?qū)傩?、填充屬性,制作常見的表格多列中分界線樣式。3)應(yīng)用邊框?qū)傩?,制作?xì)邊框輸入框樣式。
? 課堂案例:
6.特殊樣式[5分鐘]
? 講解要點(diǎn):
無下劃線的超倆鏈接的制作方法。? 課堂案例:
7.課堂練習(xí)2[10分鐘]
編寫如下圖所示效果對應(yīng)的HTML代碼
一、作業(yè)布置
參考答案:
第四篇:HTML教案第五章
課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
《HTML》理論課教案
第5章 使用Dreamweaver制作網(wǎng)頁
一、整章授課思路 [100分鐘].................................................................................................................2 1.2.3.4.5.6.7.8.9.10.回顧、預(yù)習(xí)檢查、任務(wù)、目標(biāo)部分 [10分鐘].......................................................2 基本標(biāo)簽的使用[10分鐘]........................................................................................2 表格的使用,創(chuàng)建表格布局頁面[10分鐘].............................................................3 課堂練習(xí)1[10分鐘]................................................................................................3 表單的使用,結(jié)合表格布局進(jìn)行使用 [10分鐘]...................................................4 課堂練習(xí)2 [10分鐘]................................................................................................4 制作框架網(wǎng)頁[10分鐘]............................................................................................4 制作樣式表 [15分鐘]..............................................................................................5 課堂練習(xí)3 [10分鐘]................................................................................................5 總結(jié)[5分鐘].............................................................................................................5
二、學(xué)員問題匯總.....................................................................................................................................5
三、作業(yè)布置.............................................................................................................................................6
-課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
結(jié)合如何制作一個圖文并茂的頁面示例,仿效演示并穿插講解:
1)2)3)4)5)6)如何設(shè)置頁面背景、標(biāo)題。如何插入圖片。
如何插入段落、換行。如何設(shè)置超鏈接。
如何格式化文本:文字顏色、字號等 如何插入項(xiàng)目列表
3.表格的使用,創(chuàng)建表格布局頁面[10分鐘]
講解重點(diǎn):
結(jié)合如何制作一個新產(chǎn)品展示表格頁面,依次演示并穿插講解:
1.創(chuàng)建跨行或跨列的表格。2.設(shè)置表格背景
3.設(shè)置單元格背景色,對齊方式。
4.課堂練習(xí)1[10分鐘]
練習(xí)使用表格布局多張圖片,關(guān)鍵是設(shè)置表格的邊框、填充、邊界均為0。
教案
課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
1)2)如何制作框架窗口。
如何設(shè)置超鏈接打開目標(biāo)窗口。
8.制作樣式表 [15分鐘]
結(jié)合如何美化表格頁面、制作圖片按鈕、依次演示并穿插講解:(1)如何使用Dreamweaver制作各類樣式。(2)如何應(yīng)用樣式
如何使用Dreamweaver制作樣式,參考文件夾“補(bǔ)充案例使用Dreamweaver制作樣式實(shí)例.htm”
9.課堂練習(xí)3 [10分鐘] 練習(xí)上述講解的各種樣式
10.總結(jié)[5分鐘] 7)8)9)10)創(chuàng)建表格最少需要那三個標(biāo)簽? 簡述表格的基本結(jié)構(gòu)。
跨行跨列的表格,主要在什么情況下使用? 給你一個表格,你會從哪些方面進(jìn)行美化?
二、學(xué)員問題匯總
? 問題1:
答:。。。? 問題2:
--6 課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
第五篇:HTML教案第三章
課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
《HTML》理論課教案
第3章 表單和框架
一、整章授課思路 [100分鐘].................................................................................................................2 1.2.2.1 2.2 2.3 3.3.1 3.2 4.5.5.1 5.2 5.3 5.4 5.5 6.回顧、預(yù)習(xí)檢查、任務(wù)、目標(biāo)部分 [10分鐘].....................................................3 [表單頁面的基本結(jié)枸[10分鐘].............................................................................3 為什么需要表單?.......................................................................3 表單包含的控件:.......................................................................3 表單頁面的基本結(jié)構(gòu)。...............................................................3 各種表單控件的逐一介紹[20分鐘].......................................................................4 表單元素的統(tǒng)一格式。...............................................................4 各種表單元素逐一介紹,先講解語法,然后舉例...................4 課堂練習(xí)[15分鐘]...................................................................................................5 框架[25分鐘]...........................................................................................................6 框架窗口的組成...........................................................................6 框架的使用場合。.......................................................................6 框架的基本結(jié)構(gòu)。.......................................................................6 如何創(chuàng)建多個復(fù)雜的窗口。.......................................................6 如何設(shè)置窗口鏈接的顯示位置。...............................................6 課堂練習(xí)2[15分鐘]................................................................................................7 編寫如下圖所示效果對應(yīng)的html代碼..............................................................................7 7.總結(jié)[5分鐘].............................................................................................................7
二、學(xué)員問題匯總.....................................................................................................................................7
三、作業(yè)布置.............................................................................................................................................7
-單行文本輸入框(TEXT)密碼框(PASSWORD)單選按鈕(RADIO)復(fù)選框(CHECKBOX)下拉列表框(SELECT)按鈕:重置按鈕(RESET)、提交按鈕(SUBMIT)、普通按鈕(BUTTON)多行文本框(TEXTAREA)課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
送到腳本,而不使用請求字符串。語法:method=(get|post)? 課堂案例:表單的基本結(jié)構(gòu) ? 補(bǔ)充案例:詳細(xì)介紹post和get提交方式的區(qū)別。
get傳送的數(shù)據(jù)量較小,不能大于2KB。post傳送的數(shù)據(jù)量較大。POST一般用于提交的信息比較大的情況,它比GET要安全,因?yàn)橛伤峤坏男畔⒉粫@示在瀏覽器地址欄上,而GET則用于提交信息比較小的情況,它的速度比POST要快,但是安全性低,因原因是提交的信息會在瀏覽器地址欄中顯示出來,例如提交密碼就不能用GET,必須用POST。當(dāng)我們提交的信息較少且對安全要求不高的時候就可以使用GET,比如百度搜索(演示)。
3.各種表單控件的逐一介紹[20分鐘]
3.1 表單元素的統(tǒng)一格式。
常用屬性有:
? type:指定表單元素的類型??捎玫倪x項(xiàng)有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默認(rèn)值為TEXT。
? NAME:指定表單元素的名稱。例如,如果表單上有幾個文本框,可以按照名稱來標(biāo)識它們教案 課程名稱:使用HTML語言開發(fā)商業(yè)站點(diǎn)
教案
5.框架[25分鐘]
5.1 框架窗口的組成 ? ? ? ? ? 框架集頁面(FrameSet.htm)廣告欄頂部框架(top.htm)框架的邊框
導(dǎo)航欄左側(cè)框架(left.htm)詳細(xì)內(nèi)容頁面右側(cè)框架(main.htm)5.2 框架的使用場合。
? 在頁面的一個固定部分顯示Logo或靜態(tài)信息
? 左側(cè)框架顯示目錄,右側(cè)框架顯示內(nèi)容,用戶只需單擊左側(cè)窗口的目錄,在右側(cè)窗口中就會顯示相應(yīng)內(nèi)容,如網(wǎng)上在線學(xué)習(xí)教程、論壇、后臺管理、產(chǎn)品介紹等。
? 框架能有機(jī)地把多個頁面組合在一起,這多個頁面之間可互相獨(dú)立,卻又可相互聯(lián)系。
5.3 框架的基本結(jié)構(gòu)。
? (框架)
?
(框架集)頁面的結(jié)構(gòu)是通過屬性rows和cols來設(shè)置的,根據(jù)框架的分割方式可分為:上下分割窗口、左右分割窗口、嵌套分割窗口。? 演示將