《HTML網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》教案

PAGE49《HTML網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》教案首頁(yè)本次課標(biāo)題：說課授課日期第6周周1授課班級(jí)課時(shí)1上課地點(diǎn)教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)1.本課程的任務(wù)、性質(zhì)、目的2.本課程的教學(xué)內(nèi)容介紹與要求3.本課程的能力培養(yǎng)及教學(xué)要求4.本課程的考核要求1.熟悉本課程的地位與前后課程的銜接關(guān)系2.了解本課程所涉及的網(wǎng)頁(yè)設(shè)計(jì)技能教學(xué)任務(wù)能描述本課程在課程體系中的地位及作用重點(diǎn)難點(diǎn)重點(diǎn)：1.熟悉簡(jiǎn)介本課程的教學(xué)內(nèi)容難點(diǎn)：1.本課程的性質(zhì)、目的、任務(wù)2.本課程的能力培養(yǎng)要求作業(yè)或考核能概述本課程的課程要求及教學(xué)內(nèi)容參考資料網(wǎng)頁(yè)設(shè)計(jì)[M].電子工業(yè)出版社,2010《CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用》，電子工業(yè)出版社，2011注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）1、了解課程主要內(nèi)容、考核方法2、熟悉網(wǎng)站開發(fā)步驟講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）說課瀏覽經(jīng)典網(wǎng)頁(yè)演示啟發(fā)提問討論個(gè)別回答5分鐘操練(掌握初步或基本能力)1、Dreamweaver開發(fā)平臺(tái)，2、指導(dǎo)學(xué)生配置熟悉平臺(tái)環(huán)境3、創(chuàng)建網(wǎng)頁(yè)并瀏覽教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對(duì)基本能力的體會(huì)）通過案例點(diǎn)評(píng)、小組討論及教材理論知識(shí)的講解，使學(xué)生了解站點(diǎn)創(chuàng)建、網(wǎng)頁(yè)設(shè)計(jì)的含義、特點(diǎn)、依據(jù)、內(nèi)容教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識(shí)和能力）第一個(gè)網(wǎng)頁(yè)的創(chuàng)建和瀏覽步驟講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組內(nèi)自評(píng)選出一個(gè)全班展示，組間互評(píng)，認(rèn)識(shí)了解Dreamweaver開發(fā)平臺(tái)，簡(jiǎn)單網(wǎng)頁(yè)并瀏覽。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)現(xiàn)的能力目標(biāo)和知識(shí)目標(biāo)，重點(diǎn)是站點(diǎn)的創(chuàng)建教師講授聽講5分鐘作業(yè)根據(jù)教學(xué)內(nèi)容制定預(yù)習(xí)計(jì)劃后記學(xué)生能大致了解本門課程的目的、性質(zhì)及任務(wù)，以及教學(xué)內(nèi)容，能明確課程考核方式

教學(xué)內(nèi)容一、概述（一）課程性質(zhì)（課程性質(zhì)和價(jià)值）本課程是高職計(jì)算機(jī)軟件技術(shù)專業(yè)的一門主干專業(yè)課程。通過本課程的學(xué)習(xí)，要求學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的基本概念，學(xué)會(huì)使用常用的網(wǎng)頁(yè)設(shè)計(jì)工具和常用腳本語(yǔ)言，能夠設(shè)計(jì)制作常見的靜態(tài)和動(dòng)態(tài)網(wǎng)頁(yè)，具備網(wǎng)站的建立和維護(hù)能力。同時(shí)通過本課程的學(xué)習(xí)，培養(yǎng)學(xué)生的綜合職業(yè)能力、創(chuàng)新精神和良好的職業(yè)道德。（二）課程基本理念本課程的設(shè)計(jì)“以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目課程為主體”，教學(xué)時(shí)各模塊既有獨(dú)立性，又有關(guān)聯(lián)性。獨(dú)立性是指各模塊設(shè)計(jì)案例、組織教學(xué)、突出重點(diǎn)時(shí)應(yīng)該相互獨(dú)立，學(xué)生應(yīng)該一個(gè)模塊一個(gè)模塊地掌握其知識(shí)點(diǎn)；關(guān)聯(lián)性是指各模塊間存在相互關(guān)系，在重難點(diǎn)設(shè)計(jì)上應(yīng)該加以配合，如HTML語(yǔ)言模塊著重基本代碼的熟記和編寫，對(duì)于較難編寫代碼的“框架”、“層”、“數(shù)據(jù)鏈接”等內(nèi)容則放到DreamWeaver的使用模塊中重點(diǎn)介紹?！禜TML網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》課程與計(jì)算機(jī)基礎(chǔ)、Flash動(dòng)畫、PhotoShop圖像處理、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、數(shù)據(jù)庫(kù)等課程互相聯(lián)系、互相補(bǔ)充。本課程作為軟件技術(shù)專業(yè)的一門主干專業(yè)課程，此時(shí)學(xué)生已經(jīng)具備一定的計(jì)算機(jī)基礎(chǔ)知識(shí)和動(dòng)手能力，能較快地掌握網(wǎng)頁(yè)設(shè)計(jì)的各種知識(shí)，并運(yùn)用所學(xué)知識(shí)做出具有特色的網(wǎng)站，使學(xué)生能夠得到全面的培養(yǎng)，成為社會(huì)所需專用人才。（三）課程框架結(jié)構(gòu)、學(xué)分和學(xué)時(shí)分配、對(duì)學(xué)生選課的建議本課程的設(shè)計(jì)“以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目課程為主體”，打破了傳統(tǒng)的學(xué)科體系的模式，將網(wǎng)頁(yè)設(shè)計(jì)職業(yè)崗位能力中用到的知識(shí)如：網(wǎng)頁(yè)基礎(chǔ)知識(shí)、DreamWeaver的使用、HTML語(yǔ)言、JavaScript腳本語(yǔ)言、Flash、Fireworks進(jìn)行整合并模塊化。教學(xué)時(shí)各模塊既有獨(dú)立性，又有關(guān)聯(lián)性。獨(dú)立性是指各模塊設(shè)計(jì)案例、組織教學(xué)、突出重點(diǎn)時(shí)應(yīng)該相互獨(dú)立，學(xué)生應(yīng)該一個(gè)模塊一個(gè)模塊地掌握其知識(shí)點(diǎn)；關(guān)聯(lián)性是指各模塊間存在相互補(bǔ)充關(guān)系，按理論實(shí)踐一體化要求設(shè)計(jì)，強(qiáng)調(diào)動(dòng)手做，強(qiáng)調(diào)解決問題。它體現(xiàn)了職業(yè)教育“以就業(yè)為導(dǎo)向，以能力為本位”的職業(yè)教育理念。課程框架結(jié)構(gòu)、學(xué)分和學(xué)時(shí)分配、對(duì)學(xué)生選課的建議二、課程目標(biāo)總目標(biāo)：使學(xué)生掌握常用的網(wǎng)頁(yè)設(shè)計(jì)工具，熟練運(yùn)用多種網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，具備Web網(wǎng)頁(yè)設(shè)計(jì)、制作及站點(diǎn)管理的基本知識(shí)和基本技能，學(xué)生能夠獨(dú)立制作中小型的網(wǎng)站。（一）教學(xué)目標(biāo)：1.了解WWW、HTTP、HTML、CSS的定義、概念和作用；2.理解服務(wù)器、客戶端、瀏覽器的概念和作用；3.理解HTML語(yǔ)言中的各種文本格式、字符格式、段落設(shè)置、列表、標(biāo)記的作用；4.熟練操作DreamWeaver；5.理解CSS樣式表的作用和意義；6.深入理解HTML語(yǔ)言的各種功能和應(yīng)用；7.深入理解表格、框架、表單的作用；8.深入理解層的作用；（二）技能教學(xué)目標(biāo)：1.會(huì)使用Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)工具制作網(wǎng)頁(yè)；2.理解HTML語(yǔ)言中的標(biāo)記設(shè)置顏色、文本格式和列表；3.熟練掌握顏色值的配置和背景圖案的設(shè)置方法，熟練掌握字符、鏈接顏色的設(shè)置方法；4.熟練掌握網(wǎng)頁(yè)設(shè)計(jì)中字符格式的設(shè)置方法，段落分段與換行的方法；5.掌握HTML的語(yǔ)法結(jié)構(gòu)，掌握HTML語(yǔ)言中標(biāo)記的使用方法；6.掌握在網(wǎng)頁(yè)中添加CSS的方法。掌握三種添加樣式信息的方法，會(huì)使用CSS設(shè)置網(wǎng)頁(yè)格式和列表的格式；7.掌握在網(wǎng)頁(yè)中嵌入圖像的方法，掌握與嵌入圖像相關(guān)標(biāo)記的用法；8.掌握與圖像布局和位置相關(guān)的標(biāo)記的概念和用法；9.熟練掌握使用絕對(duì)和相對(duì)URL，創(chuàng)建超鏈接、圖像鏈接；學(xué)會(huì)圖像映射的建立方法；10.熟練掌握表格的使用方法，會(huì)用表格布局并設(shè)計(jì)網(wǎng)頁(yè)；11.掌握框架制作網(wǎng)頁(yè)的方法，會(huì)使用框架設(shè)計(jì)網(wǎng)頁(yè)；12.掌握制作表單的方法，會(huì)利用表單建立交互式頁(yè)面；（三）素質(zhì)教學(xué)目標(biāo)：1.具有勤奮學(xué)習(xí)的態(tài)度，嚴(yán)謹(jǐn)求實(shí)、創(chuàng)新的工作作風(fēng)；2.具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)；3.具有高度責(zé)任心和良好的團(tuán)隊(duì)合作精神；4.具有一定的科學(xué)思維方式和判斷分析問題的能力；5.具有較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)。三、實(shí)施建議（一）教學(xué)建議：從《HTML網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》的實(shí)際問題出發(fā)，精心準(zhǔn)備各種典型案例，構(gòu)建課程的宏觀教學(xué)設(shè)計(jì)。例如，公司網(wǎng)站、網(wǎng)上鮮花直銷、個(gè)人網(wǎng)站精選、書籍專賣等。以若干個(gè)案例為載體，形成循序漸進(jìn)、種類多樣的項(xiàng)目群，構(gòu)建完整的教學(xué)設(shè)計(jì)布局。1、教學(xué)采用“四階段教學(xué)法”，將“教、學(xué)、練、做”融為一體。教學(xué)體現(xiàn)“教師為主導(dǎo)，學(xué)生為主體，訓(xùn)練為主線”的原則，課堂上可以采用“四階段教學(xué)法”：

