1、職業(yè)活動教學(xué)設(shè)計(jì)單元 名稱第四章靜態(tài)頁面制作學(xué)時8以網(wǎng)頁效果圖為藍(lán)本，可以制作生成靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁的W利作，關(guān)鍵是要處理好頁面的布局。頁面布局常見的方法有使用表格布局、使用Div+css布局以及混合布局等。本章將重點(diǎn)介紹利用 Dreamweaver這一工具，使用表格實(shí)現(xiàn)網(wǎng)頁布局的方法。靜態(tài)網(wǎng)頁常作為網(wǎng)站系統(tǒng)的前臺頁面模版，由網(wǎng)站系統(tǒng)開發(fā)人員經(jīng)編輯處理后與后臺系統(tǒng)集成，以生成完整的網(wǎng)站，關(guān)于這局部內(nèi)容，本書不做探討，有興趣的讀者可以 參看相關(guān)資料。1、2、熟悉Dreamweaver站點(diǎn)的設(shè)置方法 掌握Dreamweaver的使用能力 目標(biāo)3、掌握使用表格工具布局網(wǎng)頁的方法4、掌握常見網(wǎng)頁兀素中

2、根本樣式的設(shè)定5、掌握子頁面鏈接的創(chuàng)立6、掌握常見的HTML標(biāo)記語言的使用1、單元綜合實(shí)訓(xùn)：企業(yè)網(wǎng)站首頁靜態(tài)頁面制作湖南瀏陽素有“煙花之鄉(xiāng)的美譽(yù)，目前其花炮年產(chǎn)值占全國總產(chǎn)值的一半，擁有 各類上規(guī)模的花炮企業(yè)1000余家。其中湖南國際慶典煙花文化集團(tuán)是一家與澳大利亞飛拓?zé)熁瘓F(tuán)香港合資創(chuàng)辦的大型煙花企業(yè)。集團(tuán)前身為瀏陽市慶典煙花，歷經(jīng)二 十余年載的不斷進(jìn)取，努力攻關(guān)，逐步成長為一家集科研、生產(chǎn)、銷售、燃放、文化傳 播于一體的專業(yè)煙花文化企業(yè)集團(tuán)，旗下?lián)碛泻鲜H慶典煙花制造燃放、瀏陽市國際慶典煙花出口貿(mào)易、瀏陽市國際慶典文化傳播等核心企業(yè)。集團(tuán)擁有現(xiàn)代化大型煙花實(shí)訓(xùn)內(nèi)容生產(chǎn)工廠，環(huán)境優(yōu)美，配

3、備先進(jìn)的自動化煙花生產(chǎn)設(shè)備；薈萃了國內(nèi)外頂級煙花科技人 才，煙花的產(chǎn)品結(jié)構(gòu)、花色效果、內(nèi)質(zhì)外觀均領(lǐng)先于行業(yè)水平?；谠絹碓絼×业氖袌?競爭，公司領(lǐng)導(dǎo)決定加強(qiáng)網(wǎng)絡(luò)宣傳與推廣，建立企業(yè)集團(tuán)網(wǎng)站。網(wǎng)站初期功能與目標(biāo)是 針對國內(nèi)市場，實(shí)現(xiàn)集團(tuán)統(tǒng)一對外的宣傳窗口，強(qiáng)化公司行業(yè)地位和影響，進(jìn)一步加強(qiáng)實(shí)訓(xùn)內(nèi)容在實(shí)訓(xùn)三完成的根底上，為該網(wǎng)站采用table技術(shù)制作靜態(tài)首頁。2、技能訓(xùn)練技能訓(xùn)練4-1 ：使用Dreamweaver管理站點(diǎn)請按以下步驟，完成站點(diǎn)的建立及管理。在D盤或F盤新建BYYWeb文件夾，將碧雅園首頁切片形成的 images文件夾復(fù)制到該文件夾下。啟動Dreamweaver CS5,新建myw

4、eb本地站點(diǎn)，指向BYYWeb文件夾。在 myweb 站點(diǎn)文件夾下新建introduction、 sort 、 feature 、 seviceproject、 care、 contact 共 7 個子文件夾。新建空白index.html ,存于該文件夾下。選取3家花卉苗木公司網(wǎng)站，參考它們的網(wǎng)站源代碼中標(biāo)題、關(guān)鍵詞、描述的設(shè)置，為該網(wǎng)頁設(shè)置適宜的標(biāo)題、關(guān)鍵詞、描述。將以上操作的相關(guān)結(jié)果填入下表。教材表4-1網(wǎng)頁關(guān)鍵詞、描述的設(shè)定技能訓(xùn)練4-2:使用表格布局網(wǎng)頁請參照上述制作過程，將碧雅園網(wǎng)站首頁分成五個大表格，分別表示頭部、 Banner、導(dǎo)航、體部、底部。表格寬度、高度可參照之前給定的數(shù)據(jù)

