網(wǎng)頁設(shè)計(jì)及制作-教案

1、-. z.網(wǎng)頁設(shè)計(jì)和發(fā)布流程第一步是對站點(diǎn)進(jìn)展規(guī)劃第二步是創(chuàng)立站點(diǎn)的根本構(gòu)造第三步即可開場具體的網(wǎng)頁創(chuàng)作過程最后一步是站點(diǎn)的發(fā)布第一節(jié) 站點(diǎn)的規(guī)劃與創(chuàng)立【教學(xué)目的與要求】一、規(guī)劃站點(diǎn)二、創(chuàng)立一個(gè)站點(diǎn)【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：規(guī)劃站點(diǎn)重點(diǎn)知識(shí)：創(chuàng)立一個(gè)站點(diǎn)2課時(shí)【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、規(guī)劃站點(diǎn)Web站點(diǎn)是一組具有共享屬性如相關(guān)主題、類似的設(shè)計(jì)或共同目的等的文檔。本地站點(diǎn)：是本地硬盤中存放遠(yuǎn)程所有

2、文檔的地方文件夾。建立的通常做法是：在要地硬盤中建立一個(gè)文件夾用來存放的所有文件，往后就在該文件夾中創(chuàng)立和編輯文檔。待網(wǎng)頁設(shè)計(jì)和測試好之后，再把它們拷貝到上供瀏覽者瀏覽。1、規(guī)劃站點(diǎn)構(gòu)造注：規(guī)劃站點(diǎn)的構(gòu)造之前應(yīng)先用筆繪出站點(diǎn)的構(gòu)造圖如下列圖所示是一個(gè)典型的學(xué)校站點(diǎn)的構(gòu)造圖2、規(guī)劃站點(diǎn)的瀏覽機(jī)制一般可采用以下的方法：創(chuàng)立返回主頁的顯示專題目錄顯示當(dāng)前位置搜索和索引反應(yīng)將網(wǎng)頁創(chuàng)作者或管理員公布在網(wǎng)頁上，或創(chuàng)立一個(gè)超級，以使用戶能快速地將信息反應(yīng)到中二、創(chuàng)立一個(gè)站點(diǎn)步驟：1、單擊文件新建站點(diǎn)命令或單擊常用工具欄中新建網(wǎng)頁按鈕的下拉箭頭，從翻開的下拉菜單中選擇站點(diǎn)命令2、選擇一種站點(diǎn)模板或向?qū)?、單擊

3、確定按鈕三、站點(diǎn)的根本操作1、翻開站點(diǎn)：文件翻開站點(diǎn)2、刪除站點(diǎn)：方法一：在Windows資源管理器中刪除一個(gè)站點(diǎn)方法二：在FrontPage中刪除站點(diǎn)，在文件夾視圖或網(wǎng)頁視圖的文件夾列表中，右擊站點(diǎn)所對應(yīng)的目錄，在快捷菜單中單擊刪除命令3、站點(diǎn)的設(shè)置工具站點(diǎn)設(shè)置，有常規(guī)、參數(shù)、高級、語言、導(dǎo)航、數(shù)據(jù)庫六個(gè)選項(xiàng)卡【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第二節(jié) 利用表格進(jìn)展網(wǎng)頁布局【教學(xué)目的與要求】一、 插入表格二、 單元格的根本操作【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積

4、極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)： 插入表格重點(diǎn)知識(shí)：單元格的根本操作【教學(xué)組織過程】2課時(shí)2課時(shí)1上講回憶2教授新知【授課容】一、 插入表格1、單擊常用工具上的插入表格按鈕2、單擊表格插入表格命令3、使用表格工具欄查看工具欄表格命令4、由文本轉(zhuǎn)換表格轉(zhuǎn)換文本到表格一般以段落為分行標(biāo)記，以逗號或句號為分列標(biāo)記。二、 單元格的根本操作1、選擇單元格表格選定單元格Ctrl：可選擇不相鄰的單元格Shift：選擇多個(gè)相鄰的單元格2、插入單元格表格插入單元格3、合并單元格表格合并單元格或表格工具欄上的合并單元格按鈕4、拆分單元格表格拆分單元格或表格工具欄上的拆分單元格按鈕三、填充單元格1、文本

5、與圖像填充插入圖片2、對齊文本與圖像表格屬性單元格，水平對齊方式、垂直對齊方式3、修改單元格背景表格屬性單元格，背景4、調(diào)整邊框顏色表格屬性單元格，邊框5、改變單元格尺寸表格屬性單元格，指定寬度、指定高度四、修改表格的行與列1、選擇行與列2、插入行與列表格插入行或列3、均分行與列表格工具欄中的平均分配行高或平均分配列寬4、刪除行與列表格工具欄中的刪除單元格按鈕或表格刪除單元格命令【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第三節(jié) 利用框架設(shè)計(jì)網(wǎng)頁布局【教學(xué)目的與要求】認(rèn)識(shí)框架網(wǎng)頁創(chuàng)立框架網(wǎng)頁三、框架網(wǎng)頁的保存和翻開【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)

6、：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：認(rèn)識(shí)框架網(wǎng)頁重點(diǎn)知識(shí)：創(chuàng)立框架網(wǎng)頁【教學(xué)組織過程】2課時(shí)2課時(shí)1上講回憶2教授新知【授課容】一、認(rèn)識(shí)框架網(wǎng)頁 1、框架的概念 框架網(wǎng)頁是一種特殊的網(wǎng)頁，它將自身分成幾個(gè)區(qū)域，每個(gè)區(qū)域稱作一個(gè)框架窗口通常簡稱為框架框架具有以下特性：每個(gè)框架都可以獨(dú)立地顯示一個(gè)網(wǎng)頁，各個(gè)框架窗口之間可以設(shè)立超。每個(gè)框架窗口可以賦予一個(gè)名字，以便其他URL作為目標(biāo)調(diào)用。2、框架的使用場合如、論壇通常用框架來顯示在同一個(gè)站點(diǎn)中的多個(gè)超，這樣可以不用瀏覽器中的后退按鈕而方便的進(jìn)展瀏覽?？蚣芤策m用于

