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

1、 HTML網(wǎng)頁設(shè)計(jì)技術(shù)教案首頁本次課標(biāo)題：說課授課日期第6周周1授課班級課時(shí)1上課地點(diǎn)教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)本課程的任務(wù)、性質(zhì)、目的本課程的教學(xué)內(nèi)容介紹與要求本課程的能力培養(yǎng)及教學(xué)要求本課程的考核要求熟悉本課程的地位與前后課程的銜接關(guān)系了解本課程所涉及的網(wǎng)頁設(shè)計(jì)技能教學(xué)任翁能描述本課程在課程體系中的地位及作用重點(diǎn)難點(diǎn)重點(diǎn)：1熟悉簡介本課程的教學(xué)內(nèi)容難點(diǎn)：1本課程的性質(zhì)、目的、任務(wù)2.本課程的能力培養(yǎng)要求作業(yè)或考核能概述本課程的課程要求及教學(xué)內(nèi)容參考資料網(wǎng)頁設(shè)計(jì)M.電子工業(yè)出版社2010CSS+DIV網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用電子工業(yè)出版社，011注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教

2、學(xué)內(nèi)容教師活動學(xué)生活動時(shí)間分配（方法與手段）告知（教學(xué)內(nèi)容、目的）1、了解課程主要內(nèi)容、考核方法2、熟悉網(wǎng)站開發(fā)步驟講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）說課瀏覽經(jīng)典網(wǎng)頁演示啟發(fā)提問討論個(gè)別回答5分鐘操練（掌握初步或基本能力）1、Dreamweaver開發(fā)平臺，2、指導(dǎo)學(xué)生配置熟悉平臺環(huán)境3、創(chuàng)建網(wǎng)頁并瀏覽教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對基本能力的體會）通過案例點(diǎn)評、小組討論及教材理論矢識的講解，使學(xué)生了解站點(diǎn)創(chuàng)建網(wǎng)頁設(shè)計(jì)的含義、特點(diǎn)、依據(jù)、內(nèi)容1教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識和能力）第一個(gè)網(wǎng)頁的創(chuàng)建和瀏覽步驟講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展

3、檢驗(yàn)組內(nèi)自評選出一個(gè)全班展示組間互評,認(rèn)識了解Dreamweaver發(fā)平臺，簡單網(wǎng)頁并瀏覽。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)歸納本次課所講的內(nèi)容總結(jié)要實(shí)現(xiàn)的能力目標(biāo)和知識目標(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)頁設(shè)計(jì)的基本概念，學(xué)會使用常用的網(wǎng)頁設(shè)計(jì)工具和常用腳本語言，能夠設(shè)計(jì)制作常見的靜態(tài)和動態(tài)網(wǎng)頁，具備網(wǎng)站的建立和維護(hù)能力。同時(shí)通過本課程的學(xué)

4、習(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è)模塊地掌握其知識點(diǎn)；關(guān)聯(lián)性是指各模塊間存在相互關(guān)系在重難點(diǎn)設(shè)計(jì)上應(yīng)該加以配合如HTML語言模塊著重基本代碼的熟記和編寫;于較難編寫代碼的“框架、“層”“數(shù)據(jù)鏈接”等內(nèi)容則放到TeamWeaver勺使用模塊中重點(diǎn)介紹。HTML網(wǎng)頁設(shè)計(jì)技術(shù)課程與計(jì)算機(jī)基礎(chǔ)Flash動畫、PhotoShop圖像處理、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、數(shù)據(jù)庫等課程互相聯(lián)系、互相補(bǔ)充。本

5、課程作為軟件技術(shù)專業(yè)的一門主干專業(yè)課程此，時(shí)學(xué)生已經(jīng)具備一定的計(jì)算機(jī)基礎(chǔ)知識和動手能力，能較快地掌握網(wǎng)頁設(shè)計(jì)的各種知識，并運(yùn)用所學(xué)知識做出具有特色的網(wǎng)站，使學(xué)生能夠得到全面的培養(yǎng)，成為社會所需專用人才。（三）課程框架結(jié)構(gòu)、學(xué)分和學(xué)時(shí)分配、對學(xué)生選課的建議本課程的設(shè)計(jì)“以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目課程為主體，”打破了傳統(tǒng)的學(xué)科體系的模式將，網(wǎng)頁設(shè)計(jì)職業(yè)崗位能力中用到的知識如:頁基礎(chǔ)知識DreamWeaveT勺使用FTML語言JavaScript腳本語言FlashFireworks進(jìn)行整合并模塊化。教學(xué)時(shí)各模塊既有獨(dú)立性，又有關(guān)聯(lián)性。獨(dú)立性是指各模塊設(shè)計(jì)案例、組織教學(xué)、突出重點(diǎn)時(shí)應(yīng)該相互

6、獨(dú)立，學(xué)生應(yīng)該一個(gè)模塊一個(gè)模塊地掌握其知識點(diǎn)；關(guān)聯(lián)性是指各模塊間存在相互補(bǔ)充關(guān)系，按理論實(shí)踐一體化要求設(shè)計(jì)，強(qiáng)調(diào)動手做，強(qiáng)調(diào)解決問題。它體現(xiàn)了職業(yè)教育“以就業(yè)為導(dǎo)向，以能力為本位”的職業(yè)教育理念。課程框架結(jié)構(gòu)、學(xué)分和學(xué)時(shí)分配、對學(xué)生選課的建議二、課程目標(biāo)總目標(biāo)：使學(xué)生掌握常用的網(wǎng)頁設(shè)計(jì)工具，熟練運(yùn)用多種網(wǎng)頁設(shè)計(jì)技術(shù)，具網(wǎng)頁設(shè)計(jì)、制作及站點(diǎn)管理的基本知識和基本技能，學(xué)生能夠獨(dú)立制作中小型的網(wǎng)站。（一）教學(xué)目標(biāo)：了解WWW、HTTP、HTML.CSS的定義、概念和作用；理解服務(wù)器、客戶端、瀏覽器的概念和作用；理解HTML語言中的各種文本格式、字符格式、段落設(shè)置、列表、標(biāo)記的作用；熟練操作Dream

