HTML教案第四章資料_第1頁
HTML教案第四章資料_第2頁
HTML教案第四章資料_第3頁
HTML教案第四章資料_第4頁
HTML教案第四章資料_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

《 HTML 》理論課教案第4章CSS樣式表TOC\o"1-3"\u一、 整章授課思路[100分鐘] 21. 回顧、預(yù)習檢查、任務(wù)、目標部分[10分鐘] 22. [表單頁面的基本結(jié)枸[10分鐘] 32.1 為什么需要表單？ 32.2 表單包含的控件： 32.3 表單頁面的基本結(jié)構(gòu)。 33. 各種表單控件的逐一介紹[20分鐘] 43.1 表單元素的統(tǒng)一格式。 43.2 各種表單元素逐一介紹，先講解語法，然后舉例 44. 課堂練習[15分鐘] 55. 框架[25分鐘] 55.1 框架窗口的組成 55.2 框架的使用場合。 55.3 框架的基本結(jié)構(gòu)。 55.4 如何創(chuàng)建多個復(fù)雜的窗口。 55.5 如何設(shè)置窗口鏈接的顯示位置。 56. 課堂練習2[15分鐘] 67. 總結(jié)[5分鐘] 6二、 學(xué)員問題匯總 6三、 作業(yè)布置 6

課時：3課時本章工作任務(wù)制作并美化“登陸”頁面：美化“寶貝分類”頁面本章技能目標會創(chuàng)建無下劃線的超鏈接樣式會創(chuàng)建統(tǒng)一外觀的字體文本會創(chuàng)建個性化的表單會創(chuàng)建個性化的表格本章重點樣式的基本語法會創(chuàng)建常見的樣式：統(tǒng)一的文字、顏色等外觀、無下劃線的超鏈接、細邊框輸入框本章難點內(nèi)嵌樣式、行內(nèi)樣式、樣式表文件的使用場合本章單詞整章授課思路[100分鐘]采用邊講邊練的方式，講解順序如下：為什么需要CSS演示表。樣式表的基本語法。逐一介紹常用的樣式屬性并舉例：文本屬性、背景屬性、方框?qū)傩?、無下劃線的超文本鏈接樣式，中間穿插課堂練習。樣式表的三類應(yīng)用方式：行內(nèi)、內(nèi)嵌、外部樣式表?；仡?、預(yù)習檢查、任務(wù)、目標部分[10分鐘]根據(jù)PPT中提供的問題，逐一提問學(xué)員，注意給予學(xué)員引導(dǎo)，建立學(xué)員的信心。為什么需要CSS樣式表[10分鐘]為什么需要CSS樣式表？引入：前幾次課所學(xué)的標簽，在網(wǎng)頁中呈現(xiàn)出的效果，比較簡單，樣式比較單一。CSS主要用于改變網(wǎng)頁中標簽的樣式，使網(wǎng)頁變得更華麗?？梢詮耐庥^上更能吸引讀者。CSS相當于華麗的衣服樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā)。樣式表的基本語法[10分鐘]樣式表的基本結(jié)構(gòu)。樣式規(guī)則并舉例說明。引入類樣式。課堂案例：樣式表的基本語法文本屬性[5分鐘]引入：首先從文本的大小，顏色，字體等來描述文本屬性。強調(diào)用樣式來實現(xiàn)文本的大小顏色字體的顯示的好處課堂案例： 課堂練習[10分鐘]做“申請表”的表單練習，參考“課堂聯(lián)系案例\課堂練習1”。背景屬性[5分鐘]引入：首先從文本的大小，顏色，字體等來描述文本屬性。講解要點：backcolor,background-image,background-repeat3個屬性的基本用法。注意：Background-repeat的使用場合：當用較小的gif圖片作為網(wǎng)頁背景時，就會用到如何重復(fù)的問題，是橫向還是縱向。樣式還有一種簡潔的寫法就是吧各種屬性放置在一起，用空格隔開，如下所示：Body{ Background:#999ff00 url(../image/css_tutorials/background.jpg) no-repeatfixed40px100px}課堂案例：方框?qū)傩訹15分鐘]引入：首先從文本的大小，顏色，字體等來描述文本屬性。講解要點：盒子模式：以網(wǎng)頁中放入的一副圖片，說明盒子模式設(shè)計的各種邊界、填充、邊框的含義。應(yīng)用邊框?qū)傩?、填充屬性，制作常見的表格多列中分界線樣式。應(yīng)用邊框?qū)傩?，制作細邊框輸入框樣式。課堂案例：特殊樣式[5分鐘]講解要點：無下劃線的超倆鏈接的制作方法。課堂案例：課堂練習2[10分鐘]編寫如下圖所示效果對應(yīng)的HTML代碼制作圖片按鈕[10分鐘]講解要點：圖片按鈕的制作方法。課堂案例：三類樣式的應(yīng)用場合[15分鐘]講解要點：其他參考資料對三類樣式的稱呼可能不一樣，例如有的稱為“內(nèi)嵌（即行內(nèi)樣式）”、“內(nèi)部（內(nèi)嵌樣式）”、“外部（外部樣式）”樣式表。如果希望本網(wǎng)頁內(nèi)的所有同類標簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。如果希望某段文字和其他段落文字顯示風格不一樣，使用行內(nèi)（嵌入）樣式表可以解決如果希望一個網(wǎng)站中多個頁面的樣式保持一致，使用外部樣式表文件樣式表可以解決總結(jié)[5分鐘]方框?qū)傩杂心男┏Ｓ脤傩裕坎⒎謩e說明其含義？超鏈接樣式有哪幾種？內(nèi)嵌樣式表、行內(nèi)樣式表、外部樣式表文件分別適用什么場合？作業(yè)布置參考答案：<HTML><HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>外部樣式表練習</TITLE><LINKrel="stylesheet"type="text/css"href="css.css"></HEAD><BODY><FORM><TABLE><TR><TDcolspan="2"><IMGsrc="images/top.jpg"></TD></TR><TR><TDwidth="498"><TABLEwidth="381"cellpadding="0"cellspacing="0"class="loginMain"><TR><TDcolspan="2"height="27"class="loginHead">拍拍用戶登陸</TD></TR><TR><TDwidth="120"class="lefttd">QQ號碼</TD><TDwidth="265"><INPUTtype="text"class="inputMain"> <Ahref="#">忘記QQ號碼>></A></TD></TR><TR><TDclass="lefttd">QQ密碼</TD><TD><INPUTtype="text"class="inputMain"> <Ahref="#">忘記密碼>></A></TD></TR><TR><TDcolspan="2"align="center"><INPUTtype="submit"value=""class="picButton"></TD></TR></TABLE></TD><TD

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論