第1個(gè)階段，案例引入，提出問題。通過案例演示，提出問題，給出知識(shí)點(diǎn)，講解案例應(yīng)用背景，給學(xué)生一個(gè)切入點(diǎn)，建立感性認(rèn)識(shí)。目的是激發(fā)學(xué)生的學(xué)習(xí)興趣、讓學(xué)生感到學(xué)有所用，從而明確本次課的教學(xué)目標(biāo)。

第2個(gè)階段，學(xué)生自主學(xué)習(xí)，嘗試解決問題。充分利用我校以及互聯(lián)網(wǎng)網(wǎng)絡(luò)教學(xué)資源，引導(dǎo)學(xué)生自主學(xué)習(xí)，找到解決問題的方法和操作技能，培養(yǎng)學(xué)生的自主學(xué)習(xí)意識(shí)和學(xué)習(xí)方法。學(xué)生在學(xué)習(xí)和嘗試解決問題過程中，發(fā)現(xiàn)問題，提出問題，在問題的引導(dǎo)下學(xué)習(xí)相關(guān)的知識(shí)和操作技能。

第3個(gè)階段，歸納總結(jié)，引申提高。在每次課結(jié)束前，引導(dǎo)學(xué)生進(jìn)行歸納總結(jié)。對(duì)本次課的實(shí)際意義、重點(diǎn)、難點(diǎn)、容易出錯(cuò)處等及時(shí)進(jìn)行總結(jié)。并針對(duì)案例的不足之處，進(jìn)行引申和提高。注意在這個(gè)階段，強(qiáng)調(diào)的是“引導(dǎo)”學(xué)生，而不是老師講解。

第4個(gè)階段，舉一反三、學(xué)以致用。案例源于生活，最終要應(yīng)用于生活。為了使學(xué)生能學(xué)以致用、舉一反三、觸類旁通，每次教學(xué)結(jié)束時(shí)及時(shí)布置相關(guān)的課后練習(xí)，使學(xué)生在課后進(jìn)一步復(fù)習(xí)鞏固，并且將課后作業(yè)納入形成性考核的內(nèi)容之一。同時(shí)給出下一次課的學(xué)習(xí)內(nèi)容，提示學(xué)生預(yù)習(xí)。2、充分利用現(xiàn)代化教學(xué)手段，提高教學(xué)效果教學(xué)中采用電子演示文稿、大屏幕多媒體聯(lián)機(jī)演示、網(wǎng)絡(luò)教學(xué)等各種先進(jìn)的教學(xué)手段，使課堂教學(xué)生動(dòng)活潑、引人入勝，提高了教學(xué)效果，同時(shí)提高了教學(xué)效率。包括：

（1）利用多媒體教學(xué)系統(tǒng)廣播教學(xué)。把學(xué)生的共同問題（需要提示的重點(diǎn)）通過“廣播教學(xué)”，邊講邊演示，使學(xué)生即時(shí)看到操作效果。

（2）利用網(wǎng)絡(luò)將課堂教學(xué)延伸到課外，學(xué)生根據(jù)需要通過網(wǎng)絡(luò)學(xué)習(xí)有關(guān)的內(nèi)容。教師的課件和教學(xué)用資料都已都上傳到教學(xué)資源下載中心，方便學(xué)生課外學(xué)習(xí)和復(fù)習(xí)。（二）評(píng)價(jià)建議：對(duì)學(xué)生學(xué)業(yè)評(píng)價(jià)提出建議，體現(xiàn)評(píng)價(jià)的發(fā)展功能。1．突出過程評(píng)價(jià)，以職業(yè)崗位工作過程為考評(píng)基礎(chǔ)，以全學(xué)期的教學(xué)情境進(jìn)度為考核時(shí)間線，以一個(gè)完整的網(wǎng)站頁(yè)面設(shè)計(jì)制作項(xiàng)目的驅(qū)動(dòng)，在每個(gè)教學(xué)情境完成教學(xué)之后，要求學(xué)生運(yùn)用該教學(xué)情境所學(xué)技能設(shè)計(jì)制作項(xiàng)目中的相關(guān)進(jìn)度作業(yè)（作品），并對(duì)其作業(yè)（作品）進(jìn)行考核。從而形成階段性過程考核成績(jī)，該成績(jī)作為總評(píng)成績(jī)的重要組成部份（占60％）。2．強(qiáng)調(diào)目標(biāo)評(píng)價(jià)和理論與實(shí)踐一體化評(píng)價(jià)，注重引導(dǎo)學(xué)生進(jìn)行學(xué)習(xí)方式的改變。3．強(qiáng)調(diào)課程結(jié)束后的綜合評(píng)價(jià)，結(jié)合全教學(xué)過程的過程考核項(xiàng)目，對(duì)學(xué)生的最終過程考核作品，從策劃能力、美工設(shè)計(jì)能力、制作技術(shù)應(yīng)用能力三個(gè)方面進(jìn)行綜合評(píng)價(jià)。從而充分發(fā)揮學(xué)生主動(dòng)性和創(chuàng)造力，還要注重考核學(xué)生動(dòng)手能力和在實(shí)踐中分析問題、解決問題的能力。4．建議在教學(xué)中注重團(tuán)隊(duì)協(xié)作能力的評(píng)分，課程結(jié)束時(shí)進(jìn)行綜合模塊考核。建議以學(xué)生自己制作的網(wǎng)站的實(shí)際水平作為學(xué)生的學(xué)習(xí)本課程的成績(jī)。教案首頁(yè)本次課標(biāo)題：情境一WWW技術(shù)基礎(chǔ)授課日期第6周周1授課班級(jí)課時(shí)1上課地點(diǎn)1JD308教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)初步認(rèn)知靜態(tài)網(wǎng)頁(yè)熟悉開發(fā)工具的使用了解網(wǎng)站開發(fā)的前沿技術(shù)靜態(tài)頁(yè)面的主要組成部分開發(fā)工具的使用教學(xué)任務(wù)開發(fā)工具的使用案例：電子銀行靜態(tài)頁(yè)面的登陸與注冊(cè)。重點(diǎn)難點(diǎn)重點(diǎn)：開發(fā)工具的使用難點(diǎn)：站點(diǎn)的建立作業(yè)或考核站點(diǎn)的建立參考資料網(wǎng)頁(yè)設(shè)計(jì)[M].電子工業(yè)出版社,2010《CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用》，電子工業(yè)出版社，2011注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）要達(dá)到的目的：1、了解網(wǎng)站和網(wǎng)頁(yè)的基本概念；2、掌握網(wǎng)頁(yè)的版面設(shè)計(jì)；3、掌握網(wǎng)站的策劃與網(wǎng)站原則；4、了解網(wǎng)站的開發(fā)過程。講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）實(shí)例1：

