1、南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼1授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第1章HTML基礎知識1.1HTML簡介1.2HTML基本術(shù)語1.3Dreamweaver介紹教學目標1 對HTML語言有初步的認識2 掌握Dreamweaver工具的使用教學重點HTML基礎知識和Dreamweaver工具的使用教學難點Dreamweaver工具的使用 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第1章 HTML基礎知識一、新授課1.1 HTML（HyperText Markup Language）簡介超文本標記語言用于指定在Web瀏覽器中

2、顯示的文本的格式，指定文檔內(nèi)容，結(jié)構(gòu)和格式編輯器 (記事本、寫字板、Dreamweaver等)文件擴展名：.html 或 .htmWeb 瀏覽器（IE、Netscape、Firefox等）1.2 HTML基本術(shù)語1.HTML標記（Tag）標記都括在一對尖括號“”中，標記一般成對出現(xiàn)，中間加入受標記控制的信息內(nèi)容，例如：和2.HTML元素（Element）用于指示瀏覽器如何組織和顯示文檔。元素一般由一個起始標記和其對應的結(jié)束標記、標記之間的內(nèi)容構(gòu)成。例如：這是一個HTML文件3.HTML屬性（Attribute）屬性是元素具有的，用來告訴瀏覽器如何控制或顯示元素內(nèi)容的。例如：sohu網(wǎng)站1.3

3、Dreamweaver介紹- 一款用于設計、開發(fā)網(wǎng)站和 Web 應用程序的專業(yè)HTML 編輯器 - 用戶可以選擇使用布局單元格或框架來設計頁面的布局- 可用于創(chuàng)建文本、插入動態(tài)圖像、提供網(wǎng)頁超鏈接、創(chuàng)建 Flash 文本和 Flash 按鈕等- 可用于組合由某些軟件（如 Photoshop、ImageReady 和 Flash 等）制作的圖形、動畫和按鈕二、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級 授課形式講授頁 碼2授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第2章 創(chuàng)建HTML文件2.1 創(chuàng)建HTML文件2.2 HTML的組織規(guī)范2.3 HTML基本標記第3章 文檔格式化3.1 文字

4、格式化3.2 超鏈接和錨站教學目標1 理解HTML文件的基本結(jié)構(gòu)2 掌握文字格式化和超鏈接教學重點 1 、2 教學難點如何控制文字格式和建立超鏈接 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第2章 創(chuàng)建HTML文件一、 復習Dreamweaver工具的使用二、新授課2.1 創(chuàng)建HTML文件- 注釋以結(jié)束- html 元素head 元素文檔標題樣式和腳本body 元素瀏覽器顯示的頁面內(nèi)容- 開始標記：- 結(jié)束標記：2.2 HTML的組織規(guī)范 所有的HTML文檔都遵循由W3C規(guī)定的HTML規(guī)范。2.3 HTML基本標記- 結(jié)構(gòu)標記- 頭標記- 文檔標題標記- 內(nèi)容

5、標記第3章 文檔格式化3.1 文字格式化- 字體標記- 使用屬性檢查器中的字體類型、字體大小、字體顏色等設置格式化文本：3.2 超鏈接和錨站 - 鏈接到其他資源（如XHTML文檔和圖像）三、學生隨堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼3授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第3章 文檔格式化3.2 超鏈接和錨站 3.3 段落格式化3.4 使用列表教學目標1 掌握內(nèi)部鏈接的使用2 掌握段落格式化和使用列表教學重點內(nèi)部鏈接和列表教學難點列表 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第3章 文檔格式化一、引入 HTML的基

6、本標記，組織規(guī)范。二、新授課3.2 超鏈接和錨站 - 內(nèi)部鏈接 ：在同一個文檔的不同位置之間進行跳轉(zhuǎn)- 命名錨站的一般語法格式為：錨站A“書簽名”用來標示“錨站A”在HTML文檔中的位置- 要找到上述錨站，需要編寫如下代碼：點擊此處將使瀏覽器跳到錨站A處注意：href屬性賦的值若是錨站的name屬性值，則必須在書簽名前邊加一個“#”號。- email鏈接：mail:URL3.3 段落格式化 - 標記：最常用段落標記 - 其他段落標記：、 - 預格式化段落標記: - 標題： - 換行與空行：- 水平線： 3.4 使用列表- 有序列表 - 無序列表 - 定義列表三、學生隨堂練習四、總結(jié)南京信息職業(yè)

