網頁設計與制作教案

1、網頁設計和發(fā)布流程第一步是對站點進行規(guī)劃第二步是創(chuàng)建站點的基本結構第三步即可開始具體的網頁創(chuàng)作過程最后一步是站點的發(fā)布第一章 站點的規(guī)劃與創(chuàng)建【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、規(guī)劃站點Web站點是一組具有共享屬性（如相關主題、類似的設計或共同目的等）的鏈接文檔。本地站點：是本地硬盤中存放遠程網

2、站所有文檔的地方（文件夾）。建立網站的通常做法是：在要地硬盤中建立一個文件夾用來存放網站的所有文件，往后就在該文件夾中創(chuàng)建和編輯文檔。待網頁設計和測試好之后，再把它們拷貝到網站上供瀏覽者瀏覽。1、規(guī)劃站點結構注：規(guī)劃站點的結構之前應先用筆繪出站點的結構圖（如下圖所示是一個典型的學校站點的結構圖）2、規(guī)劃站點的瀏覽機制一般可采用以下的方法：l 創(chuàng)建返回主頁的鏈接l 顯示網站專題目錄l 顯示當前位置l 搜索和索引l 反饋（將網頁創(chuàng)作者或網站管理員公布在網頁上，或創(chuàng)建一個E-MAIL超級鏈接，以使用戶能快速地將信息反饋到網站中）二、創(chuàng)建一個站點步驟：1、單擊“文件”-“新建”-“站點”命令（或單擊常

3、用工具欄中“新建網頁”按鈕的下拉箭頭，從打開的下拉菜單中選擇“站點”命令）2、選擇一種站點模板或向導3、單擊“確定”按鈕三、站點的基本操作1、打開站點：“文件”-“打開站點”2、刪除站點：方法一：在Windows資源管理器中刪除一個站點方法二：在FrontPage中刪除站點，在“文件夾”視圖或“網頁”視圖的“文件夾列表”中，右擊站點所對應的目錄，在快捷菜單中單擊“刪除”命令3、站點的設置“工具”-“站點設置”，有“常規(guī)”、“參數(shù)”、“高級”、“語言”、“導航”、“數(shù)據(jù)庫”六個選項卡【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第二章 利用表格進行網頁布局【計劃課時】：3課時【授課班級】：計

4、算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、 插入表格1、單擊常用工具上的“插入表格”按鈕2、單擊“表格”-“插入”-“表格”命令3、使用表格工具欄（“查看”“工具欄”-“表格”命令）4、由文本轉換（“表格”“轉換”“文本到表格”）一般以段落為分行標記，以逗號或句號為分列標記。二、 單元格的基本操作1、選擇單元格（“表格”“選定”“單元格

5、”）Ctrl：可選擇不相鄰的單元格Shift：選擇多個相鄰的單元格2、插入單元格（“表格”“插入”“單元格”）3、合并單元格（“表格”“合并單元格”或“表格工具欄”上的“合并單元格”按鈕）4、拆分單元格（“表格”“拆分單元格”或“表格工具欄”上的“拆分單元格”按鈕）三、填充單元格1、文本與圖像填充（“插入”“圖片”）2、對齊文本與圖像（“表格”“屬性”“單元格”，“水平對齊方式”、“垂直對齊方式”）3、修改單元格背景（“表格”“屬性”“單元格”，“背景”）4、調整邊框顏色（“表格”“屬性”“單元格”，“邊框”）5、改變單元格尺寸（“表格”“屬性”“單元格”，“指定寬度”、“指定高度”）四、修改

6、表格的行與列1、選擇行與列2、插入行與列（“表格”“插入”“行或列”）3、均分行與列（“表格工具欄”中的“平均分配行高”或“平均分配列寬”）4、刪除行與列（“表格工具欄”中的“刪除單元格”按鈕或“表格”“刪除單元格”命令）【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè) 第三章 利用框架設計網頁布局【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織

7、過程】1上講回顧2教授新知【授課內容】一、認識框架網頁 1、框架的概念 框架網頁是一種特殊的網頁，它將自身分成幾個區(qū)域，每個區(qū)域稱作一個框架窗口（通常簡稱為框架）框架具有以下特性：每個框架都可以獨立地顯示一個網頁，各個框架窗口之間可以設立超鏈接。每個框架窗口可以賦予一個名字，以便其他URL作為目標調用。2、框架的使用場合（如郵箱、論壇）通常用框架來顯示在同一個站點中的多個超鏈接，這樣可以不用瀏覽器中的“后退”按鈕而方便的進行瀏覽。框架也適用于類似在線書籍的應用，將目錄顯示在左邊的框架中，單擊目錄，右邊框架中顯示相關的章節(jié)二、創(chuàng)建框架網頁 1、框架網頁的創(chuàng)建“文件”“新建”“網頁”，選擇“框架網