7、類似在線書籍的應(yīng)用，將目錄顯示在左邊的框架中，單擊目錄，右邊框架中顯示相關(guān)的章節(jié)二、創(chuàng)立框架網(wǎng)頁 1、框架網(wǎng)頁的創(chuàng)立文件新建網(wǎng)頁，選擇框架網(wǎng)頁選項(xiàng)卡 2、框架網(wǎng)頁模板10種 設(shè)置初始網(wǎng)頁新建網(wǎng)頁三、框架網(wǎng)頁的保存和翻開框架網(wǎng)頁的保存包括框架網(wǎng)頁自身的保存和框架窗口中網(wǎng)頁的保存。 1、框架網(wǎng)頁的保存文件保存文件或框架保存網(wǎng)頁 2、框架網(wǎng)頁的翻開 框架在新窗口中翻開網(wǎng)頁框架網(wǎng)頁的屬性 1、框架網(wǎng)頁的屬性 文件屬性框架間距、顯示邊框2、框架的屬性 框架框架屬性五、調(diào)整框架布局 1、調(diào)整框架窗口的大小用鼠標(biāo)拖動(dòng)或在框架屬性對話框中調(diào)整 2、框架的拆分方法一：框架拆分框架按行或按列拆分方法二：用鼠標(biāo)拖動(dòng)

8、拆分按Ctrl鍵3、框架的刪除 框架刪除框架六、目標(biāo)框架當(dāng)在框架網(wǎng)頁的*一個(gè)框架中定義超時(shí)，需要指定被的網(wǎng)頁顯示在哪一個(gè)框架中，即指定超的目標(biāo)框架。選擇要設(shè)置超的文字或圖像，插入超，單擊目標(biāo)框架、更改目標(biāo)框架【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第四節(jié) 使用導(dǎo)航欄【教學(xué)目的與要求】一、定義導(dǎo)航構(gòu)造二、認(rèn)識(shí)導(dǎo)航欄屬性三、創(chuàng)立導(dǎo)航欄【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：定義導(dǎo)航構(gòu)造重點(diǎn)知識(shí)：認(rèn)識(shí)導(dǎo)航欄屬性【教學(xué)組織過程】2課時(shí)2

9、課時(shí)1上講回憶2教授新知【授課容】一、定義導(dǎo)航構(gòu)造在網(wǎng)頁添加導(dǎo)航欄之前，先建立該站點(diǎn)的導(dǎo)航構(gòu)造視圖導(dǎo)航按鈕二、認(rèn)識(shí)導(dǎo)航欄屬性插入導(dǎo)航欄按鈕父層：創(chuàng)立指向當(dāng)前網(wǎng)頁上一級網(wǎng)頁的超，并將上一級網(wǎng)頁的標(biāo)題名稱顯示在導(dǎo)航欄。三、創(chuàng)立導(dǎo)航欄要在瀏覽器中才可看到實(shí)際導(dǎo)航欄效果四、創(chuàng)立共享邊框用創(chuàng)立導(dǎo)航欄的方法只能在一個(gè)網(wǎng)頁中創(chuàng)立導(dǎo)航欄，假設(shè)需要導(dǎo)航欄出現(xiàn)在站點(diǎn)多個(gè)網(wǎng)頁的一樣位置，則可將導(dǎo)航欄插入網(wǎng)頁的共享邊框。右擊編輯窗口，單擊共享邊框命令練習(xí)二、利用框架設(shè)計(jì)一個(gè)企業(yè)的布局要求有如下容：關(guān)于我們、商品展示、在線訂購、網(wǎng)上留言、聯(lián)系我們、產(chǎn)品目錄、友情等?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第五

10、節(jié) 網(wǎng)頁布局功能的應(yīng)用【教學(xué)目的與要求】創(chuàng)立布局表格繪制布局表格【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：創(chuàng)立布局表格重點(diǎn)知識(shí)：繪制布局表格【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、創(chuàng)立布局表格 1、創(chuàng)立布局表格 翻開一個(gè)空白網(wǎng)頁，并切換到設(shè)計(jì)視圖下，單擊表格菜單中的布局表格和單元格命令，隨后在右側(cè)彈出一個(gè)任務(wù)窗口，在該任務(wù)窗口下面程序提供了多種表格布局模板，在此單擊其中需要的模板即可將該模板添加到網(wǎng)頁中。 2.繪制布局表格

11、如果你對模板中提供的布局表格不太滿意，還可以用手工繪制的方法創(chuàng)立一個(gè)布局表格。創(chuàng)立時(shí)首先在新建表格和單元格項(xiàng)中單擊繪制布局表格，隨后將指針移到操作窗口最左端，然后拖動(dòng)鼠標(biāo)即可繪制表格。 3、設(shè)置表格屬性插入表格后，還需對表格屬性進(jìn)展設(shè)置。在表格屬性項(xiàng)中設(shè)置該表格所需的屬性。 提示：在設(shè)置表格時(shí)，如果要想覆蓋網(wǎng)頁的默認(rèn)邊距，并讓布局表格跨到文檔窗口的邊緣，可以將表格中的各個(gè)邊距的屬性都設(shè)置為0。在設(shè)計(jì)框架時(shí)經(jīng)常需要調(diào)整*一行或列的屬性，這時(shí)可以通過表格中列寬和行高的標(biāo)簽來完成。在操作窗口中單擊布局表格需要調(diào)整的邊框，每一側(cè)都會(huì)出現(xiàn)顯示列寬和行高的標(biāo)簽。每個(gè)標(biāo)簽都包括一個(gè)下拉箭頭，如更改行高度時(shí)，

12、單擊此下拉箭頭彈出一個(gè)下拉菜單，選擇更改行高命令，在彈出的行屬性對話框中重新輸入該行高度值即可。練習(xí)三、使用布局功能設(shè)計(jì)學(xué)校要求包括有以下容：學(xué)校簡介、校園新聞、教育教學(xué)、學(xué)生天地、校園論壇、教師之家等【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第六節(jié) 網(wǎng)頁布局設(shè)計(jì) 【教學(xué)目的與要求】一、文本的美化格式字體二、 運(yùn)用邊框與陰影格式邊框與陰影 1、設(shè)置邊框 2、設(shè)置陰影 【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：文本的美化格式字體重點(diǎn)知

13、識(shí)：運(yùn)用邊框與陰影格式邊框與陰影 1、設(shè)置邊框 2、設(shè)置陰影 【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、文本的美化格式字體1、輸入文本2、美化文本設(shè)置文本字體、字號 注：字符的大小共有6級，其中默認(rèn)級別是3。 3、設(shè)置文本效果 4、改變文本顏色 5、設(shè)置字符間距 二、 運(yùn)用邊框與陰影格式邊框與陰影 1、設(shè)置邊框 2、設(shè)置陰影 三、 使用列表格式工程符號和編號方式 1、添加工程列表 。 工程列表也稱為無序列表，它將在工程前添加標(biāo)志符號?？梢詫D片作為新的工程標(biāo)志。經(jīng)常使用的工程符號有3種：實(shí)心黑點(diǎn)、空心圓圈和實(shí)心方塊。 2、添加編號列表在網(wǎng)頁中的容存在順序關(guān)系時(shí)，可應(yīng)用編號列表。3

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

