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