7、技術(shù)學院教 案授課班級授課形式實驗頁 碼4授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗一：超鏈接與列表教學目標1 會使用HTML創(chuàng)建Web頁面2 學會標記信息列表和超鏈接教學重點超鏈接的建立、列表的使用教學難點嵌套列表 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會教 學 過 程 設 計實驗一：超鏈接與列表一、復習理論超鏈接與列表二、布置實驗任務1 實驗目的會使用HTML創(chuàng)建Web頁面學會標記信息列表和超鏈接掌握列表在實際問題中的應用 2 實驗任務創(chuàng)建有序列表“有序列表.html”創(chuàng)建嵌套列表“嵌套列表.html”創(chuàng)建有序列表和無序列表之間的超鏈接 三、指導學生上機

8、實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼5授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第4章 使用圖像和背景4.1 常用網(wǎng)絡圖像格式4.2 使用圖像4.3 創(chuàng)建圖像地圖教學目標1、掌握標簽各種屬性的使用2、會創(chuàng)建圖像地圖教學重點標簽各種屬性的使用教學難點靈活使用標簽的各種屬性 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第4章 使用圖像和背景一、 復習引入圖像和背景可以大大增強網(wǎng)頁的吸引力和易用性，一個優(yōu)秀的網(wǎng)頁設計者必須善于合理運用圖像和背景以突出

9、網(wǎng)頁所要表現(xiàn)的內(nèi)容。二、新授課 4.1 常見網(wǎng)絡圖像格式- GIF（Graphics Interchange Format）圖像- JPEG（Joint Photographic Experts Group）圖像- PNG（Portable Network Graphics）圖像 4.2 使用圖像 img - - src屬性設置為要插入圖像文件的URI - height和width屬性 - align屬性 - hspace和vspace屬性 - border屬性、background屬性- 創(chuàng)建圖片鏈接- 使用縮略圖 4.3 創(chuàng)建圖像地圖：一個圖像地圖中設置多個鏈接熱點：整張圖片被分成的多塊活

10、動的區(qū)域。用戶自己定義這些熱點，把它們分別鏈接到各自獨立的URI地址。圖像地圖的基本類型包括兩種： 1. 客戶端圖像地圖：該地圖直接被瀏覽器處理2. 服務器端圖像地圖：該地圖將被Web服務器上的一段程序負責解析處理三、學生隨堂練習 img標簽屬性的使用 創(chuàng)建圖像地圖四、總結(jié) 南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼6授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第5章 表格布局5.1 創(chuàng)建表格5.2 設置表格格式5.3 高級表格標記教學目標1 學會創(chuàng)建帶有數(shù)據(jù)行和數(shù)據(jù)列的表格2 學會控制表格格式教學重點表格的定義；表格行的控制；單元格的控制；表格的分組教學難點控制表格格式 更

11、新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第5章 表格布局一、 復習引入HTML網(wǎng)頁可以看做是一個二維空間，可以使用表格對這個二維空間進行劃分，然后對要表現(xiàn)的內(nèi)容進行合理的布局，表格是一種重要的布局方式。二、新授課5.1 創(chuàng)建表格 - 基本表格標記：和 - 設置表格行：和 - 設置表格列：和 和 是 table head的簡稱，用來設置表頭 是 table data的簡稱，用來標記表頭以外的其他單元格- 添加標題：caption標記 “align”屬性：指定表格的標題位置- 調(diào)整表格尺寸：width（寬度）和height（高度）屬性- 對齊方式align：屬性值

12、有l(wèi)eft、right、和center三種，默認為left5.2 設置表格格式 - 設置表格背景顏色：bgcolor屬性 、 、 （或）標記中使用 - 在表格中插入圖片：可放入某一個單元格內(nèi)，也可作為表格背景 加背景圖片：標記中加入background屬性在一個單元格中加入圖片：在（或）之間加入標記 - 調(diào)整單元格大?。簑idth屬性 - 單元格內(nèi)容的對齊方式：align和valign屬性 - 設置單元格間距和邊距：cellspacing屬性和cellpadding屬性：- 擴展行和列：rowsapn屬性和colspan屬性5.3 高級表格標記- 行編組：賦予表格行特殊的含義包括，和三種標記：