8、頁”選項卡 2、框架網頁模板（10種） “設置初始網頁”“新建網頁”三、框架網頁的保存和打開框架網頁的保存包括框架網頁自身的保存和框架窗口中網頁的保存。 1、框架網頁的保存“文件”“保存文件”或“框架”“保存網頁” 2、框架網頁的打開 “框架”“在新窗口中打開網頁”4、 框架網頁的屬性 1、框架網頁的屬性 “文件”“屬性”“框架間距”、“顯示邊框”2、框架的屬性 “框架”“框架屬性”五、調整框架布局 1、調整框架窗口的大?。ㄓ檬髽送蟿踊蛟凇翱蚣軐傩浴睂υ捒蛑姓{整） 2、框架的拆分方法一：“框架”“拆分框架”（按行或按列拆分）方法二：用鼠標拖動拆分（按Ctrl鍵）3、框架的刪除 “框架”“刪除框

9、架”六、目標框架當在框架網頁的某一個框架中定義超鏈接時，需要指定被鏈接的網頁顯示在哪一個框架中，即指定超鏈接的目標框架。選擇要設置超鏈接的文字或圖像，“插入”“超鏈接”，單擊“目標框架”、“更改目標框架”【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第四章 使用導航欄【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授

10、課內容】一、定義導航結構在網頁內添加導航欄之前，先建立該站點的導航結構“視圖”“導航”按鈕二、認識導航欄屬性“插入”“導航欄”按鈕“父層”：創(chuàng)建指向當前網頁上一級網頁的超鏈接，并將上一級網頁的標題名稱顯示在導航欄內。三、創(chuàng)建導航欄（要在瀏覽器中才可看到實際導航欄效果）四、創(chuàng)建共享邊框用創(chuàng)建導航欄的方法只能在一個網頁中創(chuàng)建導航欄，若需要導航欄出現(xiàn)在站點內多個網頁的相同位置，則可將導航欄插入網頁的共享邊框內。右擊編輯窗口，單擊“共享邊框”命令練習二、利用框架設計一個企業(yè)網站的布局要求有如下內容：關于我們、商品展示、在線訂購、網上留言、聯(lián)系我們、產品目錄、友情鏈接等?！菊n程小結】【作業(yè)】15 課后練

11、習書本課后練習作業(yè)第五章 網頁布局功能的應用【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、創(chuàng)建布局表格 1、創(chuàng)建布局表格 打開一個空白網頁，并切換到“設計”視圖下，單擊“表格”菜單中的“布局表格和單元格”命令，隨后在右側彈出一個任務窗口，在該任務窗口下面程序提供了多種表格布局模板，在此單擊其中需要的模板即可

12、將該模板添加到網頁中。 2.繪制布局表格 如果你對模板中提供的布局表格不太滿意，還可以用手工繪制的方法創(chuàng)建一個布局表格。創(chuàng)建時首先在“新建表格和單元格”項中單擊“繪制布局表格”，隨后將指針移到操作窗口最左端，然后拖動鼠標即可繪制表格。 3、設置表格屬性插入表格后，還需對表格屬性進行設置。在“表格屬性”項中設置該表格所需的屬性。 提示：在設置表格時，如果要想覆蓋網頁的默認邊距，并讓布局表格跨到文檔窗口的邊緣，可以將表格中的各個邊距的屬性都設置為0。在設計框架時經常需要調整某一行或列的屬性，這時可以通過表格中列寬和行高的標簽來完成。在操作窗口中單擊布局表格需要調整的邊框，每一側都會出現(xiàn)顯示列寬和行

13、高的標簽。每個標簽都包括一個下拉箭頭，如更改行高度時，單擊此下拉箭頭彈出一個下拉菜單，選擇“更改行高”命令，在彈出的“行屬性”對話框中重新輸入該行高度值即可。練習三、使用布局功能設計學校網站要求包括有以下內容：學校簡介、校園新聞、教育教學、學生天地、校園論壇、教師之家等【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第六章 網頁布局設計 【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與

14、難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、文本的美化（“格式”“字體”）1、輸入文本2、美化文本（設置文本字體、字號） 注：字符的大小共有6級，其中默認級別是3。 3、設置文本效果 4、改變文本顏色 5、設置字符間距 二、 運用邊框與陰影（“格式”“邊框與陰影”） 1、設置邊框 2、設置陰影 三、 使用列表（“格式”“項目符號和編號方式”） 1、添加項目列表 。 項目列表也稱為無序列表，它將在項目前添加標志符號?？梢詫D片作為新的項目標志。經常使用的項目符號有3種：實心黑點、空心圓圈和實心方塊。 2、添加編號列表在網頁中的內容存在順序關系時，可應用編號列

15、表。3、添加定義列表定義列表就是在網頁內定義詞匯、術語的列表，具體的定義內容將以首行縮進的方式出現(xiàn)在列表的下一行。（格式工具欄的“樣式”“定義的術語”，輸入要詞匯、術語，按回車鍵）4、設置嵌套列表要建立組合列表，可以先生成第1級列表，然后再生成第2級列表，依此類推。 建立組合列表的具體操作步驟如下： （1）先生成第1級列表 （2）將光標移動到擁有第2級列表的第1級列表項目的末尾，然后按回車鍵。將出現(xiàn)一個空的列表行。（3）單擊“格式工具欄”中的“增加縮進”圖標。該行變?yōu)橐粋€空白行，是沒有列表編號或項目符號的。再單擊一次“增加縮進”圖標。 （4）此時再按照建立列表的方法構造第2級列表。（5）輸入第