5、。技能訓(xùn)練4-3:使用表格嵌套處理網(wǎng)頁主體內(nèi)容請參照上述制作過程，完成碧雅園網(wǎng)站首頁的整體制作。具體表格寬度、高度 數(shù)據(jù)從上述內(nèi)容中查找。相關(guān)相關(guān)知識Dreamweaver、HTML、標(biāo)記、站點(diǎn)?！窘虒W(xué)方法設(shè)計(jì)】1以“任務(wù)驅(qū)動式為主要教學(xué)模式。教師通過任務(wù)把各教學(xué)目標(biāo)和內(nèi)容有機(jī) 地結(jié)合在一起，使學(xué)生置身于提出問題、思考問題、解決問題的動態(tài)學(xué)習(xí)過程中。學(xué)生 完成任務(wù)的同時，也完成了需要到達(dá)的學(xué)習(xí)目標(biāo)的學(xué)習(xí)。2采用協(xié)作學(xué)習(xí)的教學(xué)模式。學(xué)生在與他人進(jìn)行交流與溝通的同時，互相取長 補(bǔ)短，共同進(jìn)步。3創(chuàng)設(shè)學(xué)習(xí)情境，激發(fā)學(xué)生的學(xué)習(xí)興趣。教師在導(dǎo)入新課時可演示不同層次的 優(yōu)秀網(wǎng)頁效果圖作品，例如國內(nèi)外著名的

6、網(wǎng)站首頁、優(yōu)秀個人網(wǎng)站、教師本人制作的網(wǎng) 站、往屆學(xué)生的作品。這些作品不但能提高學(xué)生的鑒賞能力，還可以提高學(xué)生的學(xué)習(xí)興 趣和求知欲望?！窘虒W(xué)設(shè)計(jì)思路】本次課主要偏重實(shí)踐，又有一定的理論知識。如果教師講解得太多就會顯得枯燥， 因此本次課的設(shè)計(jì)思路是從具體的目標(biāo)任務(wù)入手，引導(dǎo)學(xué)生進(jìn)行觀察、思考、分析、討 論，最后得出解決問題的方法，形成解決問題的方案，到達(dá)從理論到實(shí)踐應(yīng)用的目的。整個教學(xué)過程圍繞賞-析-演-練-評展開。我們注重的是學(xué)生實(shí)際操作技能的培養(yǎng)， 90分鐘課堂，學(xué)生參與實(shí)踐的時間比例為50%左右。這樣就讓我們的學(xué)生在實(shí)踐中學(xué)到真知，同時也培養(yǎng)他們小組協(xié)作能力與合作精神。教師的主要任務(wù)是在于

7、積極地引導(dǎo)與調(diào)動學(xué)產(chǎn)生，鼓勵學(xué)生積極、主動地實(shí)踐，從而完成任務(wù)。【教學(xué)過程設(shè)計(jì)】本學(xué)習(xí)單元共8課時：任務(wù)一本地站點(diǎn)的配置2課時任務(wù)二 實(shí)用表格布局制作網(wǎng)頁4課時教學(xué)設(shè)計(jì)課內(nèi)技能訓(xùn)練教學(xué)設(shè)計(jì)具體時間安排及教學(xué)過程如下：一、引入20分鐘教師可以選擇素材庫中的十個網(wǎng)站展示給學(xué)生看，然后請學(xué)生看十個高年級學(xué)生使用Dreamweaver制作的網(wǎng)站，最后請學(xué)生觀看老師做的網(wǎng)站。通過以上網(wǎng)站的瀏覽并介 紹，每個學(xué)生都已躍躍欲試了。此時教師做一個過渡：“剛剛在瀏覽器中所看到的每一幅畫面都是一個網(wǎng)頁，這些網(wǎng)頁有的美觀大方，有的豐富多彩，有的個性鮮明，那么我 們自己能不能制作出具有自己風(fēng)格的網(wǎng)頁，并在網(wǎng)上發(fā)布，以

8、便進(jìn)行廣泛的信息交流 呢？ 學(xué)生一定會說“能。今天我們就一起來學(xué)習(xí)？網(wǎng)頁制作？。教師導(dǎo)出本節(jié)課的教學(xué)目標(biāo)。二、Dreamweaver 安裝45 分鐘教師演示并介紹網(wǎng)頁三劍客。教師演示Dreamweaver的安裝?！究煽紤]播放視頻：WYS040101 Dreamweaver安裝操作視頻?！拷處熃榻BDreamweaver操作界面。教師操作并演示新建空白網(wǎng)站首頁index.html。教師講解什么是HTML ?三、Dreamweaver站點(diǎn)的設(shè)置35分鐘教師講解并演示Dreamweaver站點(diǎn)的設(shè)置?！究煽紤]播放視頻：WYS040102 Dreamweaver本地站點(diǎn)配置操作視頻?！俊咎釂枴空埓蠹矣^看

