第一篇：網(wǎng)頁制作與規(guī)劃實驗教案大全
實驗一 站點(diǎn)的創(chuàng)建與基本HTML標(biāo)記的應(yīng)用
一、實驗?zāi)康募耙?/p>
1.了解組成網(wǎng)頁的基本元素
2.掌握文本元素的添加和編輯方法 3.掌握圖像元素的添加和運(yùn)用技巧 4.掌握幾種鏈接的具體創(chuàng)建方法 5.掌握圖像元素的添加和運(yùn)用技巧
二、實驗學(xué)時
4學(xué)時
三、實驗內(nèi)容
任務(wù)一：在網(wǎng)頁中基本頁面元素的應(yīng)用 1．準(zhǔn)備工作
在c盤或其他盤新建一個文件夾作為站點(diǎn)文件夾，文件夾名稱為myweb3。復(fù)制給定的一個圖像文件夾images和一個網(wǎng)頁文件sx3-2.htm。
2．建立本地站點(diǎn)
‘ 用已學(xué)方法建立本地站點(diǎn)。
3．依據(jù)圖3．38所示的效果，向網(wǎng)頁中添加并編輯頁面元素，具體操作步驟如下。
(1)在默認(rèn)打開的網(wǎng)頁中選擇“修改”|“頁面屬性”菜單命令，設(shè)置使
背景顏色為#CCCCCC。
(2)輸入網(wǎng)頁首行文本“老郵票知多少”，大小為48像素，顏色為#FFFF00，字體為“華文行楷”粗體，居中對齊。
(3)在網(wǎng)頁第二行插入更新日期和版權(quán)信息，選擇“插入”l“日期”菜單命令，將當(dāng)前編輯日期插入網(wǎng)頁，然后利用“插入”面板上“文本”選項卡中的晶按鈕，插入多個空格，再輸入版權(quán)信息“◎版權(quán)所有：D．Wei@sohu．com”整行文字大小為18像素，顏色為#000000，字體為默認(rèn)字體，粗體，居中對齊。
(4)在網(wǎng)頁第三行選擇“插入”|“水平線”菜單命令，插入一條水平線，高度為5，其他屬性取默認(rèn)值。
(5)在網(wǎng)頁第四行、第七行各插入一行文本，內(nèi)容分別為“紀(jì)33(C33)：中國古代科學(xué)家、1955．8．25發(fā)行600萬套、全套4枚、新票市場參考價￥550元。”和“紀(jì)36(C36)：中國工農(nóng)紅軍勝利完成二萬五千里長征二十周年、1955．12．30發(fā)行600萬套、全套2枚、新票市場參考價￥850元。”文字大小為18像素，格式為“項目列表”，其他屬性取默認(rèn)值。
(6)在網(wǎng)頁第五行選擇“插入”I“圖像”菜單命令，插入四張郵票圖像，文件名分別為0637.jpg、0638.jpg、0639.jpg、0640.ipg。每張圖像的寬為
110、高為150，其他屬性取默認(rèn)值。
(7)在網(wǎng)頁第六行插入一條水平線，寬為400像素，其他屬性取默認(rèn)值。
(8)在網(wǎng)頁第八行插入兩張郵票圖像，文件名分別為0645.jPg、0646.ipg，圖像寬高分別為150／110和110／150，其他屬性取默認(rèn)值。
4．保存網(wǎng)頁 選擇“文件”“|保存”菜單命令，在站點(diǎn)中將此網(wǎng)頁保存為sx3-1．htm。5．打開并編輯給定的網(wǎng)頁文件sx3．2．htm，如圖3-39所示。
(1)建立圖像熱點(diǎn)鏈接。為此選中網(wǎng)頁上方圖像，利用“屬性”檢查器
中的熱點(diǎn)工具在圖像上建立兩個熱點(diǎn)，如圖3．40所示。從左到右兩個熱點(diǎn)分別鏈接到sx3-2-1．htm和sx3-2-2．htm文件(兩個文件可稍后建立)。
(2)插入命名錨記。為此將光標(biāo)放在網(wǎng)頁標(biāo)題“教育天地”后，選擇“插入”I‘‘命名錨i6'’菜單命令，在輸入對話框中輸入錨記“A0“。依此方法在網(wǎng)頁右側(cè)文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”處分別插入命名錨記，依次為A1～A7。
(3)創(chuàng)建錨點(diǎn)鏈接。為此分別創(chuàng)建左列目錄文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”與右列命名錨記A1～A7的錨點(diǎn)鏈接。然后再將各段下方的文本“返回”與標(biāo)題處錨記A0建立錨點(diǎn)鏈接。
(4)創(chuàng)建無址鏈接。選中網(wǎng)頁上方文本“教師篇”，在“屬性”檢查器的鏈接欄中輸入“≠}”即可。
(5)創(chuàng)建郵件鏈接。選中網(wǎng)頁最后一行文本“聯(lián)系”，然后在“屬性”檢查器的鏈接欄中輸入“mailto：abc@163．com'’即可。如圖3—41所示。
6．保存網(wǎng)頁
選擇“文件”I“保存”菜單命令，將此網(wǎng)頁保存在站點(diǎn)中。7建立其他網(wǎng)頁
(1)新建一張網(wǎng)頁，輸入“名人看教育”，文件名為sx3-2-1.htm，保存
在站點(diǎn)中。
(2)再新建一張網(wǎng)頁，輸入“教育話題”，文件名為sx3-2-2.htm，保存在站點(diǎn)中。
8．站點(diǎn)測試
按【F12】鍵在瀏覽器中預(yù)覽，觀察效果與樣圖是否一致。單擊建立的每個鏈接，以測試超鏈接是否都能夠正確跳轉(zhuǎn)。
任務(wù)二：HTML基本標(biāo)記的應(yīng)用 1．準(zhǔn)備工作
在C盤或其他盤符下新建一個工作夾，制作的所有頁面都保存在這個文件夾內(nèi)。將給定的圖像素材文件復(fù)制到工作文件夾中。
2．建立名稱為了test.html的HTML頁面，效果如圖4-1所示。頁面功能要求為：
（1）頁面標(biāo)題為“基本標(biāo)記測試”；
（2）頁面內(nèi)的所有標(biāo)題文字均為標(biāo)題2格式；
（3）單擊鏈接文字時要求在新的瀏覽器窗口中，打開test.html頁面自身；
(4)圖片名稱為1．gif，存放在工作文件夾中，與test．htm頁面位于同一位置；
(5)依據(jù)圖4—1所示樣式，完成頁面中的表格制作
3．建立名稱為login．htm的HTMI。頁面，效果如圖4—2所示。頁面功能要求為：
(1)頁面標(biāo)題為“表單標(biāo)記測試”；
(2)“姓名”為單行文本框，寬10個字符，最多能填寫20個字符；(3)“性別”為單選按鈕，傳遞的值為“男”和“女”，第一個按鈕為默認(rèn)選中；
(4)“職業(yè)”為下拉列表框，內(nèi)容有“教師”、“工人”和“職員”；(5)“愛好”為復(fù)選按鈕，傳遞的值分別對應(yīng)為1，2，3，4，第一個按
鈕為默認(rèn)選中；
(6)“留言”為多行文本框，大小為5行40列，默認(rèn)內(nèi)容為“說幾句吧!”；(7)“提交”按鈕和“重置”按鈕分別完成提交表單功能和重置表單功能，表單提交方式為get；
(8)頁面上的所有文字默認(rèn)為3號字。4．頁面測試
在瀏覽器中瀏覽所完成的頁面，觀察效果是否符合要求。
實驗二 表格、表單和框架的應(yīng)用
一、實驗?zāi)康募耙?1.掌握表格的基本用法 2.掌握表格布局頁面的方法 3.學(xué)會用框架布局頁面的方法 4.了解框架布局的特點(diǎn)
二、實驗學(xué)時
10學(xué)時
三、實驗內(nèi)容
任務(wù)一：表格的應(yīng)用 1．準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，作為站點(diǎn)文件夾。輸入你想要的站點(diǎn)名稱，這里輸入myweb5。在此文件夾中新建一個圖像文件夾images，并將給定圖像素材復(fù)制到其中。
2．建立本地站點(diǎn)
用已學(xué)方法建立本地站點(diǎn)。3．利用表格編輯首頁
(1)在默認(rèn)打開的網(wǎng)頁中，選擇“修改”l‘‘頁面屬性”菜單命令，設(shè)置背景顏色為#clclcl。
(2)在網(wǎng)頁中插入一個2行2列的表格，參數(shù)設(shè)置如圖5-21所示。選中表格，在“屬性”檢查器的表格“高”輸入框中輸入100，單位為“％”。將第一行兩個單元格合并為一個，如圖5-22所示。
．
(3)利用“屬性”檢查器調(diào)整3個單元格的寬度和高度。將光標(biāo)放在第一行單元格內(nèi)，在“屬性”檢查器“高”輸入框中輸入110，“寬”不輸入；將光標(biāo)放在第二行第一個單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入250，“高”不輸入；將光標(biāo)放在第二行第二個單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入450，“高”不輸入。效果如圖5-22所示。
(4)按樣張(如圖5-23所示)在第一行單元格中輸入“飲食本草”，文字大小80像素，字體“華文彩云”，前兩個字白色，后兩個字顏色為#009900。在文字下方插入一條水平線，屬性取默認(rèn)值。
(5)在第二行第一個單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為8行1列、表格高度和寬度均為100％、邊框粗細(xì)為0、單元格邊框為0、單元格間距為0。如圖5．23所示。
(6)在第二行第二個單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度均為100％、邊框粗細(xì)為
2、單元格邊框為0、單元格間距為0。如圖5-23所示。
(7)在左側(cè)嵌套表格各行中分別輸入圖5．24所示內(nèi)容，然后將8個單元格的高度均設(shè)置為50。文字大小為36，字體為“華文新魏”，然后將每行文字均創(chuàng)建無址鏈接。
（8）在中側(cè)嵌套表格中分別插入5張文件夾images中的圖片，每張圖片的寬度和高度均為150，注意：當(dāng)圖片尺寸變小后，表格不會自動縮小，這時可以選中整個表格，在“屬性”檢查器中單擊“清除行高”和“清除列寬”兩個按鈕來調(diào)整表格大小。
4．保存網(wǎng)頁
選擇“文件”！“保存”菜單命令，將此網(wǎng)頁保存在站點(diǎn)中。5．站點(diǎn)測試
按【F12】鍵在瀏覽器中預(yù)覽，觀察效果是否與樣張一樣。任務(wù)二：框架的應(yīng)用 1．準(zhǔn)備工作
在C盤或其他盤新建一個文件夾，作為站點(diǎn)文件夾。并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。
2．建立本地站點(diǎn)
用已學(xué)方法建立本地站點(diǎn)。3．利用框架布局頁面
站點(diǎn)首頁部局效果如圖15-15所示，頁面制作步驟如下。（1）在默認(rèn)打開的網(wǎng)頁中，選擇“插入”面板上的“布局’’選項卡。單擊框架按鈕的下拉箭頭，從下拉菜單中選擇命令。
(2)將光標(biāo)置于頂端框架內(nèi)，選擇“修改”|“頁面屬性”菜單命令，設(shè)置背景顏色為#C1C1C1。同理將左框架和主框架的頁面背景色都設(shè)置為#C1C1C1。
(3)選擇“窗口“|‘‘框架”菜單命令，將“框架”面板調(diào)出來。然后設(shè)置三個框架的大小。
“頂端框架”：在“框架”面板中選定外層框架集，在“屬性”檢查器將頂端框架的高度設(shè)置為“120像素”，下面部分設(shè)置為“1”，單位為“相對”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—16所示。
“左側(cè)框架”在“框架”面板中選定內(nèi)層的子框架集，在“屬性”檢查器將左側(cè)框+架的寬度設(shè)置為“250像素”，右側(cè)主框架設(shè)置為“1”，單位為“相對”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為“1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—17所示。
(4)在頂端框架內(nèi)輸入站點(diǎn)標(biāo)題‘‘飲食本草”，文字大小為80像素，字體為“華文彩云”，前兩個字白色，后兩個字顏色為#009900，居中對齊。
(5)在左側(cè)框架內(nèi)插入一個表格，表格相關(guān)屬性分別為9行1列、表格高度和為100％、寬度為100％、邊框粗細(xì)為0、單元格邊框為0、單元格間距為0、對齊方式為右對齊。然后
將9個單元格的高度均設(shè)置為50，在其中輸入樣張中的文字，文字大小為36，字體為“華文
新魏”。如圖15．15所示。
(6)在右側(cè)主框架中插入一個表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度任意、邊框粗細(xì)為
2、單元格邊框為0、單元格間距為0、居中對齊。按樣張效果在表格中分別插入5 張文件夾images中的圖片，每張圖片的寬度和高度均為150。注意：當(dāng)圖片尺寸變小后，要在“屬
性，檢查器中單擊cc清除行高’’和“清除列寬”兩個按鈕，使表格調(diào)整到最小。如圖15—15所示。
4．保存框架網(wǎng)頁
選擇“文件”|“保存全部”菜單命令，按照保存窗口彈出的順序，分別將框架集、右側(cè)
主框架、左側(cè)框架、頂端框架命名為index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站點(diǎn)中。
5．建立導(dǎo)航鏈接 具體制作步驟如下。
(1)按導(dǎo)航欄目分別建立8個相關(guān)內(nèi)容的頁面，或者從提供的素材文件中獲取。
(2)在左側(cè)框架內(nèi)選擇“首頁”文字，在“屬性”檢查器的鏈接欄中設(shè)置目標(biāo)文件為本框架集頁面．Index．htm，目標(biāo)選擇“parent'’。
(3)在左側(cè)框架內(nèi)選擇“谷物篇”文字，在“屬性”檢查器的“鏈接”欄中設(shè)置目標(biāo)文件為素材文件guwu．htm，“目標(biāo)”欄選擇右側(cè)主框架的名稱“mainframe”。同理，將左側(cè)框 架內(nèi)的各項導(dǎo)航內(nèi)容分別鏈接到對應(yīng)的素材文件，且“目標(biāo)”均設(shè)置為“mainframe”。
(4)再次選擇“文件”|“保存全部”菜單命令。6．預(yù)覽和測試站點(diǎn)
在打開的Index．htm文件中，按【F12】鍵在瀏覽器中預(yù)覽，觀察效果與樣張是否一樣，然后，測試各導(dǎo)航鏈接內(nèi)容和顯示位置是否正確。效果如圖15-18所示。
實驗三 網(wǎng)頁圖像和動畫的設(shè)計與應(yīng)用
一、實驗?zāi)康募耙?/p>
1．掌握在Fireworks中創(chuàng)建動畫的方法 2．掌握在Fireworks中制作蒙版的創(chuàng)建方法 3．掌握基本動畫補(bǔ)間操作
二、實驗學(xué)時
8學(xué)時
三、實驗內(nèi)容 任務(wù)一：gif動畫 1．準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，本次實訓(xùn)的內(nèi)容將全部保存在該文件夾下。
2．一張向日葵畫框圖片的制作(1)新建文件
打開Fireworks 8，在“開始頁”中選擇“新建Fireworks文件”，新建一個空白文件。在彈出的“新建文檔”中設(shè)置畫布的“寬”為360，“高”為400，畫布顏色選擇白色，然后單擊“確定”按鈕。選擇“文件”|‘‘另存為”菜單命令，將文件以“sx6—1．png”為文件名保存在指定文件夾下。
(2)制作圖片 選擇“文件”l‘‘導(dǎo)入”菜單命令，在“導(dǎo)入”對話框中選擇需要導(dǎo)入的圖片“畫框．gif”。此時光標(biāo)的形狀變?yōu)閂-，在畫布上單擊鼠標(biāo)左鍵，即可將該圖片以原始大小導(dǎo)入(也可以按下左鍵拖放，將圖片以不同的大小導(dǎo)入)。此時可以在“層”面板中看到剛導(dǎo)入的對象。用相同的方法導(dǎo)入第二張圖片“向日葵．png”，將圖片的大小調(diào)整合適，放入畫框內(nèi)，并調(diào)整整個圖片的坐標(biāo)，到此這個圖片的制作就完成了。單擊“主要”工具欄上的“保存”按鈕，保存文件。
(3)圖片的優(yōu)化和導(dǎo)出
選擇“窗口”l“優(yōu)化”菜單命令，打開“優(yōu)化”面板，如圖6-23所示的設(shè)置。選擇“文件”|“導(dǎo)出”菜單命令，在彈出的“導(dǎo)出”對話框中，“文件名”一欄輸入文件名“sx6—1．jpg”，選擇侏存類型為“僅圖像”，單擊“保存”按鈕，該文件即可以JPEG的文件格式輸出。
選擇“文件”l礫存”菜單命令，保存源文件，單擊“預(yù)覽”按鈕預(yù)覽效果，如圖6-24所示。
3．進(jìn)一步編輯向日葵畫框圖片(1)新建一幀
打開剛剛創(chuàng)建的向日葵畫框，即“sx6—1．png”。在“幀”面板，選擇剛才已有的第一幀，將它拖到“新建／重制幀”按鈕上釋放，得到復(fù)制的一幀。
將新復(fù)制的第二幀選中，將原有的向日葵圖片刪除，重新導(dǎo)入另一幅圖像“椰子樹．jpg”，并調(diào)整大小使其居于畫框內(nèi)。這樣當(dāng)前文件具有兩個幀的畫面，如圖6—25所示。
(2)觀看動畫播放效果
單擊位于工作窗口下方幀控制器的“播放”按鈕，觀看動畫播放效果。單擊“停止”按鈕，停止播放。
如果不滿意，可以返回幀1或幀2進(jìn)行修改。
如果想調(diào)整兩幀的播放速度，可以在幀面板雙擊每幀右側(cè)的數(shù)字“7”，將其修改成想要的值。
再次通過幀控制器觀看動畫播放效果，如果想再增加幾幀，可以按上面的方法進(jìn)行編輯，直至滿意為止。
選擇“文件”|“另存為”菜單命令，將文件以“sx6．2．png'’為文件名保存在指定文件夾下保存文件。
再選擇“文件”|“圖像預(yù)覽”菜單命令，打開“圖像預(yù)覽”對話框，如圖6—26所示。
選擇導(dǎo)出的文件格式為“GIF動畫”，然后再選擇“導(dǎo)出”按鈕，就可以導(dǎo)出GIF動畫文件，文件名為“sx6．2．gift。這樣可以在Fireworks之外，同樣看到動畫效果。
任務(wù)二：蒙版和動畫的制作 1．準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，將給定圖像素材復(fù)制到其中，本次實訓(xùn)的內(nèi)容將全部保存在該文件夾下。
2．導(dǎo)入圖像并調(diào)整畫布
新建空白文檔，大小、顏色均默認(rèn)。
選擇“文件”l“導(dǎo)入”菜單命令，將指定文件夾中的圖像導(dǎo)入文檔。選中圖片，在“屬性”檢查器中修改圖片的寬、高值(500×400)。然后單擊畫布之外，在“屬性”檢查器選擇“符合畫布”命令，使畫布和圖片一樣大且對齊。
在“屬性”檢查器選擇“畫布”旁邊的拾色器，把畫布顏色改成自己喜歡的顏色。
3．制作矢量蒙版
選擇橢圓工具，在窗口中畫一個橢圓。選擇“編輯”I“剪切”菜單命令，橢圓消失，用鼠標(biāo)再次選中導(dǎo)入的圖像，然后選擇“編輯”I“粘貼為蒙版”菜單命令，出現(xiàn)蒙版效果，如圖9-36所示。
打開“層”面板，如圖9-37所示。單擊層中圖片與蒙版之間的鏈接@標(biāo)記，可以使它消失，再次單擊又會出現(xiàn)。它的出現(xiàn)與消失決定著蒙版是否與圖片鏈接在一起。當(dāng)未鏈接時，單擊“層”面板中的蒙版圖標(biāo)，使它周圍出現(xiàn)綠框。如圖9-38所示。
用鼠標(biāo)移動畫布上橢圓的位置，效果如圖9-39所示。
把位置調(diào)整到理想狀態(tài)后，選擇“文件”|“另存為”菜單命令，將文件以“sx9-1．png'，為名保存在指定文件夾下。
4．修改蒙版效果
打開剛才新建的蒙版文件，在“層”面板選中蒙版。在“屬性”檢查器中，選擇“蒙版”為“灰度外觀”，將方式改為“放射狀”，并單擊旁邊的拾色器，將放射狀填充的中心調(diào)整為透明(白色)，邊緣調(diào)整為不透明(黑色)，如圖9-40所示。
在“屬性”檢查器中，將“邊緣”修改為“羽化”，值為“50'’，“描邊”設(shè)置為“無”，如下圖9-41所示。
在畫布上適當(dāng)調(diào)整橢圓填充的放射中心和幅度，最后達(dá)到如圖9—42所示效果。
5．制作位圖蒙版，打開給定圖像文件0258.jpg，另存為sx9-2.jpg。把顯示的縮放比例調(diào)整為66%。單擊“層”面板的“添加蒙版”按鈕，并在“層”面板選中，然后按照圖9-43蒙版圖標(biāo)。
在“工具”面板“顏色”部分中選擇“漸變”工具設(shè)置蒙版的相關(guān)屬性。
在圖像中間拖動鼠標(biāo)，使填充呈由中心向四周的放射形狀。圖像產(chǎn)生了蒙版效果，同時“層”面板的蒙版圖標(biāo)也發(fā)生了變化。如圖9-44所示。
6.制作文本蒙版
打開給定圖像文件0258.jpg，另存為sx9-3.jpg。把顯示的縮放比例調(diào)整為66%。在“工具”面板“矢量”部分中選取“文字”工具。輸入文字“熱帶風(fēng)情”，字體為華文行楷，大小150。選中文字，選擇“編輯”|“剪切”菜單命令，將其剪切。在“層”面板中選擇取位圖標(biāo)，然后選擇“編輯”|“粘貼為蒙版”菜單命令。圖像產(chǎn)生了蒙版效果，同時“層”面板也出出了文本蒙版圖標(biāo)，如圖9-45所示。
任務(wù)三：風(fēng)吹樹葉(1)新建Flash文件。
(2)修改背景顏色為“藍(lán)色”。
(3)使用“文本工具”按鈕，創(chuàng)建文字“風(fēng)吹效果”四個字，用工具選中文字并按【Ctrl】+【B】一次，將四個字分解為個體。如13-11所示。
(4)再次用工具，選中“風(fēng)”字然后選擇“修改”|轉(zhuǎn)換為元件”菜單命令。在彈出轉(zhuǎn)換為符號“對話框中，將元件名稱改為“風(fēng)”，如圖13-12所示。
(5)重復(fù)步驟(4)，將剩下的三個字“吹”、“效”、“果”也依次做成圖形元件。
(6)選中所有的文字，然后鼠標(biāo)右擊，在彈出的上下文菜單中選擇“分散到各層”，于是個字將分別處于四個不同的圖層。這樣做是為了動畫漸變能夠正確的執(zhí)行。
如果分散到各層后文字沒有對齊，則可用“對齊面板”，將各層的文字重新排列好?！皩γ姘迦鐖D13-13所示，可以通過菜單“窗口”|對齊’’菜單命令打開“對齊”面板。
(7)在時間軸中第1 5幀處，給各層“添加關(guān)鍵幀”，選中第15幀。(8)將四個字全部選中，使用鼠標(biāo)向上移動一段距離，選擇“修改”|變形”|“水平翻轉(zhuǎn)”菜單命令，將四個字水平翻轉(zhuǎn)一下，然后調(diào)整字體的位置，用“對齊’’面板排列字體，如圖13-14所示。
(9)選中所有元件，在“屬性，檢查器中將顏色“Alpha”值設(shè)為“O”，如圖13-15所示。
(1 O)在“吹”、“效”、“果”三個元件所在層的第1幀處創(chuàng)建動畫補(bǔ)間，如圖13-16所示。
(11)按住【Ctrl】鍵，選擇第二層的第2幀到最后一幀。按住鼠標(biāo)左鍵不放，將位置向后拖放一段距離，如圖13-17所示。
(1 2)參照步驟(1 0)內(nèi)容，將‘‘效”、“果”兩個元件所在層的位置分別后移，如圖13-l8所示。
(1 3)按【Ctrl】+【Enter】組合鍵查看效果。任務(wù)四：球的跳動 1.準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。本次初訓(xùn)的內(nèi)容將全部保存在該文件夾下。
2．素材的導(dǎo)入
1)新建文件
打開Flash 8，在“開始頁”中選擇“新建Flash文件”，以新建一個空白文件。背景色為“白色’’。
選擇“文件”|“保存”菜單命令，將文件保存為ex3.fla文件。2)“球’’的導(dǎo)入
選擇“文件”|“導(dǎo)入”|“導(dǎo)入到庫”菜單命令將“球”導(dǎo)入到庫，如圖13-33所示。
3.元件的轉(zhuǎn)換
選擇“修改”|“轉(zhuǎn)換為元件”菜單命令，將圖片轉(zhuǎn)換為“圖形”元件，并命名為“球”。13-34所示。
4．動作補(bǔ)間的設(shè)置
將元件“球”拖放到場景1的圖層1中。在圖層1的第60幀處插入關(guān)鍵幀，如圖13-35所示。
在第1幀處添加‘‘動畫補(bǔ)-間，效果，如圖13-36所示。
在第1幀處處的“屬性”檢查器中，單擊“緩動”旁邊的“編輯”按鈕，設(shè)置動作的“緩入|緩出”效果(通過緩入／緩出可以控制動畫漸變的速度和狀態(tài))。設(shè)置效果如圖13-37所示。
在“自定義緩入／緩出”對話框定義各個幀處的動畫補(bǔ)間速度和方向。新建圖形元件，命名為“陰影”，設(shè)置筆觸色為“無”，填充色為“黑白漸變”，白色部分的alpha透明度為29％。使用橢圓工具繪制一個橢圓，設(shè)置面板如圖13-38所示，繪制的效果如13-39所示。
在場景1中新建圖層2，將元件“陰影”拖放到第1幀處的恰當(dāng)位置(在球落下的下方)，并在第60幀插入關(guān)鍵幀，陰影位置如圖13—40所示。
在圖層2第1幀處設(shè)置元件“陰影”的A1pha透明度為20％，如圖1 3-4 1所示。
在圖層2第1幀處設(shè)置補(bǔ)間動作，如圖1 3—42所示。
打開圖層1第一幀“屬性”，檢查器的“自定義緩入／緩出”面板，按鍵【Ctrl】+【c】復(fù)制緩動效果。打開圖層2第一幀處的“自定義緩入／緩出”面板，按I Ctrl 】+【V】組合鍵，將其粘貼到陰影動畫補(bǔ)間中。
5．發(fā)布動畫
使用“文件”|“發(fā)布”菜單命令進(jìn)行發(fā)布。
實驗四 層疊樣式與層的應(yīng)用
一、實驗?zāi)康募耙?1.掌握層的正確定位方法
2.學(xué)會利用層來制作彈出式菜單 3.了解時間軸的編輯特點(diǎn)和方法 4．學(xué)會定義和應(yīng)用CSS樣式
二、實驗學(xué)時
6學(xué)時
三、實驗內(nèi)容
任務(wù)一：利用層制作彈出菜單
步驟：
l準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，作為站點(diǎn)文件夾。將給定的素材文件存入其中。
2．建立本地站點(diǎn)
啟動Dreamweaver·8，用已學(xué)方法建立本地站點(diǎn)。3．利用圖層制作下拉彈出菜單
(1)新建一個空白頁面，選擇“修改”I“頁面屬性”菜單命令，設(shè)置頁面的背景顏色為#FFCC99，左邊距為0，上邊距為0。
(2)在文檔第一行插入一行文字“電子信息職業(yè)技術(shù)學(xué)院”作為站點(diǎn)標(biāo)題，字體為華文行楷，大小為48號字，顏色為#FF9933。
(3)在標(biāo)題的下一行插入一個l行5列的表格，表格寬度800像素，邊框粗細(xì)為l，高 度30，平均分配各列(每列寬度為160像素)，表格背景顏色為#9999FF。
(4)在表格的各列分別寫入“首頁”、“學(xué)院概況”、“師資建設(shè)”、“系部設(shè)置”、“招生就業(yè)”，各單元格文字對齊方式為居中對齊，文字為粗體顯示。如圖16—16所示。
(5)在“學(xué)院概況”列中添加一個圖層，命名為“Layerl”，注意不可見元素“層錨記”應(yīng)在此列當(dāng)中。如果不在，可用鼠標(biāo)將其拖到此列中。然后在圖層中添加一個3行l(wèi)列的表格，表格寬度為160像素，各行高度為30像素，邊框粗細(xì)為1，單元格文字為居中對齊，表格背景顏色為#9999F’F，文字為粗體顯示。三個單元格內(nèi)容為“學(xué)院簡介”、“辦學(xué)思想”、“校園風(fēng)景”，如圖16．17所示。
(6)同樣在其他幾列中也分別添加圖層，各自命名為“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“隊伍建設(shè)、名師風(fēng)采、優(yōu)秀教師”；L,ayer3中插入5行l(wèi)列的表格，表格屬性與L,ayerl中的相同，內(nèi)容為“機(jī)電技術(shù)系、電子技術(shù)系、計算機(jī)應(yīng)用系、計算機(jī)網(wǎng)絡(luò)系、計算機(jī)軟件系”；Layer4中插入2行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“招生信息、就業(yè)信息”。如圖16—18所示。
(7)調(diào)整各層的位置。注意：層的調(diào)整非常重要，不同的瀏覽器窗口大
小，不同的分辨率，層的位置顯示都不是一樣。即使在同一個機(jī)器上調(diào)整瀏覽器的窗口大小，都會出現(xiàn)位置的變動。Dreamweaver中并不是所見即所得，需要我們來精確定位才會達(dá)到滿意的效罘。為此，首先固定表格的寬度，本例中將表格固定為寬度800，高度30。然后固定層的位置，這
個位置需要計算一下，計算公式并不是很難。本例中表格總寬度為800，共有5列，這樣每列的橫坐標(biāo)起始位置的計算公式為：
800÷5*(當(dāng)前列一1)對于“Layerl”，當(dāng)前列為2，所以結(jié)果為160。
最后加上一個將要創(chuàng)建的層與原表格列偏移值，那么計算各列下屬的層的橫坐標(biāo)公式變?yōu)椋?/p>
800--5x(當(dāng)前列-1)+偏移量
這個偏移量需要通過大家試驗來最終確定，因為不同的字體和寬度這個值是不同的。這里測試滿意的效果是-1，所示Layer1的實際工資起始橫坐標(biāo)為159據(jù)這個公式將各個層的位置設(shè)定好，最好不要用鼠標(biāo)禾移功定位。要使用“屬性”檢查器來設(shè)置。(8)打開“層，面板，將Layerl～Layer4都設(shè)置為隱藏狀態(tài)。．
(9)在窗口左下方選中第2列“學(xué)院概況”所在單元格的標(biāo)簽選擇器
(10)更改行為的觸發(fā)事件為“onMouseOver”。(11)再次選中第二列的標(biāo)簽選擇器
(12)重復(fù)步驟9～1l，為第三列、第四列、第五列添加顯示與隱藏圖層的行為。
4．保存與預(yù)覽
保存文件為Index．html，然后按IFl2]鍵進(jìn)行預(yù)覽。當(dāng)移動鼠標(biāo)到菜單時，將顯示當(dāng)前菜單項所屬的子菜單內(nèi)容，當(dāng)鼠標(biāo)離開顯示的子菜單時，子菜單隱藏，返回初始狀態(tài)。最終效果如圖16—20所示。
5．為下拉菜單設(shè)置超級鏈接
(1)根據(jù)菜單內(nèi)容，建立相應(yīng)的其他頁面文件。(2)為各菜單項設(shè)置跳轉(zhuǎn)到這些頁面的超級鏈接。(3)再次保存文件并預(yù)覽效果。任務(wù)二：時間軸 步驟：
1．準(zhǔn)備工作
在C。盤或其他盤新建一個文件夾，作為站點(diǎn)文件夾。在此站點(diǎn)中再建一個images子文件夾，將給定的素材存入其中。2．建立本地站點(diǎn)
啟動Dreamweaver 8，用已學(xué)方法建立本地站點(diǎn)。
3.利用時間軸使層做直線運(yùn)動
(1)打開給定的網(wǎng)頁文件sx17-1-1.htm，在網(wǎng)頁上插入一個層”Layerl",并將其位置調(diào)整好，然后在其中插入給定的圖片imgl．gif,圖片大小為64×64。如圖17-9所示.(2)打開“時間軸”面板，把圖層Layerl拖到“時間軸’’面板上，單擊最后一幀關(guān)鍵幀，并將其拖到第100幀的位置。再單擊圖層Layerl，將 Layerl水平拖動到頁面的右側(cè)。如圖17-10所示。
(3)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。
(4)將文件另存為sxl7-1-3．htm，并在瀏覽器中預(yù)覽，即可看到小豬從頁面左側(cè)運(yùn)動到 右側(cè)，并循環(huán)播放。
4．利用時間軸使層做軌跡運(yùn)動
(1)打開剛才保存的sxl7-1-3．htm文檔，再插入一個圖層Layer2，并將給定的圖片img2．Gif插入其中，設(shè)置圖片和層的大小均為100*100，如圖17-11所示。
(2)右擊“時間軸”面板的動畫通道，在彈出的快捷菜單中選擇“添加時間軸”命令，新添加的時間軸為“Timeline2'’。
(3)選中頁面中的圖層Layer2，并單擊右鍵，在彈出的快捷菜單中選擇
“記錄路徑”命令，緊接著用鼠標(biāo)拖動層左上角的標(biāo)記在頁面上移動繪制路徑，釋放鼠標(biāo)，在頁面上出現(xiàn)了一條灰色的路徑。同時，時間軸上也出現(xiàn)了一個有多個關(guān)鍵幀的動畫條。如圖17-12所示。
(4)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。
(5)保存文件，并在瀏覽器中預(yù)覽，即可看到小豬從頁面左側(cè)運(yùn)動到右側(cè)的同時，另一小豬在頁面上按繪制的軌跡進(jìn)行移動，并循環(huán)播放。5．給移動的小豬添加行為和超級鏈接
(1)選中頁面中的Layer2，打開“行為”面板，單擊“+”按鈕，從彈出的菜單中選擇“時間軸”I“停止時間軸”命令。然后從對話框中選擇“1'imeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseover。(2)再次單擊“行為”面板的“+”按鈕，從彈出的菜單中選擇“時間軸”}“播放時間軸”命令。然后從對話框中選擇“Timeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseout。
(3)選中Layer2層中的圖片，在“屬性”檢查器的鏈接欄中輸入“sxl7-1-2．htm'’(預(yù)先編輯好的網(wǎng)頁)，在替代欄中輸入“單擊有驚喜”。
(4)保存文件，并在瀏覽器中預(yù)覽，即可看到當(dāng)鼠標(biāo)指向小豬時，小豬停止移動；當(dāng)鼠標(biāo)離開小豬時，小豬繼續(xù)移動。當(dāng)鼠標(biāo)單擊小豬時，跳轉(zhuǎn)到sxl7-1-2．htm頁面。
任務(wù)三：利用CSS樣式改變頁面風(fēng)格 步驟：
1．準(zhǔn)備工作
在c盤或其他盤新建一個文件夾，作為站點(diǎn)文件夾。將給定的網(wǎng)頁文件及素材文件夾存入該文件夾中。
2．建立本地站點(diǎn)
啟動Dreamweaver 8，用已學(xué)方法建立本地站點(diǎn)。3．自定義樣式的定義及應(yīng)用
(1)打開站點(diǎn)中給定的sx20．1．1．htm文檔。(2)選擇“窗口”I‘‘樣式”菜單命令，將“CSS樣式”面板打開。(3)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框。在選擇器類型處選擇“類(可應(yīng)用于任何標(biāo)簽)”，名稱處輸入“ysl”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。
(4)在彈出的“ysl的CSS樣式定義”對話框中，進(jìn)行如圖20-25所示的樣式定義(類型：字體為隸書，大小為36像素，顏色為#0033FF；區(qū)塊：文字對齊為居中)。
(5)用同樣的方法定義樣式“ys2”，定義內(nèi)容如圖20-26所示(類型：
字體為華文新魏，大小為24像素；區(qū)塊：文字對齊為居中)。
(6)用同樣的方法定義樣式“ys3”，定義內(nèi)容如圖20—27所示(類型：字體為隸書，大小為36像素，粗細(xì)為粗體，#00CC33；區(qū)塊：文字對齊為居中)。
(7)下面開始應(yīng)用已定義的樣式。選中第一行標(biāo)題“唐詩欣賞”，單擊右鍵，選擇“CSS樣式y(tǒng)sl，(或者用前面介紹的其他方法來應(yīng)用ysl)，這時標(biāo)題已變成所定義的樣式了。用同樣的方法，將每首詩的詩文內(nèi)容應(yīng)用
‘‘ys2’’，將每首詩的標(biāo)題段落應(yīng)用“ys3”。效果如圖20-28所示。
(8)修改頁面的背景風(fēng)格。首先為頁面設(shè)置背景圖像(站點(diǎn)中images文件夾中的bj．jpg文件)，效果如圖20-29所示。由于選擇的背景圖像的尺寸不夠大，在頁面中圖像會以不斷重復(fù)的形式鋪滿整個頁面，視覺效果不夠理想。
(9)在“CSS樣式”面板新建自定義樣式“ys4”，在樣式定義對話框中，背景樣式的設(shè)置如圖20—30所示(背景：重復(fù)為不重復(fù)，附件為固定，水平位置為居中，垂直位置為居中)。
(10)選擇文檔窗口左下方的標(biāo)簽選擇器<．body>，然后單擊右鍵，從下拉列表中選擇“設(shè)置類，ys4”，文檔應(yīng)用樣式y(tǒng)s4后的效果如圖20-31所示。當(dāng)預(yù)覽時會發(fā)現(xiàn)背景圖像居中并不再重復(fù)，且當(dāng)用鼠標(biāo)滾動游覽文字時，背景圖像保持靜止，而不隨文字的滾動而滾動。
4．重定義特定標(biāo)簽外觀
(1)單擊“CSS樣式”面板下方的“新建(；SS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)簽的外觀)”，標(biāo)簽處下拉列表選擇“l(fā)n定義在處選擇“僅對該文檔”。單擊“確定”按鈕。
(2)在彈出的“l(fā)i的CSS樣式定義”對話框中，進(jìn)行如圖20-32所示的樣式定義(類型：字體為華文新魏，大小為24像素；列表：項目符號圖像為0001．gif)。
(3)單擊“確定”按鈕，發(fā)現(xiàn)頁面列表外觀發(fā)生了變化。效果如圖20-33
所示。
(4)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)簽的外觀)”，標(biāo)簽處下拉列表選擇“a”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。
(5)在彈出的‘‘a(chǎn)的cSS樣式定義”對話框中，進(jìn)行定義，其中類型分類中只將修飾選擇為‘‘無”。單擊“確定”后，頁面中超級鏈接的下劃線處的修飾沒有了，如圖20-33所示。
5．鏈接文字技術(shù)
(1)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“高級(ID、偽類選擇器等)”，選擇器處下拉列表選擇“a：link”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。
(2)在彈出的“a：link的(；SS樣式定義”對話框中，進(jìn)行如圖20—34所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#CC0099，修飾為無)。
(3)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，在對話框中其他選項不變，只將選擇器選為“a：hover'。然后在“a：hover的CSS樣式定義”對話框中，進(jìn)行如圖20—35所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#FF0000，修飾為下劃線)。
(4)單擊“確定”按鈕，關(guān)閉定義對話框。預(yù)覽時可以看到當(dāng)鼠標(biāo)指針移到超級鏈接文字時，文字變?yōu)榧t色且出現(xiàn)下劃線修飾。
(5)將網(wǎng)頁另存為Index．．html，按【F12】預(yù)覽網(wǎng)頁，觀察各種樣式的應(yīng)用效果。
實驗五
網(wǎng)頁綜合設(shè)計
一、實驗?zāi)康募耙?/p>
利用所學(xué)的網(wǎng)頁設(shè)計的方法來設(shè)計一個個性化的網(wǎng)站，網(wǎng)站的內(nèi)容一定要合理，內(nèi)容健康，頁面美觀。
二、實驗學(xué)時
6學(xué)時
三、實驗內(nèi)容
自己設(shè)計
第二篇：電子政務(wù)網(wǎng)頁設(shè)計與制作實驗教案
《電子政務(wù)網(wǎng)頁設(shè)計與制作》實驗教案
實驗名稱 IIS的安裝與調(diào)試
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握檢測不同版本W(wǎng)indows操作系統(tǒng)IIS的安裝與否； 2.掌握在Windows操作系統(tǒng)中安裝IIS的方法；
3．掌握利用IIS設(shè)置虛擬目錄調(diào)試ASP程序的初步方法。
二、實驗重點(diǎn)、難點(diǎn)
利用IIS設(shè)置虛擬目錄調(diào)試ASP程序
三、實驗原理
ASP模型的運(yùn)行原理是：當(dāng)瀏覽器向Web服務(wù)器請求.asp文件時，服務(wù)器端腳本開始運(yùn)行，WEB服務(wù)器調(diào)用.asp文件，將運(yùn)行結(jié)果發(fā)送到瀏覽器。
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況
無
六、實驗的基本操作與實驗重要步驟
1、實驗前先觀看指導(dǎo)老師的演示；
2、如果計算機(jī)未安裝IIS，使用安裝程序安裝IIS；
3、利用記事本編寫教材P13 1－1的ASP程序并存盤；
4、在IIS中建立虛擬目錄，調(diào)試ASP程序，找出并解決問題，確保調(diào)試成功，并相互訪問；
5、學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項
對于因操作系統(tǒng)本身的原因，無法安裝調(diào)試好IIS，需重新安裝系統(tǒng)。
十、課外實驗或思考題
教材P13 練習(xí)1-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
實驗名稱 HTML網(wǎng)頁編輯
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握HTML基本標(biāo)記的使用； 2.掌握HTML中超級鏈接的使用方法；
3．掌握HTML中特殊符號、圖片鏈接的使用方法。
二、實驗重點(diǎn)、難點(diǎn)
HTML中特殊符號、圖片鏈接的使用方法
三、實驗原理 HTML標(biāo)記語言
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況 無
六、實驗的基本操作與實驗重要步驟
1.實驗前先觀看指導(dǎo)老師的演示；
2.利用記事本編寫教材P34 2－1的HTML程序并存盤； 3.調(diào)試；
4.學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項
注意熱點(diǎn)鏈接的使用，調(diào)試出問題時，多從連接文件的上下級目錄上找原因。
十、課外實驗或思考題
教材P34 練習(xí)2-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
實驗名稱 Vbscript對象編程
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握Vbscript的基本數(shù)據(jù)類型、常量、變量、表達(dá)式和常用函數(shù)； 2.掌握在HTML中插入Vbscript編碼的方法； 3．掌握事件驅(qū)動程序的編制。
二、實驗重點(diǎn)、難點(diǎn)
事件驅(qū)動程序的編制，面向?qū)ο蟮某绦蛟O(shè)計思想的掌握。
三、實驗原理
Vbscript事件驅(qū)動程序編制。
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況
無
六、實驗的基本操作與實驗重要步驟
1.實驗前先觀看指導(dǎo)老師的演示；
2.利用記事本編寫教材P74練習(xí)4－1題的程序并存盤； 3.調(diào)試；
4.學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項
對象編程的思想，對象事件的編程方法。
十、課外實驗或思考題
教材P74 練習(xí)4-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
實驗名稱 表單設(shè)計
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。
二、實驗重點(diǎn)、難點(diǎn)
掌握DHTML中INPUT控件的使用
三、實驗原理 DHTML語言
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況
無
六、實驗的基本操作與實驗重要步驟 1.實驗前先觀看指導(dǎo)老師的演示；
2.利用記事本或Dreamweaver等軟件編寫表單程序并存盤； 3.調(diào)試；
4.學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項 Dreamweaver集成化工具的使用
十、課外實驗或思考題
教材P121 練習(xí)6-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
實驗名稱 Response對象應(yīng)用
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握Response對象中Write方法的使用； 2.掌握Response對象中Redirect方法的使用； 3．掌握Response對象中End方法的使用。
二、實驗重點(diǎn)、難點(diǎn)
Response對象中Write方法的使用
三、實驗原理
ASP中Response對象應(yīng)用
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況
無
六、實驗的基本操作與實驗重要步驟
1.實驗前先觀看指導(dǎo)老師的演示；
2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設(shè)置虛擬目錄進(jìn)行調(diào)試； 4.學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項
對于ASP的內(nèi)置對象，注意代碼的編寫規(guī)范性。
十、課外實驗或思考題
教材P142 練習(xí)7-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
實驗名稱 交互式表單程序設(shè)計
實驗類型：演示型√ 驗證型□ 綜合型□ 設(shè)計型□ 實驗類別：基礎(chǔ)√ 專業(yè)基礎(chǔ)□ 專業(yè)□ 實驗要求：必做√ 選做□ 實驗學(xué)時：2 實驗對象：本科生
一、實驗?zāi)康?/p>
1．掌握交互式表單程序設(shè)計的方法； 2.掌握Response對象中Write方法的使用； 3.掌握Request對象中Form集合的應(yīng)用。
二、實驗重點(diǎn)、難點(diǎn)
Request對象中Form集合的應(yīng)用
三、實驗原理
ASP交互式表單程序設(shè)計
四、實驗設(shè)備、實驗教學(xué)軟件介紹
個人PC，Windows 2000,IIS 5.0,記事本
五、實驗分組及組織情況
無
六、實驗的基本操作與實驗重要步驟 1.實驗前先觀看指導(dǎo)老師的演示；
2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設(shè)置虛擬目錄進(jìn)行調(diào)試； 4.學(xué)生獨(dú)立完成相應(yīng)的實驗報告。
七、實驗教學(xué)，如實驗教學(xué)內(nèi)容設(shè)計、時間設(shè)計、實驗教學(xué)手段設(shè)計、實驗指導(dǎo)設(shè)計等；
參照上述實驗內(nèi)容，分模塊講解各業(yè)務(wù)流程的作用和操作方法
八、預(yù)期的實驗效果
多數(shù)學(xué)生能獨(dú)立完成實驗，掌握基本原理和方法。
九、實驗中應(yīng)注意事項
注意對于Form集合的運(yùn)用，代碼要規(guī)范。
十、課外實驗或思考題
教材P163 練習(xí)8-1
十一、實驗教材及實驗參考資料
《ASP網(wǎng)頁數(shù)據(jù)庫短訓(xùn)教程》、劉瑞新主編，機(jī)械工業(yè)出版社，2005年出版
十二、實驗后記
學(xué)生獨(dú)立完成實驗報告
第三篇：網(wǎng)頁制作社團(tuán)規(guī)劃
網(wǎng)頁制作社團(tuán)規(guī)劃
一、活動的類型、方法和原則 參加活動的成員
高中一年級學(xué)生自愿報名參加。類型
科技實踐活動。活動方法
任務(wù)驅(qū)動法、探究學(xué)習(xí)法、自學(xué)輔導(dǎo)法、合作交流法。活動的原則
理論與實踐結(jié)合的原則。普遍性的原則。
堅持共性與個性相統(tǒng)一的原則?；顒拥哪康?/p>
(1)讓學(xué)生體會信息技術(shù)的應(yīng)用價值,培養(yǎng)學(xué)生應(yīng)用信息技術(shù)的意識和觀念。
(2)增強(qiáng)學(xué)生學(xué)習(xí)信息技術(shù)的興趣，學(xué)會團(tuán)結(jié)合作，培養(yǎng)學(xué)生獲取、存儲、分析、加工、利用、評價、傳遞信息的能力,提高學(xué)生合作探究解決問題的綜合實踐能力。
(3)培養(yǎng)學(xué)生的動手實踐能力和創(chuàng)新精神，要讓學(xué)生成為新技術(shù)的主人。
6.活動的目標(biāo)
培養(yǎng)學(xué)生使用信息技術(shù)的能力，特別是信息的組織和發(fā)布能力。樹立學(xué)生全面正確的信息技術(shù)認(rèn)識觀。通過網(wǎng)頁制作活動使學(xué)生不僅要認(rèn)識到信息技術(shù)與人們的生活和工作密切相關(guān)；認(rèn)識到信息技術(shù)為其他學(xué)科的學(xué)習(xí)和人的全面發(fā)展可以提供強(qiáng)大的支持。
激發(fā)學(xué)生學(xué)習(xí)信息技術(shù)的興趣。網(wǎng)頁制作活動中,結(jié)合學(xué)生學(xué)習(xí)、生活的實際,加強(qiáng)信息技術(shù)教育的實 踐性,學(xué)生自主學(xué)習(xí)的探索性、創(chuàng)新性,這無疑克服了傳統(tǒng)活動中內(nèi)容的枯燥、方法的呆板,對于提髙學(xué)生的學(xué)習(xí)興趣有巨大作用。
樹立學(xué)生學(xué)好信息技術(shù)的自信心。活動中注重用學(xué)生容易理解和接受的方式傳授信息技術(shù)，這些對增強(qiáng) 學(xué)生學(xué)好信息技術(shù)的自信心有著獨(dú)特的作用。
二、中學(xué)生網(wǎng)頁制作社團(tuán)活動設(shè)計的特點(diǎn)和開展方式 網(wǎng)寊制作社團(tuán)活動設(shè)計的特點(diǎn)
趣味性：活動的全過程都要注意保護(hù)和培養(yǎng)學(xué)生學(xué)習(xí)、使用信息技術(shù)的熱情。如：作品的選題都來自于學(xué)生的日常生活和他們感興趣的事務(wù)；活動中引人比賽等 形式增強(qiáng)趣味性。
技術(shù)性：網(wǎng)頁制作科技實踐活動的過程，就是信息技術(shù)水平不斷提高的過程。學(xué)生除了要掌握好 frontpage這一應(yīng)用軟件,還要能夠熟練地結(jié)合信息技術(shù)課堂所學(xué)內(nèi)容,使用網(wǎng)絡(luò)查找資料,并恰當(dāng)應(yīng)用。
實踐性：網(wǎng)頁制作科技實踐活動的進(jìn)行,幾乎都是在計算機(jī)上完成的，因而學(xué)生的動手能力是活動能否成功的重要因素。
多樣性:作品的選題豐富多樣。如：自我介紹、環(huán) 境保護(hù)、情感故事、國內(nèi)外大事等。同時,作品的表現(xiàn)形式 也將異彩紛呈。模擬性：考慮到學(xué)生的實際情況，作品最后的發(fā)布方式宜先在局域網(wǎng)上模擬發(fā)布，待學(xué)生再經(jīng)過后續(xù)知識的學(xué)習(xí)后,再發(fā)布到因特網(wǎng)上去,并時時維護(hù)和更新自己的網(wǎng)貞。
綜合性：網(wǎng)頁制作要涉及許多其它學(xué)科的知識。如：文字編輯要用到語文知識，頁面設(shè)計要用到美術(shù)知識,背景音樂設(shè)置要用到音樂知識,等等，協(xié)作性：活動過程中把學(xué)生分成若干個學(xué)習(xí)小組，培養(yǎng)他們互助協(xié)作的精神和品質(zhì)。
創(chuàng)新性創(chuàng)新是民族興旺的靈魂，是一個國家興旺發(fā)達(dá)的不竭動力(江澤民語)?！睘榇?應(yīng)時時鼓勵作品形式和風(fēng)格的多樣性，密切關(guān)注制作技術(shù)的深度和廣度。
2.網(wǎng)頁制作社團(tuán)活動的開展方式
學(xué)校領(lǐng)導(dǎo)重視，成立領(lǐng)導(dǎo)小組，校長經(jīng)常過問，主管校長親自督查指導(dǎo)。
活動以建構(gòu)主義學(xué)習(xí)理論為指導(dǎo)，采用支架式、任務(wù)驅(qū)動等教學(xué)方法,活動中突出以學(xué)生為主體、以教師為主導(dǎo)的活動原則。
采用以自學(xué)為主、輔導(dǎo)為輔的活動方式。
采用個人獨(dú)立完成與小組協(xié)作完成相結(jié)合的活 動方式。采用課內(nèi)與課外相結(jié)合的活動方式。將學(xué)生在課堂所學(xué)的各門知識自覺應(yīng)用到作品制作中。
采用校內(nèi)與校外相結(jié)合的活動方式。學(xué)生可在遇到問題時通過電話、QQ、E-mail等工具與教師、同學(xué)取得聯(lián)系，尋求幫助，還可請社會上的有關(guān)人士幫忙解決。
三、中學(xué)生網(wǎng)頁制作社團(tuán)活動實施方案
第一階段:結(jié)合教材，學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)知識。
這一階段主要是提高學(xué)生運(yùn)用信息技術(shù)的興趣,體會到信息技術(shù)的價值,享受到信息技術(shù)學(xué)習(xí)的樂趣,增強(qiáng)完成作品的信心。由于剛開始接觸一個新的軟件，所以采用分散知識點(diǎn)，由易到難地掌握教材內(nèi)容，貼近學(xué)生認(rèn)知水平，貼近學(xué)生實際。本階段主要目標(biāo)是掌握網(wǎng)頁制作所 要用到的基本技術(shù)和技能。
第二階段:安排相關(guān)的典型案例，讓學(xué)生初步掌握制作網(wǎng)頁的基本方法。
通過典型案例的講解，使學(xué)生了解到網(wǎng)頁設(shè)計的基本步驟、制作時應(yīng)考慮的基本因素。此階段主要目標(biāo)是為學(xué)生完成作品提供一個支架，幫助學(xué)生把對網(wǎng)頁制作的理解和認(rèn)識引向深入，為下一階段的活動做好準(zhǔn)備。
第三階段:完成作品。通過網(wǎng)頁制作活動,培養(yǎng)學(xué)生的科學(xué)素質(zhì)，提高創(chuàng)新能力。
網(wǎng)頁制作活動是制作者對各種能力的綜合應(yīng)用，它涉及對相關(guān)知識的掌握程度，以及觀察、分析、綜合、比較、概括等各種科學(xué)思維方法的綜合應(yīng)用。為此,在這一階段，師生應(yīng)組成“共同體”,在教師的點(diǎn)撥指導(dǎo)下，以小組為單位開展活動，同時提高學(xué)生獨(dú)立工作和相互合作的能力。教師重點(diǎn)在解決問題的方法上給予點(diǎn)撥和總結(jié)，并讓學(xué)生大膽地去實踐，增強(qiáng)應(yīng)用信息技術(shù)的意識和能力，提高學(xué)生的應(yīng)用能力和創(chuàng)新能力。
第四階段:作品展評。通過作品展評,提高學(xué)生的審美素養(yǎng)和審美能力。
這一階段可先在小組內(nèi)對每個作品進(jìn)行評價，選出 代表作品，再參與整個大組的展評。評價可采用作者自評、組間互評、教師點(diǎn)評等方式，可從思想性、創(chuàng)造性、藝術(shù)性、技術(shù)性等方面來進(jìn)行綜合評價。
四、開展中學(xué)生網(wǎng)頁制作社團(tuán)活動的初步成果
做到了將培養(yǎng)應(yīng)用信息技術(shù)的意識貫徹在活動的全過程之中。在活動中通過引人貼近現(xiàn)實生活、生產(chǎn)和其他學(xué)科為實際背景的選題，使學(xué)生明確了信息技術(shù)與人類社會密不可分，信息技術(shù)將會影響到他在信息社會中的立足和發(fā)展，從而體現(xiàn)信息技術(shù)的實際應(yīng)用價值和信息技 術(shù)的社會功能。
以網(wǎng)頁制作活動為手段，激發(fā)了學(xué)生學(xué)習(xí)信息技術(shù)的積極性，學(xué)會了團(tuán)結(jié)協(xié)作，建立良好人際關(guān)系、相互合作的工作能力。
以網(wǎng)頁制作活動為核心，培養(yǎng)了學(xué)生的動手能力和創(chuàng)新精神。通過網(wǎng)頁設(shè)計過程中的作品呈現(xiàn)形式的多 樣性，豐富了學(xué)生的思維，激發(fā)學(xué)生的創(chuàng)新，從而為學(xué)生將來成為具有創(chuàng)造性思維的人才奠定了基礎(chǔ)。
通過網(wǎng)頁制作活動,培養(yǎng)學(xué)生的自我評價能力。通過自評、互評和教師點(diǎn)評，可以更好地培養(yǎng)學(xué)生的自我評價能力和審美、鑒別能力。學(xué)生正是在這種不斷修改不斷完善的過程中，來完善自己，充實自己，從而形成獨(dú)立思考的習(xí)慣和良好的自我評價能力。
通過活動培養(yǎng)了學(xué)生頑強(qiáng)拼搏的精神?；顒又?引人了學(xué)生喜歡的競賽評比機(jī)制，維持了學(xué)生認(rèn)真持久開展活動的積極性。有的學(xué)生為了髙質(zhì)量地完成任務(wù)，放棄了休息和娛樂的時間，主動與游戲告別，一心撲在任務(wù)上。
五、中學(xué)生網(wǎng)頁制作社團(tuán)活動中的新亮點(diǎn)
活動過程中出現(xiàn)了意料之外的重大收獲。有一天，在觀察學(xué)生制作的過程中，發(fā)現(xiàn)張耕暢同學(xué)的作品比其他同學(xué)多了一些有趣的內(nèi)容：如瀏覽網(wǎng)頁時停留時間的統(tǒng)計、禮花效果、BBS論壇等特效和難度很大的內(nèi) 容出現(xiàn)在他的網(wǎng)貞上。經(jīng)了解，這些都是他通過自學(xué)、引用免費(fèi)代碼設(shè)計產(chǎn)生的效果。據(jù)他講，起初他在瀏覽別人網(wǎng)頁時，發(fā)現(xiàn)有一些教師沒有講的特效，他就試著研究這些效果是如何產(chǎn)生的，結(jié)果還真的找到了一條捷徑。由此可見，開展科技實踐活動確實能收到意想不 到的效果。
六、中學(xué)生網(wǎng)頁制作社團(tuán)活動繼續(xù)深化還應(yīng)注意的問題 適合中學(xué)生水平的信息技術(shù)作品制作活動理論與方法，需作進(jìn)一步研究。
活動時間合理安排和探討。
維持學(xué)生持續(xù)的興趣在活動中有一定難度，還需進(jìn)一步實踐。教師自身素質(zhì)提高的問題。在實踐中，我感到教師的素質(zhì)和水平是活動能否成功的關(guān)鍵。我們應(yīng)積極投身到實施和推進(jìn)素質(zhì)教育的各項活動中去，不斷積累和更 新專業(yè)知識。關(guān)于活動的評價。如何對參與者及其作品進(jìn)行更有效的評價,還值得研究。
七、對未來研究的展望
信息技術(shù)教育是全面素質(zhì)教育中一個必不可少的環(huán)節(jié)。信息技術(shù)與人類社會密不可分,信息技術(shù)與科學(xué)息息相關(guān)，信息技術(shù)為其它學(xué)科的發(fā)展提供了條件和基礎(chǔ)。學(xué)好信息技術(shù)對中學(xué)生素質(zhì)教育有著重要的作用，提高學(xué)生信息素養(yǎng)是我們長期面臨的任務(wù)。我們應(yīng)繼續(xù)做好信 息技術(shù)社團(tuán)活動及對策的研究工作，并將研究成果及時運(yùn)用到實踐活動中，提高信息技術(shù)社團(tuán)活動的水平，努力開創(chuàng)信息技術(shù)社團(tuán)活動的新局面！
第四篇：網(wǎng)頁設(shè)計與制作教案
《網(wǎng)頁設(shè)計與制作教案》
教師：系部：信息技術(shù)工程系專業(yè)：計算機(jī)應(yīng)用班級：計機(jī)
湄洲灣職業(yè)技術(shù)學(xué)院
2008-2009學(xué)年第一學(xué)期
唐 俊 奇
電子信息
07（1）信息07（1）08（2）
1.3 網(wǎng)頁中所使用的技術(shù)
1.3.1 HTML語言和XML語言
1、HTML語言
?HTML只使用SGML中很小一部分標(biāo)記
?HTML語言（Hyper Text Markup Language 超文本標(biāo)記語言）
?HTML是純文本的語言，其源代碼可以用各種文本編輯工具進(jìn)行編輯，常用的網(wǎng)頁制作軟件如FrontPage、Dreamweaver等實際上是自動生成HTML源代碼的工具
2、XML語言
XML（eXtensible Markup Language）1.3.2 動態(tài)網(wǎng)頁
1.3.3 多媒體技術(shù)的應(yīng)用 1.3.4 Web服務(wù)器端程序
1.4 制作網(wǎng)頁的基本方法
1.4.1 制作網(wǎng)頁的基本步驟
1、確定網(wǎng)頁的內(nèi)容
2、設(shè)計網(wǎng)頁的組織結(jié)構(gòu)
3、資料的收集與整理
4、選擇網(wǎng)頁的設(shè)計方法
1.4.2 制作網(wǎng)頁時要注意的問題
1、網(wǎng)頁的標(biāo)題要簡潔，明確。
2、在文本中要使用水平線，以分割不同部分。
3、對重點(diǎn)段落要強(qiáng)調(diào)顯示。
4、網(wǎng)頁中插入的圖片要盡量的小。
5、圖形要附加文字說明，以便關(guān)閉圖像時查看。
6、網(wǎng)頁中引用的資料及商標(biāo)（或圖標(biāo)），不能侵犯版權(quán)?！菊n后小結(jié)】
通過學(xué)習(xí)，認(rèn)識網(wǎng)絡(luò)、網(wǎng)站、網(wǎng)頁及相關(guān)信息，理解網(wǎng)頁制作的流程及了解相應(yīng)開發(fā)工具，為設(shè)計網(wǎng)頁做準(zhǔn)備。
第二講 HTML的基本標(biāo)志與格式標(biāo)志
【教學(xué)內(nèi)容】
講解HTML基本標(biāo)志對和格式標(biāo)志?！窘虒W(xué)目的】
使學(xué)生標(biāo)志對與格式標(biāo)志對的使用?！窘虒W(xué)重點(diǎn)】
格式標(biāo)志的使用。【教學(xué)難點(diǎn)】
* 使學(xué)生掌握超級鏈接標(biāo)志的使用。【教學(xué)重點(diǎn)】
* 字體、圖片和超級鏈接標(biāo)志的使用。* 網(wǎng)頁中特殊符號的輸入?！窘虒W(xué)難點(diǎn)】
* 理解特殊符號對應(yīng)的標(biāo)志。* 理解img標(biāo)志中屬性的意義。* 理解書簽超級鏈接的意義?！窘虒W(xué)方式】
討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.2 插入文字
2.2.1 劃分段落 格式
段落內(nèi)容
2.2.2 插入標(biāo)題文字 格式設(shè)置基準(zhǔn)字號：
2.2.6
文本修飾
......，文字以粗體顯示。......，文字顯示為斜體。......，顯示下劃線。
......，中心線貫穿文字。< EM>......，強(qiáng)調(diào)文字，通常用斜體。
< STRONG>......，特別強(qiáng)調(diào)的文字，通常用黑體。
2.3.2 圖片的屬性
2.4 建立超級鏈接
2.4.1 指向一個目標(biāo)
1、建立超級鏈接
2、為圖片建立超級鏈接
3、鏈接到郵件和多媒體文件 鏈接到郵件
請與我聯(lián)系 2.4.2 使用錨點(diǎn)
?使用錨點(diǎn)可以使用戶在一個較長的文檔中跳轉(zhuǎn)，方便地找到要閱讀的內(nèi)容。?建立錨點(diǎn)：
?錨點(diǎn)文字 ?使超級鏈接指向已定義的錨點(diǎn)。?文字 ?文字 2.4.3 新窗口和基準(zhǔn)鏈接
1、打開新窗口 Target=“window-name”>開一個新窗口
2、基準(zhǔn)鏈接
在
與 之間設(shè)定BorderColor=“#008000“ >
2.7.3 子窗口屬性設(shè)置
-2.7.4 常見的框架窗口劃分方法（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標(biāo)題，分為左上、左下、右三部分
（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