13、表示該行定義為當前表格的題注：表示該行定義為當前表格的尾注：表示表格的主體部分標記必須出現(xiàn)在標記之前和標記之后舉例講解- 列編組：標記三、學生練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼7授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗二：鏈接、圖像與表格教學目標1 學會創(chuàng)建跨行、跨列的表格2 會控制表格格式，使用表格進行合理布局3 學會使用img標簽教學重點會創(chuàng)建表格，使用圖像教學難點使用表格進行合理的布局 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會教 學 過 程 設 計實驗二：鏈接、圖像與表格一、復習理論超鏈接、圖像、表格二、布置實驗任務1

14、實驗目的：學會創(chuàng)建跨行、跨列的表格學會使用img標簽會控制表格格式，使用表格進行合理布局2實驗任務：習題一：創(chuàng)建跨行和跨列的表格習題二：創(chuàng)建嵌套表格如下圖所示，并在此基礎上加入圖像和超鏈接，網(wǎng)頁圍繞一個主題合理布局 三、指導學生上機實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼8授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗二：鏈接、圖像與表格（續(xù)）教學目標1 學會創(chuàng)建跨行、跨列的表格2 會控制表格格式，使用表格進行合理布局3 學會使用img標簽教學重點會創(chuàng)建表格，使用圖像教學難點使用

15、表格進行合理的布局 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會教 學 過 程 設 計實驗二：鏈接、圖像與表格（續(xù)）一、復習理論超鏈接、圖像、表格二、布置實驗任務1 實驗目的：學會創(chuàng)建跨行、跨列的表格學會使用img標簽會控制表格格式，使用表格進行合理布局2實驗任務：在上次習題二的基礎上發(fā)揮主觀能動性加入圖像和超鏈接，網(wǎng)頁圍繞一個主題合理布局 三、指導學生上機實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼9授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第6章 框架布局6.1

16、 框架的概念 6.2 創(chuàng)建含有框架的HTML文檔教學目標1 學會使用frameset元素在單一瀏覽窗口顯示多個Web頁面2 使用框架進行布局教學重點框架的創(chuàng)建和使用教學難點使用框架創(chuàng)建符合需求的頁面 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第6章 框架布局一、復習引入 窗口框架可用于將窗口畫面分割成多個小窗口，且每個小窗口中，可以顯示不同的網(wǎng)頁，達到在瀏覽器中同時瀏覽不同網(wǎng)頁的效果。二、新授課6.1 框架 框架能夠同時顯示多個HTML文檔，框架之間可以互相聯(lián)系，觸發(fā)一個框架中的事件可以改變另一個框架中的內(nèi)容和行為。6.2 創(chuàng)建含有框架的HTML文檔 1. 基

17、本框架標記：frameset - 不使用body標記- cols屬性：垂直框架，指定框架的寬度- rows屬性：水平框架，指定框架的高度- frame標記：沒有結(jié)束標記定義單個框架中的顯示內(nèi)容及其外觀樣式src屬性：指定要顯示的頁面的 URL單個標記，無需結(jié)尾- noframes標記:瀏覽器無法顯示框架時，顯示此標記中的內(nèi)容 舉例演示多框架和彈性框架 2. 框架集嵌套:標記中嵌套使用另外一個標記 框架目標：一個框架內(nèi)的鏈接目標在另一個框架中顯示 命名框架：標記的name屬性設置錨站目標：中使用target屬性設置三、學生進行課堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼1

18、0授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱6.3 框架格式化 6.4 浮動框架教學目標1 學會設置框架的各種屬性2 學會使用浮動框架教學重點浮動框架的使用教學難點框架的實際應用 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第6章 框架布局一、復習理論框架的frameset、frame標簽二、新授課6.3 框架格式化 1. 邊框設置： 框架邊框的屬性：- frameborder:0表不要邊框，1表示顯示邊框- border:設定邊框?qū)挾? bordercolor：設置邊框顏色- 標記和標記中都可以使用 2. 頁白設置：框架邊框到框架內(nèi)容的空白區(qū)域- M

19、arginweidth:控制左右頁白- marginheight:控制上下頁白 3. 大小設置 - noresize屬性:禁止瀏覽者調(diào)整框架的大小 4. 滾動設置：scrolling屬性 - yes:不管是否需要都使用滾動條- no:不使用滾動條- auto:根據(jù)需要顯示滾動條6.4 浮動框架 浮動框架:標記- 創(chuàng)建一個內(nèi)嵌的框架區(qū)或窗口- 與同樣的屬性設置：name、src、marginwidth、marginheight、frameborder及scrolling- 與圖形類似屬性設置：height、width和align- 遵循與普通框架一樣的target原則：通過name屬性來指向它