7、Weaver理解CSS樣式表的作用和意義；深入理解HTML語言的各種功能和應(yīng)用；深入理解表格、框架、表單的作用；深入理解層的作用；（二）技能教學(xué)目標(biāo)：會使用Dreamweaver網(wǎng)頁設(shè)計(jì)工具制作網(wǎng)頁；理解HTML語言中的標(biāo)記設(shè)置顏色、文本格式和列表；熟練掌握顏色值的配置和背景圖案的設(shè)置方法，熟練掌握字符、鏈接顏色的設(shè)置方法；熟練掌握網(wǎng)頁設(shè)計(jì)中字符格式的設(shè)置方法，段落分段與換行的方法；掌握HTML的語法結(jié)構(gòu)，掌擂TML語言中標(biāo)記的使用方法；掌握在網(wǎng)頁中添力CSS的方法。掌握三種添加樣式信息的方法，會使用設(shè)置網(wǎng)頁格式和列表的格式；掌握在網(wǎng)頁中嵌入圖像的方法，掌握與嵌入圖像相關(guān)標(biāo)記的用法；掌握與圖像

8、布局和位置相關(guān)的標(biāo)記的概念和用法；熟練掌握使用絕對和相對RL,創(chuàng)建超鏈接、圖像鏈接；學(xué)會圖像映射的建立方法；熟練掌握表格的使用方法，會用表格布局并設(shè)計(jì)網(wǎng)頁；掌握框架制作網(wǎng)頁的方法，會使用框架設(shè)計(jì)網(wǎng)頁；掌握制作表單的方法，會利用表單建立交互式頁面；（三）素質(zhì)教學(xué)目標(biāo)：具有勤奮學(xué)習(xí)的態(tài)度，嚴(yán)謹(jǐn)求實(shí)、創(chuàng)新的工作作風(fēng)；具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)；具有高度責(zé)任心和良好的團(tuán)隊(duì)合作精神；具有一定的科學(xué)思維方式和判斷分析問題的能力；具有較強(qiáng)的網(wǎng)頁設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)。三、實(shí)施建議（一）教學(xué)建議：從HTML網(wǎng)頁設(shè)計(jì)技術(shù)的實(shí)際問題出發(fā)，精心準(zhǔn)備各種典型案例，構(gòu)建課程的宏觀教學(xué)設(shè)計(jì)。例如，公司網(wǎng)站、網(wǎng)上

9、鮮花直銷、個(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è)階段，案例引入，提出問題。通過案例演示，提出問題，給出知識點(diǎn)，講解案例應(yīng)用背景，給學(xué)生一個(gè)切入點(diǎn)，建立感性認(rèn)識。目的是激發(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í)意識和學(xué)習(xí)

10、方法。學(xué)生在學(xué)習(xí)和嘗試解決問題過程中，發(fā)現(xiàn)問題，提出問題，在問題的引導(dǎo)下學(xué)習(xí)相關(guān)的知識和操作技能。第3個(gè)階段，歸納總結(jié)，引申提高。在每次課結(jié)束前，引導(dǎo)學(xué)生進(jìn)行歸納總結(jié)。對本次課的實(shí)際意義、重點(diǎn)、難點(diǎn)、容易出錯(cuò)處等及時(shí)進(jìn)行總結(jié)。并針對案例的不足之處，進(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é)手段，

11、提高教學(xué)效果教學(xué)中采用電子演示文稿、大屏幕多媒體聯(lián)機(jī)演示、網(wǎng)絡(luò)教學(xué)等各種先進(jìn)的教學(xué)手段，使課堂教學(xué)生動活潑、引人入勝，提高了教學(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í)。（二）評價(jià)建議：對學(xué)生學(xué)業(yè)評價(jià)提出建議，體現(xiàn)評價(jià)的發(fā)展功能。1突出過程評價(jià)，以職業(yè)崗位工作過程為考評基礎(chǔ)以，全學(xué)期的教學(xué)情境進(jìn)度為考核時(shí)間線以，一個(gè)完整的網(wǎng)站頁面設(shè)計(jì)制作

12、項(xiàng)目的驅(qū)動，在每個(gè)教學(xué)情境完成教學(xué)之后，要求學(xué)生運(yùn)用該教學(xué)情境所學(xué)技能設(shè)計(jì)制作項(xiàng)目中的相關(guān)進(jìn)度作業(yè)（作品），并對其作業(yè)（作品）進(jìn)行考核。從而形成階段性過程考核成績，該成績作為總評成績的重要組成部份（占60）。2強(qiáng)調(diào)目標(biāo)評價(jià)和理論與實(shí)踐一體化評價(jià)，注重引導(dǎo)學(xué)生進(jìn)行學(xué)習(xí)方式的改變。3強(qiáng)調(diào)課程結(jié)束后的綜合評價(jià)結(jié)，合全教學(xué)過程的過程考核項(xiàng)目對，學(xué)生的最終過程考核作品從，策劃能力、美工設(shè)計(jì)能力、制作技術(shù)應(yīng)用能力三個(gè)方面進(jìn)行綜合評價(jià)。從而充分發(fā)揮學(xué)生主動性和創(chuàng)造力，還要注重考核學(xué)生動手能力和在實(shí)踐中分析問題、解決問題的能力。4建議在教學(xué)中注重團(tuán)隊(duì)協(xié)作能力的評分，課程結(jié)束時(shí)進(jìn)行綜合模塊考核。建議以學(xué)生自己制

13、作的網(wǎng)站的實(shí)際水平作為學(xué)生的學(xué)習(xí)本課程的成績。教案首頁本次課標(biāo)題：情境一WWW技術(shù)基礎(chǔ)授課日期第6周周1授課班級課時(shí)1上課地點(diǎn)1JD308知識目標(biāo)能力目標(biāo)1、初步認(rèn)知靜態(tài)網(wǎng)頁2、熟悉開發(fā)工具的使用3、了解網(wǎng)站開發(fā)的前沿技術(shù)靜態(tài)頁面的主要組成部分開發(fā)工具的使用開發(fā)工具的使用案例：電子銀行靜態(tài)頁面的登陸與注冊。重點(diǎn)難點(diǎn)重點(diǎn)：開發(fā)工具的使用難點(diǎn)：站點(diǎn)的建立作業(yè)或考核站點(diǎn)的建立參考資料網(wǎng)頁設(shè)計(jì)M.電子工業(yè)出版社2010CSS+DIV網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用電子工業(yè)出版社，011注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）要達(dá)到的目的

14、：1、了解網(wǎng)站和網(wǎng)頁的基本概念；2、掌握網(wǎng)頁的版面設(shè)計(jì)；3、掌握網(wǎng)站的策劃與網(wǎng)站原則；4、了解網(wǎng)站的開發(fā)過程。講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）實(shí)例1：瀏覽優(yōu)秀的網(wǎng)站，對這些網(wǎng)站的主頁進(jìn)行分析了解優(yōu)秀網(wǎng)頁的布局結(jié)構(gòu)、色彩搭配、導(dǎo)航欄的設(shè)計(jì)動畫效果等。演示啟發(fā)、提問討論個(gè)別回答5分鐘操練（掌握初步或基本能力）對各個(gè)網(wǎng)站的信息內(nèi)容網(wǎng)頁布局結(jié)構(gòu)、色彩搭配進(jìn)行分析、說明教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對基本能力的體會）網(wǎng)頁布局色彩搭配原則教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論15分鐘歸納（知識和能力）提示和技巧講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組織學(xué)生討論，對所展示的網(wǎng)站