瀏覽優(yōu)秀的網(wǎng)站，對(duì)這些網(wǎng)站的主頁(yè)進(jìn)行分析，了解優(yōu)秀網(wǎng)頁(yè)的布局結(jié)構(gòu)、色彩搭配、導(dǎo)航欄的設(shè)計(jì)、動(dòng)畫效果等。演示啟發(fā)提問討論個(gè)別回答5分鐘操練(掌握初步或基本能力)對(duì)各個(gè)網(wǎng)站的信息內(nèi)容、網(wǎng)頁(yè)布局結(jié)構(gòu)、色彩搭配進(jìn)行分析、說明教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對(duì)基本能力的體會(huì)）網(wǎng)頁(yè)布局色彩搭配原則教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識(shí)和能力）提示和技巧講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組織學(xué)生討論，對(duì)所展示的網(wǎng)站發(fā)表自己見解啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)問題1：如何上網(wǎng)瀏覽網(wǎng)站？問題2：如果不知道某個(gè)網(wǎng)站的網(wǎng)址，怎樣獲得該網(wǎng)站的網(wǎng)址或?yàn)g覽該網(wǎng)站？教師講授聽講5分鐘作業(yè)根據(jù)教學(xué)內(nèi)容制定預(yù)習(xí)計(jì)劃后記學(xué)生能大致了解本門課程的目的、性質(zhì)及任務(wù)，以及教學(xué)內(nèi)容，能明確課程考核方式教學(xué)內(nèi)容一、網(wǎng)頁(yè)與網(wǎng)站的概念網(wǎng)頁(yè)：我們?cè)跒g覽器中看到的頁(yè)面，它是一個(gè)單個(gè)的文件。網(wǎng)頁(yè)里可以有文字、表格、圖像、聲音、視頻等等。網(wǎng)站中的第一個(gè)頁(yè)面成為首頁(yè)或主頁(yè)。網(wǎng)站：存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個(gè)或多個(gè)網(wǎng)頁(yè)。這些網(wǎng)頁(yè)按照一定的組織結(jié)構(gòu)，以鏈接等方式連接在一起，形成一個(gè)整體，描述一組完整的信息。二、網(wǎng)頁(yè)的設(shè)計(jì)1、網(wǎng)頁(yè)主題網(wǎng)頁(yè)的主題指網(wǎng)頁(yè)所要表現(xiàn)的最主要的思想內(nèi)涵，可以說師網(wǎng)頁(yè)的靈魂。主題的概念是很模糊的，它是一種約束，是同一站點(diǎn)中各個(gè)頁(yè)面于五彩擯紛中體現(xiàn)出統(tǒng)一風(fēng)格的約束；它也是一種力量，是將各個(gè)設(shè)計(jì)者的作品有機(jī)結(jié)合起來的力量。主題必須與Web頁(yè)面主要推銷或展示的產(chǎn)品或服務(wù)緊密相關(guān)，同時(shí)它又必須有相當(dāng)?shù)奈?。這方面如果處理不好，就會(huì)使站點(diǎn)來訪問者在其中的各頁(yè)面間移動(dòng)時(shí)，可能會(huì)懷疑是否還在同'站點(diǎn)，因?yàn)槟切╉?yè)面看起來并不像屬于同一站點(diǎn)。頁(yè)面主題可以幫助設(shè)計(jì)者解決這一難題。統(tǒng)一的主題可以輕易地將不同設(shè)計(jì)者的不同風(fēng)格統(tǒng)一起來，而又不會(huì)妨礙他們的設(shè)計(jì)思路和靈感。確定主題時(shí)應(yīng)遵循的原則2、網(wǎng)頁(yè)的文字文字是網(wǎng)頁(yè)最主要的表達(dá)形式，盡管圖形和解構(gòu)的表格五彩擯紛，但大多數(shù)瀏覽者大部分時(shí)間仍將注意力集中在頁(yè)面中的文字上面，他們總是首先瀏覽文字內(nèi)容，而甚少關(guān)心其他頁(yè)面元素，甚至對(duì)導(dǎo)航系統(tǒng)也是如此：所以，給瀏覽考一個(gè)親和的文字界面是必要的。3、網(wǎng)頁(yè)的色彩在制作網(wǎng)站的時(shí)候，色彩的選擇和搭配十分重要，因?yàn)橐粋€(gè)網(wǎng)站格調(diào)的確定，往往取決于色彩的選擇與搭配是否適當(dāng)，一般的情況下，從以下幾個(gè)方面來考慮色彩的選擇：1．色彩助鮮明性網(wǎng)站色彩的選擇與搭配要鮮艷，這樣比較容易吸引訪問者的注意，而且在訪問者的記憶中駐留的時(shí)間也比較長(zhǎng)。2．色彩的獨(dú)特性網(wǎng)站色彩的選擇與搭配要與眾不同，這樣就可以使得訪問者留下深刻的印象。3．色彩的合適性網(wǎng)站色彩的選擇與搭配要與網(wǎng)站的內(nèi)容氣氛相適合。4．色彩的聯(lián)想性不向的色彩會(huì)產(chǎn)生不同的聯(lián)想，在網(wǎng)站的設(shè)計(jì)中多運(yùn)用具有美好聯(lián)想的色彩，可以使你的網(wǎng)站流露出另外一種氣息。5．頁(yè)面中各處用色的選擇首先確定主色。主色是指頁(yè)面中相對(duì)來說較大面積使用的色彩。主色可以反映出整個(gè)網(wǎng)頁(yè)的風(fēng)格，亦可使頁(yè)面內(nèi)容以色彩語(yǔ)言表達(dá)出來。接下來是確定輔色。輔色可以有多種，其應(yīng)用范圍包括輸入框的顏色，表格邊框顏色、表格的底色、小圖標(biāo)用色、文字顏色以及鏈接色等等。4、網(wǎng)頁(yè)版式和布局1．版面設(shè)計(jì)的步驟（1）畫出頁(yè)面的結(jié)構(gòu)草圖：只需畫出頁(yè)面的大體結(jié)構(gòu)。注：分辨率為640*480時(shí)，頁(yè)面顯示尺寸為620*311；分辨率為800*600時(shí)，頁(yè)面顯示尺寸為780*428；分辨率為1024*768時(shí)，頁(yè)面顯示尺寸為1007*600；（2）布局細(xì)化和調(diào)整：將需要放置的功能模塊安排在頁(yè)面上，注意突出重點(diǎn)和平衡協(xié)調(diào)（3）定格：確定出完美的布局方案，定格為最后的版式2．常見網(wǎng)頁(yè)布局（1）T型結(jié)構(gòu)（2）同字結(jié)構(gòu)（3）川字結(jié)構(gòu)（4）三字結(jié)構(gòu)（5）單一結(jié)構(gòu)三、網(wǎng)站的策劃與創(chuàng)建原則1、定位網(wǎng)站主題和名稱設(shè)計(jì)一個(gè)站點(diǎn)，首先遇到的問題就是定位網(wǎng)站主題。所謂主題也就是你的網(wǎng)站的題材。對(duì)于題材的選擇，應(yīng)注意：（1）主題要小而精。定位要小，內(nèi)容要精。調(diào)查結(jié)果也顯示，網(wǎng)絡(luò)上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會(huì)選擇專賣店。（2）題材最好是你自己擅長(zhǎng)或者喜愛的內(nèi)容。這樣在制作時(shí)，才不會(huì)覺得無聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力，沒有熱情，很難設(shè)計(jì)制作出杰出的作品。（3）題材不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見，人人都有的題材；“目標(biāo)太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點(diǎn)，你要超過它是很困難的。網(wǎng)站名稱及域名的選擇也是非常重要的。和現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對(duì)網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：（1）名稱要正。也就是要合法，和理，和情。不能用反動(dòng)的，色情的，迷信的，危害社會(huì)安全的名詞語(yǔ)句。（2）名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字（最好四個(gè)字）以內(nèi)，比如“XX閣”“XX設(shè)計(jì)室”，四個(gè)字的可以用成語(yǔ)，如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個(gè)好處，一般友情鏈接的小logo尺寸是88X31，而六個(gè)字的寬度是78左右，適合于其他站點(diǎn)的鏈接排版。（3）名稱要有特色。名稱平實(shí)就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。這里舉幾個(gè)例子：音樂前衛(wèi)，網(wǎng)頁(yè)陶吧，天籟絕音。在體現(xiàn)出網(wǎng)站主題的同時(shí)，能點(diǎn)出特色之處。域名的選擇也是如此，選一個(gè)簡(jiǎn)單易記，比如可以模仿知名網(wǎng)站擴(kuò)大自己的影響，有一定含義的域名也是網(wǎng)站成功的一部分。2、網(wǎng)站的風(fēng)格網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒有一個(gè)固定的程式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI（標(biāo)志，色彩，字體，標(biāo)語(yǔ)），版面布局，瀏覽方式，交互性，文字，語(yǔ)氣，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。風(fēng)格是獨(dú)特的，是站點(diǎn)不同與其他網(wǎng)站的地方?；蛘呱?，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨(dú)有的。例如新世紀(jì)網(wǎng)絡(luò)()的黑白色,網(wǎng)易壁紙站的特有框架,即使你只看到其中一頁(yè)，也可以分辨出是哪個(gè)網(wǎng)站的。風(fēng)格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個(gè)站點(diǎn)的個(gè)性，情緒。是溫文儒雅，是執(zhí)著熱情，是活潑易變,是放任不羈。象詩(shī)詞中的“豪放派”和“婉約派”，你可以用人的性格來比喻站點(diǎn)。有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認(rèn)識(shí)，比如站點(diǎn)有品位，和藹可親，是老師，是朋友。教案首頁(yè)本次課標(biāo)題：情境二html制作網(wǎng)頁(yè)（1）授課日期第7周周1授課班級(jí)課時(shí)2上課地點(diǎn)1JD308教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)能夠利用HTML標(biāo)簽設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)的能力HTML代碼調(diào)試能力靜態(tài)頁(yè)面的主要組成部分2、HTML標(biāo)簽的使用教學(xué)任務(wù)HTML標(biāo)簽的使用案例：電子銀行靜態(tài)頁(yè)面的登陸與注冊(cè)。重點(diǎn)難點(diǎn)重點(diǎn)：HTML標(biāo)簽的使用難點(diǎn)：1、認(rèn)識(shí)DreamweaverMX2004。2、新增功能。3、DreamweaverMX2004主窗口。4、自定義工作環(huán)境。作業(yè)或考核課后題參考資料網(wǎng)頁(yè)設(shè)計(jì)[M].電子工業(yè)出版社,2010《CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用》，電子工業(yè)出版社，2011注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）本次課主內(nèi)容：簡(jiǎn)單網(wǎng)頁(yè)的制作過程要達(dá)到的目的：學(xué)會(huì)簡(jiǎn)單html網(wǎng)頁(yè)文本元素編輯等講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）實(shí)例1：