15、程。 6第2級列表輸入完畢后，將光標(biāo)移到別的位置或者用鼠標(biāo)在頁面的空白處單擊一下即可完成第2級列表的設(shè)置操作。 嵌套列表可以轉(zhuǎn)變?yōu)榭烧郫B大綱，這樣在瀏覽器中瀏覽時(shí)，就可以展開或折疊大綱中的各個(gè)級次。生成可折疊大綱的具體操作步驟如下： l按生成復(fù)合列表的方法構(gòu)造好這個(gè)復(fù)合列表所有的列表級次。2選擇格式菜單中的工程符號和編號方式命令，翻開工程符號和編號方式對話框，或者在列表中單擊右鍵，從彈出的菜單中選擇列表屬性命令。3在翻開的對話框中，選中啟用可折疊大綱復(fù)選框。 4單擊確定按鈕。練習(xí)四、設(shè)計(jì)一個(gè)介紹風(fēng)景及特產(chǎn)的網(wǎng)頁要求：設(shè)計(jì)一個(gè)網(wǎng)頁介紹的風(fēng)景及特產(chǎn)，要用到折疊列表的方式來分別介紹陽東、陽西、陽春等

16、的不同地區(qū)的風(fēng)景名勝及特產(chǎn)?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第七節(jié) 網(wǎng)頁裝飾設(shè)計(jì)【教學(xué)目的與要求】一、添加圖像二、處理圖像【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：添加圖像重點(diǎn)知識(shí)：二、處理圖像【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、添加圖像在瀏覽器中，能處理的圖片格式只有GIF、JPEG格式和PNG格式等少數(shù)幾種圖片。1、GIF格式圖片 GIF格式最多能支持256種顏色8位顏色?？梢跃哂型该?、動(dòng)畫等特殊效

17、果。 2、JPEG格式文件 JPEG格式可以處理高達(dá)1670萬種顏色24位顏色，所以在需要顯示細(xì)微的變化和使用大量的色彩處理照片時(shí)經(jīng)常使用這種格式保存文件。插入本地計(jì)算機(jī)上的圖像插入圖片來自文件，從計(jì)算機(jī)選擇一個(gè)文件插入WEB上的圖像插入圖片來自文件，從WEB瀏覽器來選擇網(wǎng)頁或文件二、處理圖像1、剪裁圖像圖片工具欄剪裁按鈕2、設(shè)置透明背景圖片工具欄設(shè)置透明色按鈕三、添加文本圖片工具欄文本按鈕四、保存圖像注：默認(rèn)情況下，當(dāng)前站點(diǎn)的圖像文件保存在Images文件夾中五、運(yùn)用特殊效果1、調(diào)整圖片的亮度和比照度2、圖片的翻轉(zhuǎn)與旋轉(zhuǎn)3、圖片的沖蝕和黑白處理4、凹凸效果六、設(shè)置圖片對齊方式圖片屬性外觀布局

18、對齊方式七、使用水平線水平線是貫穿網(wǎng)頁寬度的細(xì)灰條，用于分隔文本或加著重符。添加水平線后，可以修改其屬性來更改寬度、高度、對齊方式和顏色。如果網(wǎng)頁使用了主題，則會(huì)使用圖形來代替水平線以匹配主題。1、插入水平線2、設(shè)置水平線屬性八、 修改網(wǎng)頁背景格式背景1、調(diào)整背風(fēng)光彩2、調(diào)整背景圖案九、創(chuàng)立交換圖像DW 20041、插入交換圖像插入圖像對象鼠標(biāo)經(jīng)過圖像原始圖像、鼠標(biāo)經(jīng)過圖像、按下時(shí)，前往的URL預(yù)覽交換圖像：F12【課程小結(jié)】a【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第八節(jié) 創(chuàng)立超 【教學(xué)目的與要求】一、與當(dāng)前站點(diǎn)的二、與空白網(wǎng)頁的三、與電子信箱的【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)

19、展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：創(chuàng)立熱點(diǎn)重點(diǎn)知識(shí)：與電子信箱的【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、與當(dāng)前站點(diǎn)的插入 超，搜索當(dāng)前站點(diǎn)的文件夾位置二、與空白網(wǎng)頁的插入 超，創(chuàng)立一網(wǎng)頁并到該網(wǎng)頁三、與電子信箱的插入 超，制作發(fā)送電子的超四、與Web的插入超，使用WEB瀏覽器來選擇網(wǎng)頁或文件，ALT+TAB，則網(wǎng)頁地址自動(dòng)添加到URL中五、修改顏色網(wǎng)頁屬性背景，顏色超、已訪問的超、當(dāng)前超 六、使用圖像地圖1、創(chuàng)立熱點(diǎn) 在圖片中創(chuàng)立熱點(diǎn)的具體操作步驟如下： 選中要建

20、立熱點(diǎn)的圖片。圖片被選中后，四周將出現(xiàn)8個(gè)控制方塊，并且圖片工具欄被激活。 在圖片工具欄中，選擇熱點(diǎn)的形狀的圖標(biāo)?？梢赃x擇長方形、圓形或多邊形。將鼠標(biāo)移動(dòng)到圖片中。這時(shí)，鼠標(biāo)指針變成一支筆的模樣。用鼠標(biāo)左鍵單擊圖片中要建立熱點(diǎn)的區(qū)域并拖動(dòng)鼠標(biāo)來繪制熱點(diǎn)。盡量讓熱點(diǎn)和圖片上的特征區(qū)域相配合熱點(diǎn)繪制完畢，圖片中將出現(xiàn)該熱點(diǎn)的邊框。翻開插入超對話框，建立到熱點(diǎn)上的超的過程與建立到文本上的超的過程根本一樣。 練習(xí)五、設(shè)計(jì)一個(gè)介紹一年四季風(fēng)景的要求：用到嵌套列表、框架、超、圖像熱點(diǎn)等技術(shù)?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第九節(jié) 表單設(shè)計(jì)【教學(xué)目的與要求】一、 認(rèn)識(shí)表單二、 生成表單三、