15、發(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)頁與網(wǎng)站的概念網(wǎng)頁：我們在瀏覽器中看到的頁面，它是一個(gè)單個(gè)的文件。網(wǎng)頁里可以有文字、表格、圖像、聲音、視頻等等。網(wǎng)站中的第一個(gè)頁面成為首頁或主頁。網(wǎng)站：存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個(gè)或多個(gè)網(wǎng)頁。這些網(wǎng)頁按照一定的組織結(jié)構(gòu)，以鏈接等方式連接在一起，形成一個(gè)整體，描述一組完整的信息。二、網(wǎng)

16、頁的設(shè)計(jì)1、網(wǎng)頁主題網(wǎng)頁的主題指網(wǎng)頁所要表現(xiàn)的最主要的思想內(nèi)涵，可以說師網(wǎng)頁的靈魂。主題的概念是很模糊的它，是一種約束，是同一站點(diǎn)中各個(gè)頁面于五彩擯紛中體現(xiàn)出一統(tǒng)風(fēng)格的約束；它也是一種力量，是將各個(gè)設(shè)計(jì)者的作品有機(jī)結(jié)合起來的力量。主題必須b頁面主要推銷或展示的產(chǎn)品或服務(wù)緊密相關(guān)，同時(shí)它又必須有相當(dāng)?shù)奈?。這方面如果處理不好，就會使站點(diǎn)來訪問者在其中的各頁面間移動時(shí)，可能會懷疑是否還在同站點(diǎn)，因?yàn)槟切╉撁婵雌饋聿⒉幌駥儆谕徽军c(diǎn)頁。面主題可以幫助設(shè)計(jì)者解決這一難題統(tǒng)。一的主題可以輕易地將不同設(shè)計(jì)者的不同風(fēng)格統(tǒng)一起來，而又不會妨礙他們的設(shè)計(jì)思路和靈感。確定主題時(shí)應(yīng)遵循的原則2、網(wǎng)頁的文字文字是網(wǎng)

17、頁最主要的表達(dá)形式，盡管圖形和解構(gòu)的表格五彩擯紛，但大多數(shù)瀏覽者大部分時(shí)間仍將注意力集中在頁面中的文字上面，他們總是首先瀏覽文字內(nèi)容，而甚少關(guān)心其他頁面元素，甚至對導(dǎo)航系統(tǒng)也是如此：所以，給瀏覽考一個(gè)親和的文字界面是必要的。3、網(wǎng)頁的色彩在制作網(wǎng)站的時(shí)候，色彩的選擇和搭配十分重要，因?yàn)橐粋€(gè)網(wǎng)站格調(diào)的確定，往往取決于色彩的選擇與搭配是否適當(dāng)，一般的情況下，從以下幾個(gè)方面來考慮色彩的選擇：1色彩助鮮明性網(wǎng)站色彩的選擇與搭配要鮮艷，這樣比較容易吸引訪問者的注意，而且在訪問者的記憶中駐留的時(shí)間也比較長。2色彩的獨(dú)特性網(wǎng)站色彩的選擇與搭配要與眾不同，這樣就可以使得訪問者留下深刻的印象。3色彩的合適性網(wǎng)站

18、色彩的選擇與搭配要與網(wǎng)站的內(nèi)容氣氛相適合。4色彩的聯(lián)想性不向的色彩會產(chǎn)生不同的聯(lián)想，在網(wǎng)站的設(shè)計(jì)中多運(yùn)用具有美好聯(lián)想的色彩，可以使你的網(wǎng)站流露出另外一種氣息。5頁面中各處用色的選擇首先確定主色。主色是指頁面中相對來說較大面積使用的色彩。主色可以反映出整個(gè)網(wǎng)頁的風(fēng)格，亦可使頁面內(nèi)容以色彩語言表達(dá)出來。接下來是確定輔色。輔色可以有多種，其應(yīng)用范圍包括輸入框的顏色，表格邊框表顏格色的、底色、小圖標(biāo)用色、文字顏色以及鏈接色等等。4、網(wǎng)頁版式和布局1版面設(shè)計(jì)的步驟畫出頁面的結(jié)構(gòu)草圖：只需畫出頁面的大體結(jié)構(gòu)。注：分辨率6為40*480時(shí)，頁面顯示尺寸為620*311；分辨率為800*600時(shí)，頁面顯示尺寸

19、為780*428；分辨率為1024*768時(shí)，頁面顯示尺寸為1007*600；布局細(xì)化和調(diào)整：將需要放置的功能模塊安排在頁面上，注意突出重點(diǎn)和平衡協(xié)調(diào)定格：確定出完美的布局方案，定格為最后的版式2常見網(wǎng)頁布局T型結(jié)構(gòu)同字結(jié)構(gòu)川字結(jié)構(gòu)三字結(jié)構(gòu)單一結(jié)構(gòu)三、網(wǎng)站的策劃與創(chuàng)建原則1、定位網(wǎng)站主題和名稱設(shè)計(jì)一個(gè)站點(diǎn)，首先遇到的問題就是定位網(wǎng)站主題。所謂主題也就是你的網(wǎng)站的題材。對于題材的選擇，應(yīng)注意：主題要小而精。定位要小，內(nèi)容要精。調(diào)查結(jié)果也顯示，網(wǎng)絡(luò)上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會選擇專賣店。題材最好是你自己擅長或者喜愛的內(nèi)容。這樣在制

20、作時(shí)，才不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有熱情，很難設(shè)計(jì)制作出杰出的作品。題材不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見，人人都有的題材；“目標(biāo)太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點(diǎn)，你要超過它是很困難的。網(wǎng)站名稱及域名的選擇也是非常重要的和。現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：(1)名稱要正。也就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。(2)名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱另外，網(wǎng)站名稱的