16、2級列表。輸入過程中每次接回車鍵就自動生成第2級列表項目。 （6）第2級列表輸入完畢后，將光標移到別的位置或者用鼠標在頁面的空白處單擊一下即可完成第2級列表的設置操作。 嵌套列表可以轉變?yōu)榭烧郫B大綱，這樣在瀏覽器中瀏覽時，就可以展開或折疊大綱中的各個級次。生成可折疊大綱的具體操作步驟如下： （l）按生成復合列表的方法構造好這個復合列表所有的列表級次。（2）選擇“格式”菜單中的“項目符號和編號方式”命令，打開“項目符號和編號方式”對話框，或者在列表中單擊右鍵，從彈出的菜單中選擇“列表屬性”命令。（3）在打開的對話框中，選中“啟用可折疊大綱”復選框。 （4）單擊“確定”按鈕。練習四、設計一個介紹陽

17、江風景及特產的網頁要求：設計一個網頁介紹陽江的風景及特產，要用到折疊列表的方式來分別介紹陽東、陽西、陽春等的不同地區(qū)的風景名勝及特產。【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第七章 網頁裝飾設計【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、添加圖像在瀏覽器中，能處理的圖片格式只有GIF、JPEG

18、格式和PNG格式等少數(shù)幾種圖片。1、GIF格式圖片 GIF格式最多能支持256種顏色（8位顏色）?？梢跃哂型该?、動畫等特殊效果。 2、JPEG格式文件 JPEG格式可以處理高達1670萬種顏色（24位顏色），所以在需要顯示細微的變化和使用大量的色彩處理照片時經常使用這種格式保存文件。插入本地計算機上的圖像（“插入”“圖片”“來自文件”，“從計算機選擇一個文件”）插入WEB上的圖像（“插入”“圖片”“來自文件”，“從WEB瀏覽器來選擇網頁或文件”）二、處理圖像1、剪裁圖像（“圖片”工具欄“剪裁”按鈕）2、設置透明背景（“圖片”工具欄“設置透明色”按鈕）三、添加文本（“圖片”工具欄“文本”按鈕）四

19、、保存圖像注：默認情況下，當前站點的圖像文件保存在Images文件夾中五、運用特殊效果1、調整圖片的亮度和對比度2、圖片的翻轉與旋轉3、圖片的沖蝕和黑白處理4、凹凸效果六、設置圖片對齊方式（“圖片屬性”“外觀”“布局”“對齊方式”）七、使用水平線水平線是貫穿網頁寬度的細灰條，用于分隔文本或加著重符。添加水平線后，可以修改其屬性來更改寬度、高度、對齊方式和顏色。如果網頁使用了主題，則會使用圖形來代替水平線以匹配主題。1、插入水平線2、設置水平線屬性八、 修改網頁背景（“格式”“背景”）1、調整背景色彩2、調整背景圖案九、創(chuàng)建交換圖像（DW 2004）1、插入交換圖像（“插入”“圖像對象”“鼠標經

20、過圖像”）“原始圖像”、“鼠標經過圖像”、“按下時，前往的URL”2、 預覽交換圖像：F12【課程小結】a【作業(yè)】15 課后練習書本課后練習作業(yè)第八章 創(chuàng)建超鏈接 【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、與當前站點的鏈接（“插入”“ 超鏈接”，“搜索”當前站點的文件夾位置）二、與空白網頁的鏈接（“插