瀏覽優(yōu)秀的網(wǎng)站的網(wǎng)頁(yè)，完成簡(jiǎn)單html網(wǎng)頁(yè)文本元素編輯等。演示啟發(fā)提問討論個(gè)別回答5分鐘操練(掌握初步或基本能力)對(duì)網(wǎng)頁(yè)的信息內(nèi)容進(jìn)行分析、說明。教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對(duì)基本能力的體會(huì)）Html文本元素制作教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識(shí)和能力）提示和技巧講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組織學(xué)生討論，對(duì)所展示的網(wǎng)頁(yè)發(fā)表自己見解啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)教師講授聽講5分鐘作業(yè)根據(jù)教學(xué)內(nèi)容制定預(yù)習(xí)計(jì)劃后記學(xué)生能大致了解本門課程的目的、性質(zhì)及任務(wù)，以及教學(xué)內(nèi)容，能明確課程考核方式教學(xué)內(nèi)容在目前市面上眾多的網(wǎng)頁(yè)編輯軟件中，有的重視效率，有的強(qiáng)調(diào)版面設(shè)計(jì)，而DreamweaverMX2004可以很方便地實(shí)現(xiàn)這兩方面的完美結(jié)合。另外，DreamweaverMX2004的網(wǎng)頁(yè)動(dòng)態(tài)效果與網(wǎng)頁(yè)排版功能都優(yōu)于一般同類軟件，即使是初學(xué)者也能制作出相當(dāng)水準(zhǔn)的網(wǎng)頁(yè)，所以DreamweaverMX2004是網(wǎng)頁(yè)設(shè)計(jì)者的最佳選擇。新課內(nèi)容：一、DreamweaverMX2004簡(jiǎn)述當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)軟件可以說是層出不窮，Macromedia推出的Dreamweaver就是一個(gè)廣泛受到好評(píng)的網(wǎng)頁(yè)設(shè)計(jì)軟件。它是一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別設(shè)計(jì)的可視化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)和跨越瀏覽器的充滿動(dòng)感的網(wǎng)頁(yè)。DreamweaverMX2004擁有出色的軟件界面，其特別的控制面板使設(shè)計(jì)者們用起來得心應(yīng)手。DreamweaerMX還能與Macromedia公司的其他軟件進(jìn)行完美的合作。DreamweaverMX2004最精彩之處便是其強(qiáng)大的多媒體處理功能，在設(shè)計(jì)DHTML(DynamicHTML)和CSS(CascadingStyleSheets)方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語(yǔ)言代碼輕松地實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)作和交互性操作。在這方面它超過了FrontPage2002Hotdog和HomeSite等著名網(wǎng)頁(yè)設(shè)計(jì)軟件，成為目前最為流行的網(wǎng)頁(yè)設(shè)計(jì)工具。二、新增功能隨著軟件版本的不斷提高，Dreamweaver的功能也在不斷增加和完善。Dreamweaver目前已經(jīng)升級(jí)到MX2004版，在功能方面也增強(qiáng)了許多，下面介紹一下其新增功能。1、設(shè)計(jì)方面的新增功能（1）改善工作界面DreamweaverMX2004提供了更規(guī)范化的工作界面及更好的面板管理：DreamweaverMX2004將多個(gè)面板組成組，隨時(shí)可以展開或集合，然后進(jìn)一步把多個(gè)面板組放在一起，DreamweaverMX2004在此基礎(chǔ)上將所有Dreamweaver關(guān)聯(lián)窗口全部置入主窗口中（僅限Windows操作系統(tǒng)），該界面被稱為MDI（MultipleDocumentInterface,多文檔界面）。（2）新增文檔樣式在新建文檔時(shí)，DreamweaverMX2004提供多種文檔樣式供用戶選擇，這些文檔樣式主要有BasicPage（基本樣頁(yè)）、DynamicPage(動(dòng)態(tài)樣頁(yè)）、TemplatePage（模板樣頁(yè)）、Other（其他）、CSSStyleSheets（層疊樣式表）、Framesets（框架）、PageDesigns（頁(yè)面設(shè)計(jì)）和PageDesignw（Accessible）等8個(gè)基本樣式類型，使用這些樣式可以使用戶的網(wǎng)頁(yè)設(shè)計(jì)擁有專業(yè)品質(zhì)的界面和腳本。（3）更好地支持CSSDreameaverMX進(jìn)一步加強(qiáng)了對(duì)CSS（層疊樣式表）的支持，提供了一個(gè)改進(jìn)的CSS樣式面板。通過該面板用戶可以使用設(shè)計(jì)時(shí)間樣式片段（design-timestylesheets）減少頁(yè)面編輯。改進(jìn)后的CSS樣式面板可以使用戶很容易區(qū)分本地定義樣式和那些在外部樣式表中定義的樣式，同時(shí)還提供了許多新的CSS2結(jié)構(gòu)。（4）增強(qiáng)了Dreamweaver的模板功能DreamweaverMX2004增強(qiáng)了其模板功能，可以使用戶很容易達(dá)到以下目的：所有的區(qū)域可隨意選擇，通過使用重復(fù)區(qū)域在同一個(gè)界面中顯示多個(gè)項(xiàng)目；可以實(shí)現(xiàn)多個(gè)模板嵌套；使修改單個(gè)標(biāo)識(shí)符的屬性變得可行。2、代碼方面新增功能（1）新增向?qū)酱a工作界面新增的向?qū)酱a工作界面可以使用戶在使用HomeSite（最好的HTML編輯器之一）或Macromedia的ColdFusionStudio時(shí)，使用相似的工作蚧面（僅三、DreamweaverMX2004界面簡(jiǎn)介1.選擇DreamweverMX工作界面在第一次啟動(dòng)DreamweaverMX2004時(shí)，系統(tǒng)會(huì)打開WorkspaceSetup對(duì)話框讓用戶選擇工作界面，如下圖所示。在該對(duì)話框中可以選擇DreamweaverMX2004的工作界面，用戶可以選擇DreamweaverMX2004Workspace(DreamweaverMX2004工作界面）、DreamweaverMX2004WorkspaceHomeSite/Coder-Style和Dreamweaver4Workspace等3種工作界面中的一種。（1）DreamweaverMX2004WorkspaceDreamweaverMX2004Workspace是使用MDI（多文檔界面）一個(gè)整合型工作界面，其將所有的文檔窗口和面板整合到主窗口中，并將面板組放在窗口的右邊部分，如下圖所示，推薦使用該工作界面。（2）DreamweaverMX2004WorkspaceHomeSite/Coder-Style界面在WorkspaceSetup對(duì)話框中選擇DreamweaverMX2004Workspace按鈕后，再啟用下邊的HomeSite/Coder-style單選按鈕，可以使用DreamweaverMX2004WorkspaceHomeSite/Coder-Style工作界面。該工作界面也是一個(gè)同DreamweaverMX2004相同的整合型的工作界面，不過其面板組放在主窗口的左邊，如下圖所示。該工作界面主要是為喜歡手寫代碼的用戶設(shè)計(jì)的，在該工作界面中使用HomeSite或Macrwmedia自己的ColdFusionStudio等網(wǎng)頁(yè)編輯器使用類似的界面，打開該工作界面時(shí)默認(rèn)的顯示模式為顯示代碼模式。2.主窗口DreamweaverMX2004的整個(gè)工作界面為一個(gè)多文檔型的窗口，該主窗口主要包括以下內(nèi)容。（1）菜單欄使用菜單欄基本上能夠?qū)崿F(xiàn)DreavweaverMX的所有功能。其功能包含在10個(gè)菜單中：File(文件)菜單用來管理文件，Edit(編輯)菜單用來編輯文本，View(查看)菜單用來查看物件，Insert(插入)菜單用來插入元素，Modify(修改)菜單實(shí)現(xiàn)對(duì)頁(yè)面元素修改的功能，Text(文本)菜單用來對(duì)文本進(jìn)行操作，Commands(命令)菜單收集了所有的附加命令項(xiàng)，site(站點(diǎn))菜單用來管理站點(diǎn)，Window(窗口)菜單用來切換所有的控制面板和窗口，Help(幫助)菜單可實(shí)現(xiàn)聯(lián)機(jī)幫助功能。在后面的講述中，將涉及到每個(gè)菜單中的命令。（2）插入欄插入欄是MX版本中新添加的部件，其實(shí)質(zhì)就是Dreamweaver4中的對(duì)象面板組，在其中包含一些用于創(chuàng)建不同類型對(duì)象(如圖像、表格、層、媒體、腳本和應(yīng)用程序等)的按鈕。用戶可以單擊Insert按鈕隱藏/顯示整個(gè)插入欄，通過單擊相應(yīng)的標(biāo)識(shí)符名切換顯示不同的按鈕。教案首頁(yè)本次課標(biāo)題：情境二html制作網(wǎng)頁(yè)（1）授課日期第8周周1授課班級(jí)課時(shí)2上課地點(diǎn)1JD308教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)1能夠利用HTML標(biāo)簽設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)的能力2HTML代碼調(diào)試能力1靜態(tài)頁(yè)面的主要組成部分2、HTML標(biāo)簽的使用教學(xué)任務(wù)HTML標(biāo)簽的使用案例：電子銀行靜態(tài)頁(yè)面的登陸與注冊(cè)。重點(diǎn)難點(diǎn)重點(diǎn)：HTML標(biāo)簽的使用難點(diǎn)：1、認(rèn)識(shí)DreamweaverMX2004。2、新增功能。3、DreamweaverMX2004主窗口。4、自定義工作環(huán)境。作業(yè)或考核課后題參考資料網(wǎng)頁(yè)設(shè)計(jì)[M].電子工業(yè)出版社,2010《CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用》，電子工業(yè)出版社，2011注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）本次課主內(nèi)容：簡(jiǎn)單網(wǎng)頁(yè)的制作過程要達(dá)到的目的：1、認(rèn)識(shí)DreamweaverMX2004。2、新增功能。3、DreamweaverMX2004主窗口。4、自定義工作環(huán)境。講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）實(shí)例1：

