第一篇：《新建網(wǎng)頁(yè)──豐富網(wǎng)站的內(nèi)容》教學(xué)設(shè)計(jì)

《新建網(wǎng)頁(yè)──豐富網(wǎng)站的內(nèi)容》教學(xué)設(shè)計(jì)

【教材使用】寧教廳審定 山東教育出版社出版 軟件FrontPage2000

【適用年級(jí)】8年級(jí)上冊(cè)

【適用單元】網(wǎng)頁(yè)制作第2大節(jié)

【教材分析】

本節(jié)的內(nèi)容分為三部分：一是新建網(wǎng)頁(yè)；二是添加圖片；三是添加背景音樂(lè)。第一部分新建網(wǎng)頁(yè)是本章節(jié)的重點(diǎn)部分，使用導(dǎo)航欄建立網(wǎng)頁(yè)也是本章節(jié)中的難點(diǎn)；第二部分網(wǎng)頁(yè)建立好要添加文字和圖片信息將其做為一節(jié)課內(nèi)容；第三部分背景音樂(lè)和下一節(jié)的網(wǎng)頁(yè)的背景合成一節(jié)課內(nèi)容，這樣便于學(xué)生的理解和掌握。

第一部分新建網(wǎng)頁(yè)，也是這一節(jié)課的內(nèi)容，它是在創(chuàng)建站點(diǎn)和主頁(yè)之后的內(nèi)容，教材中詳細(xì)地介紹了使用導(dǎo)航欄創(chuàng)建網(wǎng)頁(yè)的過(guò)程，先設(shè)計(jì)站點(diǎn)結(jié)構(gòu)，然后再編輯網(wǎng)頁(yè)的內(nèi)容。一筆帶過(guò)的是在網(wǎng)頁(yè)視圖下創(chuàng)建網(wǎng)頁(yè)的方法，是編輯一個(gè)個(gè)網(wǎng)頁(yè)，再將網(wǎng)頁(yè)組成站點(diǎn)。

本章節(jié)的一個(gè)難點(diǎn)是使用導(dǎo)航欄建立網(wǎng)頁(yè)，學(xué)生接受起來(lái)不易，但使用這種方法組織的網(wǎng)站有頭緒，有點(diǎn)像網(wǎng)站的“結(jié)構(gòu)地圖”，也易于后續(xù)鏈接知識(shí)的學(xué)習(xí)，同時(shí)也與前一節(jié)課中的網(wǎng)站準(zhǔn)備工作中的網(wǎng)站組織結(jié)構(gòu)圖是相呼應(yīng)的，它是網(wǎng)站宏觀布局的具體實(shí)施的關(guān)鍵一步。

使用網(wǎng)頁(yè)視圖方式建立網(wǎng)頁(yè)，在課本中一筆帶過(guò)，但是從知識(shí)的呈上啟下來(lái)看，學(xué)生更易接受這個(gè)方案，缺點(diǎn)是網(wǎng)站中建立許多個(gè)網(wǎng)頁(yè)時(shí)，若無(wú)網(wǎng)站的組織結(jié)構(gòu)圖，建立工作將陷入迷茫中，同時(shí)也對(duì)后續(xù)的超鏈接的學(xué)習(xí)就造成一定的困難，因此課本中不采納這種方法建立網(wǎng)頁(yè)。

本節(jié)課采用先簡(jiǎn)單介紹網(wǎng)頁(yè)視圖方式添加網(wǎng)頁(yè)，后過(guò)渡到導(dǎo)航欄中新建網(wǎng)頁(yè)，這種方法：一是將知識(shí)合理順延和過(guò)渡，從學(xué)生已知入手過(guò)渡到學(xué)生的新知；二是可以將難點(diǎn)分散進(jìn)行學(xué)習(xí)，便于學(xué)生的理解與吸收。

在創(chuàng)建網(wǎng)頁(yè)時(shí)導(dǎo)航欄與網(wǎng)頁(yè)的重命名必須保持一致，這是本節(jié)課一個(gè)難點(diǎn)也是一個(gè)重點(diǎn)。

【學(xué)情分析】

學(xué)生在學(xué)習(xí)“創(chuàng)建站點(diǎn)”后，對(duì)軟件中的導(dǎo)航欄的作用沒(méi)有一個(gè)直觀的理解，但是對(duì)于創(chuàng)建站點(diǎn)已經(jīng)有了一定的了解，而創(chuàng)建網(wǎng)頁(yè)的命令與創(chuàng)建網(wǎng)站的命令是一組，可以借助學(xué)生從已有知識(shí)過(guò)渡到難理解的導(dǎo)航欄中，因此可以從網(wǎng)頁(yè)視圖下添加網(wǎng)頁(yè)的方法中過(guò)渡到導(dǎo)航欄中添加，這樣學(xué)生能很平順地接受在導(dǎo)航中添加網(wǎng)頁(yè)以及理解它的優(yōu)勢(shì)。

【教學(xué)目標(biāo)】

1．知識(shí)目標(biāo)

（1）掌握打開(kāi)站點(diǎn)的基本方法；

（2）掌握新建網(wǎng)頁(yè)的基本方法。

2．技能目標(biāo)

通過(guò)學(xué)生探究學(xué)習(xí)過(guò)程中，掌握新建網(wǎng)頁(yè)的不同方法。

3．情感目標(biāo)：

（1）通過(guò)新建網(wǎng)頁(yè)的學(xué)習(xí)，培養(yǎng)學(xué)生的對(duì)比學(xué)習(xí)能力；

（2）利用導(dǎo)航欄知識(shí)，培養(yǎng)學(xué)生的整體布局網(wǎng)站的綜合信息素養(yǎng)能力。

【教學(xué)重、難點(diǎn)】

1．在使用導(dǎo)航欄建立網(wǎng)頁(yè)時(shí)，導(dǎo)航欄中的命名與網(wǎng)頁(yè)的命名一致是難點(diǎn)；

2．網(wǎng)頁(yè)名稱應(yīng)與網(wǎng)頁(yè)中的信息一致是重點(diǎn)。

【課時(shí)安排】2課時(shí)

【教學(xué)方法】對(duì)比法、任務(wù)驅(qū)動(dòng)法

【課前準(zhǔn)備】軟件FrontPage2000 多媒體廣播系統(tǒng)

【教學(xué)設(shè)計(jì)】

第一課時(shí)

在網(wǎng)頁(yè)視圖下添加網(wǎng)頁(yè) 教學(xué)過(guò)程

教師活動(dòng)

教學(xué)意圖

學(xué)生活動(dòng)

一、導(dǎo)入部分