21、字?jǐn)?shù)應(yīng)該控制在六個(gè)字最好四個(gè)字)以內(nèi)，比如“XX閣”“XX設(shè)計(jì)室”，四個(gè)字的可以用成語，如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個(gè)好處，一般友情鏈接0的小尺寸是88X31,而六個(gè)字的寬度是8左右，適合于其他站點(diǎn)的鏈接排版。（3）名稱要有特色。名稱平實(shí)就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力則，為上品。這里舉幾個(gè)例子：音樂前衛(wèi)，網(wǎng)頁陶吧，天籟絕音。在體現(xiàn)出網(wǎng)站主題的同時(shí)，能點(diǎn)出特色之處。域名的選擇也是如此，選一個(gè)簡單易記，比如可以模仿知名網(wǎng)站擴(kuò)大自己的影響有，一定含義的域名也是網(wǎng)站成功的一部分。2、網(wǎng)站的風(fēng)格網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長們最希望掌也握是，最難以學(xué)習(xí)的難。就難在沒

22、有一個(gè)固定的程式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。風(fēng)格（style是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感邀個(gè)“整體形象”包括站點(diǎn)的I（標(biāo)志，色彩，字體，標(biāo)語），版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動活潑的M是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。風(fēng)格是獨(dú)特的，是站點(diǎn)不同與其他網(wǎng)站的地方或。者色彩，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨(dú)有的。例如新世紀(jì)網(wǎng)（絡(luò)w.century.2000c.ne的黑白色網(wǎng)易壁紙站的特有框架即使你只看到其中

23、一頁，也可以分辨出是哪個(gè)網(wǎng)站的。風(fēng)格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個(gè)站點(diǎn)的個(gè)性情，緒。是溫文儒雅，是執(zhí)著熱情，是活潑易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”，你可以用人的性格來比喻站點(diǎn)。有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于普：通網(wǎng)站你看到的只是堆砌在一起的信息你，只能用理性的感受來描述比，如信息量大小，瀏覽速度快慢。但你瀏覽過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認(rèn)識，比如站點(diǎn)有品位，和藹可親，是老師，是朋友。教案首頁本次課標(biāo)題：情境二html制作網(wǎng)頁（1）授課日期第7周周1授課班級課時(shí)2上課地點(diǎn)1JD308教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1、能夠利用HTML標(biāo)簽設(shè)計(jì)靜態(tài)網(wǎng)

24、頁的能力2、HTML代碼調(diào)試能力3.靜態(tài)頁面的主要組成部分2、HTML標(biāo)簽的使用tt學(xué)任翁HTML標(biāo)簽的使用案例：電子銀行靜態(tài)頁面的登陸與注冊。重點(diǎn)難點(diǎn)重點(diǎn)：HTML標(biāo)簽的使用難點(diǎn)：1、認(rèn)識DreamweaverMX200。2、新增功能。3、DreamweaverMX2004主窗口。4、自定義工作環(huán)境。作業(yè)或考核課后題參考資料網(wǎng)頁設(shè)計(jì)M.電子工業(yè)出版社2010CSS+DIV網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用電子工業(yè)出版社，011注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）本次課主內(nèi)容：簡單網(wǎng)頁的制作過程要達(dá)到的目的：學(xué)會簡單html網(wǎng)

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

26、教學(xué)內(nèi)容，能明確課程考核方匚教學(xué)內(nèi)容在目前市面上眾多的網(wǎng)頁編輯軟件中有的重視效率，有的強(qiáng)調(diào)版面設(shè)計(jì)，而DreamweaveiMX2004可以很方便地實(shí)現(xiàn)這兩方面的完美結(jié)合。另外reamweaverMX200啲網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都優(yōu)于一般同類軟件，即使是初學(xué)者也能制作出相當(dāng)水準(zhǔn)的網(wǎng)頁，所feamweaverMX2004是網(wǎng)頁設(shè)計(jì)者的最佳選擇。新課內(nèi)容：一、DreamweaverMX2004簡述當(dāng)今網(wǎng)頁設(shè)計(jì)軟件可以說是層出不窮Macromedia推出的Dreamweaver就是一個(gè)廣泛受到好評的網(wǎng)頁設(shè)計(jì)軟件。它是一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別設(shè)計(jì)的可視化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出

27、跨越平臺和跨越瀏覽器的充滿動感的網(wǎng)頁。DreamweaverMX2004擁有出色的軟件界面，其特別的控制面板使設(shè)計(jì)者們用起來得心應(yīng)手。DreamweaerMX還能與Macromedia公司的其他軟件進(jìn)行完美的合作DreamweaverMX2004最精彩之處便是其強(qiáng)大的多媒體處理功能，在設(shè)計(jì)TML（DynamicHTML和CSS（CascadingStyleSheet方面表現(xiàn)得極為出色,它利用JavaScript和DHTML語言代碼輕松地實(shí)現(xiàn)網(wǎng)頁元素的動作和交互性操催這方面它超過了FrontPage2002Hotdog和HomeSite等著名網(wǎng)頁設(shè)計(jì)軟件，成為目前最為流行的網(wǎng)頁設(shè)計(jì)工具。二、新增

28、功能隨著軟件版本的不斷提高，Dreamweaver的功能也在不斷增加和完善。Dreamweaver目前已經(jīng)升級到MX2004版，在功能方面也增強(qiáng)了許多，下面介紹一下其新增功能。1、設(shè)計(jì)方面的新增功能（1）改善工作界面DreamweaverMX2004提供了更規(guī)范化的工作界面及更好的面板管理reamweaverMX2004將多個(gè)面板組成組，隨時(shí)可以展開或集合，然后進(jìn)一步把多個(gè)面板組放在一起e，mweaverMX2004在此基礎(chǔ)上將所有Dreamweaver關(guān)聯(lián)窗口全部置入主窗口中（僅Endows操作系統(tǒng)），該界面被稱為DI（MultipleDocumentInterfac多文檔界面）。（2）新增

29、文檔樣式在新建文檔時(shí)，DreamweaveiMX2004提供多種文檔樣式供用戶選擇這些文檔樣式主要有BasicPage（基本樣頁）、DynamicPage動態(tài)樣頁）、TemplatePage（模板樣頁）、Other（其他）、CSSStyleSheets（層疊樣式表）、Framesets（框架）、PageDesigns（頁面設(shè)計(jì)）和PageDesignw（Accessible等8個(gè)基本樣式類型，使用這些樣式可以使用戶的網(wǎng)頁設(shè)計(jì)擁有專業(yè)品質(zhì)的界面和腳本。（3）更好地支持CSSDreameaverMX進(jìn)一步加強(qiáng)了對CSS（層疊樣式表）的支持，提供了一個(gè)改進(jìn)CSfS樣式面板。通過該面板用戶可以使用設(shè)計(jì)