21、 表單容編輯【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：認(rèn)識(shí)表單重點(diǎn)知識(shí)： 表單容編輯【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、 認(rèn)識(shí)表單表單的作用：表單就是瀏覽者可以在網(wǎng)頁中填寫信息的表格，其作用是接收瀏覽者填寫的信息并將其提交給表單處理程序進(jìn)展處理。二、 生成表單1、表單的創(chuàng)立與表單字段的添加插入表單2、表單向?qū)募陆ňW(wǎng)頁-常規(guī)表單網(wǎng)頁向?qū)?表單容編輯1、單行文本框2、滾動(dòng)文本框3、復(fù)選框4、單項(xiàng)選擇按鈕5、下拉菜單6

22、、按鈕7、圖片8、標(biāo)簽9、隱藏的表單字段四、驗(yàn)證性表單字段驗(yàn)證有效性按鈕五、 表單處理程序右擊表單，選擇表單屬性命令，提供了保存表單數(shù)據(jù)的三種不同處理方式：1、發(fā)送到文件單擊選項(xiàng)按鈕，進(jìn)展設(shè)置2、發(fā)送到數(shù)據(jù)庫3、討論表單處理程序4、注冊表單處理程序5、自定義ISAPI、NSAPI、CGI或ASP腳本練習(xí)六：制作表單制作一個(gè)注冊信息表單，要求包括下面的容：會(huì)員、您的、您的性別、輸入密碼、密碼確認(rèn)、密碼提示問題、密碼提示答案、電子、常用、收貨地址、郵政編碼、提交按鈕、重填按鈕【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十節(jié) 層及應(yīng)用DW 2004【教學(xué)目的與要求】一、層概述二、創(chuàng)立層【教學(xué)

23、方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：層概述重點(diǎn)知識(shí)：創(chuàng)立層【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、層概述層Layer是一種 HTML 頁面元素，您可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它 HTML 文檔。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。可以使頁面上元素進(jìn)展重疊和復(fù)雜的布局。 二、創(chuàng)立層方法一：插入布局對象層方法二：插入工具欄布局 描繪層，按住鼠標(biāo)拖動(dòng)方法三：插入工具欄布局，拖動(dòng) 描繪層按鈕到文檔窗口按C

24、TRL鍵，可繪制多層三、 通過拖動(dòng)周圍的黑色調(diào)整柄控制層的大小四、 拖動(dòng)層左上角的選擇柄可以移動(dòng)層的位置。五、 單擊層標(biāo)記可以選中一個(gè)層。顯示層標(biāo)記的方法：編輯首選參數(shù)分類不可見元素六、顯示層面板窗口層1、層的隱藏與顯示2、層數(shù)3、層重疊 七、層和表格之間的轉(zhuǎn)換在轉(zhuǎn)換為表格之前，請確保層沒有重疊。 修改轉(zhuǎn)換層到表格假設(shè)要將表格轉(zhuǎn)換為層，請選擇修改轉(zhuǎn)換表格到層【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)、第十一節(jié) 行為 【教學(xué)目的與要求】一、行為概述【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)

25、的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：行為概述【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、行為概述行為是一種利用簡單直觀的語句設(shè)置手段，為網(wǎng)頁對象添加一些動(dòng)態(tài)效果和簡單的交互功能的技術(shù)。行為是事件和由該事件觸發(fā)的動(dòng)作的組合。 下面給出一些常見事件的一些解釋onClick 單擊onDbclick 雙擊onKeypress按鍵onMouseDown鼠標(biāo)按下onMouseOut鼠標(biāo)移出onMouseOver鼠標(biāo)移上onMouseUp鼠標(biāo)抬起。 實(shí)例：dreamweaver中網(wǎng)頁折疊菜單的制作第一步：先插入一個(gè)一行、兩列的表格，方法：單擊菜單上的插入 ，再選取表格 ，在行

26、中輸入1，在列中輸入2，在單擊確定。把寬和高分別設(shè)為200p*和30p* 在兩個(gè)單元格分別輸入 容第二步，在單元格插入一個(gè)層。把寬和高分別設(shè)為100p*和90p* 第三步：在層中插入一個(gè)三行、一列的表格，方法同第一步。并把寬和高分別設(shè)為100p*和90p*,以填滿這個(gè)層。在三個(gè)單元格中輸入容 在層的屬性欄中將可視設(shè)為隱藏，這樣在翻開網(wǎng)頁時(shí)便看不見這個(gè)層 在行為目標(biāo)中選擇一個(gè)適宜的瀏覽器，一般是選擇IE 4.0。然后單擊左邊的+按鈕，來添加行為。在彈出的菜單中選擇顯示或隱藏層 ， 在彈出的窗口中選擇 Layer1 ，就是我們剛剛添加的那個(gè)層了，再單擊顯示接著單擊事件下面右邊的那個(gè)向下箭頭按鈕，在

27、彈出菜單中選擇當(dāng)鼠標(biāo)移上OnMouseOver。再單擊+按鈕，選取顯示或隱藏層，還是選取Layer1，不過這次我們點(diǎn)擊的是隱藏Hide了，再確定。然后選擇事件，單擊當(dāng)鼠標(biāo)移開(OnMouseOut)?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十二節(jié) HTML語言根底【教學(xué)目的與要求】一、HTML語言概述二、HTML文件根本架構(gòu)【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)： HTML語言概述重點(diǎn)知識(shí)：HTML文件根本架構(gòu)【教學(xué)組織過程】

28、2課時(shí)1上講回憶2教授新知【授課容】一、HTML語言概述當(dāng)我們暢游Internet時(shí)，我們透過瀏覽器所看到的，是由HTML (HyperTe*t Markup Language) 語言所構(gòu)成。HTML ( 超文件標(biāo)記語言 ) 是一種建立網(wǎng)頁文件的語言，透過標(biāo)記式的指令 (Tag)，將影像、聲音、圖片、文字等連結(jié)顯示出來。 HTML標(biāo)記是由 所括住的指令，主要分為 : 單標(biāo)記指令、雙標(biāo)記指令 ( 由 ，所構(gòu)成 ) 。HTML網(wǎng)頁文件可由任何文本編輯器或網(wǎng)頁專用編輯器編輯，完成后 ( 以 .htm 或 .html 為文件后綴保存 ) 將HTML網(wǎng)頁文件由瀏覽器翻開顯示，假設(shè)測試沒有問題則可以放到效