20、三、學生進行課堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼11授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第7章 使用表單收集數(shù)據(jù)7.1 表單初步7.2 表單元素教學目標1、理解、標簽；下拉菜單select/option；2、理解多行文本框textarea；3、掌握表單在網(wǎng)頁中的應用。教學重點各種表單元素教學難點標簽；下拉菜單select/option；多行文本框textarea 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第7章 使用表單收集數(shù)據(jù)一、復習引入 隨著Internet的迅速發(fā)展，用戶的要求越來越高。他們不僅希望能從We

21、b服務器中獲得信息，而且還希望能向Web服務器反饋信息。HTML是利用表單（Form）來設計交互界面的。二、新授課7.1 表單初步 - 填充式的表單使用戶可以提交更復雜的信息，進行更復雜的交互- 表單是HTML標記中較為復雜的部分，它往往與腳本、動態(tài)頁面和數(shù)據(jù)處理等功能相結(jié)合，制作動態(tài)網(wǎng)站- 表單元素包括： 文本字段 復選框 單選按鈕 按鈕下拉菜單/列表框7.2 表單元素：1. 標記- 標記可以看作是一個包含許多表單控件的容器- 排列各種表單控件的布局，讓表單以一種友好的界面呈現(xiàn)在瀏覽者面前- 控件是用來收集用戶信息的域。表單中的每一個控件都有名稱（name）和值（value）。當用戶填寫好表

22、單并提交時，可用這些“名/值”對處理表單。- 把整個最終處理數(shù)據(jù)結(jié)果發(fā)送到目標程序上，這個數(shù)據(jù)結(jié)果是由許多對名稱和數(shù)據(jù)值的統(tǒng)一體（即“名/值”對）組成的 - method屬性：指定表單數(shù)據(jù)以什么方式發(fā)送到Web服務器method = “post”：將表單數(shù)據(jù)添加到瀏覽器請求method = “get”：將表單數(shù)據(jù)直接添加到URL的結(jié)尾action屬性：指定位于Web服務器上的腳本的URL表單元素 2. 標記：限定表單內(nèi)的輸入?yún)^(qū)域，不同的輸入方式由屬性type指定type屬性的值可為text、radio和checkbox等 舉例說明三、課堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講

23、授頁 碼12授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱7.2 表單元素7.3 表單標記訪問控制7.4 處理表單7.5 設計方法教學目標1 表單的各種元素2 表單標記訪問控制教學重點表單元素及訪問控制教學難點表單的實際應用 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會 教 學 過 程 設 計第7章 使用表單收集數(shù)據(jù)一、復習 表單的各種元素二、新授課7.2 表單元素 標簽：- 文本域：type = “text”- 密碼域：type = “password”- 單選按鈕：type = “radio”- 復選框：type = “checkbox”- 文件上傳：type = “fil

24、e”- 隱藏域：type = “hidden”- 提交和重置按鈕：type = “submit”、type = “reset”- 圖像提交按鈕: type = image- 下拉菜單：,選項編組標記:- 多行文本框：- 表單區(qū)域fieldset和legend舉例演示7.3 表單標記訪問控制- 控制Table鍵的次序：tabindex屬性- 快捷鍵：accessskey屬性- 控件的禁用和只讀狀態(tài)：disabled、readonly- 工具提示與表單域：title屬性7.4 處理表單- method屬性：get和post- action屬性：指定表單數(shù)據(jù)提交到哪個地址進行處理- enctype屬

25、性 7.5 設計方法表單必須便于使用，使訪問者能夠很方便的回答問題。三、學生練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼13授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗三：框架與表單的設計教學目標1 學會創(chuàng)建和使用表單2 學會使用框架進行布局教學重點表單和框架教學難點表單的使用，靈活使用框架進行布局 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會教 學 過 程 設 計實驗三：框架與表單的設計一、復習理論表單和框架的使用二、布置實驗任務1 實驗目的：學會創(chuàng)建和使用表單學會使用框架進行布局2實驗任務： 三、指導學生上機實驗針對學生普遍存在的問題進行集

26、體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告 南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼14授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗三：框架與表單的設計（續(xù)）教學目標1 學會創(chuàng)建和使用表單2 學會使用框架進行布局教學重點表單和框架教學難點表單的使用，靈活使用框架進行布局 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會 教 學 過 程 設 計實驗三：框架與表單的設計（續(xù)）一、復習理論表單、框架二、布置實驗任務1 實驗目的：學會創(chuàng)建和使用表單學會使用框架進行布局2實驗任務：在前次實驗的基礎上發(fā)揮主觀能動性加入超鏈接和框架內(nèi)容，網(wǎng)頁圍繞一個