21、入”“ 超鏈接”，“創(chuàng)建一網頁并鏈接到該網頁”）三、與電子信箱的鏈接（“插入”“ 超鏈接”，“制作發(fā)送電子郵件的超鏈接”）四、與Web的鏈接（“插入”“超鏈接”，“使用WEB瀏覽器來選擇網頁或文件”，ALT+TAB，則網頁地址自動添加到URL中）五、修改鏈接顏色（“網頁屬性”“背景”，“顏色”“超鏈接”、“已訪問的超鏈接”、“當前超鏈接”） 六、使用圖像地圖月 1、創(chuàng)建熱點 在圖片中創(chuàng)建熱點的具體操作步驟如下： 選中要建立熱點的圖片。圖片被選中后，四周將出現(xiàn)8個控制方塊，并且“圖片工具欄”被激活。 在“圖片工具欄”中，選擇熱點的形狀的圖標。可以選擇長方形、圓形或多邊形。將鼠標移動到圖片中。這時

22、，鼠標指針變成一支筆的模樣。用鼠標左鍵單擊圖片中要建立熱點的區(qū)域并拖動鼠標來繪制熱點。盡量讓熱點和圖片上的特征區(qū)域相配合熱點繪制完畢，圖片中將出現(xiàn)該熱點的邊框。打開“插入超鏈接”對話框，建立到熱點上的超鏈接的過程與建立到文本上的超鏈接的過程基本相同。 練習五、設計一個介紹一年四季風景的網站要求：用到嵌套列表、框架、超鏈接、圖像熱點等技術?！菊n程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第九章 表單設計【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動

23、，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、 認識表單表單的作用：表單就是瀏覽者可以在網頁中填寫信息的表格，其作用是接收瀏覽者填寫的信息并將其提交給表單處理程序進行處理。二、 生成表單1、表單的創(chuàng)建與表單字段的添加“插入”“表單”2、表單向導“文件”“新建”“網頁”-“常規(guī)”“表單網頁向導”三、 表單內容編輯1、單行文本框2、滾動文本框3、復選框4、單選按鈕5、下拉菜單6、按鈕7、圖片8、標簽9、隱藏的表單字段四、驗證性表單字段（“驗證有效性按鈕”）五、 表單處理程序右擊表單，選擇“表單屬性”

24、命令，提供了保存表單數(shù)據(jù)的三種不同處理方式：1、發(fā)送到文件（單擊“選項”按鈕”，進行設置）2、發(fā)送到數(shù)據(jù)庫3、討論表單處理程序4、注冊表單處理程序5、自定義ISAPI、NSAPI、CGI或ASP腳本練習六：制作表單制作一個注冊信息表單，要求包括下面的內容：會員帳號、您的姓名、您的性別、輸入密碼、密碼確認、密碼提示問題、密碼提示答案、電子郵件、常用電話、收貨地址、郵政編碼、提交按鈕、重填按鈕【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第十章 層及應用（DW 2004）【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論

25、教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、層概述層（Layer）是一種 HTML 頁面元素，您可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它 HTML 文檔。層的出現(xiàn)使網頁從二維平面拓展到三維。可以使頁面上元素進行重疊和復雜的布局。 二、創(chuàng)建層方法一：“插入”“布局對象”“層”方法二：“插入”工具欄“布局”“ 描繪層”，按住鼠標拖動方法三：“插入”工具欄“布局”，拖動“ 描繪層”按鈕到文檔窗口（按CTRL鍵，可

26、繪制多層）三、 通過拖動周圍的黑色調整柄控制層的大小四、 拖動層左上角的選擇柄可以移動層的位置。五、 單擊層標記可以選中一個層。（顯示層標記的方法：“編輯”“首選參數(shù)”“分類”“不可見元素”六、顯示層面板（“窗口”“層”）1、層的隱藏與顯示2、層數(shù)3、層重疊 七、層和表格之間的轉換（在轉換為表格之前，請確保層沒有重疊。 ）“修改”“轉換”“層到表格”若要將表格轉換為層，請選擇“修改”“轉換”“表格到層” 【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第十一章 行為 【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教

27、學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、行為概述行為是一種利用簡單直觀的語句設置手段，為網頁對象添加一些動態(tài)效果和簡單的交互功能的技術。行為是事件和由該事件觸發(fā)的動作的組合。 下面給出一些常見事件的一些解釋onClick 單擊onDbclick 雙擊onKeypress按鍵onMouseDown鼠標按下onMouseOut鼠標移出onMouseOver鼠標移上onMouseUp鼠標抬起。 實例：dreamweaver中網頁