30、時(shí)間樣式片段design-timestylesheets減少頁面編輯。改進(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)識符的屬性變得可行。2、代碼方面新增功能（1）新增向?qū)酱a工作界面新增的向?qū)酱a工作界面可以使用戶在使JftmeSite（最好的HTML編輯器之一）或Macromedia的ColdF

31、usionStudio時(shí)，使用相似的工作蚧面（僅三、DreamweaverMX200界面簡介1選擇DreamweverMXX作界面在第一次啟動DreamweaverMX2004時(shí)，系統(tǒng)會打開WorkspaceSetup對話框讓用戶選擇工作界面，如下圖所示。在該對話框中可以選攝eamweaverMX200的工作界面，用戶可以選擇reamweaverMX2004Workspace（DreamweaverMX200工4作界面）、DreamweaverMX2004WorkspaceHomeSite/Coder-Styl和Dreamweaver4Workspac等3種工作界面中的一種。（1）Dreamw

32、eaverMX2004WorkspaceDreamweaverMX2004Workspace是使用MDI（多文檔界面）一個(gè)整合型工作界面，其將所有的文檔窗口和面板整合到主窗口中，并將面板組放在窗口的右邊部分，如下圖所示，推薦使用該工作界面。（2）DreamweaverMX2004WorkspaceHomeSite/Coder-St界面在WorkspaceSetup對話框中選擇DreamweaverMX2004Workspac按鈕后，再啟用下邊的HomeSite/Coder-styl單選按鈕，可以使用）reamweaverMX2004WorkspaceHomeSite/Coder-Style工作

33、界面。該工作界面也是一個(gè)IDteamweaverMX2004相同的整合型的工作界面，不過其面板組放在主窗口的左邊，如下圖所示。該工作界面主要是為喜歡手寫代碼的用戶設(shè)計(jì)的，在該工作界面中使用HomeSite或Macrwmedia自己的ColdFusionStudi等網(wǎng)頁編輯器使用類似的界面，打開該工作界面時(shí)默認(rèn)的顯示模式為顯示代碼模式。主窗口DreamweaverMX2004的整個(gè)工作界面為一個(gè)多文檔型的窗口，該主窗口主要包括以下內(nèi)容。（1）菜單欄使用菜單欄基本上能夠?qū)崿F(xiàn)reavweaverMX的所有功能。其功能包含在0個(gè)菜單中：File文件）菜單用來管理文件，dit（編輯）菜單用來編輯文本,V

34、iew查看）菜單用來查看物件,Insert插入）菜單用來插入元素Modify修改菜單實(shí)現(xiàn)對頁面元素修改的功能Text文本）菜單用來對文本進(jìn)行操作，Commands命令）菜單收集了所有的附加命令項(xiàng)site位占點(diǎn)）菜單用來管理站點(diǎn),Window窗口）菜單用來切換所有的控制面板和窗口Help（幫助）菜單可實(shí)現(xiàn)聯(lián)機(jī)幫助功能。在后面的講述中，將涉及到每個(gè)菜單中的命令。（2）插入欄插入欄是MX版本中新添加的部件，其實(shí)質(zhì)就是Teamweaver4中的對象面板組，在其中包含一些用于創(chuàng)建不同類型對象如圖像、表格、層、媒體、腳本和應(yīng)用程序等按鈕。用戶可以單擊nsert按鈕隱藏/顯示整個(gè)插入欄，通過單擊相應(yīng)的標(biāo)識符

35、名切換顯示不同的按鈕。教案首頁本次課標(biāo)題：情境二html制作網(wǎng)頁（1）授課日期第8周周1授課班級課時(shí)2上課地點(diǎn)1JD308教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)1能夠利用HTML標(biāo)簽設(shè)計(jì)靜態(tài)網(wǎng)頁的能力2HTML代碼調(diào)試能力1靜態(tài)頁面的主要組成部分2、HTML標(biāo)簽的使用教學(xué)任翁HTML標(biāo)簽的使用案例：電子銀行靜態(tài)頁面的登陸與注冊。重點(diǎn)難點(diǎn)重點(diǎn)：HTML標(biāo)簽的使用難點(diǎn)：1、認(rèn)識DreamweaverMX20042、新增功能。3、DreamweaverMX2004主窗口。4、自定義工作環(huán)境。作業(yè)或考核課后題B考資料網(wǎng)頁設(shè)計(jì)M.電子工業(yè)出版社2010CSS+DIV網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用電子工業(yè)出版社,011注：

36、表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）本次課主內(nèi)容：簡單網(wǎng)頁的制作過程要達(dá)到的目的：1、認(rèn)識DreamweaverMX20042、新增功能。3、DreamweaverMX200主窗口。4、自定義工作環(huán)境。講授設(shè)問聽講5分鐘引入（任務(wù)項(xiàng)目）實(shí)例1：瀏覽優(yōu)秀的網(wǎng)站的網(wǎng)頁，完成簡單html網(wǎng)貝等。演示啟發(fā)提問討論個(gè)別回答5分鐘操練（掌握初步或基本能力）對網(wǎng)頁的信息內(nèi)容、網(wǎng)頁布局結(jié)構(gòu)色彩搭配進(jìn)行分析、說明。、教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對基本能力的體會）Html兀素制作教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論1

37、5分鐘歸納（知識和能力）提示和技巧講授集體思考個(gè)別回答10分鐘訓(xùn)練鞏固拓展檢驗(yàn)組織學(xué)生討論，對所展示的網(wǎng)頁發(fā)表自己見解:啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論5分鐘總結(jié)需要掌握DreamweaverMX200在設(shè)計(jì)、代碼和擴(kuò)展方面的功能教師講授聽講5分鐘作業(yè)根據(jù)教學(xué)內(nèi)容制定預(yù)習(xí)計(jì)劃后記學(xué)生能大致了解本門課程的目的、性質(zhì)及任務(wù)，以及教學(xué)內(nèi)容，能明確課程考核方式教學(xué)過程一、簡單個(gè)人網(wǎng)頁分析問題1：在該網(wǎng)頁中大家看到了什么？不同顏色、不同大小、擺放在不同位置的文字位置不同、大小不同的灰色線條項(xiàng)目列表特殊字符等問題2：這些元素是如何制作的呢？二、Dreamweaver中簡單個(gè)人網(wǎng)頁文本元素的編輯在上