上節(jié)課我們建立了“我的家鄉(xiāng)”站點(diǎn)，大家能使用“我的電腦”或“資源管理器”找到他們嗎？找到后請(qǐng)大家打開(kāi)站點(diǎn)并預(yù)覽自己所編輯的主頁(yè)信息。

問(wèn)：大家看看自己編輯的主頁(yè)信息中有沒(méi)有錯(cuò)誤？有錯(cuò)了，該如何修改？

問(wèn)：一個(gè)網(wǎng)站中一張網(wǎng)頁(yè)不能夠表達(dá)一個(gè)站點(diǎn)的所有信息，那就需要許多個(gè)網(wǎng)頁(yè)，我如何增加網(wǎng)頁(yè)呢？

我們這一節(jié)課就來(lái)解決這些問(wèn)題。（板書(shū)課題：第2節(jié)新建網(wǎng)頁(yè)）

（1）使學(xué)生確認(rèn)自己站點(diǎn)所在的位置，復(fù)習(xí)上節(jié)課預(yù)覽網(wǎng)頁(yè)的知識(shí)便于后面知識(shí)的學(xué)習(xí)。

（2）通過(guò)學(xué)生的觀察，發(fā)現(xiàn)問(wèn)題，激發(fā)學(xué)生解決問(wèn)題的興趣。

（3）留給學(xué)生思考的問(wèn)題，讓學(xué)生帶著問(wèn)題學(xué)習(xí)新知。

從計(jì)算機(jī)中查找自己的站點(diǎn)??

學(xué)生觀察發(fā)現(xiàn)問(wèn)題??

學(xué)生思考??

二、新課部分

1．打開(kāi)站點(diǎn)

2．新建網(wǎng)頁(yè)

3．保存網(wǎng)頁(yè)及網(wǎng)頁(yè)重命名

（任務(wù)一）大家看到頁(yè)面狀態(tài)是瀏覽狀態(tài)，在這個(gè)狀態(tài)下是不能修改網(wǎng)頁(yè)信息的，如果想修改只能在網(wǎng)頁(yè)的編輯狀態(tài)下才行，因此大家必須啟動(dòng)網(wǎng)頁(yè)的制作軟件FrontPage2000。

（任務(wù)二）剛才大家也看到主頁(yè)是在站點(diǎn)文件夾之中，因此我們要打開(kāi)站點(diǎn)才能看到主頁(yè)，并修改主頁(yè)?？纯窜浖小拔募辈藛螜谥杏袥](méi)有“打開(kāi)站點(diǎn)”這個(gè)命令，并動(dòng)手嘗試的打開(kāi)自己的站點(diǎn)。

教師輔導(dǎo)??

（任務(wù)三）大家已經(jīng)打開(kāi)網(wǎng)站，看看“文件”菜單中有沒(méi)有添加網(wǎng)頁(yè)的命令，自己動(dòng)手試試給自己的站點(diǎn)增加兩個(gè)網(wǎng)頁(yè)“寧夏風(fēng)景名勝”和“寧夏古詩(shī)文欣賞”。同時(shí)結(jié)合課本P67將相應(yīng)的網(wǎng)頁(yè)的文字內(nèi)容錄入到網(wǎng)頁(yè)中。大家可以互相交流。

教師進(jìn)行輔導(dǎo)??

（任務(wù)四）大家剛才建立了網(wǎng)頁(yè)，并為網(wǎng)頁(yè)添加了文字，因此需要大家及時(shí)將自己的網(wǎng)頁(yè)保存在網(wǎng)站中。大家動(dòng)手實(shí)踐?? 教師進(jìn)行輔導(dǎo)??

廣播展示命名時(shí)出現(xiàn)的問(wèn)題??

（1）在大家保存時(shí)應(yīng)正確選擇自己的站點(diǎn)，輸入網(wǎng)頁(yè)名稱即可保存。

（2）在此過(guò)程中，有的同學(xué)未能輸入網(wǎng)頁(yè)名稱，就點(diǎn)擊保存了，出現(xiàn)一個(gè)現(xiàn)象：網(wǎng)頁(yè)全部都是new-page_1(2，3，4)．htm的形式，多了自己也被迷糊了。出現(xiàn)這種情況時(shí)大家可以使用文件夾列表窗體來(lái)重新給網(wǎng)頁(yè)命名。具體操作：選中你的網(wǎng)頁(yè)文件，使用右鍵的快捷菜單完成，它的操作類(lèi)似于“資源管理器”中的命令操作。一定要注意命名時(shí)不能將網(wǎng)頁(yè)的屬性．htm丟棄了，若已經(jīng)丟棄，請(qǐng)將它加上。

（3）保存完成后，若還想給網(wǎng)頁(yè)增加信息，一定要在文件夾列表窗體中雙擊網(wǎng)頁(yè)的名稱，當(dāng)你看到你所雙擊的網(wǎng)頁(yè)名稱與編輯窗口中的名稱一致時(shí)，在輸入信息，完成后隨時(shí)保存信息。

讓學(xué)生了解在什么狀態(tài)下可以修改網(wǎng)頁(yè)。

引導(dǎo)學(xué)生從已知過(guò)渡到新知來(lái)學(xué)習(xí)打開(kāi)站點(diǎn)方法，達(dá)到舉一反三效果。

學(xué)生已經(jīng)在新建站點(diǎn)中看到過(guò)新建網(wǎng)頁(yè)，很容易接受，同時(shí)通過(guò)交流達(dá)到共同進(jìn)步。

引導(dǎo)學(xué)生保存自己的網(wǎng)頁(yè)。學(xué)生在動(dòng)手過(guò)程中就會(huì)引出重命名操作。

將本節(jié)課的難點(diǎn)集中展示出來(lái)，并糾正出錯(cuò)的原因

學(xué)生啟動(dòng)制作軟件??

學(xué)生動(dòng)手實(shí)踐??

學(xué)生動(dòng)手實(shí)踐??

學(xué)生動(dòng)手實(shí)踐??

學(xué)生改正自己錯(cuò)誤??

三、小結(jié)

這節(jié)課你都學(xué)會(huì)了什么？

鞏固本節(jié)課知識(shí)

學(xué)生自己總結(jié)??

第二課時(shí) 使用導(dǎo)航欄添加網(wǎng)頁(yè) 教學(xué)過(guò)程

教師活動(dòng)

教學(xué)意圖

學(xué)生活動(dòng)

一、導(dǎo)入部分

教師打開(kāi)學(xué)生的一份網(wǎng)站作品進(jìn)行展示??

（將作品的本人叫起來(lái)）問(wèn)：你的網(wǎng)站中的網(wǎng)頁(yè)表達(dá)的什么信息？ 再問(wèn)：你的網(wǎng)站還想需要表達(dá)什么內(nèi)容？