27、主題合理布局 三、指導學生上機實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼15授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第8章 樣式表8.1 樣式表簡介8.2 使用樣式表教學目標1 會使用樣式表將元素表示與文檔結(jié)構(gòu)分開2 會使用內(nèi)聯(lián)樣式、嵌入式樣式表和外部樣式表教學重點內(nèi)聯(lián)樣式表、嵌入式樣式表、外部樣式表教學難點三種樣式表的使用 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會 教 學 過 程 設 計第8章 樣式表一、復習引入 CSS是為了簡化Web頁面的更新工作而誕生的，它的

28、功能非常強大，它將讓網(wǎng)頁變得更加美觀，維護更加方便。CSS跟HTML一樣，也是一種標記語言，甚至很多屬性都來源于HTML，它也需要通過瀏覽器解釋執(zhí)行。二、新授課8.1 樣式表簡介 - 樣式表是規(guī)范瀏覽器如何顯示HTML特定標記的一組規(guī)則標記名稱：決定頁面中的哪些標記受到樣式規(guī)則的控制標記屬性：決定如何顯示這些受控制的標記- DHTML = HTML + CSS + JavaScript8.2 使用樣式表- 四種樣式表：內(nèi)聯(lián)式樣式表、嵌入式樣式表、輸入外部樣式表、鏈接外部樣式表- 前兩種可以稱為內(nèi)部樣式表，后兩種稱為外部樣式表- 優(yōu)先級從高到低依次為：內(nèi)聯(lián)式樣式表、嵌入式樣式表、輸入外部樣式表、

29、鏈接外部樣式表。1. 內(nèi)部樣式表內(nèi)聯(lián)式樣式表樣式規(guī)則直接插入所應用的HTML標記中，作為標記的屬性參數(shù)，因此其作用范圍僅限于所應用的HTML元素。2. 內(nèi)部樣式表嵌入式樣式表嵌入式樣式表位于HTML內(nèi)部，在和標記之間定義，或在和標記之間，嵌入式樣式表使用和標記對實現(xiàn)。3. 外部樣式表：操作多個頁面，并且這些頁面需要有統(tǒng)一的外觀格式外部樣式表文件以“css”為擴展名根據(jù)樣式文件與網(wǎng)頁的關聯(lián)方式又分為：輸入（import）：將外部樣式表文件以輸入方式添加到頁面中，相當于復制一份樣式表。鏈接（link）：如果標記使用到樣式表，就會到所鏈接的外部樣式表中索取指定的樣式舉例說明并演示三、學生當堂練習四、

30、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼16授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱8.3 樣式表創(chuàng)建規(guī)則8.4 層疊樣式表教學目標1 掌握id規(guī)則、class規(guī)則2 掌握偽類和偽元素教學重點id規(guī)則、class規(guī)則、偽類、偽元素、繼承性 教學難點靈活使用樣式表的各種規(guī)則 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會 教 學 過 程 設 計第8章 樣式表一、復習引入 四種層疊樣式表二、新授課8.3 樣式表創(chuàng)建規(guī)則 1. id規(guī)則2. class規(guī)則：同一類可應用于不同的標記，或者一個標記可以定義不同的類3. 偽類：偽類是一種特殊的class規(guī)則，主要用來處

31、理鏈接在不同狀態(tài)下的不同樣式效果。 偽元素：偽元素常用來給標記添加特殊的效果4. 繼承性- 父標記和子標記的概念包含在外面的標記為父標記被包含在里面的標記為子標記- 對子元素（后代）定義的樣式比對子元素的父（或祖先）元素定義的樣式更特殊8.4 層疊樣式表- CSS可以細分為：CSS1、CSS-P、CSS2- 前兩種可以稱為內(nèi)部樣式表，后兩種稱為外部樣式表舉例說明并演示三、學生當堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼17授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱8.5 樣式表屬性8.6 外部和內(nèi)聯(lián)樣式表示例教學目標1 掌握設置字體樣式2 掌握控制圖文布局，顏