9、，新建站點(diǎn)后的界面與新建前有什么差異？教師講解：什么是效勞器？什么是域名？教師演示：將一個案例網(wǎng)站上傳到空間，并綁定域名。教師通過插入一張圖片的案例，解釋什么是絕對路徑，什么是相對路徑？【總結(jié)】新建站點(diǎn)有兩個好處：有效管理網(wǎng)站文件。 解決絕對路徑與相對路徑的問題。四、網(wǎng)站文件夾管理10分鐘教師講解并規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)時，通常遵循的規(guī)那么。五、課后實(shí)訓(xùn)“技能訓(xùn)練4-1使用Dreamweaver管理站點(diǎn)可安排為課后實(shí)訓(xùn)，并在下次課點(diǎn) 評。要求學(xué)生按照給定步驟， 完成站點(diǎn)的建立及管理填寫下表 教材表4-1網(wǎng)頁關(guān)鍵詞、 描述的設(shè)定。六、網(wǎng)頁表格的規(guī)劃45分鐘教師講解給定效果圖的區(qū)域劃分。教師演示并講解

10、插入表格。教師講解表格對應(yīng)的 HTML代碼。教師演示并講解采用表格技術(shù)為index.html搭建框架頁面?！究煽紤]播放視頻：WYS040201表格布局操作視頻。】【使用案例：WYA040201首頁表格布局源代碼】七、課后實(shí)訓(xùn)“技能訓(xùn)練4-2使用表格布局網(wǎng)頁可安排為課后實(shí)訓(xùn)， 并在下次課點(diǎn)評。 要求學(xué)生請參照上課的制作過程，將碧雅園網(wǎng)站首頁分成五個大表格，并搭建框架頁面，分別 表示頭部、Banner、導(dǎo)航、體部、底部。表格寬度、高度可參照之前給定的數(shù)據(jù)。八、網(wǎng)頁元素的填充90分鐘教師演示并講解 Dreamweaver頁面設(shè)置。講師講解：什么是 CSS樣式。教師演示并講解頭部表格元素的填充、Ban

11、ner元素的填充、導(dǎo)航內(nèi)容的填充?！咎釂枴空埓蠹曳治?，內(nèi)容區(qū)如何規(guī)劃表格嵌套？教師演示并講解內(nèi)容區(qū)的實(shí)現(xiàn)。教師演示并講解超鏈接的實(shí)現(xiàn)。教師演示并講解表單頁面的制作。教師講解在制作過程中生成的HTML代碼和常用標(biāo)記?！究煽紤]播放視頻 WYS040202頁面元素填充操作視頻】九、課后實(shí)訓(xùn)在課時量充足的情況下“技能訓(xùn)練4-3使用表格嵌套處理網(wǎng)頁主體內(nèi)容可做為課堂實(shí)訓(xùn)內(nèi)容，邀請學(xué)生上臺參照教師演示的制作過程，完成碧雅園網(wǎng)站首頁的整體制作。具體表格寬度、高度數(shù)據(jù)從上述內(nèi)容中查找。十、單元實(shí)訓(xùn)4課時動回：WYD040000 企業(yè)網(wǎng)站首頁靜態(tài)頁面制作本單元實(shí)訓(xùn)內(nèi)容為企業(yè)網(wǎng)站首頁制作，應(yīng)用Table技術(shù)。采用動畫的形式實(shí)現(xiàn)。實(shí)訓(xùn)的完成需有上網(wǎng)條件，在實(shí)訓(xùn)過程中涉及上網(wǎng)瀏覽等操作。本實(shí)訓(xùn)內(nèi)容的設(shè)計(jì)強(qiáng)調(diào)是網(wǎng)頁實(shí)現(xiàn)問題，即Table制作網(wǎng)頁的問題。課后自主學(xué)習(xí)1、Dreamweaver的操作和使用：配套學(xué)習(xí)動畫 WYD040001-WYD040025 。2、Html標(biāo)記語言：配套學(xué)習(xí)動回 WYD040026-WYD0400753、課外技能訓(xùn)練：WYD040076技能訓(xùn)練-表單頁面制作、WYD040077技能訓(xùn)練- 網(wǎng)站首頁制作教學(xué) 資源WYS040101、WYS