設(shè)想：當(dāng)你的網(wǎng)頁(yè)增加的比較多時(shí)，你會(huì)發(fā)現(xiàn)自己的思路不一定很清晰。想解決這個(gè)問(wèn)題，大家必須手繪一個(gè)網(wǎng)站組織結(jié)構(gòu)圖才能，這樣也會(huì)帶來(lái)許多不方便之處。還有沒(méi)有能直接體現(xiàn)出來(lái)我們網(wǎng)站的組織結(jié)構(gòu)圖來(lái)呢？有的。可以使用導(dǎo)航欄來(lái)建立網(wǎng)頁(yè)。

（板書(shū)課題：使用導(dǎo)航欄建立網(wǎng)頁(yè)）。

引導(dǎo)學(xué)生說(shuō)自己的創(chuàng)作意圖

引出本節(jié)課的課題

學(xué)生表述自己想法??

二、新課部分

1．導(dǎo)航欄的作用

2．新建網(wǎng)頁(yè)

視圖欄中“導(dǎo)航”按鈕是一個(gè)站點(diǎn)創(chuàng)建和系統(tǒng)管理的顯示視圖。使用導(dǎo)航欄新建網(wǎng)頁(yè)，先組織網(wǎng)站的結(jié)構(gòu)，后為每個(gè)網(wǎng)頁(yè)添加內(nèi)容。這與我們第一節(jié)準(zhǔn)備工作中組織的網(wǎng)站結(jié)構(gòu)圖就相互呼應(yīng)起來(lái)，思路清晰明了。

（任務(wù)一：）大家結(jié)合課本P64完成“做一做”。

教師進(jìn)行輔導(dǎo)??

廣播展示出現(xiàn)的問(wèn)題??

（1）FrontPage 2000只是當(dāng)你在一個(gè)站點(diǎn)上工作時(shí)才會(huì)創(chuàng)建導(dǎo)航欄，獨(dú)立的網(wǎng)頁(yè)則不行。

（2）導(dǎo)航欄中主頁(yè)是第一個(gè)添加到導(dǎo)航結(jié)構(gòu)的網(wǎng)頁(yè)，一般都叫做default．htm或index．htm，想進(jìn)行添加新網(wǎng)頁(yè)時(shí)，應(yīng)注意網(wǎng)頁(yè)之間網(wǎng)頁(yè)的層次關(guān)系。父層網(wǎng)頁(yè)是包含另一個(gè)網(wǎng)頁(yè)的父網(wǎng)頁(yè)，其他網(wǎng)頁(yè)是他的下一級(jí)。導(dǎo)航欄可以橫排或豎排。

（3）導(dǎo)航欄中若出現(xiàn)層次錯(cuò)誤時(shí)，可以使用拖動(dòng)的辦法來(lái)改善他們的層次。

（4）導(dǎo)航欄中的命名應(yīng)與雙擊后進(jìn)入的網(wǎng)頁(yè)名一致才行，這是本節(jié)課的難點(diǎn)。

（5）上節(jié)課我們已經(jīng)建立的網(wǎng)頁(yè)如何到站點(diǎn)中？在視圖窗口點(diǎn)擊“導(dǎo)航”按鈕，切換到導(dǎo)航視圖。在文件夾窗口中將文件“寧夏風(fēng)景名勝．htm”和“寧夏古詩(shī)文欣賞．htm”拖動(dòng)到“導(dǎo)航”窗口，仔細(xì)選擇停放的位置，讓示意圖標(biāo)和其他二級(jí)圖標(biāo)在一個(gè)線上，然后就看到這兩個(gè)文件成為站點(diǎn)的一部分了。

引導(dǎo)學(xué)生了解使用導(dǎo)航欄的優(yōu)勢(shì)。

難點(diǎn)集中解決??

學(xué)生實(shí)踐??

學(xué)生進(jìn)行改錯(cuò)??

三、練習(xí)

課本P75第1題。

鞏固本節(jié)課知識(shí)

四、小結(jié)

這節(jié)課你都學(xué)會(huì)了什么？

學(xué)生自己總結(jié)??

【教學(xué)反思】

本節(jié)課，若按課本中的思路進(jìn)行，學(xué)生學(xué)完后，只會(huì)依葫蘆畫(huà)瓢，只知其所以然，而不知其所以不然，還是處在一種困惑中。

由此，我將這節(jié)課改成兩節(jié)上，即分散難點(diǎn)知識(shí)，又便于學(xué)生掌握，學(xué)生在學(xué)習(xí)的過(guò)程中實(shí)踐比較多，在實(shí)踐過(guò)程中不斷出現(xiàn)新的疑問(wèn)，可以激發(fā)學(xué)生的解決問(wèn)題的積極情緒，對(duì)普遍出現(xiàn)的問(wèn)題可以通過(guò)廣播系統(tǒng)來(lái)解說(shuō)，師生互動(dòng)比較多，教師真正起到了“引”的作用。

第二篇：網(wǎng)頁(yè)中添加文字及圖片──豐富網(wǎng)站的內(nèi)容》教學(xué)設(shè)計(jì)

網(wǎng)頁(yè)中添加文字及圖片──豐富網(wǎng)站的內(nèi)容》教學(xué)設(shè)計(jì)

課

件004km.cn#TRS_AUToADD_1249890715428{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428P{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428TD{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428DIV{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1249890715428LI{mARGIN-ToP:0px;mARGIN-BoTTom:0px}/**---jSoN--{“":{”margin-top“:”0“,”margin-bottom“:”0“},”p“:{”margin-top“:”0“,”margin-bottom“:”0“},”td“:{”margin-top“:”0“,”margin-bottom“:”0“},”div“:{”margin-top“:”0“,”margin-bottom“:”0“},”li“:{”margin-top“:”0“,”margin-bottom“:”0“}}--**/DIV.myFav_1249633634593P.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633634593LI.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633634593DIV.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman";TEXT-ALIGN:justify}DIV.myFav_1249633634593DIV.Section1{page:Section1}DIV.myFav_1249633634593oL{mARGIN-BoTTom:0cm}DIV.myFav_1249633634593UL{mARGIN-BoTTom:0cm} 【教材使用】寧教廳審定

山東教育出版社出版軟件FrontPageXX

【適用年級(jí)】8年級(jí)

【適用單元】網(wǎng)頁(yè)制作第2大節(jié)

【教材分析】

教材中本節(jié)的內(nèi)容分為三部分：一是新建網(wǎng)頁(yè)；二是添加圖片；三是添加背景音樂(lè)。第一部分新建網(wǎng)頁(yè)是本章節(jié)的重點(diǎn)部分，使用導(dǎo)航欄建立網(wǎng)頁(yè)也是本章節(jié)中的難點(diǎn)；第二部分給建立好的網(wǎng)頁(yè)添加文字和圖片信息將做為一節(jié)課的內(nèi)容；第三部分背景音樂(lè)和下一節(jié)的網(wǎng)頁(yè)的背景合成一節(jié)課內(nèi)容，這樣便于學(xué)生的理解和掌握。