38、節(jié)課新建的網(wǎng)頁的設(shè)計(jì)視圖的工作區(qū)域空白處輸入文字“歡迎光臨我的個(gè)人網(wǎng)頁”，選中文字am在aver下方的屬性面板上設(shè)置其段落屬性為“標(biāo)題，對其方式為“”，修改其顏色為“紅色”，光標(biāo)定位在“歡迎光臨我的個(gè)人網(wǎng)頁”后蔽【Enter】鍵，點(diǎn)擊常用插入欄，選擇HTML選項(xiàng)，單擊其中的按鈕，在“歡迎光臨我的個(gè)人網(wǎng)頁”下面插入一條水平線。選中水平線，設(shè)置水平線屬性，“對其”中包含了左、右、中三中對其方式。在水平線后面按【nter鍵，輸入“一、自我介紹”，選中該文本，設(shè)置其屬性如-圖5所示。重復(fù)步驟2插入水平線，輸入輸入“姓名”“性別”、“出生年月”-6、“畢業(yè)院校”、所學(xué)專業(yè)”等四行文字每行的結(jié)尾按Ente

39、r鍵換行。選中這四行文字，切換“常用工具欄”為“文本選項(xiàng)”，點(diǎn)擊其上的、按鈕。重復(fù)步驟4-6，制作聯(lián)系方式部分，。選中聯(lián)系方式的四行文字，切換“常用工具欄”為“文本選項(xiàng)”，點(diǎn)擊其上的按鈕。重復(fù)步驟2插入頁面底部的水平線并設(shè)置其屬性。輸入版權(quán)信息三、簡單個(gè)人網(wǎng)頁中常用文本標(biāo)記的應(yīng)用把網(wǎng)頁切換到“混合模式視圖”，分析個(gè)頁面元素的L標(biāo)記如圖2-2-12所示。選中設(shè)計(jì)視圖中的內(nèi)容，系統(tǒng)將自動在代碼視圖模式中顯示相應(yīng)的代碼。教案首頁本次課標(biāo)題：第2章表格的基礎(chǔ)授課日期第9周周一授課班級13級始創(chuàng)班課時(shí)共2小時(shí)上課地點(diǎn)I區(qū)教能力（技能）目標(biāo)知識目標(biāo)學(xué)目標(biāo)現(xiàn)會掌掌1X教學(xué)任翁及案佛精:難點(diǎn)點(diǎn)點(diǎn)一一一rlj-

40、M單元考核個(gè)一劃規(guī)e考資料書考參注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）I、了解網(wǎng)站中表格的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽精品課程網(wǎng)的表格的使用演示講解提問聽講、小組討論10分鐘操練（掌握初步或基本能力1分組進(jìn)行表格布局優(yōu)缺點(diǎn)的討論。2、完成表格布局。教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對基本能力的體會）案例點(diǎn)評、小組討論；及教材理論知識的講解；加深網(wǎng)頁表格的應(yīng)用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識和能力網(wǎng)頁表格布局的使用方法。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對每一組

41、完成的的內(nèi)容進(jìn)行評價(jià)，冃定成績并提出努力方向。啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)的能力目標(biāo)和知識目標(biāo)。教師講授聽講5分鐘作業(yè)1如何進(jìn)行表格的制作與設(shè)置？2.表格布局有幾種布局方式，分別用在什場合？么后記教學(xué)內(nèi)容、本例表格的html語法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁面中的超級鏈接語法格式。表格的屬性：單元格的背景顏色：單元格內(nèi)容的對齊方式、建立表格的html語法總結(jié)建立表格由四對標(biāo)記組成：/table定義表格元素/tr癥義表格的一行/th癥義表格的表頭單元格/td癥義表格的單元格表格的基本語法結(jié)構(gòu)：table第一行第一列單元格內(nèi)容/th第一行第

42、二列單元格內(nèi)容第一行第N列單元格內(nèi)容/th第二行第一列單元格內(nèi)容/td第二行第二列單元格內(nèi)容第二行第N列單元格內(nèi)容/td表格如果沒有表頭單元格，此處的h河以由td弋替。表格尺寸、背景表格尺寸：tablewidth數(shù)值height=數(shù)值背景顏色：tablebgcolor顏色背景圖片：表格間距表格間距：tablecellspacing數(shù)值表格邊距表格邊距：tablecellpadding數(shù)值表格標(biāo)題表格標(biāo)題：行高與布局trheight數(shù)值：設(shè)置表格內(nèi)某行的高度tralign參數(shù)值：該行中單元格的水平對齊方式(ft,center,righttrvalign數(shù)值：該行中單元格的垂直對齊方(top,mi

43、ddle,bottom)行邊框與背景某行內(nèi)邊框的顏色:trbordercolor顏色值某行背景顏色：trbgcolor顏色值列寬與布局表格列寬：orthwidth數(shù)值水平對齊：orthalign參數(shù)值垂直對齊：orthvalign參數(shù)值單元格邊框與背景單元格邊框顏色orthbordercolor顏色值單元格背景顏色ortrbgcolor顏色值單元格背景圖片or跨行列屬性單元格跨行：tdrowspan數(shù)值orthrowspan數(shù)值單元格跨列：tdcolspan數(shù)值orthcolspan數(shù)值模仿課堂中講解的示例利用表格設(shè)計(jì)一個(gè)班級學(xué)生信息表，觀察各代碼所表示的意義。要求：表格的標(biāo)題為“XX班學(xué)生信

44、息表”；表格的項(xiàng)目有“本人姓名，年齡，性別，家長姓名，家庭住址，政治面貌，擔(dān)任職務(wù)，特長愛好，人生格言，聯(lián)系方式”；表格要求醒目，分類合理清楚。表格可以使用背景圖片或者背景顏色。在使用表格中應(yīng)注意那些問題？整個(gè)表格不要都套在一個(gè)表格里，盡量拆分成多個(gè)表格。表格的嵌套層次盡量要少，最好嵌套表格不超3過層。單一表格的結(jié)構(gòu)盡量整齊。教案首頁本次課標(biāo)題：第3章框架技術(shù)的應(yīng)用授課日期第9周授課班級13始創(chuàng)班課時(shí)共2小時(shí)上課地點(diǎn)I區(qū)教學(xué)目標(biāo)能力(技能)目標(biāo)知識目標(biāo)會使用框架技術(shù)建立網(wǎng)頁1掌握框架技術(shù)。2掌握框架技術(shù)的常用設(shè)置技巧教學(xué)任翁及案例使用框架技術(shù)實(shí)現(xiàn)精品課程網(wǎng)站。重點(diǎn)難點(diǎn)重點(diǎn)：網(wǎng)站中框架技術(shù)的設(shè)計(jì)

45、技巧。難點(diǎn)：網(wǎng)站的框架的使用方法。單元考核O局布的架框點(diǎn)站業(yè)商個(gè)一劃規(guī)e考資料書考參注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）網(wǎng)站中框架技術(shù)的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽使用框架技術(shù)實(shí)現(xiàn)的精品課程網(wǎng)演示講解提問聽講、小組討論10分鐘操練（掌握初步或基本能力分組進(jìn)行框架技術(shù)優(yōu)缺點(diǎn)的討論。2、完成框架設(shè)計(jì)。f教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對基本能力的體會）案例點(diǎn)評、小組討論；及教材理論知識的講解；加深網(wǎng)頁框架的使用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識和能力）框架技術(shù)的使用

46、場合。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對每一組完成的的內(nèi)容進(jìn)行評價(jià)，冃定成績并提出努力方向,啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)的能力目標(biāo)和知識目標(biāo)。教師講授聽講5分鐘作業(yè)如何進(jìn)行框架的制作與設(shè)置？框架布局有幾種布局方式，分別丿在什么場合？冃后記教學(xué)內(nèi)容一、本例框架的html語法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁面中的超級鏈接語法格式。框架的屬性：框架顯示的文件路徑：framesrc二“url框架窗口的名稱：framname二“name，框架名必須以字母開頭，框架名區(qū)分大小寫，不能使用空格、句點(diǎn)和連接符。?是否顯示框架：frameframeb