29、勞器 (Server) 上，對外發(fā)布信息。二、HTML文件根本架構(gòu) 文件開場 標(biāo)頭區(qū)開場 . 標(biāo)題區(qū) 標(biāo)頭區(qū)完畢 本文區(qū)開場 本文區(qū)容 本文區(qū)完畢 說明： 文件完畢 網(wǎng)頁文件格式。 標(biāo)頭區(qū) : 記錄文件根本資料，如作者、編寫時(shí)間。 標(biāo)題區(qū) : 文件標(biāo)題須使用在標(biāo)頭區(qū)，可以在瀏覽器最上面看到標(biāo)題。 本文區(qū) : 文件資料，即在瀏覽器上看到的容。三、常用字體標(biāo)記 . 標(biāo)題，設(shè)定標(biāo)題字體大小， n = 1 ( 大 ) 6 ( 小 ) 會(huì)自動(dòng)跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。 1、如 : 標(biāo)題 標(biāo)題2、如 : 標(biāo)題 ( 標(biāo)題置中 ) 標(biāo)題3、. 粗體字。 如 : 粗體字 粗體字 4、. 斜體字。

30、如 : 斜體字 斜體字 5、. 加底線。 如 : 加底線 加底線 6、. 橫線 ( 表示刪除 )。 如 : 橫線 橫線 7、. 打字體 ( 固定寬度文字 )。 如 : 打字體 打字體 8、. 上標(biāo)字。 如 : 字體 上標(biāo)字 字體上標(biāo)字 9、. 下標(biāo)字。 如 : 字體 下標(biāo)字 字體下標(biāo)字 10、 注解 ( 不會(huì)顯示在瀏覽器上 )，可以多行。 如 : 四、設(shè)定字體大小、顏色、字型有關(guān)設(shè)定文字的方法共有以下幾種 : 1.設(shè)定HTML文件主體文字顏色。.標(biāo)記。 如 : . 或 . 2.設(shè)定根本字體大小、顏色、字型。.標(biāo)記。 3.設(shè)定字體大小、顏色、字型。.標(biāo)記。 4、. 設(shè)定根本字體，SIZE = 1

31、 7，1 ( 最小 ) 7 ( 最大 )。 如 : 根本字體大小為 4 根本字體大小為 4 如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型 . 根本字體加大。 如 : 根本字體大小為 4， 加大為 5 根本字體大小為 4，加大為 5 . 根本字體減小。 如 : 根本字體大小為 4， 減小為 3 根本字體大小為 4，減小為 3 5、. 設(shè)定字體大小、顏色、字型，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 字體大小為 4 字體大小為 4 如 : 根本字體大小為 4 +1字體大小為 5 -2字體大小為 2 . 根本字體大小為 4 +1字體大小為 5 -2字體大小為 2

32、 如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型五、常用表格標(biāo)記 . 表格指令。 相關(guān)屬性 : ALIGN 調(diào)整 BGCOLOR 背景顏色 BORDER 邊框 HEIGHT 高度 WIDTH 寬度 . 表格標(biāo)題。 . 表格列 ( 可省略 ) 。 . 表格欄標(biāo)題 ( 表頭 ) 粗體字 ( 可省略 ) 。 COLSPAN 欄寬 ROWSPAN 欄高 . 表格欄資料 ( 儲(chǔ)存格 ) ( 可省略 ) 。 相關(guān)屬性 : ALIGN 調(diào)整 BGCOLOR 背景顏色 HEIGHT 高度 WIDTH 寬度 COLSPAN 欄寬 ROWSPAN 欄高 六、常用區(qū)段標(biāo)記 產(chǎn)生水平線。 如 : 跳下一行。

33、如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院， 網(wǎng)上學(xué)電腦的好去處。 . 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 . 置中。 如 : 置中 置中 . 不跳下一行。 如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 . 以文件原始格式顯示。 如 : 原始格式: 文件 原始格式: 文件 七、常用標(biāo)記 設(shè)定根本URL位置或路徑，以後只要設(shè)定文件名稱即會(huì)自動(dòng)加上位置或路徑。 相關(guān)屬性 : HREF 的URL位址或文件 TARGET 指定到的URL位址或文件顯示于那

34、一個(gè)視窗 ( 可和 視窗標(biāo)記配合使用或開新的視窗 ) 如 : . 指令。 相關(guān)屬性 : HREF 的URL位址或文件 NAME 名稱 TARGET 指定到的URL位址或文件顯示于那一個(gè)視窗 ( 可和 視窗標(biāo)記配合使用或開新的視窗 ) 如 : 外部 設(shè)定十秒回到首頁。 ( 假設(shè)不設(shè)定HTML文件位置則再載入原HTML文件 ) 設(shè)定、未部份顏色 設(shè)定、未部份顏色，用.標(biāo)記。 相關(guān)屬性 : ALINK按下部份未放開時(shí)顏色 LINK未看過的部份顏色 VLINK已看過的部份顏色 如 : 八、框架窗口常用標(biāo)記 . 定義分割窗口。 相關(guān)屬性 : BORDER 邊框 COLS 行 , 設(shè)定分割左右窗口寬度 (

35、 用,分隔，可設(shè)百分比 % ;*表示剩余部份 ) FRAMEBORDER 顯示邊框 ROWS 列 , 設(shè)定分割上下窗口高度 ( 用,分隔，可設(shè)百分比 % ;*表示剩余部份 ) FRAME 定義窗口。 相關(guān)屬性 : FRAMEBORDER 顯示邊框 NAME 名稱 NORESIZE 設(shè)定是否可以調(diào)整窗口大小 SRC 文件或URL位址 SCROLLING 設(shè)定是否可以卷動(dòng) NOFRAMES. 無支援分割窗口瀏覽器顯示文字。 IFRAME. 插入浮動(dòng)窗口。 相關(guān)屬性 : BORDER 邊框 FRAMEBORDER 顯示邊框 NORESIZE 設(shè)定是否可以調(diào)整窗口大小 SRC 文件或URL位址 SCR