本節(jié)是第二部分為網(wǎng)頁(yè)添加文字及圖片，它是網(wǎng)頁(yè)中的兩大基本要素。文字部分在教材中沒(méi)有提及，上節(jié)添加的網(wǎng)頁(yè)是空白的，而在實(shí)際操作過(guò)程中網(wǎng)頁(yè)中是沒(méi)有文字的，因此在這兒必須給學(xué)生時(shí)間添加文字，結(jié)合前面學(xué)習(xí)的網(wǎng)絡(luò)搜索讓學(xué)生上網(wǎng)搜索信息，使前后知識(shí)充分結(jié)合起來(lái)，而后才能添加圖片，達(dá)到圖文并茂。

【學(xué)情分析】

學(xué)生已經(jīng)學(xué)會(huì)了新建網(wǎng)頁(yè)，建立的網(wǎng)頁(yè)是空白的，學(xué)生就有“為空白網(wǎng)頁(yè)添加文字及圖片信息”的欲望，結(jié)合因特網(wǎng)知識(shí)讓學(xué)生為自己創(chuàng)建的網(wǎng)頁(yè)添加所需的信息，添加圖片的技能學(xué)生已經(jīng)在word文字處理軟件中學(xué)習(xí)過(guò)，因此本節(jié)課知識(shí)，學(xué)生可以自主學(xué)習(xí)。

【教學(xué)目標(biāo)】

1．知識(shí)目標(biāo)

（1）掌握為網(wǎng)頁(yè)中添加文字信息的不同方法。

（2）掌握為網(wǎng)頁(yè)中添加圖片信息的方法。

2．技能目標(biāo)

通過(guò)學(xué)生自主學(xué)習(xí)過(guò)程中，掌握為網(wǎng)頁(yè)中添加信息的不同方法。

3．情感目標(biāo)

（1）通過(guò)為網(wǎng)頁(yè)添加文字信息的學(xué)習(xí)，培養(yǎng)學(xué)生的綜合運(yùn)用知識(shí)的能力。

（2）利用插入圖片知識(shí)，培養(yǎng)學(xué)生的圖文并茂整體布局網(wǎng)頁(yè)的綜合信息素養(yǎng)能力。

【教學(xué)重點(diǎn)與難點(diǎn)】

學(xué)習(xí)嵌入式保存素材的方法和分類(lèi)管理素材的能力。

【課時(shí)安排】2課時(shí)

【教學(xué)方法】任務(wù)驅(qū)動(dòng)法

【課前準(zhǔn)備】軟件FrontPageXX

多媒體廣播系統(tǒng)

【教學(xué)設(shè)計(jì)】

第一課時(shí)

為網(wǎng)頁(yè)添加文字信息

教學(xué)過(guò)程 教師活動(dòng) 學(xué)生活動(dòng) 教學(xué)意圖

一、導(dǎo)入部分

（教師打開(kāi)上節(jié)課站點(diǎn)中新建的網(wǎng)頁(yè)進(jìn)行廣播展示……）

問(wèn)：大家觀察我們上節(jié)課使用導(dǎo)航欄添加的網(wǎng)頁(yè)，網(wǎng)頁(yè)中缺什么？

網(wǎng)頁(yè)中表達(dá)信息最常用的就是文字和圖片，這節(jié)課我們就來(lái)給網(wǎng)頁(yè)添加文字和圖片。

（板書(shū)：網(wǎng)頁(yè)中添加文字和圖片）

學(xué)生觀察后回答：網(wǎng)頁(yè)中缺文字、圖片內(nèi)容。

直接擺出新建網(wǎng)頁(yè)后的情況，激發(fā)學(xué)生為網(wǎng)頁(yè)添加信息。

二、給網(wǎng)頁(yè)中添加文字的不同方式 網(wǎng)頁(yè)中表達(dá)信息的主要還是文字。（板書(shū)

一、添加文字：）

大家來(lái)看我們主頁(yè)中的文字，是大家自己錄入的。（廣播展示……）

（板書(shū)

．錄入法：）

但是，這種方法對(duì)大家來(lái)說(shuō)是比較費(fèi)勁的，在我們組織網(wǎng)站時(shí)會(huì)準(zhǔn)備一些電子資料，我們可以借用現(xiàn)有資料。

（板書(shū)

2．使用現(xiàn)有電子資料：）

（任務(wù)一：）大家通過(guò)“網(wǎng)上鄰居”打開(kāi)教師機(jī)的“我的家鄉(xiāng)”的文字資料，看看你的網(wǎng)頁(yè)中需要哪些，可以將這些文字信息放入到自己的網(wǎng)頁(yè)里。

教師進(jìn)行輔導(dǎo)……

教師小結(jié)方法：

（1）可以使用最基本的復(fù)制粘貼辦法來(lái)解決；（2）當(dāng)文檔中的文字資料都需要時(shí)，可以使用“插入文件”命令來(lái)完成。

（引）在剛才，大家給網(wǎng)頁(yè)添加了一些文字信息，可是有許多網(wǎng)頁(yè)所需要的信息并沒(méi)有，怎么辦呢？

網(wǎng)絡(luò)中有許多信息，借助網(wǎng)絡(luò)可以搜索到自己所需要信息。

（板書(shū)

3．網(wǎng)絡(luò)搜索法：）

（任務(wù)二：）大家可以借助網(wǎng)絡(luò)查找自己所需要的資料，但是有的資料不一定立即就用到，因此建議大家在“文件夾列表”窗口建立一個(gè)網(wǎng)絡(luò)資源的文件夾，可以分文字、圖片等不同類(lèi)，將找到的信息可以暫時(shí)放在這些文件夾中；用到的可以直接復(fù)制到網(wǎng)頁(yè)中。

教師進(jìn)行輔導(dǎo)……

學(xué)生觀察理解……

學(xué)生實(shí)踐……

回答：利用網(wǎng)絡(luò)上網(wǎng)搜索

學(xué)生實(shí)踐……

添加文字就直接的辦法就是錄入。

引導(dǎo)學(xué)生使用現(xiàn)有資料，復(fù)習(xí)復(fù)制粘貼操作。

（1）指導(dǎo)學(xué)生正確合理地使用網(wǎng)絡(luò)資源，通過(guò)網(wǎng)絡(luò)查找到信息，分類(lèi)存放在資源包中。