28、折疊菜單的制作第一步：先插入一個一行、兩列的表格，方法：單擊菜單上的“插入” ，再選取“表格” ，在“行”中輸入1，在列中輸入2，在單擊“確定”。把寬和高分別設為200px和30px 在兩個單元格內分別輸入 內容第二步，在單元格內插入一個層。把寬和高分別設為100px和90px 第三步：在層中插入一個三行、一列的表格，方法同第一步。并把寬和高分別設為100px和90px,以填滿這個層。在三個單元格中輸入內容 在層的屬性欄中將“可視”設為“隱藏”，這樣在打開網頁時便看不見這個層 在“行為目標”中選擇一個合適的瀏覽器，一般是選擇“IE 4.0”。然后單擊左邊的“+”按鈕，來添加行為。在彈出的菜單中

29、選擇“顯示或隱藏層” ， 在彈出的窗口中選擇 “Layer1” ，就是我們剛才添加的那個層了，再單擊“顯示”接著單擊“事件”下面右邊的那個向下箭頭按鈕，在彈出菜單中選擇“當鼠標移上”（OnMouseOver）。再單擊“+”按鈕，選取“顯示或隱藏層”，還是選取“Layer1”，不過這次我們點擊的是“隱藏”（Hide）了，再確定。然后選擇“事件”，單擊“當鼠標移開”(OnMouseOut)?！菊n程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第十二章 HTML語言基礎【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)

30、式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教學組織過程】1上講回顧2教授新知【授課內容】一、HTML語言概述當我們暢游Internet時，我們透過瀏覽器所看到的網站，是由HTML (HyperText Markup Language) 語言所構成。HTML ( 超文件標記語言 ) 是一種建立網頁文件的語言，透過標記式的指令 (Tag)，將影像、聲音、圖片、文字等連結顯示出來。 HTML標記是由 < 和 > 所括住的指令，主要分為 : 單標記指令、雙標記指令 ( 由 &l

31、t; 起始標記 >，< / 結束標記 >所構成 ) 。HTML網頁文件可由任何文本編輯器或網頁專用編輯器編輯，完成后 ( 以 .htm 或 .html 為文件后綴保存 ) 將HTML網頁文件由瀏覽器打開顯示，若測試沒有問題則可以放到服務器 (Server) 上，對外發(fā)布信息。二、HTML文件基本架構 <HTML> 文件開始 <HEAD> 標頭區(qū)開始 <TITLE>.</TITLE> 標題區(qū) </HEAD> 標頭區(qū)結束 <BODY> 本文區(qū)開始 本文區(qū)內容 </BODY> 本文區(qū)結束 說明：&l

32、t;/HTML> 文件結束 <HTML> 網頁文件格式。 <HEAD> 標頭區(qū) : 記錄文件基本資料，如作者、編寫時間。 <TITLE> 標題區(qū) : 文件標題須使用在標頭區(qū)內，可以在瀏覽器最上面看到標題。 <BODY> 本文區(qū) : 文件資料，即在瀏覽器上看到的網站內容。三、常用字體標記 <Hn>.</Hn> 標題，設定標題字體大小， n = 1 ( 大 ) 6 ( 小 ) 會自動跳下一行。通常用在如章節(jié)、段落等標題上。 1、如 : <H2> 標題 </H2> 標題2、如 : <H3 AL

33、IGN = CENTER> 標題 </H3> ( 標題置中 ) 標題3、<B>.</B> 粗體字。 如 : <B> 粗體字 </B> 粗體字 4、<I>.</I> 斜體字。 如 : <I> 斜體字 </I> 斜體字 5、<U>.</U> 加底線。 如 : <U> 加底線 </U> 加底線 6、<DEL>.</DEL> 橫線 ( 表示刪除 )。 如 : <DEL> 橫線 </DEL> 橫線

34、 7、<TT>.</TT> 打字體 ( 固定寬度文字 )。 如 : <TT> 打字體 </TT> 打字體 8、<SUP>.</SUP> 上標字。 如 : 字體 <SUP> 上標字 </SUP> 字體上標字 9、<SUB>.</SUB> 下標字。 如 : 字體 <SUB> 下標字 </SUB> 字體下標字 10、<!.> 注解 ( 不會顯示在瀏覽器上 )，可以多行。 如 : <! 更新日期 : 2000/1/1> 四、設定字體大小

35、、顏色、字型有關設定文字的方法共有以下幾種 : 1.設定HTML文件主體文字顏色。<BODY>.</BODY>標記。 如 : <BODY TEXT=RED>.</BODY> 或 <BODY TEXT=#FF0000>.</BODY> 2.設定基本字體大小、顏色、字型。<BASEFONT>.</BASEFONT>標記。 3.設定字體大小、顏色、字型。<FONT>.</FONT>標記。 4、<BASEFONT>.</BASEFONT> 設定基本字體，SIZ