36、OLLING 設(shè)定是否可以卷動(dòng) 舉例 如 : 浮動(dòng)窗口 九、設(shè)定圖片的方法共有以下幾種 : 設(shè)定HTML文件背景圖片、背景顏色。.標(biāo)記。 如 : . 或 . 設(shè)定圖片。標(biāo)記。 3、設(shè)定地圖。.標(biāo)記。 常用圖片標(biāo)記 指令 相關(guān)屬性 : ALIGN 調(diào)整 ALT 提示字 BORDER 邊框 HEIGHT 高度 SRC 文件或URL位址 USEMAP 地圖名稱 WIDTH 寬度 如 : 可插入圖片 ( GIF、JPG格式 )、AVI電影 . 地圖 相關(guān)屬性 : NAME 名稱 設(shè)定地圖動(dòng)作區(qū)域 相關(guān)屬性 : COORDS 設(shè)定動(dòng)作區(qū)域座標(biāo) ( 左上角座標(biāo) : *1,Y1 ; 右下角座標(biāo) : *2,Y

37、2 ) HREF 動(dòng)作區(qū)域連結(jié)點(diǎn) ( 可載入位址或文件 ) NOHREF 動(dòng)作區(qū)域連結(jié)點(diǎn)不動(dòng)作 SHAPE 外型 十、常用音樂標(biāo)記 背景音樂、音效。 相關(guān)屬性 : LOOP 循環(huán) , 背景音樂播放次數(shù) SRC 文件或URL位址 (可為WAV、MIDI格式 ) 如 : 嵌音樂插件 . 嵌插件。 相關(guān)屬性 : HEIGHT 高度 WIDTH 寬度 ( 可設(shè)百分比% ) SRC 設(shè)定嵌物件的 URL 位址 LOOP 循環(huán) , 背景音樂播放次數(shù) AUTOSTART 自動(dòng)播放 如 : 十一、【文字卷動(dòng)標(biāo)記】 . 文字卷動(dòng) ( 滾動(dòng)條 )?！鞠嚓P(guān)屬性】 BEHAVIOR = 設(shè)定卷動(dòng)方式 - ALTERN

38、ATE 交替來回卷動(dòng) - SCROLL 卷動(dòng) ( 預(yù)設(shè) ) - SLIDE 滑動(dòng) BGCOLOR = color 背景顏色 DIRECTION = 設(shè)定卷動(dòng)方向 HEIGHT = n 高度 LOOP = n 循環(huán) , 卷動(dòng)次數(shù) ( 預(yù)設(shè)循環(huán) ) SCROLLAMOUNT = n 設(shè)定卷動(dòng)距離 SCROLLDELAY = milliseconds 設(shè)定卷動(dòng)時(shí)間 TRUESPEED = milliseconds 設(shè)定卷動(dòng)速度 WIDTH = n 寬度 ( 可設(shè)百分比% ) 【舉例】 例一 : 太平洋網(wǎng)絡(luò)學(xué)院 如 : 太平洋網(wǎng)絡(luò)學(xué)院【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十三節(jié) 使用CS

39、S樣式【教學(xué)目的與要求】一、CSS概述二、創(chuàng)立一個(gè)新的CSS樣式【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：CSS概述重點(diǎn)知識(shí)：創(chuàng)立一個(gè)新的CSS樣式【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、CSS概述CSSCascading Stylesheets，層疊樣式表是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計(jì)必不可少的工具之一。使用CSS能夠簡化網(wǎng)頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量，

40、大大減少了重復(fù)勞動(dòng)的工作量。CSS樣式有以下幾個(gè)重要的作用：1、將格式與構(gòu)造別離2、增強(qiáng)控制頁面布局的能力3、簡化代碼，提高低載速度4、使維護(hù)和更新網(wǎng)頁變得更加容易5、代碼兼容性更好B二、創(chuàng)立一個(gè)新的CSS樣式1、顯示CSS樣式面板窗口CSS樣式附加CSS樣式按鈕、新建CSS樣式、編輯CSS樣式按鈕、刪除CSS樣式2、創(chuàng)立自定義CSS樣式在CSS樣式面板中選擇新建CSS樣式按鈕類可應(yīng)用于任何標(biāo)簽輸入名稱：加.定義在：新建樣式表文件、僅對該文檔標(biāo)簽重新定義特定標(biāo)簽的外觀標(biāo)簽：選擇標(biāo)簽選擇類型定義在：高級ID、上下文選擇器等a:link：定義正常狀態(tài)下文字的樣式a:visited：定義已訪問過的文

41、字的樣式a:hover：定義鼠標(biāo)指針移到文字時(shí)文字的樣式a:active：定義按下鼠標(biāo)左鍵時(shí)文字的樣式三、設(shè)置CSS樣式格式1、編輯CSS樣式文字格式字體、大小、粗細(xì)、樣式、變量、行高、大小寫、修飾、顏色2、編輯CSS樣式背景格式背景顏色、背景圖像、重復(fù)、附件、水平位置、垂直位置3、編輯CSS樣式塊格式單詞間距、字母間距、垂直對齊、文本對齊、文字縮進(jìn)、空格、顯示4、編輯CSS樣式框格式寬、高、浮動(dòng)、去除、填充、邊界5、編輯CSS樣式邊框格式樣式、寬度、顏色6、編輯CSS樣式列表格式類型、工程符號圖像、位置7、編輯CSS樣式定位格式類型、顯示、寬、高、Z軸、溢出、定位、剪輯編輯CSS樣式擴(kuò)展格式

42、分頁、視覺效果四、應(yīng)用CSS樣式 添加層疊樣式表的方法我們?yōu)榫W(wǎng)頁添加樣式表的方法有四種。1最簡單的方法是直接添加在HTML的標(biāo)識(shí)符tag里：網(wǎng)頁容舉個(gè)例子：CSS實(shí)例代碼說明：用藍(lán)色顯示字體大小為10pt的CSS實(shí)例。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因?yàn)檫@樣添加無法完全發(fā)揮樣式表的優(yōu)勢容構(gòu)造和格式控制分別保存。2添加在HTML的頭信息標(biāo)識(shí)符里：type=te*t/css表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，防止在瀏覽器面前直接以源代碼的方式顯示我們設(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標(biāo)識(shí)符。3樣式表同樣是添加

43、在HTML的頭信息標(biāo)識(shí)符里：*.css是單獨(dú)保存的樣式表文件，其中不能包含標(biāo)識(shí)符，并且只能以css為后綴。Media是可選的屬性，表示使用樣式表的網(wǎng)頁將用什么媒體輸出4聯(lián)合使用樣式表同樣是添加在HTML的頭信息標(biāo)識(shí)符里：以import開頭的聯(lián)合樣式表輸入方法和樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因?yàn)槁?lián)合法可以在外部樣式表的同時(shí)，針對該網(wǎng)頁的具體情況，做出別的網(wǎng)頁不需要的樣式規(guī)則。需要注意的是：聯(lián)合法輸入樣式表必須以import開頭。如果同時(shí)輸入多個(gè)樣式表有沖突的時(shí)候，將按照第一個(gè)輸入的樣式表對網(wǎng)頁排版。如果輸入的樣式表和網(wǎng)頁里的樣式規(guī)則沖突時(shí)，使用外部的樣式表。 層疊樣式表的格式