（2）用到了才是學(xué)生最需要的，因此將第1節(jié)課準(zhǔn)備工作中“網(wǎng)絡(luò)資源”文件夾放在這里進(jìn)行，用來(lái)收集網(wǎng)頁(yè)的素材。

三、小結(jié)

通過(guò)這節(jié)課的學(xué)習(xí)大家都明白網(wǎng)頁(yè)中所需文字資料如何獲取了嗎？都有哪些途徑？ 學(xué)生自己總結(jié)……

學(xué)生對(duì)自己所學(xué)知識(shí)進(jìn)行匯總。

第二課時(shí)

為網(wǎng)頁(yè)添加圖片信息

教學(xué)過(guò)程 教師活動(dòng) 學(xué)生活動(dòng) 教學(xué)意圖

一、導(dǎo)入部分

（教師打開(kāi)上節(jié)課站點(diǎn)中新建的網(wǎng)頁(yè)進(jìn)行廣播展示……）

網(wǎng)頁(yè)中有了文字，我們能不能添加一些相應(yīng)的圖片來(lái)烘托一下主題，使網(wǎng)頁(yè)變得圖文并茂，更具有感染力？

回答：可以。

直接導(dǎo)入

二、添加圖片

（任務(wù)一）組成網(wǎng)頁(yè)的第二大元素就是圖片，大家結(jié)合課本P69完成主頁(yè)中添加寧夏地區(qū)圖的操作。

教師進(jìn)行輔導(dǎo)……

叫一位出錯(cuò)的學(xué)生上來(lái)操作，其他同學(xué)給他找原因及解決的辦法。

教師小結(jié)知識(shí)點(diǎn)：

打開(kāi)圖片對(duì)話框后，要使用“從計(jì)算機(jī)上選擇一個(gè)文件”按鈕；

保存時(shí)注意保存到“images”文件夾中，提醒學(xué)生注意書(shū)中的“小博士”，用這個(gè)辦法在今后插入動(dòng)畫(huà)、音樂(lè)時(shí)可以建立文件夾分類(lèi)保存。

未能保存在“images”文件夾中，在文件夾列表窗口中，可以將圖片文件拖動(dòng)到“images”文件夾中。

插入圖片后感覺(jué)不合理，可以調(diào)整圖片，大家可以結(jié)合課本P72的“知識(shí)窗”和“金鑰匙”調(diào)整自己的網(wǎng)頁(yè)中的圖片。

大家結(jié)合老師剛才的解說(shuō)，從新調(diào)整網(wǎng)頁(yè)中的圖片。

（任務(wù)三）大家為自己的網(wǎng)頁(yè)添加了圖片，若想達(dá)到圖文并茂，具有感染力時(shí)，也要相應(yīng)地對(duì)文字進(jìn)行修飾。文字的修飾在學(xué)習(xí)文字處理軟件word時(shí)已經(jīng)學(xué)過(guò)了，大家試著將你的網(wǎng)頁(yè)中的文字進(jìn)行修飾，達(dá)到圖文并茂，賞心悅目的結(jié)果。

教師進(jìn)行指導(dǎo)……

學(xué)生實(shí)踐……

學(xué)生觀察并指導(dǎo)……

學(xué)生糾正錯(cuò)誤……

學(xué)生實(shí)踐……

讓學(xué)生先實(shí)踐，從中發(fā)現(xiàn)錯(cuò)誤后再糾正學(xué)習(xí)的過(guò)程。

糾正學(xué)生的錯(cuò)誤，可以將網(wǎng)頁(yè)中所需的要素分類(lèi)保存，培養(yǎng)學(xué)生舉一反三的學(xué)習(xí)方法。同時(shí)要與素材文件夾進(jìn)行區(qū)分。

引導(dǎo)學(xué)生使用已知的技能來(lái)修飾自己的網(wǎng)頁(yè)。

三、知識(shí)總結(jié)

這節(jié)課你都學(xué)會(huì)了什么？ 學(xué)生自己總結(jié)……

【教學(xué)反思】

這部分內(nèi)容使用兩課時(shí)，給學(xué)生大量的時(shí)間來(lái)增加網(wǎng)頁(yè)中文字和圖片的信息，可是其中的操作大部分是先前所學(xué)知識(shí)，這里只是進(jìn)行了一個(gè)綜合應(yīng)用，在應(yīng)用的過(guò)程中學(xué)習(xí)部分知識(shí)，學(xué)生在添加網(wǎng)頁(yè)中的內(nèi)容時(shí)也培養(yǎng)了學(xué)生的成就感，增強(qiáng)了學(xué)生的自信心，也為下一節(jié)課美化網(wǎng)頁(yè)奠定一定的基礎(chǔ)。

調(diào)整知識(shí)：將第1節(jié)課準(zhǔn)備工作中“網(wǎng)絡(luò)資源”文件夾放在這里進(jìn)行，學(xué)生查找資料時(shí)立即就用到了，用到了才是學(xué)生最需要的。同時(shí)在講解分類(lèi)保存網(wǎng)頁(yè)中所需的要素時(shí)可以和網(wǎng)絡(luò)資源文件夾的功能進(jìn)行比較。這點(diǎn)知識(shí)學(xué)生容易混淆，進(jìn)行區(qū)分是有必要的。

課

件004km.cn

第三篇：《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》教學(xué)總結(jié)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》教學(xué)總結(jié)

本學(xué)期11網(wǎng)絡(luò)1班的網(wǎng)絡(luò)程序設(shè)計(jì)基礎(chǔ)課程采用的是人民郵電出版社的《動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作——CSS+JavaScript》吳以欣 陳小寧主編。這本教材總體還是比較適合于高職學(xué)生。在實(shí)際教學(xué)中我廣泛選擇利用其他較適宜的教學(xué)資源，注重入門(mén)練習(xí)。作為教學(xué)的補(bǔ)充，我將一些資源和教師多年教學(xué)積累整理成課件發(fā)給學(xué)生?，F(xiàn)將一個(gè)學(xué)期的教學(xué)情況總結(jié)如下：

一、老師給與學(xué)生合理的引導(dǎo)，更要加強(qiáng)自身的素質(zhì)修養(yǎng)，提高自己的知識(shí)水準(zhǔn)。

在整個(gè)教學(xué)過(guò)程中，在教學(xué)過(guò)程中自己還缺少更高的藝術(shù)修養(yǎng)和藝術(shù)創(chuàng)造能力，所以還要不斷的學(xué)習(xí)；另外就是技術(shù)上還需要完善，也需要和有經(jīng)驗(yàn)的老師多交流，多溝通。相信只有站在一定的高度去看整個(gè)項(xiàng)目的實(shí)現(xiàn)，會(huì)更通俗易懂也更有說(shuō)服力，所以也不能說(shuō)都是學(xué)生的原因，歸結(jié)起來(lái)還是要提高自己的知識(shí)水平和業(yè)務(wù)素質(zhì)！