47、order二“數(shù)值是否顯示滾動條：framesrcolling=“數(shù)值。此處的數(shù)值有no和auto三種。能否自行調(diào)整框架窗口的大小框架中內(nèi)容與框架邊緣的左右距離：framemarginwidth/marginheight二“數(shù)值框架集的屬性寬度屬性framesetborder二“數(shù)值顏色屬性：framesetbordercolor二“顏色值隱藏屬性：framesetframeborder二“0or1此處表示不顯示邊框,1表示顯示邊框，該屬性也可用在framed。四、建立表格的itml語法總結(jié)打開鏈接頁面的目標(biāo)含義ahref=urltarget二_blank新窗口ahref二urltarget二

48、_self本窗口ahref=urltarget二_parent父窗口ahref=urltarget=_top整個(gè)瀏覽器窗口各窗口間空白區(qū)域的設(shè)置#空=白區(qū)域的大教案首頁章4本周OMl時(shí)課授區(qū)I教學(xué)目標(biāo)單頁式構(gòu)實(shí)幀結(jié)素刪本元璃基單ge的表和單種航表各P0用用MI使使理會會能別e*-別面面E-頁頁的作硯交制實(shí)提構(gòu)摞種結(jié)元兩的和和單各航表用PO&握遍掌掌掌1.2.3.亍.教學(xué)任翁及案例gorT陸登碼密精重點(diǎn)難點(diǎn)點(diǎn)點(diǎn)一一一rlj-M單元考核O分部自一表態(tài)點(diǎn)站業(yè)商個(gè)一劃規(guī)參考資料書考參注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的）網(wǎng)站中表

49、單的使用。講授聽講5分鐘引入（任務(wù)項(xiàng)目）瀏覽精品課程網(wǎng)注冊用戶并登陸演示講解提問聽講、小組討論10分鐘操練（掌握初步或基本能力1分組進(jìn)行表單技術(shù)優(yōu)缺點(diǎn)的t論。2、完成表單設(shè)計(jì)。教師講解學(xué)生操作個(gè)別操作集體提示10分鐘深化（加深對基本能力的體會）案例點(diǎn)評、小組討論；及教材理論知識的講解；加深網(wǎng)頁表單的使用等。教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論10分鐘歸納（知識和能力表單的使用場合。講授聽講10分鐘訓(xùn)練鞏固拓展檢驗(yàn)教師針對每一組完成的的內(nèi)容進(jìn)行評價(jià)，冃定成績并提出努力方向,啟發(fā)誘導(dǎo)難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論10分鐘總結(jié)歸納本次課所講的內(nèi)容，總結(jié)要實(shí)的能力目標(biāo)和知識目標(biāo)?，F(xiàn)教師講授聽講5

50、分鐘作業(yè)如何進(jìn)行表單的制作與設(shè)置？表單數(shù)據(jù)的提交方式？后記教學(xué)內(nèi)容、本例表單的html語法結(jié)構(gòu)分析切換到代碼視圖模式。觀察頁面中的超級鏈接語法格式。1.單行文本框的Html代碼姓 名：INPUTTYPE=TEXTNAME=UserNameSIZE=40BRE-Mail：2多行文本框的Html代碼您使用手機(jī)時(shí)最常碰到哪些問題？RTEXTAREANAME=UserTroubleC0LS=45ROWS=線路太ft/TEXTAREABR單選按鈕的Html代碼年 齡：INPUTTYPE=RADIONAME=UserAgeVALUE=Age|滿20歲INPUTTYPE=RADIONAME=

51、UserAgeVALUE=Age2CHECKED20293039INPUTTYPE=RADIONAME=UserAgeVALUE=Age44049INPUTTYPE=RADIONAME=UserAgeVALUE=Age5歲以上BR復(fù)選框的Html代碼您曾經(jīng)使用過哪些廠家的手機(jī)？INPUTTYPE=CHECKBOXNAME=UserPhoneVAL諾基亞CHECKED諾基亞INPUTTYPE=CHECKBOXNAME=UserPhoneVAL摩托羅拉摩托羅拉INPUTTYPE=CHECKBOXNAME=UserPhoneVALUE利信愛利信INPUTTYPE=CHECKBOXNAME=UserP

52、honeVAL三星三星BR下拉列表/菜單的Html代碼你使用哪個(gè)網(wǎng)？（可復(fù)選）SELECTNAME=UserNumberSIZE=4MULTIPLEOPTIONVALUE=國電信中國電信OPTIONVALUE=國聯(lián)通SELECTED中國聯(lián)通OPTIONVALUE=國鐵通中國鐵通/OPTIONOPTIONVALUE=國網(wǎng)通中國網(wǎng)通/OPTIONOPTIONVALUER他其他/OPTION/SELECTXBR按鈕元素的Html代碼INPUTname=subjectTYPE=SUBMITid=subjectVAL提交INPUTname=resetTYPE=RESETid=resetVALffi新輸入

53、框架的屬性：框架顯示的文件路徑：framesrc二“url”框架窗口的名稱：frannHme=“name”，框架名必須以字母開頭，框架名區(qū)分大小不能使用空格、句點(diǎn)和連接符。是否顯示框架：frameframeborder二“數(shù)值”是否顯示滾動條：framesrcolling二“數(shù)值”。此處的數(shù)值有no和auto三種。能否自行調(diào)整框架窗口的大小、framenoresize框架中內(nèi)容與框架邊緣的左右距離：framemarginwidth/marginheight二“數(shù)值”2框架集的屬性寬度屬性framesetbnder二“數(shù)值顏色屬性：framesetbordercolor二“顏色值隱藏屬性：fra