44、 一般來說，樣式表的聲明分為選擇符selector和塊block，塊里包含屬性properties和屬性的取值value，根本格式如下：選擇符 屬性：值其它格式1：選擇符1，選擇符2，選擇符3 屬性1：值1；屬性2：值2；屬性3：值3 其它格式2：選擇符1 選擇符2 屬性1：值1；屬性2：值2；屬性3：值3和格式1非常相似，只是在選擇符之間少加了，但作用卻大不一樣。表示如果選擇符2包括的容同時(shí)包括在選擇符1里的時(shí)候，所設(shè)置的樣式規(guī)則才起作用。層疊樣式表的分類為了使網(wǎng)頁的格式不過分的單調(diào)，必需讓一樣的選擇符也能分類，并能按照不同的類別來進(jìn)展不同的樣式設(shè)計(jì)。根本格式如下：選擇符.類別名 屬性：值類

45、別名將可以在HTML的標(biāo)識(shí)符里引用：網(wǎng)頁容控制字體的樣式 控制字體的樣式包括控制字體類型、字體大小、字體風(fēng)格、字體粗細(xì)四個(gè)局部。 1字體類型 根本格式如下： font-family: 字體名稱2字體大小 根本格式如下： font-size: 字號參數(shù) 3字體風(fēng)格 字體風(fēng)格只能控制各種斜體字的顯示。 根本格式如下： font-style: 斜體字的名稱 4字體粗細(xì) 根本格式如下： font-weight: 字體粗細(xì) 控制文字的樣式包括文字大小寫、文字修飾兩個(gè)局部。 1文字大小寫 根本格式如下： te*t-transform: 參數(shù) 文字修飾的主要用途是改變?yōu)g覽器顯示文字時(shí)的下劃線。 根本格式如下

46、： te*t-decoration: 參數(shù) 參數(shù)取值圍： underline：為文字加下劃線 overline：為文字加上劃線 line-through：為文字加刪除線 blink：使文字閃爍 none：不顯示上述任何效果控制文本的樣式包括單詞距離、字母距離、文本行距、文本水平對齊、文本垂直對齊文本縮進(jìn)六個(gè)局部。 1單詞間距 單詞間距指的是英文每個(gè)單詞之間的距離，不包括中文文字。 根本格式如下： word-spacing: 間隔距離 2、字母間距 字母間距是指英文字母之間的距離，功能、用法，以及參數(shù)的設(shè)置和單詞間距很相似。 根本格式如下： letter-spacing: 字母間距 根本格式如下

47、：line-height: 行間距離4文本水平對齊文本水平對齊可以控制文本的水平對齊，而且并不僅僅指文字容，也包括設(shè)置圖片、影像資料的對齊方式。根本格式如下：te*t-align: 參數(shù)參數(shù)的取值：left：左對齊right：右對齊center：居中對齊justify：相對左右對齊 文本垂直對齊根本格式如下：vertical-align: 參數(shù)參數(shù)取值：top：頂對齊bottom：底對齊te*t-top：相對文本頂對齊te*t-bottom：相對文本底對齊baseline：基準(zhǔn)線對齊middle：中心對齊sub：以下標(biāo)的形式顯示super：以上標(biāo)的形式顯示6文本縮進(jìn)根本格式如下：te*t-in

48、dent: 縮進(jìn)距離7、控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重復(fù)、背景圖片固定、背景定位六個(gè)局部。 1顏色屬性 根本格式如下： color: 參數(shù)背景顏色 根本格式如下： background-color: 參數(shù) 背景圖片 根本格式如下： background-image: url(URL) 背景圖片重復(fù) 背景圖片重復(fù)控制的是背景圖片平鋪與否，也就是說，結(jié)合背景定位的控制可以在網(wǎng)頁上的*處單獨(dú)顯示一幅背景圖片。根本格式如下： background-repeat: 參數(shù) 參數(shù)取值圍： no-repeat：不重復(fù)平鋪背景圖片 repeat-*：使圖片只在水平方向上平鋪 r

49、epeat-y：使圖片只在垂直方向上平鋪 5背景圖片固定 背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。如果不設(shè)置背景圖片固定屬性，瀏覽器默認(rèn)背景圖片隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。根本格式如下： background-attachment: 參數(shù) 參數(shù)取值圍： fi*ed：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對于瀏覽器的窗口而言，固定不動(dòng) scroll：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對于瀏覽器的窗口而言，一起滾動(dòng) 6背景定位 背景定位用于控制背景圖片在網(wǎng)頁中顯示的位置。 根本格式如下： background-position: 參數(shù)表 參數(shù)取值圍： 帶長度單位的數(shù)字參數(shù) top：相對前景對象頂對齊 bottom：相對前景對

50、象底對齊 left：相對前景對象左對齊 right：相對前景對象右對齊 center：相對前景對象中心對齊 列表符號 根本格式如下： list-style-type：參數(shù) 參數(shù)取值圍： disc：圓形 circle：空心圓 square：方塊 decimal：十進(jìn)制數(shù)字 lower-roman：小寫羅馬數(shù)字 upper-roman：大寫羅馬數(shù)字 lower-alpha：小寫希臘字母 upper-alpha：大寫希臘字母 none：無符號顯示 CSS提供了多達(dá)13種的鼠標(biāo)形狀，供我們選擇。 根本格式如下： cursor：鼠標(biāo)形狀參數(shù) CSS鼠標(biāo)形狀參數(shù)表： CSS代碼 鼠標(biāo)形狀 style=cu

51、rsor:hand 手形 style=cursor:crosshair 十字形 style=cursor:te*t 文本形 style=cursor:wait 沙漏形 style=cursor:move 十字箭頭形 style=cursor:help 問號形 style=cursor:e-resize 右箭頭形 style=cursor:n-resize 上箭頭形 style=cursor:nw-resize 左上箭頭形 style=cursor:w-resize 左箭頭形 style=cursor:s-resize 下箭頭形 style=cursor:se-resize 右下箭頭形 styl