二、了解學(xué)生，加強(qiáng)考核。

針對(duì)全體學(xué)生來(lái)說(shuō)，聰明程度相當(dāng)，但學(xué)習(xí)興趣層次不同，大部分學(xué)生只愿意聽(tīng)后選擇性的接受，而沒(méi)有知識(shí)的創(chuàng)新利用，或者是沒(méi)有下去自學(xué)，鞏固知識(shí)，單一的只是聽(tīng)和做。有的同學(xué)，上完課后根本就直接把書(shū)丟在一邊置之不理。綜合學(xué)生的學(xué)習(xí)態(tài)度問(wèn)題，個(gè)人認(rèn)為還需要加強(qiáng)考核制度，從嚴(yán)制學(xué)，寬進(jìn)嚴(yán)出，嚴(yán)肅考風(fēng)！

三、教學(xué)內(nèi)容心得

1.網(wǎng)頁(yè)制作要簡(jiǎn)潔大方。網(wǎng)站在設(shè)計(jì)過(guò)程中以簡(jiǎn)潔大方為主，配合合理的顏色搭配和主題內(nèi)容的詮釋?zhuān)o訪問(wèn)者賞心悅目的感覺(jué)；而避免過(guò)多的動(dòng)畫(huà)和幀的過(guò)多運(yùn)用，以及不明確的導(dǎo)航，雜亂的顏色，沒(méi)有主題的胡編亂造。

2.網(wǎng)站風(fēng)格要統(tǒng)一。所有的圖像、文字，包括像背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。這樣子讀者看起來(lái)舒服、順暢，也會(huì)對(duì)你的網(wǎng)站留下一個(gè)“很專(zhuān)業(yè)”的印象。知識(shí)運(yùn)用中要大量配合合理的模板、CSS樣式的運(yùn)用而避免在網(wǎng)頁(yè)中反復(fù)的字體樣式重定義、顏色的胡亂運(yùn)用，參差不齊給人雜亂的感覺(jué)。

3.網(wǎng)站布局合理。避免一些“拿來(lái)主義”，一些學(xué)生為了設(shè)計(jì)方便，拿網(wǎng)上流行的模版做網(wǎng)頁(yè)，做出的網(wǎng)頁(yè)幾乎是千篇一律，沒(méi)有特色，雖然完成了網(wǎng)頁(yè)的制

作，畢竟不是出自個(gè)人之手，知識(shí)缺乏進(jìn)一步鞏固，且讓瀏覽者產(chǎn)生厭倦。另外導(dǎo)航清晰化，能引領(lǐng)瀏覽者閱讀網(wǎng)頁(yè)，思路一定要清晰，避免交叉鏈接。

4.網(wǎng)站容量要小。雖然網(wǎng)頁(yè)更加美觀可以吸引瀏覽者，但是圖片，動(dòng)畫(huà)容量大會(huì)影響瀏覽速度，所以一定要注意網(wǎng)絡(luò)容量問(wèn)題。圖片盡量壓縮，多采用單一色，或者簡(jiǎn)單的顏色；動(dòng)畫(huà)要盡量簡(jiǎn)潔實(shí)用，用最少的幀做出最漂亮實(shí)用的動(dòng)畫(huà)，給網(wǎng)頁(yè)增色。

但是總體來(lái)說(shuō)，通過(guò)整個(gè)學(xué)期網(wǎng)頁(yè)制作的學(xué)習(xí)，學(xué)生已經(jīng)了解了網(wǎng)頁(yè)制作所需要的基本技術(shù)，也掌握了網(wǎng)頁(yè)制作的基本技能。但由于時(shí)間緊迫，知識(shí)點(diǎn)多，一些重點(diǎn)難點(diǎn)問(wèn)題還需要勤加練習(xí)，比如：靜態(tài)網(wǎng)頁(yè)中的布局和CSS 的定義；動(dòng)態(tài)網(wǎng)頁(yè)中對(duì)象的綜合運(yùn)用等等。當(dāng)然也存在著遺憾，不少學(xué)生反映，學(xué)習(xí)愛(ài)好更多的是動(dòng)畫(huà)的制作即 Flash的學(xué)習(xí)，而我們只是籠統(tǒng)的講解，不能完全滿足學(xué)生的求知欲！當(dāng)然針對(duì)網(wǎng)頁(yè)制作來(lái)說(shuō)，還需要加強(qiáng)學(xué)生的配色觀念以及審美觀的培養(yǎng)，以及動(dòng)態(tài)網(wǎng)頁(yè)的實(shí)現(xiàn)技術(shù)的把握，在很多方面還需要老師和學(xué)生們進(jìn)一步配合，共同學(xué)習(xí)和實(shí)戰(zhàn)，以達(dá)到知識(shí)運(yùn)用的一定高度！

第四篇：網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》實(shí)驗(yàn)教學(xué)大綱

課程編號(hào)070105007

學(xué)時(shí)學(xué)分：總學(xué)時(shí)：64總學(xué)分：4實(shí)驗(yàn)學(xué)時(shí)：

32適用對(duì)象：計(jì)算機(jī)科學(xué)與技術(shù)及相關(guān)本科專(zhuān)業(yè)

課程屬性：專(zhuān)業(yè)方向課

實(shí)驗(yàn)屬性：非獨(dú)立設(shè)課

一、課程的性質(zhì)與任務(wù)

隨著Internet的普及，網(wǎng)頁(yè)已經(jīng)成為人們信息發(fā)布及獲取、思想交流和商務(wù)往來(lái)最重要的途徑，網(wǎng)頁(yè)制作已成為當(dāng)今社會(huì)上一種比較熱門(mén)的技術(shù)，本課程突出實(shí)用技術(shù)和應(yīng)用技能，是計(jì)算機(jī)專(zhuān)業(yè)學(xué)生的一門(mén)必選課，同時(shí)又可作為相關(guān)專(zhuān)業(yè)學(xué)生的選修課。

網(wǎng)頁(yè)設(shè)計(jì)課程是學(xué)生在學(xué)習(xí)了高級(jí)程序設(shè)計(jì)語(yǔ)言、數(shù)據(jù)庫(kù)原理及應(yīng)用等課程的基礎(chǔ)上開(kāi)設(shè)的一門(mén)實(shí)用性較強(qiáng)的課程，實(shí)驗(yàn)課的任務(wù)是通過(guò)實(shí)驗(yàn)加深對(duì)理論知識(shí)的理解，基本掌握WEB應(yīng)用的規(guī)劃、設(shè)計(jì)和動(dòng)態(tài)網(wǎng)頁(yè)制作中對(duì)于內(nèi)容的動(dòng)態(tài)顯示與更新技術(shù)，培養(yǎng)學(xué)生的動(dòng)手能力和設(shè)計(jì)能力。