54、meseframeborder=“0）r1此處0表示不顯示邊框,1表示顯示邊框，該屬性也可用在rame里。四、建立表格的itml語法總結(jié)1表單標(biāo)記符HTML中表單標(biāo)記符為FORM其主要作用是設(shè)定表單的起止位置，旨定處理表單數(shù)據(jù)程序的RL地址。其基本語法結(jié)構(gòu)如下：FORMaction=URLmethod=GET/POST/FORM其中Action用于設(shè)定處理表單數(shù)據(jù)程原L的地址。method指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式,e當(dāng)hod二GET時(shí)，將輸入數(shù)據(jù)加在ction指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)ethod=POST時(shí)則將輸入數(shù)據(jù)按照TTP輸送協(xié)議中的POST傳輸方式傳送到服務(wù)器。

55、表單輸入標(biāo)記符INPUT是表單輸入標(biāo)記符，在表單創(chuàng)建中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記符。其語法如下：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ù)，以利

56、于重新輸入。type：file表示插入一個(gè)文件。type：hidden表示隱藏按鈕。type：image表示插入一個(gè)圖像。type：button表示普通按鈕。下拉列表/菜單要創(chuàng)建列表菜單應(yīng)使用ELECT標(biāo)記符，并將每個(gè)可獨(dú)立選取的項(xiàng)用一個(gè)TION標(biāo)記符標(biāo)出來。創(chuàng)建選項(xiàng)菜單的語法如下：SELECTname=size=(multiple)OPTIONlabel=value=(selecte)選項(xiàng)1內(nèi)容/OPTIONOPTIONlabel=value=(selecte)選項(xiàng)2內(nèi)容/OPTION!-更多OPTION標(biāo)記一/SELECT其中，SELECT標(biāo)記符的name屬性用于指定控件名size屬性用于

57、指定選項(xiàng)菜單中一次顯示多少(默認(rèn)值為1)；multiple屬性用于設(shè)置允許用戶選擇多個(gè)選項(xiàng)果不設(shè)置此屬性則僅允許選擇一個(gè)選項(xiàng))OPTION標(biāo)記符的label屬性可以為選項(xiàng)指定一個(gè)標(biāo)記符，吏用此屬性時(shí)瀏覽器將采用此屬性的值而非PTION標(biāo)記符中的內(nèi)容作為選項(xiàng)標(biāo)記符；selected屬性用于設(shè)置當(dāng)前選項(xiàng)為預(yù)先選中狀態(tài)alue屬性指定了控件的初始值。教案首頁本次課標(biāo)題：第5章利用CSS渲染網(wǎng)頁授課日期第11周周2授課班級2013始創(chuàng)班課時(shí)2上課地點(diǎn)1JD408教能力目標(biāo)知識目標(biāo)學(xué)目標(biāo)1能理解css的概念2掌握CSS的基本語法3掌握CSS選擇器的種類及基本用法CSS的定義和基本語法CSS選擇器（標(biāo)簽選

58、擇器、選擇器組、類選擇器ID選擇器、相鄰選擇器、后代選擇器）教學(xué)任#通過CSS定義字體大小6種CSS選擇器的使用方法重點(diǎn)難點(diǎn)重點(diǎn)：1.CSS的定義和基本語法難點(diǎn)：1.CSS選擇器（標(biāo)簽選擇器、選擇器組、類選擇器1選擇器、相鄰選擇器、后代選擇器）作業(yè)或考核比較6種CSS選擇器，對它們的使用方法進(jìn)行總結(jié)e考資料CSS+DIV網(wǎng)頁設(shè)計(jì)開發(fā)技術(shù)與實(shí)例應(yīng)用）孔璐等，國防工業(yè)出版社2009高級網(wǎng)頁設(shè)計(jì)技術(shù)申紅雪，北京理工大學(xué)出版社2010網(wǎng)頁制作三劍客精彩實(shí)例詳解趙艷鐸，上?？茖W(xué)普及出版社2008注：表格內(nèi)容統(tǒng)一用5號宋體填寫。教學(xué)設(shè)計(jì)步驟教學(xué)內(nèi)容教師活動（方法與手段）學(xué)生活動時(shí)間分配告知（教學(xué)內(nèi)容、目的

59、）1、CSS語法基礎(chǔ)2、CSS在網(wǎng)頁設(shè)計(jì)中的作用講授設(shè)問聽講10分鐘引入（任務(wù)項(xiàng)目）CSS定義和基本語法演示啟發(fā)提問討論個(gè)別回答15分鐘操練（掌握初步或基本能力）使用CSS定義文字大小教師講解學(xué)生操作個(gè)別回答集體提示15分鐘深化（加深對基本能力的體會）CSS的六種選擇器的用法教師演示要點(diǎn)提示重點(diǎn)講解個(gè)別回答集體討論40分鐘歸納（知識和能力）CSS概述和CSS選擇器講授集體思考個(gè)別回答15分鐘訓(xùn)練鞏固拓展檢驗(yàn)使用CSS類選擇器改變字體顏色和大/啟發(fā)誘導(dǎo)1、難點(diǎn)提示個(gè)別指導(dǎo)個(gè)人操作小組討論15分鐘總結(jié)CSS的基本語法和選擇器的使用教師講授聽講10分鐘作業(yè)課后練習(xí)3、4題后記學(xué)生能夠按照語法完成SS

60、選擇器的使用，較難理解，今后練習(xí)中應(yīng)該注重培養(yǎng)靈活:能力。教學(xué)內(nèi)容在網(wǎng)頁上利用1TML定位文字和圖像比較復(fù)雜必須使用表格標(biāo)簽和隱式IF圖像，即使這樣也不能準(zhǔn)確定位因?yàn)椴煌臑g覽器和操作平臺其顯示的結(jié)果也不同。利用學(xué)習(xí)S屬性，可以精確地設(shè)定要素位置，并能將定位的要素進(jìn)行疊加oCSS可以同時(shí)控制多重頁面的樣式和布局，能夠?yàn)槊縏ML元素定義樣式，并將之應(yīng)用于頁面設(shè)計(jì)中。1.1CSS概述網(wǎng)頁的主要組成可分為三個(gè)部分結(jié)構(gòu)（Struetur）、表現(xiàn)（Presentation和行為（Behavior），對應(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)的語言主要包括HTML和XML，表現(xiàn)標(biāo)準(zhǔn)的語言