36、E = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : <BASEFONT SIZE=4> 基本字體大小為 4 </BASEFONT> 基本字體大小為 4 如 : <BASEFONT COLOR =#FF0000> 設定顏色 </BASEFONT> 設定顏色 如 : <BASEFONT FACE = 標楷體 , 細明體 > 設定字型 </BASEFONT> 設定字型 <BIG>.</BIG> 基本字體加大。 如 : <BASEFONT SIZE=4> 基本字體大小為 4，</

37、BASEFONT> <BIG> 加大為 5 </BIG> 基本字體大小為 4，加大為 5 <SMALL>.</SMALL> 基本字體減小。 如 : <BASEFONT SIZE=4> 基本字體大小為 4，</BASEFONT> <SMALL> 減小為 3 </SMALL> 基本字體大小為 4，減小為 3 5、<FONT>.</FONT> 設定字體大小、顏色、字型，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : <FONT SIZE=4>

38、字體大小為 4 </FONT> 字體大小為 4 如 : <BASEFONT SIZE=4> 基本字體大小為 4 <FONT SIZE=+1> +1字體大小為 5 </FONT> <FONT SIZE=-2> -2字體大小為 2 </FONT>.</BASEFONT> 基本字體大小為 4 +1字體大小為 5 -2字體大小為 2 如 : <FONT COLOR =#FF0000> 設定顏色 </FONT> 設定顏色 如 : <FONT FACE = 標楷體 , 細明體 > 設定字

39、型 </FONT>設定字型五、常用表格標記 <TABLE>.</TABLE> 表格指令。 相關屬性 : ·ALIGN 調整 ·BGCOLOR 背景顏色 ·BORDER 邊框 ·HEIGHT 高度 ·WIDTH 寬度 <CAPTION>.</CAPTION> 表格標題。 <TR>.</TR> 表格列 ( </TR>可省略 ) 。 <TH>.</TH> 表格欄標題 ( 表頭 ) 粗體字 ( </TH>可省略 ) 。 &

40、#183;COLSPAN 欄寬 ·ROWSPAN 欄高 <TD>.</TD> 表格欄資料 ( 儲存格 ) ( </TD>可省略 ) 。 相關屬性 : ·ALIGN 調整 ·BGCOLOR 背景顏色 ·HEIGHT 高度 ·WIDTH 寬度 ·COLSPAN 欄寬 ·ROWSPAN 欄高 六、常用區(qū)段標記 <HR> 產生水平線。 如 : <HR ALING=CERTEN WIDTH=90%> <BR> 跳下一行。 如 : 太平洋網絡學院，<BR>

41、;網上學電腦的好去處。 太平洋網絡學院， 網上學電腦的好去處。 <P>.</P> 段落，跳下一行并加一行空白。 ( </P> 可省略 ) 如 : 太平洋網絡學院，<P>網上學電腦的好去處。 太平洋網絡學院，網上學電腦的好去處。 <CENTER>.</CENTER> 置中。 如 : <CENTER>置中</CENTER> 置中 <NOBR>.</NOBR> 不跳下一行。 如 : <NOBR>太平洋網絡學院，</NOBR>網上學電腦的好去處。 太平洋網絡學

42、院，網上學電腦的好去處。 <PRE>.</PRE> 以文件原始格式顯示。 如 : <PRE>原始格式: 文件</PRE> 原始格式: 文件 七、常用鏈接標記 <BASE> 設定基本URL位置或路徑，以後只要設定文件名稱即會自動加上位置或路徑。 相關屬性 : ·HREF 鏈接的URL位址或文件 ·TARGET 指定鏈接到的URL位址或文件顯示于那一個視窗 ( 可和 <FRAME> 視窗標記配合使用或開新的視窗 ) 如 : <BASE HREF="http :/ <A HREF=&qu

43、ot;kk.htm"></A> <BASE HREF="http : / TARGET=frame1> <A>.</A> 鏈接指令。 相關屬性 : ·HREF 鏈接的URL位址或文件 ·NAME 名稱 ·TARGET 指定鏈接到的URL位址或文件顯示于那一個視窗 ( 可和 <FRAME> 視窗標記配合使用或開新的視窗 ) 如 : 外部鏈接 <AHREF="http :/ <A HREF="http : / TARGET=frame1><

44、/A> ·設定十秒回到首頁。 ( 若不設定HTML文件位置則再載入原HTML文件 ) <META HTTP-EQUIV="REFRESH" CONTENT=10 URL=index.htm> 設定鏈接、未鏈接部份顏色 設定鏈接、未鏈接部份顏色，用<BODY>.</BODY>標記。 相關屬性 : ·ALINK按下鏈接部份未放開時顏色 ·LINK未看過的鏈接部份顏色 ·VLINK已看過的鏈接部份顏色 如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00