二、實(shí)驗(yàn)的目的與基本要求

實(shí)驗(yàn)?zāi)康模和ㄟ^(guò)實(shí)驗(yàn)讓學(xué)生掌握網(wǎng)站的配置方式和網(wǎng)頁(yè)設(shè)計(jì)的基本方法。

基本要求：

（1）掌握頁(yè)面的設(shè)計(jì)與布局的基本方法；

（2）掌握J(rèn)S腳本語(yǔ)言的使用方法；

（3）掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。

三、實(shí)驗(yàn)考核方式及辦法

實(shí)驗(yàn)成績(jī)根據(jù)學(xué)生的實(shí)驗(yàn)完成情況、實(shí)驗(yàn)紀(jì)律、實(shí)驗(yàn)報(bào)告進(jìn)行綜合評(píng)定，給出優(yōu)（90-100）、良（70-89）、及格（60-69）、不及格（60以下）。實(shí)驗(yàn)成績(jī)占本課程總成績(jī)的20%，對(duì)缺實(shí)驗(yàn)成績(jī)或不及格者，《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程不予通過(guò)。

四、實(shí)驗(yàn)項(xiàng)目一覽表

網(wǎng)頁(yè)制作實(shí)驗(yàn)項(xiàng)目一覽表

序 號(hào)2 3 4

5實(shí)驗(yàn)項(xiàng)目 名稱

div布局 css層疊樣式單

JS腳本 asp.net控件 ado.net數(shù)據(jù)庫(kù)連接

實(shí)驗(yàn) 類(lèi)型

驗(yàn)證性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性 設(shè)計(jì)性

實(shí)驗(yàn) 要求

必做 必做 必做 必做 必做

適用 專(zhuān)業(yè)

理工類(lèi) 理工類(lèi) 理工類(lèi) 理工類(lèi) 理工類(lèi)

學(xué) 時(shí)6 6 6 8

五、實(shí)驗(yàn)項(xiàng)目的具體內(nèi)容：

實(shí)驗(yàn)一div布局

1．本次實(shí)驗(yàn)的目的和要求

掌握網(wǎng)頁(yè)設(shè)計(jì)的DIV布局方式，能夠使用DIV進(jìn)行層布局，認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。

2．實(shí)驗(yàn)內(nèi)容或原理

掌握dream weaver軟件的基本功能，熟悉dream weaver的工具箱,使用DIV做層布局。

3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，搭建好asp.net的開(kāi)發(fā)環(huán)境。

4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weaver軟件；（2）使用div布局設(shè)計(jì)網(wǎng)頁(yè)；（3）div的布局設(shè)計(jì)與修改。

5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。

6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。

7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)二css層疊樣式單

1．本次實(shí)驗(yàn)的目的和要求

通過(guò)dream weaver軟件的使用，掌握使用css層疊樣式單做布局樣式控制的方法，要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

通過(guò)dream weaver軟件的使用，使用css層疊樣式單做布局樣式控制。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weaver軟件，建好asp.net的開(kāi)發(fā)環(huán)境。4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weave軟件。

（2）用css層層疊樣式單做布局樣式控制。（3）css層疊樣式單編寫(xiě)與調(diào)用。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)三JS腳本

1．本次實(shí)驗(yàn)的目的和要求

掌握J(rèn)S腳本的基本用法、變量、函數(shù)、DOM文檔對(duì)象的操作。要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

JS腳本的基本用法、變量、函數(shù)、DOM文檔對(duì)象的操作。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有dream weave軟件。4．實(shí)驗(yàn)步驟

（1）打開(kāi)dream weave軟件。

（2）新建JS文件，編寫(xiě)腳本程序?qū)崿F(xiàn)對(duì)JS腳本的變量、函數(shù)、DOM文檔對(duì)象的操作。

（3）外部調(diào)用JS文件。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)四 asp.net控件

1．本次實(shí)驗(yàn)的目的和要求

掌握asp.net控件（包括HTML控件與服務(wù)器端控件）的使用方法。實(shí)驗(yàn)后要求認(rèn)真撰寫(xiě)實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程中嚴(yán)格遵守實(shí)驗(yàn)室規(guī)章制度。2．實(shí)驗(yàn)內(nèi)容或原理

運(yùn)用所學(xué)知識(shí)，用HTML控件與服務(wù)器端控件進(jìn)行編程，實(shí)現(xiàn)簡(jiǎn)單功能。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開(kāi)發(fā)平臺(tái)。4．實(shí)驗(yàn)步驟

（1）打開(kāi)asp.net開(kāi)發(fā)平臺(tái)。（2）新建空白頁(yè)面或者空站點(diǎn)。

（3）用HTML控件與服務(wù)器端控件進(jìn)行編程并調(diào)試。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

實(shí)驗(yàn)五ado.net數(shù)據(jù)庫(kù)連接

1．本次實(shí)驗(yàn)的目的和要求

掌握ado.net數(shù)據(jù)庫(kù)連接的基本概念、ADO.NET對(duì)象模型、SqlConnection對(duì)象。

2．實(shí)驗(yàn)內(nèi)容或原理

建立ado.net數(shù)據(jù)庫(kù)連接，ADO.NET對(duì)象模型、SqlConnection對(duì)象。3．需用的儀器或試劑等

多媒體計(jì)算機(jī)，操作系統(tǒng)Windows 2000/XP以上，并安裝有asp.net開(kāi)發(fā)平臺(tái)。4．實(shí)驗(yàn)步驟

（1）打開(kāi)asp.net開(kāi)發(fā)平臺(tái)。（2）建立ado.net數(shù)據(jù)庫(kù)連接。

（3）通過(guò)SqlCommand對(duì)象提供的方法傳遞對(duì)數(shù)據(jù)庫(kù)操作的命令，并返回命令執(zhí)行的結(jié)果。5．教學(xué)方式

學(xué)生主要通過(guò)上機(jī)實(shí)驗(yàn)，在相應(yīng)的軟件環(huán)境下學(xué)習(xí)處理，教師實(shí)時(shí)指導(dǎo)。6．考核要求

實(shí)驗(yàn)過(guò)程中能認(rèn)真獨(dú)立完成實(shí)驗(yàn)，實(shí)驗(yàn)完成后及時(shí)上交實(shí)驗(yàn)報(bào)告，實(shí)驗(yàn)過(guò)程的表現(xiàn)和實(shí)驗(yàn)報(bào)告成績(jī)記入平時(shí)成績(jī)。7．實(shí)驗(yàn)報(bào)告要求