瀏覽優(yōu)秀的網(wǎng)站的網(wǎng)頁(yè)，完成簡(jiǎn)單html網(wǎng)頁(yè)等。演示啟發(fā)提問討論個(gè)別回答5分鐘操練(掌握初步或基本能力)對(duì)網(wǎng)頁(yè)的信息內(nèi)容、網(wǎng)頁(yè)布局結(jié)構(gòu)、色彩搭配進(jìn)行分析、說明。教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對(duì)基本能力的體會(huì)）Html元素制作教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識(shí)和能力）提示和技巧講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組織學(xué)生討論，對(duì)所展示的網(wǎng)頁(yè)發(fā)表自己見解啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)需要掌握DreamweaverMX2004在設(shè)計(jì)、代碼和擴(kuò)展方面的功能教師講授聽講5分鐘作業(yè)根據(jù)教學(xué)內(nèi)容制定預(yù)習(xí)計(jì)劃后記學(xué)生能大致了解本門課程的目的、性質(zhì)及任務(wù)，以及教學(xué)內(nèi)容，能明確課程考核方式教學(xué)過程簡(jiǎn)單個(gè)人網(wǎng)頁(yè)分析

問題1：在該網(wǎng)頁(yè)中大家看到了什么？不同顏色、不同大小、擺放在不同位置的文字位置不同、大小不同的灰色線條項(xiàng)目列表特殊字符等

問題2：這些元素是如何制作的呢？二、Dreamweaver中簡(jiǎn)單個(gè)人網(wǎng)頁(yè)文本元素的編輯1.在上節(jié)課新建的網(wǎng)頁(yè)的設(shè)計(jì)視圖的工作區(qū)域空白處輸入文字“歡迎光臨我的個(gè)人網(wǎng)頁(yè)”，選中文字，在Dreamweaver下方的屬性面板上設(shè)置其段落屬性為“標(biāo)題1”，對(duì)其方式為“”，修改其顏色為“紅色”，2.光標(biāo)定位在“歡迎光臨我的個(gè)人網(wǎng)頁(yè)”后面，按【Enter】鍵，點(diǎn)擊常用插入欄，選擇HTML選項(xiàng)，單擊其中的“”按鈕，在“歡迎光臨我的個(gè)人網(wǎng)頁(yè)”下面插入一條水平線。3.選中水平線，設(shè)置水平線屬性，“對(duì)其”中包含了左、右、中三中對(duì)其方式。4.在水平線后面按【Enter】鍵，輸入“一、自我介紹”，選中該文本，設(shè)置其屬性如圖2-2-5所示。5.重復(fù)步驟2插入水平線，6.輸入輸入“姓名”、“性別”、“出生年月”2-6、“畢業(yè)院?！?、“所學(xué)專業(yè)”等四行文字，每行的結(jié)尾按【Enter】鍵換行。7.選中這四行文字，切換“常用工具欄”為“文本選項(xiàng)”，點(diǎn)擊其上的“”按鈕。8.重復(fù)步驟4-6，制作聯(lián)系方式部分，。9.選中聯(lián)系方式的四行文字，切換“常用工具欄”為“文本選項(xiàng)”，點(diǎn)擊其上的“”按鈕。10.重復(fù)步驟2插入頁(yè)面底部的水平線并設(shè)置其屬性。11.輸入版權(quán)信息三、簡(jiǎn)單個(gè)人網(wǎng)頁(yè)中常用文本標(biāo)記的應(yīng)用1.把網(wǎng)頁(yè)切換到“混合模式視圖”，分析個(gè)頁(yè)面元素的HTML標(biāo)記,如圖2-2-12所示。選中設(shè)計(jì)視圖中的內(nèi)容，系統(tǒng)將自動(dòng)在代碼視圖模式中顯示相應(yīng)的代碼。教案首頁(yè)本次課標(biāo)題：第2章表格的基礎(chǔ)授課日期第9周周一授課班級(jí)13級(jí)始創(chuàng)班課時(shí)共2小時(shí)上課地點(diǎn)I區(qū)教學(xué)目標(biāo)能力（技能）目標(biāo)知識(shí)目標(biāo)會(huì)使用表格實(shí)現(xiàn)頁(yè)面的布局1.掌握表格的操作。2掌握繪制表格和單元格的使用。教學(xué)任務(wù)及案例精品課程網(wǎng)站中各個(gè)網(wǎng)頁(yè)的鏈接。重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站中表格布局的設(shè)計(jì)技巧。難點(diǎn)：網(wǎng)站的表格布局的使用方法。單元考核規(guī)劃一個(gè)商業(yè)站點(diǎn)各個(gè)網(wǎng)頁(yè)的表格布局。參考資料任務(wù)書、源代碼、網(wǎng)絡(luò)資源，參考書注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）1、了解網(wǎng)站中表格的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽精品課程網(wǎng)的表格的使用演示講解提問聽講、小組討論10分鐘操練(掌握初步或基本能力)1．分組進(jìn)行表格布局優(yōu)缺點(diǎn)的討論。2、完成表格布局。教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對(duì)基本能力的體會(huì)）案例點(diǎn)評(píng)、小組討論；及教材理論知識(shí)的講解；加深網(wǎng)頁(yè)表格的應(yīng)用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識(shí)和能力）網(wǎng)頁(yè)表格布局的使用方法。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對(duì)每一組完成的的內(nèi)容進(jìn)行評(píng)價(jià)，肯定成績(jī)并提出努力方向。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)現(xiàn)的能力目標(biāo)和知識(shí)目標(biāo)。教師講授聽講5分鐘作業(yè)1.如何進(jìn)行表格的制作與設(shè)置？2.表格布局有幾種布局方式，分別用在什么場(chǎng)合？后記教學(xué)內(nèi)容一、本例表格的html語(yǔ)法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁(yè)面中的超級(jí)鏈接語(yǔ)法格式。1.表格的屬性：<TABLEalign=centerborder=0cellPadding=0cellSpacing=0width=778>2.單元格的背景顏色：<TDbgColor=#666666height=25></TD>3.單元格內(nèi)容的對(duì)齊方式<TDalign=middleclass=9fontwidth=249>您的位置：首頁(yè)</TD>二、建立表格的html語(yǔ)法總結(jié)1.建立表格由四對(duì)標(biāo)記組成：<table></table>定義表格元素<tr></tr>定義表格的一行<th></th>定義表格的表頭單元格<td></td>定義表格的單元格表格的基本語(yǔ)法結(jié)構(gòu)：<table><tr><th>第一行第一列單元格內(nèi)容</th><th>第一行第二列單元格內(nèi)容</th>……<th>第一行第N列單元格內(nèi)容</th></tr><tr><td>第二行第一列單元格內(nèi)容</td><td>第二行第二列單元格內(nèi)容</td>……<td>第二行第N列單元格內(nèi)容</td></tr></table>表格如果沒有表頭單元格，此處的<th>可以由<td>代替。2.表格尺寸、背景表格尺寸：<tablewidth=數(shù)值height=數(shù)值>背景顏色：<tablebgcolor=顏色>背景圖片：<tablebackground=URL>3.表格間距表格間距：<tablecellspacing=數(shù)值>4.表格邊距表格邊距：<tablecellpadding=數(shù)值>5.表格標(biāo)題表格標(biāo)題：<captionalign=參數(shù)值valign=參數(shù)值>表格標(biāo)題</caption>6.行高與布局<trheight=數(shù)值>：設(shè)置表格內(nèi)某行的高度<tralign=參數(shù)值>：該行中單元格的水平對(duì)齊方式（left,center,right）<trvalign=數(shù)值>：該行中單元格的垂直對(duì)齊方式(top,middle,bottom)7.行邊框與背景某行內(nèi)邊框的顏色：<trbordercolor=顏色值>某行背景顏色：<trbgcolor=顏色值>8.列寬與布局表格列寬：<tdwidth=數(shù)值>or<thwidth=數(shù)值>水平對(duì)齊：<tdalign=參數(shù)值>or<thalign=參數(shù)值>垂直對(duì)齊:<tdvalign=參數(shù)值>or<thvalign=參數(shù)值>9.單元格邊框與背景單元格邊框顏色:<tdbordercolor=顏色值>or<thbordercolor=顏色值>單元格背景顏色:<thbgcolor=顏色值>or<trbgcolor=顏色值>單元格背景圖片:<thbackground=URL>or<trbackground=URL>10.跨行列屬性單元格跨行：<tdrowspan=數(shù)值>or<throwspan=數(shù)值>單元格跨列：<tdcolspan=數(shù)值>or<thcolspan=數(shù)值>模仿課堂中講解的示例利用表格設(shè)計(jì)一個(gè)班級(jí)學(xué)生信息表，觀察各代碼所表示的意義。要求：（1）表格的標(biāo)題為“××班學(xué)生信息表”；（2）表格的項(xiàng)目有“本人姓名，年齡，性別，家長(zhǎng)姓名，家庭住址，政治面貌，擔(dān)任職務(wù)，特長(zhǎng)愛好，人生格言，聯(lián)系方式……”；（3）表格要求醒目，分類合理清楚。（4）表格可以使用背景圖片或者背景顏色。在使用表格中應(yīng)注意那些問題？

1.整個(gè)表格不要都套在一個(gè)表格里，盡量拆分成多個(gè)表格。

2.表格的嵌套層次盡量要少，最好嵌套表格不超過3層。