45、FF00> 八、框架窗口常用標記 <FRAMESET>.</FRAMESET> 定義分割窗口。 相關屬性 : ·BORDER 邊框 ·COLS 行 , 設定分割左右窗口寬度 ( 用,分隔，可設百分比 % ;*表示剩余部份 ) ·FRAMEBORDER 顯示邊框 ·ROWS 列 , 設定分割上下窗口高度 ( 用,分隔，可設百分比 % ;*表示剩余部份 ) FRAME> 定義窗口。 相關屬性 : ·FRAMEBORDER 顯示邊框 ·NAME 名稱 ·NORESIZE 設定是否可以調整窗口大小

46、 ·SRC 文件或URL位址 ·SCROLLING 設定是否可以卷動 NOFRAMES>.</NOFRAMES> 無支援分割窗口瀏覽器顯示文字。 IFRAME>.</IFRAME> 插入浮動窗口。 相關屬性 : ·BORDER 邊框 ·FRAMEBORDER 顯示邊框 ·NORESIZE 設定是否可以調整窗口大小 ·SRC 文件或URL位址 ·SCROLLING 設定是否可以卷動 舉例 如 : 浮動窗口 <CENTER> <IF RAME FRAME BORDER=YES

47、 SCROLLING=YES SRC=c1-01.htm> </IFRAME> </CENTER> 九、設定圖片的方法共有以下幾種 : 設定HTML文件背景圖片、背景顏色。<BODY>.</BODY>標記。 如 : <BODY BACKGROUND=A.GIF>.</BODY> 或 <BODY BGCOLOR=#000000>.</BODY> 設定圖片。<IMG>標記。 3、設定地圖。<MAP>.</MAP>標記。 常用圖片標記 <IMG> 指令

48、 相關屬性 : ·ALIGN 調整 ·ALT 提示字 ·BORDER 邊框 ·HEIGHT 高度 ·SRC 文件或URL位址 ·USEMAP 地圖名稱 ·WIDTH 寬度 如 : 可插入圖片 ( GIF、JPG格式 )、AVI電影 <CENTER> <IMG SRC="./././images/pcedu_lo.gif" ALT="太平洋網絡學院" ALIGN=TOP BORDER=1> </CENTER> <MAP>.</MAP&

49、gt; 地圖 相關屬性 : ·NAME 名稱 <AREA> 設定地圖動作區(qū)域 相關屬性 : ·COORDS 設定動作區(qū)域座標 ( 左上角座標 : X1,Y1 ; 右下角座標 : X2,Y2 ) ·HREF 動作區(qū)域連結點 ( 可載入位址或文件 ) ·NOHREF 動作區(qū)域連結點不動作 ·SHAPE 外型 十、常用音樂標記 <BGSOUND> 背景音樂、音效。 相關屬性 : ·LOOP 循環(huán) , 背景音樂播放次數(shù) ·SRC 文件或URL位址 (可為WAV、MIDI格式 ) 如 : <BGSOUND

50、 SRC=m-1.mid LOOP=True> 內嵌音樂插件 <EMBED>.</EMBED> 內嵌插件。 相關屬性 : ·HEIGHT 高度 ·WIDTH 寬度 ( 可設百分比% ) ·SRC 設定內嵌物件的 URL 位址 ·LOOP 循環(huán) , 背景音樂播放次數(shù) ·AUTOSTART 自動播放 如 : <EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED> 十一、【文字卷動標記】 <MARQUE

51、E>.</MARQUEE> 文字卷動 ( 滾動條 )。【相關屬性】 ·BEHAVIOR = 設定卷動方式 - ALTERNATE 交替來回卷動 - SCROLL 卷動 ( 預設 ) - SLIDE 滑動 ·BGCOLOR = color 背景顏色 ·DIRECTION = 設定卷動方向 ·HEIGHT = n 高度 ·LOOP = n 循環(huán) , 卷動次數(shù) ( 預設循環(huán) ) ·SCROLLAMOUNT = n 設定卷動距離 ·SCROLLDELAY = milliseconds 設定卷動時間 ·TR

52、UESPEED = milliseconds 設定卷動速度 ·WIDTH = n 寬度 ( 可設百分比% ) 【舉例】 例一 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>太平洋網絡學院</FONT></MARQUEE> 如 : <MARQUEE BGCOLOR=GREEN HEIGHT=50 BEHAVIOR=SCROLL DIRECTION=UP SCROLLA