實(shí)驗(yàn)報(bào)告格式正確，書(shū)寫(xiě)工整，字跡清楚，步驟敘述清楚，實(shí)驗(yàn)結(jié)果符合邏輯。

六、實(shí)驗(yàn)教材及主要參考資料

翁健紅編著，基于C#的ASP.NET程序設(shè)計(jì)(第2版)，機(jī)械工業(yè)出版社

七、教改說(shuō)明及其他

在實(shí)驗(yàn)教學(xué)過(guò)程中可以結(jié)合優(yōu)秀網(wǎng)站分析、優(yōu)秀作業(yè)點(diǎn)評(píng)、作業(yè)中普遍存在的主要問(wèn)題及改正方法的分析等方法相互穿插結(jié)合進(jìn)行教學(xué)。

第五篇：網(wǎng)頁(yè)設(shè)計(jì)教學(xué)與實(shí)驗(yàn)內(nèi)容7

教課程名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作

學(xué)七

教學(xué)題目：Photoshop圖層的應(yīng)用 講授內(nèi)容：

? 圖層的概念 ? 圖層的基本操作。一．圖層的概念

圖層是對(duì)圖像進(jìn)行各種合成效果的重要途徑。

不同圖層中的圖像可以進(jìn)行獨(dú)立操作，更改圖層的順序和屬性可以改變圖像的合成效果。

? ?

? ? 背景圖層：默認(rèn)為鎖定，未解鎖不允許更改。

調(diào)整圖層：調(diào)整圖層中的色彩調(diào)整對(duì)其下方的所有圖層產(chǎn)生作用。填充圖層：純色填充、漸變填充和圖案填充。圖層樣式：投影、發(fā)光、浮雕等效果。

二．新建圖層

1．單擊“圖層”面板的新建按鈕創(chuàng)建新圖層。2．復(fù)制圖層可產(chǎn)生新圖層。3．輸入文字時(shí)可生成新圖層。三．復(fù)制圖層

將需復(fù)制的圖層拖至新建圖層按鈕上，形成圖層的“副本”。四．刪除圖層

選擇需刪除的圖層，單擊“刪除圖層”按鈕，或?qū)D層拖至“刪除圖層”按鈕。五．合并圖層

向下合并、合并可見(jiàn)圖層、拼合圖層。六．調(diào)整圖層順序

直接拖動(dòng)圖層或選擇“圖層/排列”命令。七．鏈接圖層

固定當(dāng)前圖層和鏈接圖層間的相對(duì)位置，鏈接后視為一個(gè)整體，可進(jìn)行移動(dòng)、縮放、旋轉(zhuǎn)、色彩調(diào)整和合并等操作。

案例文件：講授案例彩色圓點(diǎn).psd 選擇需要鏈接的多個(gè)圖層（注：使用Ctrl鍵），單擊“鏈接圖層”按鈕。八．鎖定圖層

防止圖層被誤操作，可將圖層鎖定?！版i定透明像素”、“鎖定圖像像素”、“鎖定位置”、“鎖定全部”。九．對(duì)齊和分布圖層

選擇多個(gè)圖層，在工作區(qū)頂端“選項(xiàng)”面板中使用對(duì)齊和分布圖層按鈕。案例文件：講授案例彩色圓點(diǎn).psd 十．圖層屬性

圖層名稱、不透明度、顯示隱藏。

十一．應(yīng)用舉例——背景特效制作（參照“講授案例背景特效.psd”）

1.新建800×600 px的黑色畫(huà)布。

2.選擇20px的黃色（#fdd000）畫(huà)筆工具，調(diào)整為硬度100%、間距150%的虛線。3.新建“圖層1”，按住Shift繪制長(zhǎng)短不

一、疏密有致的垂直虛線。4.新建“圖層2”，改變畫(huà)筆顏色為綠色（#218f49），畫(huà)筆直徑為9px，按步驟3，隨意繪制另一色彩的垂直虛線。

5.新建“圖層3”，改變畫(huà)筆顏色及畫(huà)筆直徑，按步驟3，隨意繪制另一色彩的垂直虛線。

6.選擇直排文字工具，輸入“Effect Design”。

7.復(fù)制文字圖層多份，分別改變各圖層文字的大小、不透明度以及位置。8.合并所有圖層，保存于“實(shí)驗(yàn)素材”文件夾，命名“我的背景特效.jpg”。十二．案例操作要點(diǎn)總結(jié)：

畫(huà)筆色彩、間距、直徑；直線；圖層自由變換；圖層不透明度。

實(shí)驗(yàn)內(nèi)容

一．根據(jù)教學(xué)案例的說(shuō)明，完成“背景特效”。

二．根據(jù)“實(shí)驗(yàn)素材水晶按鈕.psd”，完成水晶按鈕的特效。制作過(guò)程如下：

1.新建200×80像素，分辨率72，白色背景的畫(huà)布。2.新建“圖層1”，前景色設(shè)置為“綠色”（#45b035）。

3.選擇圓角矩形工具，屬性設(shè)置為“填充像素”，半徑40像素，在圖層1中繪制圓角矩形。4.設(shè)置圖層1的“圖層樣式”，選擇“投影”，90度，不透明度40%，距離2像素。選擇“內(nèi)陰影”，不透明度80%，距離13像素，大小21像素。5.選擇圓角矩形工具，屬性設(shè)置為“路徑”，半徑80像素。6.新建“圖層2”，在圖層2上繪制圓角矩形路徑。

7.打開(kāi)“路徑”面板，單擊“將路徑作為選區(qū)載入”按鈕。

8.設(shè)置前景色為白色，選擇漸變工具，屬性設(shè)置漸變樣式為“前景到透明”和“線性漸變”，在選區(qū)中從上到下繪制漸變色。9.按Ctrl+D取消選區(qū)，選擇“圖層1”，按Ctrl鍵同時(shí)單擊圖層面板中“圖層1”的縮略圖，將圖層1的選區(qū)載入。

10.選擇矩形選框工具，單擊“與選區(qū)交叉”屬性按鈕，在“圖層1”中繪制選區(qū)，使選區(qū)交叉后僅保留圓角矩形選框的下1/4部分。

11.使用“選擇/羽化…”命令，將交叉后的選區(qū)羽化，羽化值為5像素。

12.選擇“圖像/調(diào)整/色階…”命令，在對(duì)話框中拖動(dòng)滑塊，使羽化后的選區(qū)內(nèi)容變亮。之后取消選區(qū)。

13.選擇橫排文字工具，輸入“確定”文本，并調(diào)整文本至按鈕中央，設(shè)置文本的“圖層樣式”為“投影”。此時(shí)效果已完成。

14.刪除“路徑”面板中的路徑。合并圖層，保存為jpg格式的圖像，命名為“水晶按鈕.jpg”。