32、色及背景3 了解美化網(wǎng)頁與超鏈接的設置，CSS定位4 通過本章的學習使學生了解掌握CSS的各種屬性應用教學重點設置字體樣式；控制圖文布局，顏色及背景；美化網(wǎng)頁與超鏈接的設置；教學難點各種層疊樣式表及屬性的使用 更新、補充、刪除內(nèi)容div層標簽教學手段多媒體課外作業(yè)無課后體會 教 學 過 程 設 計第8章 樣式表一、復習引入 層疊樣式表及其規(guī)則二、新授課8.5 樣式表屬性- 文本屬性：text-indent、text-transform、text-align、 text-decoration、letter-spacing- 顏色和背景屬性：color、background-color、backg

33、round-image、background-repeat、background-attachment、background-position- span和div標簽- 字體屬性：font-family、font-style、font-variant、font-weight、font-size- 容器模型：為不同文本設置不同的容器級別，可以調(diào)整容器中的邊距、填充和邊框等- 列表：使用CSS屬性控制列表的位置及項目符號樣式 list-style-type、list-style-image、list-style-position、list-style- 混合屬性：display、position、

34、top、bottom、left、height、width、float、line-height、visibility8.6 外部和內(nèi)聯(lián)樣式表示例- 內(nèi)聯(lián)樣式表、嵌入式樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常需要混合使用：有關整個網(wǎng)站統(tǒng)一風格的樣式代碼，放置在獨立的樣式文件*.css某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義嵌入式樣式某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用內(nèi)聯(lián)樣式- 是塊級容器標簽，可以包含圖片、標題、段落、文字等使用 zindex 指定是哪一層舉例說明并演示三、學生當堂練習四、總結(jié)南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼18授課日期 年 月 日 第 周 教

35、學時數(shù)2授課章節(jié)名稱實驗四 層疊樣式表CSS教學目標1 掌握四種類型的樣式表2 會通過創(chuàng)建樣式表來控制Web站點的外觀教學重點四種樣式表的混合使用樣式表屬性設置教學難點四種樣式表的混合使用 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會 教 學 過 程 設 計實驗四 層疊樣式表CSS一、復習理論四種樣式表及其各種屬性的使用二、布置實驗任務1 實驗目的： 掌握四種類型的樣式表 會通過創(chuàng)建樣式表來控制Web站點的外觀2實驗任務： 1.鏈接外部樣式表 2. 使用CSS樣式制作以下網(wǎng)頁布局三、指導學生上機實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作

36、業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式實驗頁 碼19授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱實驗四 層疊樣式表CSS教學目標1 掌握四種類型的樣式表2 會通過創(chuàng)建樣式表來控制Web站點的外觀教學重點四種樣式表的混合使用樣式表屬性設置教學難點四種樣式表的混合使用 更新、補充、刪除內(nèi)容無教學手段上機實驗課外作業(yè)實驗報告課后體會 教 學 過 程 設 計實驗四 層疊樣式表CSS（續(xù)）一、復習理論四種樣式表及其各種屬性的使用二、布置實驗任務1 實驗目的： 掌握四種類型的樣式表 會通過創(chuàng)建樣式表來控制Web站點的外觀2實驗任務： （1）鏈接外部樣式表 （2） 使用CSS樣式制作

37、以下網(wǎng)頁布局（3）靈活使用樣式表美化個人網(wǎng)站三、指導學生上機實驗針對學生普遍存在的問題進行集體講解和指導。四、總結(jié)這次實驗存在的問題五、布置作業(yè)：實驗報告南京信息職業(yè)技術(shù)學院教 案授課班級授課形式講授頁 碼20授課日期 年 月 日 第 周 教學時數(shù)2授課章節(jié)名稱第9章 HTML高級主題9.1 使用多媒體9.2 區(qū)域組件布局教學目標1 學會在網(wǎng)頁中使用多媒體2 學會使用區(qū)域組件進行合理布局教學重點多媒體及區(qū)域組件的使用教學難點靈活使用各種區(qū)域組件 更新、補充、刪除內(nèi)容無教學手段多媒體課外作業(yè)無課后體會教 學 過 程 設 計第9章 HTML高級主題一、復習引入 前面的章節(jié)已經(jīng)介紹了與HTML網(wǎng)頁設計有關的主要內(nèi)容，隨著Internet的迅猛發(fā)展對HTML提出了挑戰(zhàn)，一些新的技術(shù)正不斷推動HTML的發(fā)展，本章將講述多媒體使用及區(qū)域組件布局。二、新授課9.1 使用多媒體 - Web 得以廣泛使用的一個主要原因是 HTML 文檔中集成了多媒體元素。- 添加活動的GIF- 添加音頻- 添加視頻- 添加flash動畫9.2 區(qū)域組件布局- 將文字、