3.單一表格的結(jié)構(gòu)盡量整齊。教案首頁(yè)本次課標(biāo)題：第3章框架技術(shù)的應(yīng)用授課日期第9周授課班級(jí)13始創(chuàng)班課時(shí)共2小時(shí)上課地點(diǎn)I區(qū)教學(xué)目標(biāo)能力（技能）目標(biāo)知識(shí)目標(biāo)會(huì)使用框架技術(shù)建立網(wǎng)頁(yè)1.掌握框架技術(shù)。2掌握框架技術(shù)的常用設(shè)置技巧。教學(xué)任務(wù)及案例使用框架技術(shù)實(shí)現(xiàn)精品課程網(wǎng)站。重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站中框架技術(shù)的設(shè)計(jì)技巧。難點(diǎn)：網(wǎng)站的框架的使用方法。單元考核規(guī)劃一個(gè)商業(yè)站點(diǎn)框架的布局。參考資料任務(wù)書、源代碼、網(wǎng)絡(luò)資源，參考書注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）網(wǎng)站中框架技術(shù)的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽使用框架技術(shù)實(shí)現(xiàn)的精品課程網(wǎng)演示講解提問聽講、小組討論10分鐘操練(掌握初步或基本能力)1．分組進(jìn)行框架技術(shù)優(yōu)缺點(diǎn)的討論。2、完成框架設(shè)計(jì)。教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對(duì)基本能力的體會(huì)）案例點(diǎn)評(píng)、小組討論；及教材理論知識(shí)的講解；加深網(wǎng)頁(yè)框架的使用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識(shí)和能力）框架技術(shù)的使用場(chǎng)合。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對(duì)每一組完成的的內(nèi)容進(jìn)行評(píng)價(jià)，肯定成績(jī)并提出努力方向。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)現(xiàn)的能力目標(biāo)和知識(shí)目標(biāo)。教師講授聽講5分鐘作業(yè)1.如何進(jìn)行框架的制作與設(shè)置？2.框架布局有幾種布局方式，分別用在什么場(chǎng)合？后記教學(xué)內(nèi)容一、本例框架的html語(yǔ)法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁(yè)面中的超級(jí)鏈接語(yǔ)法格式。<framesetrows="*"cols="144,*"><framename="contents"target="main"src="html/menu.html"border=0scrolling="NO"><framename="main"src="html/main.html"scrolling="auto"></frameset>1.框架的屬性：框架顯示的文件路徑：<framesrc=“url”>框架窗口的名稱：<framename=“name”>，框架名必須以字母開頭，框架名區(qū)分大小寫，不能使用空格、句點(diǎn)和連接符。??是否顯示框架：<frameframeborder=“數(shù)值”>是否顯示滾動(dòng)條：<framesrcolling=“數(shù)值”>。此處的數(shù)值有yes,no和auto三種。能否自行調(diào)整框架窗口的大?。?lt;framenoresize>框架中內(nèi)容與框架邊緣的左右距離：<framemarginwidth/marginheight=“數(shù)值”>2.框架集的屬性寬度屬性:<framesetborder=“數(shù)值">顏色屬性:<framesetbordercolor=“顏色值">隱藏屬性：<framesetframeborder=“0or1">此處0表示不顯示邊框，1表示顯示邊框，該屬性也可用在<frame>里。四、建立表格的html語(yǔ)法總結(jié)

1.打開鏈接頁(yè)面的目標(biāo)含義<ahref=urltarget=_blank>新窗口<ahref=urltarget=_self>本窗口<ahref=urltarget=_parent>父窗口<ahref=urltarget=_top>整個(gè)瀏覽器窗口