52、e=cursor:sw-resize 左下箭頭形 在Front Page中應(yīng)用樣式表練習(xí)：1、使用CSS選擇器創(chuàng)立一個(gè)CSS樣式，定義網(wǎng)頁中超的各種狀態(tài)：正常狀態(tài)下文字的顏色為#FF0000，已訪問過的文字顏色為#00FF00，鼠標(biāo)指針移到文字時(shí)的文字顏色為#0000FF，按下鼠標(biāo)左鍵時(shí)的文字的顏色為#FFFF002、創(chuàng)立一個(gè)名為myfont的外部CSS樣式樣式表，將字體定義為粗體和斜體3、將第2題中創(chuàng)立的外部CSS樣式樣式表文件導(dǎo)入到文檔中，并在文檔的正文局部中應(yīng)用?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十四節(jié) 插入媒體【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體

53、手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：。重點(diǎn)知識(shí)：【教學(xué)組織過程】2課時(shí)1上講回憶2教授新知【授課容】一、媒體概述媒體是指信息的載體，包括文字、圖形、動(dòng)畫、音頻和視頻等。多媒體就是指由兩種以上媒體構(gòu)成共同表示、傳播和存儲(chǔ)同一信息的媒體。二、插入Flash對象1、插入Flash動(dòng)畫插入媒體Flash設(shè)置FLASH屬性2、插入FLASH按鈕插入媒體FLASH按鈕3、插入FLASH文本二、插入其他媒體對象1、插入Shockwave影片Shockwave是一個(gè)很普及的瀏覽器的插件，可

54、以在大多數(shù)常用的瀏覽器中進(jìn)展播放插入媒體Shockwave2、插入Active*控件Active*控件是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件。3、插入JAVA小程序。JAVA是一種編程語言，通過它可以開發(fā)可嵌入WEB頁中的小型應(yīng)用程序applets插入插件【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十五節(jié) 擴(kuò)展Dreamweaver M* 2004【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：。重點(diǎn)知識(shí)：【教學(xué)組織過程

55、】2課時(shí)1上講回憶2教授新知【授課容】一、 Dreamweaver M* 2004插件的類型1、objects插件：屬于對象類，用來地插入面板中添加新的對象。2、behaviors插件：屬于行為類，用于在behaviors面板中添加新的行為，在網(wǎng)頁上實(shí)現(xiàn)動(dòng)態(tài)的交互功能3、mand插件：屬于命令類，用于以在mand菜單下添加命令。4、inspector插件：屬于屬性類，用于添加新的屬性類別二、E*tension Manager簡介E*tension Manager插件管理器，專門用來管理M*P插件命令擴(kuò)展管理三、下載和安裝插件1、下載插件上網(wǎng)搜索下載2、安裝插件方法一：直接安裝法方法二：用插件管

56、理器安裝四、插件應(yīng)用1、使用Form Builder創(chuàng)立表單插入表單Form BuilderCountry codes:包含多個(gè)國家名稱的下拉列表Gender：選擇性別的下拉列表Marital status：個(gè)人婚姻狀況的下拉列表Age group：年齡段的下拉列表Date of birth：出生年、月、日的下拉列表Education：受教育程度的下拉列表Occupation：從事行業(yè)Ine：收入狀況Famil size：家庭成員數(shù)Add form：增加一個(gè)表單把表單元素包含起來。Add table：增加一個(gè)表格把表單元素包含起來。2、使用IE 5.5 Custom Scrollbars編輯滾

57、動(dòng)條插入常用IE 5.5 Custom ScrollbarsScrollbar-face-color：滾動(dòng)條凸出局部顏色Scrollbar-highlight-color：滾動(dòng)條空白局部顏色Scrollbar-shadow-color：滾動(dòng)條陰影顏色Scrollbar-3d-light-color：滾動(dòng)條亮邊顏色Scrollbar-arrow-color：上下按鈕上三角箭頭的顏色Scrollbar-track-color：滾動(dòng)條底版顏色Scrollbar-darkshadow-color：滾動(dòng)條下邊和右邊沿的顏色3、使用Calendar Object創(chuàng)立月歷插入Calendar Object月

58、份年顯示日期首列為日期格式空日期顯示的月份4、使用Marquee創(chuàng)立滾動(dòng)字幕插入常用MarqueeTe*t:文字容Font：文字字體Size：文字字號Font color：文字顏色Bg colog：運(yùn)動(dòng)區(qū)域的背風(fēng)光Direction：運(yùn)動(dòng)方向左、右Speed：運(yùn)動(dòng)速度Behaviour：Scroll從一端滾動(dòng)到另一端Slide從一端快速滑動(dòng)到另一端Alternate在兩端之間擺動(dòng)Align：活動(dòng)字幕的位置Size：活動(dòng)字幕的尺寸Repeat：滾動(dòng)次數(shù)，Continuously永遠(yuǎn)循環(huán)練習(xí)題1、使用Form Builder插件在文檔中創(chuàng)立一個(gè)包括國家、婚姻狀況、年齡段、出生年、月、日、受教育程度

59、、從事行業(yè)這6個(gè)表單元素的表單。2、使用IE 5.5 Custom Scrollbars創(chuàng)立一個(gè)滾動(dòng)條，使該滾動(dòng)條符合以下設(shè)置：2、使用IE 5.5 Custom Scrollbars編輯滾動(dòng)條插入常用IE 5.5 Custom ScrollbarsScrollbar-face-color：#FF0000Scrollbar-highlight-color：#FF0000Scrollbar-shadow-color：#0000FFScrollbar-3d-light-color：#FF0000Scrollbar-arrow-color：#00FFFFScrollbar-track-color：#

60、FF00FFScrollbar-darkshadow-color：#000000使用Calendar Object創(chuàng)立2004年8月的月歷 4、使用Marquee插件創(chuàng)立一個(gè)滾動(dòng)字幕，設(shè)置該滾動(dòng)字幕為向左滾動(dòng)，延遲和滾動(dòng)速度分別為60和10，并且永遠(yuǎn)循環(huán)?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十六節(jié) 構(gòu)建Web應(yīng)用程序【教學(xué)目的與要求】【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)展課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動(dòng)關(guān)注的重點(diǎn)從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動(dòng)，增強(qiáng)學(xué)生學(xué)習(xí)的主動(dòng)性、積極性和創(chuàng)造性；【教學(xué)重點(diǎn)與難點(diǎn)】：根底知識(shí)：。重點(diǎn)知識(shí)：【教學(xué)組織過程】2課時(shí)1上講回憶2教授