53、MOUT=10 SCROLLDELAY=300> <FONT COLOR=WHITE><CENTER>太平洋網絡學院</CENTER></FONT></MARQUEE>【課程小結】【作業(yè)】15 課后練習書本課后練習作業(yè)第十三章 使用CSS樣式【計劃課時】：3課時【授課班級】：計算機應用一班【教學目的與要求】【教學方法與手段】多媒體教學：借助多媒體手段，進行課堂理論教學；啟發(fā)式教學：教學活動關注的重點從結果轉向過程。激發(fā)思維，師生互動，增強學生學習的主動性、積極性和創(chuàng)造性； 【教學重點與難點】：基礎知識：。重點知識：【教

54、學組織過程】1上講回顧2教授新知【授課內容】一、CSS概述CSS（Cascading Stylesheets，層疊樣式表）是一種制作網頁的新技術，現(xiàn)在已經為大多數(shù)的瀏覽器所支持，成為網頁設計必不可少的工具之一。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大減少了重復勞動的工作量。CSS樣式有以下幾個重要的作用：1、將格式與結構分離2、增強控制頁面布局的能力3、簡化代碼，提高下載速度4、使維護和更新網頁變得更加容易5、代碼兼容性更好B二、創(chuàng)建一個新的CSS樣式1、顯示“CSS樣式”面板（“窗口”“CSS樣式”）“附加CSS樣式”按鈕、“新建CSS樣式”、“

55、編輯CSS樣式”按鈕、“刪除CSS樣式”2、創(chuàng)建自定義CSS樣式（在“CSS樣式”面板中選擇“新建CSS樣式”按鈕）類（可應用于任何標簽）輸入名稱：（加“.”）定義在：新建樣式表文件、僅對該文檔標簽（重新定義特定標簽的外觀）標簽：（選擇標簽）選擇類型定義在：高級（ID、上下文選擇器等）a:link：定義正常狀態(tài)下鏈接文字的樣式a:visited：定義已訪問過的鏈接文字的樣式a:hover：定義鼠標指針移到鏈接文字時文字的樣式a:active：定義按下鼠標左鍵時鏈接文字的樣式三、設置CSS樣式格式1、編輯CSS樣式文字格式字體、大小、粗細、樣式、變量、行高、大小寫、修飾、顏色2、編輯CSS樣式背

56、景格式背景顏色、背景圖像、重復、附件、水平位置、垂直位置3、編輯CSS樣式塊格式單詞間距、字母間距、垂直對齊、文本對齊、文字縮進、空格、顯示4、編輯CSS樣式框格式寬、高、浮動、清除、填充、邊界5、編輯CSS樣式邊框格式樣式、寬度、顏色6、編輯CSS樣式列表格式類型、項目符號圖像、位置7、編輯CSS樣式定位格式類型、顯示、寬、高、Z軸、溢出、定位、剪輯編輯CSS樣式擴展格式分頁、視覺效果四、應用CSS樣式 添加層疊樣式表的方法我們?yōu)榫W頁添加樣式表的方法有四種。1最簡單的方法是直接添加在HTML的標識符（tag）里：< Tag style=”properties”>網頁內容<

57、/tag>舉個例子：< p style=”color: blue; font-size: 10pt”>CSS實例< /p>代碼說明：用藍色顯示字體大小為10pt的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢“內容結構和格式控制分別保存”。2添加在HTML的頭信息標識符< head>里：< head>< style type=”text/css”>< !- 樣式表的具體內容 ->< /style>< /head>type=”text/css

58、”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標識符“< !-注釋內容->”。3鏈接樣式表同樣是添加在HTML的頭信息標識符< head>里：< head>< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>< /head>*.css是單獨保存的樣式表文件，其中不能包含< style>標識符，并且只能

59、以css為后綴。Media是可選的屬性，表示使用樣式表的網頁將用什么媒體輸出4聯(lián)合使用樣式表同樣是添加在HTML的頭信息標識符< head>里：< head>< style type=”text/css”>< !-import “*.css”其他樣式表的聲明->< /style>< /head>以import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因為聯(lián)合法可以在鏈接外部樣式表的同時，針對該網頁的具體情況，做出別的網頁不需要的樣式規(guī)則。需要注意的是：·聯(lián)合法輸入樣式表必須以import開頭。·如果同時輸入多個樣式表有沖突的時候，將按照第一個輸入的樣式表對網頁排版。·如果輸入的樣式表和網頁里的樣式規(guī)則沖突時，使用外部的樣式表。 層疊樣式表的格式 一般來說，樣式表的聲明分為選擇符（selector）和塊（block），塊里包含屬