2.各窗口間空白區(qū)域的設(shè)置<framesetframespacing=#>#=空白區(qū)域的大教案首頁(yè)本次課標(biāo)題：第4章利用表單制作交互功能網(wǎng)頁(yè)授課日期第10周授課班級(jí)13始創(chuàng)班課時(shí)共2小時(shí)上課地點(diǎn)I區(qū)教學(xué)目標(biāo)能力（技能）目標(biāo)知識(shí)目標(biāo)會(huì)使用表單的基本結(jié)構(gòu)制作表單頁(yè)面會(huì)使用各種表單元素實(shí)現(xiàn)注冊(cè)頁(yè)面能理解post和get兩種提交方式的區(qū)別1.掌握表單的基本結(jié)構(gòu)制作表單頁(yè)面2.掌握用各種表單元素實(shí)現(xiàn)注冊(cè)頁(yè)面3.掌握post和get兩種提交方式的區(qū)別教學(xué)任務(wù)及案例精品課程網(wǎng)站首頁(yè)中建立用戶名、密碼登陸框。重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站中表單的設(shè)計(jì)技巧。難點(diǎn)：網(wǎng)站的表單的美工。單元考核規(guī)劃一個(gè)商業(yè)站點(diǎn)動(dòng)態(tài)表單部分。。參考資料任務(wù)書、源代碼、網(wǎng)絡(luò)資源，參考書注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）網(wǎng)站中表單的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽精品課程網(wǎng)，注冊(cè)用戶并登陸演示講解提問聽講、小組討論10分鐘操練(掌握初步或基本能力)1．分組進(jìn)行表單技術(shù)優(yōu)缺點(diǎn)的討論。2、完成表單設(shè)計(jì)。教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對(duì)基本能力的體會(huì)）案例點(diǎn)評(píng)、小組討論；及教材理論知識(shí)的講解；加深網(wǎng)頁(yè)表單的使用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識(shí)和能力）表單的使用場(chǎng)合。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對(duì)每一組完成的的內(nèi)容進(jìn)行評(píng)價(jià)，肯定成績(jī)并提出努力方向。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)現(xiàn)的能力目標(biāo)和知識(shí)目標(biāo)。教師講授聽講5分鐘作業(yè)1.如何進(jìn)行表單的制作與設(shè)置？2.表單數(shù)據(jù)的提交方式？后記教學(xué)內(nèi)容一、本例表單的html語(yǔ)法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁(yè)面中的超級(jí)鏈接語(yǔ)法格式。1.單行文本框的Html代碼姓  名：<INPUTTYPE="TEXT"NAME="UserName"SIZE="40"><BR>E-Mail：<INPUTTYPE="TEXT"NAME="UserMail"SIZE="40"VALUE="username@mailserver"><BR>2.多行文本框的Html代碼您使用手機(jī)時(shí)最常碰到哪些問題？<BR><TEXTAREANAME="UserTrouble"COLS="45"ROWS="4">線路太忙</TEXTAREA><BR>3.單選按鈕的Html代碼年  齡：<INPUTTYPE="RADIO"NAME="UserAge"VALUE="Age1">未滿20歲<INPUTTYPE="RADIO"NAME="UserAge"VALUE="Age2"CHECKED>20~29<INPUTTYPE="RADIO"NAME="UserAge"VALUE="Age3">30~39<INPUTTYPE="RADIO"NAME="UserAge"VALUE="Age4">40~49<INPUTTYPE="RADIO"NAME="UserAge"VALUE="Age5">50歲以上<BR>4.復(fù)選框的Html代碼您曾經(jīng)使用過哪些廠家的手機(jī)？<INPUTTYPE="CHECKBOX"NAME="UserPhone"VALUE="諾基亞"CHECKED>諾基亞<INPUTTYPE="CHECKBOX"NAME="UserPhone"VALUE="摩托羅拉">摩托羅拉<INPUTTYPE="CHECKBOX"NAME="UserPhone"VALUE="愛利信">愛利信<INPUTTYPE="CHECKBOX"NAME="UserPhone"VALUE="三星">三星<BR>5.下拉列表/菜單的Html代碼你使用哪個(gè)網(wǎng)？（可復(fù)選）<SELECTNAME="UserNumber"SIZE="4"MULTIPLE><OPTIONVALUE="中國(guó)電信">中國(guó)電信<OPTIONVALUE="中國(guó)聯(lián)通"SELECTED>中國(guó)聯(lián)通<OPTIONVALUE="中國(guó)鐵通">中國(guó)鐵通</OPTION><OPTIONVALUE="中國(guó)網(wǎng)通">中國(guó)網(wǎng)通</OPTION><OPTIONVALUE="其他">其他</OPTION></SELECT><BR>6.按鈕元素的Html代碼<INPUTname="subject"TYPE="SUBMIT"id="subject"VALUE="提交"><INPUTname="reset"TYPE="RESET"id="reset"VALUE="重新輸入">1.框架的屬性：框架顯示的文件路徑：<framesrc=“url”>框架窗口的名稱：<framename=“name”>，框架名必須以字母開頭，框架名區(qū)分大小寫，不能使用空格、句點(diǎn)和連接符。是否顯示框架：<frameframeborder=“數(shù)值”>是否顯示滾動(dòng)條：<framesrcolling=“數(shù)值”>。此處的數(shù)值有yes,no和auto三種。能否自行調(diào)整框架窗口的大?。?lt;framenoresize>框架中內(nèi)容與框架邊緣的左右距離：<framemarginwidth/marginheight=“數(shù)值”>2.框架集的屬性寬度屬性:<framesetborder=“數(shù)值">顏色屬性:<framesetbordercolor=“顏色值">隱藏屬性：<framesetframeborder=“0or1">此處0表示不顯示邊框，1表示顯示邊框，該屬性也可用在<frame>里。四、建立表格的html語(yǔ)法總結(jié)1.表單標(biāo)記符HTML中表單標(biāo)記符為FORM，其主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的URL地址。其基本語(yǔ)法結(jié)構(gòu)如下：<FORMaction="URL"method="GET"/"POST"</FORM>其中Action用于設(shè)定處理表單數(shù)據(jù)程序URL的地址。method指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method="GET"時(shí)，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method="POST"時(shí)則將輸入數(shù)據(jù)按照HTTP輸送協(xié)議中的POST傳輸方式傳送到服務(wù)器。2.表單輸入標(biāo)記符INPUT是表單輸入標(biāo)記符，在表單創(chuàng)建中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記符。其語(yǔ)法如下：<INPUTtype=text/textarea/password/checkbox/radon/submit/reset/file/hidden/image/button>各項(xiàng)的意義是：type：text表示輸入單行文本。type：textarea表示輸入多行文本。type：password表示輸入數(shù)據(jù)為密碼，用“*”表示。type：checkbox表示復(fù)選框。type：radio表示單選框。type：submit表示提交按鈕，數(shù)據(jù)將被送到服務(wù)器。type：reset表示清除表單數(shù)據(jù)，以利于重新輸入。type：file表示插入一個(gè)文件。type：hidden表示隱藏按鈕。type：image表示插入一個(gè)圖像。type：button表示普通按鈕。3.下拉列表/菜單要?jiǎng)?chuàng)建列表菜單應(yīng)使用SELECT標(biāo)記符，并將每個(gè)可獨(dú)立選取的項(xiàng)用一個(gè)OPTION標(biāo)記符標(biāo)出來。創(chuàng)建選項(xiàng)菜單的語(yǔ)法如下：<SELECTname=""size=""（multiple）><OPTIONlabel=""value=""（selected）>選項(xiàng)1內(nèi)容</OPTION><OPTIONlabel=""value=""（selected）>選項(xiàng)2內(nèi)容</OPTION><!--更多OPTION標(biāo)記--></SELECT>其中，SELECT標(biāo)記符的name屬性用于指定控件名；size屬性用于指定選項(xiàng)菜單中一次顯示多少行（默認(rèn)值為1）；multiple屬性用于設(shè)置允許用戶選擇多個(gè)選項(xiàng)（如果不設(shè)置此屬性，則僅允許選擇一個(gè)選項(xiàng)）。OPTION標(biāo)記符的label屬性可以為選項(xiàng)指定一個(gè)標(biāo)記符，當(dāng)使用此屬性時(shí)，瀏覽器將采用此屬性的值而非OPTION標(biāo)記符中的內(nèi)容作為選項(xiàng)標(biāo)記符；selected屬性用于設(shè)置當(dāng)前選項(xiàng)為預(yù)先選中狀態(tài)；value屬性指定了控件的初始值。教案首頁(yè)本次課標(biāo)題：第5章利用CSS渲染網(wǎng)頁(yè)授課日期第11周周2授課班級(jí)2013始創(chuàng)班課時(shí)2上課地點(diǎn)1JD408教學(xué)目標(biāo)能力目標(biāo)知識(shí)目標(biāo)1.能理解CSS的概念2.掌握CSS的基本語(yǔ)法3.掌握CSS選擇器的種類及基本用法1.CSS的定義和基本語(yǔ)法2.CSS選擇器（標(biāo)簽選擇器、選擇器組、類選擇器、ID選擇器、相鄰選擇器、后代選擇器）教學(xué)任務(wù)1.通過CSS定義字體大小2.6種CSS選擇器的使用方法重點(diǎn)難點(diǎn)重點(diǎn)：1.CSS的定義和基本語(yǔ)法難點(diǎn)：1.CSS選擇器（標(biāo)簽選擇器、選擇器組、類選擇器、ID選擇器、相鄰選擇器、后代選擇器）作業(yè)或考核比較6種CSS選擇器，對(duì)它們的使用方法進(jìn)行總結(jié)參考資料《CSS+DIV網(wǎng)頁(yè)設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用》，孔璐等，國(guó)防工業(yè)出版社，2009《高級(jí)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》，申紅雪，北京理工大學(xué)出版社，2010《網(wǎng)頁(yè)制作三劍客精彩實(shí)例詳解》，趙艷鐸，上?？茖W(xué)普及出版社，2008注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）學(xué)生活動(dòng)時(shí)間分配告知（教學(xué)內(nèi)容、目的）1、CSS語(yǔ)法基礎(chǔ)2、CSS在網(wǎng)頁(yè)設(shè)計(jì)中的作用講授設(shè)問聽講10分鐘引入（任務(wù)項(xiàng)目）CSS定義和基本語(yǔ)法演示啟發(fā)提問討論個(gè)別回答15分鐘操練(掌握初步或基本能力)使用CSS定義文字大小教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對(duì)基本能力的體會(huì)）CSS的六種選擇器的用法教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論40分鐘歸納（知識(shí)和能力）CSS概述和CSS選擇器講授集體思考個(gè)別回答15分鐘訓(xùn)練鞏固拓展檢驗(yàn)使用CSS類選擇器改變字體顏色和大小啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論15分鐘總結(jié)CSS的基本語(yǔ)法和選擇器的使用教師講授聽講10分鐘作業(yè)課后練習(xí)3、4題后記學(xué)生能夠按照語(yǔ)法完成CSS選擇器的使用，較難理解，今后練習(xí)中應(yīng)該注重培養(yǎng)靈活運(yùn)用能力。教學(xué)內(nèi)容在網(wǎng)頁(yè)上利用HTML定位文字和圖像比較復(fù)雜，必須使用表格標(biāo)簽和隱式GIF圖像，即使這樣也不能準(zhǔn)確定位，因?yàn)椴煌臑g覽器和操作平臺(tái)其顯示的結(jié)果也不同。利用學(xué)習(xí)的CSS屬性，可以精確地設(shè)定要素位置，并能將定位的要素進(jìn)行疊加。CSS可以同時(shí)控制多重頁(yè)面的樣式和布局，能夠?yàn)槊總€(gè)HTML元素定義樣式，并將之應(yīng)用于頁(yè)面設(shè)計(jì)中。1.1CSS概述網(wǎng)頁(yè)的主要組成可分為三個(gè)部分：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior），對(duì)應(yīng)的標(biāo)準(zhǔn)也分三個(gè)方面：結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)。結(jié)構(gòu)標(biāo)準(zhǔn)的語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)的語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型如（W3CDOM，ECMAScript等）。1.1.1CSS的定義網(wǎng)頁(yè)設(shè)計(jì)最初是用HTML標(biāo)記來定義頁(yè)面文檔及格式，例如標(biāo)題<h1>、段落<p>、表格<table>、鏈接<a>等，但這些標(biāo)記不能滿足更多的文檔樣式需求，為了解決這個(gè)問題，在1997年W3C(TheWorldWideWebConsortium)頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1,自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實(shí)。W3C把DHTML(DynamicHTML)分為三個(gè)部分來實(shí)現(xiàn)：腳本語(yǔ)言(包括JavaScript、Vbscript等)、支持動(dòng)態(tài)效果的瀏覽器(包括InternetExplorer、NetscapeNavigator等)和CSS樣式表。CSS（CascadingStyleSheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過使用CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則存放在另一個(gè)文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡(jiǎn)練，縮短瀏覽器的加載時(shí)間。在CSS出現(xiàn)之前，雖然HTML為網(wǎng)頁(yè)設(shè)計(jì)者提供了強(qiáng)大的格式設(shè)置功能，但必須為每個(gè)需要設(shè)置的地方使用格式設(shè)置標(biāo)記，而不能為具有一定邏輯含義的內(nèi)容設(shè)置統(tǒng)一的格式。這對(duì)設(shè)計(jì)和維護(hù)一個(gè)網(wǎng)頁(yè)數(shù)量眾多的網(wǎng)站來說，將增加許多的工作量。此外，每個(gè)網(wǎng)頁(yè)設(shè)計(jì)者按照自己的喜好設(shè)計(jì)制作網(wǎng)頁(yè)，來自不同人員開發(fā)的網(wǎng)頁(yè)作品很難統(tǒng)一在一個(gè)網(wǎng)絡(luò)中?，F(xiàn)在，運(yùn)用CSS技術(shù)，可以克服HTML的這些缺陷，方便地為所有網(wǎng)頁(yè)設(shè)置一種風(fēng)格。特別地，如果將原來安排在網(wǎng)頁(yè)文件中的格式化元素和屬性提取到網(wǎng)頁(yè)外部，將這些樣式規(guī)則定義到一個(gè)樣式表文件中，則可以為所有需要使用該樣式的網(wǎng)頁(yè)所鏈接?？傊?，CSS是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它對(duì)顏色、字體、間隔、定位以及邊距等格式方面提供了多種屬性，這些屬性均可用于HTML標(biāo)記符。CSS層疊樣式表不但可以做出外形優(yōu)美的頁(yè)面，還可以減少設(shè)計(jì)人員大量的重復(fù)工作，可以說省時(shí)又省力，對(duì)網(wǎng)站開發(fā)工作者來說是不可多得的好幫手。它的作用就是為了讓網(wǎng)頁(yè)變得更加美觀，在網(wǎng)絡(luò)發(fā)展迅速的今天，單單是HTML標(biāo)記已經(jīng)完全不夠用了，通過CSS樣式的學(xué)習(xí)，就可以更加自由靈活地設(shè)計(jì)出想要的網(wǎng)頁(yè)來。1、CSS樣式表可以制作出體積更小、下載更快的網(wǎng)頁(yè)樣式表只是簡(jiǎn)單的文本，就像HTML那樣，它不需要圖象、執(zhí)行程序、插件與流式。以前必須求助于GIF的工作現(xiàn)在可以通過CSS來實(shí)現(xiàn)。使用樣式表可以減少表格標(biāo)簽及其它加大HTML體積的代碼，減少圖象用量與文件尺寸。2、快速、便捷地維護(hù)及更新大量的網(wǎng)頁(yè)。沒有樣式表時(shí)，如果想更新整個(gè)站點(diǎn)中所有主體文本的字體，必須一頁(yè)一頁(yè)地修改每張網(wǎng)頁(yè)。即便站點(diǎn)用數(shù)據(jù)庫(kù)提供服務(wù)，仍然需要更新所有的模板，而且更新每一模板中每一個(gè)實(shí)例的樣式。樣式表的主旨就是將格式和結(jié)構(gòu)分離，利用樣式表，可以將站點(diǎn)上所有的網(wǎng)頁(yè)都指向單一的一個(gè)CSS文件，只要修改CSS文件中某一行，那么整個(gè)站點(diǎn)都會(huì)隨之發(fā)生變動(dòng)。3、瀏覽器的界面將更加友好。不像其它的網(wǎng)絡(luò)技術(shù)，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個(gè)插件時(shí)不會(huì)發(fā)生中斷，或者使用老版本的瀏覽器時(shí)代碼不會(huì)出現(xiàn)雜亂無章的情況。只要是可以識(shí)別樣式表的瀏覽器就可以應(yīng)用CSS樣式。4、內(nèi)容和結(jié)構(gòu)獨(dú)立性強(qiáng)。CSS語(yǔ)言定義了網(wǎng)頁(yè)的結(jié)構(gòu)和各要素的功能，而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使設(shè)計(jì)者對(duì)頁(yè)面的布局施加更多的控制。當(dāng)Netscape推出新的可以控制網(wǎng)站外觀的HTML標(biāo)簽時(shí)，受到廣大網(wǎng)頁(yè)設(shè)計(jì)師的歡迎。1.1.2CSS的基本語(yǔ)法CSS語(yǔ)法由三個(gè)基本部分構(gòu)成：選擇符(selector)，屬性(properties)和屬性的取值(value)。格式：selector{property:value}(選擇符{屬性:值})選擇符可以是多種形式，一般是需要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE等等，可以通過此方法定義它的屬性和值，屬性和值要用冒號(hào)隔開，例如：p{ font-family:"宋體"；}/*定義段落字體為宋體*/如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，使用分號(hào)將所有的屬性和值分開，例如：p{ font-size:14px; text-align:center;}/*字體大小為14像素，段落居中排列*/.center{ font-size:12px; text-align:center;}/*段落居中排列，并且字體大小為12像素*/這里定義了所有的P標(biāo)記，字體大小為12像素，并且讓p標(biāo)記中的所有文字居中排列，如圖1.1所示：圖1.1通過CSS定義字體的大小注意：被/**/包含的內(nèi)容為CSS注釋內(nèi)容，它的作用就是為代碼做解釋說明，讓二次開發(fā)人員更清楚的了解代碼的作用范圍，以及功能結(jié)構(gòu)，便于日后的維護(hù)維護(hù)工作。其寫法非常簡(jiǎn)單，以/*開始，再以*/結(jié)束，中間為代碼的解釋內(nèi)容。對(duì)于CSS初學(xué)者來說，適當(dāng)?shù)淖⑨?，可以加深?duì)CSS的理解和記憶。1.2CSS選擇器一副地圖只有標(biāo)記了位置才可以讓旅行的人找到目的地，一篇有效、結(jié)構(gòu)良好的XHTML文檔需要為CSS樣式提供相應(yīng)的接口，才能讓CSS樣式得到用武之地。想要發(fā)揮CSS的自身價(jià)值，就需正確地掌握CSS選擇器，合理的使用它會(huì)使頁(yè)面代碼不再繁雜。1.2.1標(biāo)簽選擇器一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，標(biāo)簽選擇器就是直接將HTML標(biāo)簽作為選擇器，決定哪些標(biāo)簽采用相應(yīng)的CSS樣式，例如：h1{ font-size:12px;/*定義h1標(biāo)簽內(nèi)的字體都為12px*/ }p{font-size:22px;/*定義p標(biāo)簽內(nèi)的字體都為22px*/}這里直接使用了h1和p作為選擇器，它們定義了HTML文檔中所有的h1和p元素。因此在上面的例子中所有的h1元素的字體大小都為12px，p元素中的所有文字大小都為22px。效果如下圖所示：圖1.2屬性選擇器1.2.2選擇器組選擇器組就是將相同屬性的選擇器組合起來書寫，用逗號(hào)將不同的選擇器分開，來減少CSS樣式的重復(fù)定義。以下代碼可以更好理解選擇器組的書寫形式，例如：<styletype="text/css">h1,h2,h3,h4{color:#000000;}/*這個(gè)組中所有的標(biāo)題元素的文字顏色都為黑色。*/</style><body> <h1>CSS選擇器組</h1> <h2>CSS選擇器組</h2> <h3>CSS選擇器組</h3> <h4>CSS選擇器組</h4></body>以上代碼中，利用CSS選擇器組將h1，h2，h3，h4字體顏色定義為了黑色。如圖1.2所示：圖1.3選擇器組的使用利用CSS選擇器組，可以減少大量重復(fù)的代碼，例如：body{ font-size:12px; color:red; }/*所有的元素的文字大小都為12像素，字體為紅色*/p{ font-size:12px; color:red; }/*所有P標(biāo)記內(nèi)的文字大小都為12像素，字體為紅色*/以上代碼中body與p兩部分代碼可以合并為一個(gè)部分，代碼如下：body,p{ font-size:12px; color:red; }/*這個(gè)組中所有的標(biāo)題元素的文字大小都為12像素，字體為紅色*/1.2.3類選擇器class類選擇器就是將相同的元素分類，再進(jìn)行CSS樣式的定義。在網(wǎng)頁(yè)中允許class類選擇器多次使用，定義類選擇器時(shí)，需要在自定義類的名稱前加點(diǎn)號(hào)“.”。例如：<styletype="text/css">.black{color:#000000;}/*設(shè)置字體的顏色為黑色*/.green{color:green;}/*設(shè)置字體的顏色為綠色*/</style><body><h1class="black">helloworld！</h1><h2class="green">helloworld！</h2><pclass="black">helloworld！</p><pclass="green">helloworld！</p></body>上面的例子定義了black與green兩個(gè)類別選擇器，具有black類的h1,p元素都以黑色字體顯示，具有g(shù)reen類的h2,p元素則以綠色字體顯示，效果如下圖所示：圖1.4類選擇器的定義方法在一些具有相同屬性的樣式中使用類別選擇器，可以節(jié)省大量重復(fù)的代碼，從而簡(jiǎn)化代碼。1.2.4ID選擇器ID選擇器與類選擇器相類似，但它們的表示方法不同，ID選擇器由一個(gè)#字符表示。在html文檔中只需要把class換成id即可。例如：<styletype="text/css">#size{ font-size:22px; }/*設(shè)置字體的大小為22PX*/#size_two{ font-size:16px; }/*設(shè)置字體的大小為16PX*/</style><body><pid="size">helloworld！</p><pid="size_two">helloworld！</p></body>以上代碼定義了size和siez_two兩個(gè)ID選擇器，ID為size選擇器的字體大小為22px，ID為size_two選擇器的字體大小為16px，效果如圖1.5所示：圖1.5ID選擇器注意：ID選擇器用于尋找指定ID名稱的元素，并且在同一篇HTML文檔中同一個(gè)ID只能出現(xiàn)一次。1.2.5相鄰選擇器如果一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，希望找到其中一個(gè)段落p元素進(jìn)行定位，就可以使用相鄰?fù)x擇器。例如：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>相鄰選擇器</title><styletype="text/css">h1+p{font-size:22px;}/*設(shè)置字體的大小為22PX*/</style></head><body><h1>Divcss布局</h1><p>DivCSS教程</p><p>DivCSS布局實(shí)例</p></body></html>上面這個(gè)例子很好的說明了相鄰選擇器的用法和書寫規(guī)范，通過定義h1標(biāo)題后第一個(gè)段落字體大小為22px，并且不會(huì)影響到其他段落，如效果圖1.6所示圖1.6相鄰選擇器的使用1.2.6后代選擇器后代選擇器就是作用于所有子后代元素，通過空格來進(jìn)行選擇。通常把外層的標(biāo)記寫在前面，內(nèi)層的標(biāo)記寫在后面，之間用空格分隔，當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層的標(biāo)記就成為外層標(biāo)記的后代了。例如：<styletype="text/css">#linksa{color:#000000;/*設(shè)置鏈接顏色為黑色*/font-size:20px;/*字體大小為20像素*/}aspan{color:#000000;font-weight:700;/*加粗顯示span標(biāo)簽內(nèi)的字體寬度*/}</style><body><pid="links"><ahref="#">DivCSS教程</a></p><ahref="#">CSS布局<span>實(shí)例</span></a></body>嵌套在P元素下的a標(biāo)記字體大小為20px，而嵌套在a標(biāo)記下的span字體寬度為700，這就是后代選擇器的用法。效果圖如下所示：圖1.7后代選擇器的使用本次課標(biāo)題：第6章CSS的應(yīng)用方式和盒子模型授課日期第12周周1授課班級(jí)13師創(chuàng)課時(shí)共1小時(shí)上課地點(diǎn)

一體化C教學(xué)目標(biāo)能力（技能）目標(biāo)知識(shí)目標(biāo)1.了解個(gè)人網(wǎng)站的設(shè)計(jì)原則及配色方案2.了解商業(yè)網(wǎng)站的設(shè)計(jì)原則及配色方案3.站點(diǎn)規(guī)劃設(shè)計(jì)1.掌握個(gè)人網(wǎng)站的設(shè)計(jì)原則2.掌握商業(yè)網(wǎng)站的設(shè)計(jì)原則。教學(xué)任務(wù)及案例案例：寫出幾個(gè)生物類網(wǎng)站、教育類網(wǎng)站的優(yōu)缺點(diǎn)。重點(diǎn)難點(diǎn)重點(diǎn)：1.網(wǎng)站風(fēng)格的應(yīng)用。難點(diǎn)：網(wǎng)站的配色方案。單元考核規(guī)劃一個(gè)商業(yè)站點(diǎn)的配色方案與計(jì)劃。參考資料任務(wù)書、源代碼、網(wǎng)絡(luò)資源，參考書注：表格內(nèi)容統(tǒng)一用5號(hào)宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動(dòng)（方法與手段）