《HTML網頁設計技術》教案

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

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

3、檢驗組內自評選出一個全班展示組間互評,認識了解Dreamweaver發(fā)平臺，簡單網頁并瀏覽。啟發(fā)誘導難點提示個別指導個人操作小組討論5分鐘總結歸納本次課所講的內容總結要實現(xiàn)的能力目標和知識目標重點是站點的創(chuàng)建教師講授聽講5分鐘作業(yè)根據教學內容制定預習計劃后記學生能大致了解本門課程的目的、性質及任務，以及教學內容，能明確課程考核方匚教學內容一、概述（一）課程性質（課程性質和價值）本課程是高職計算機軟件技術專業(yè)的一門主干專業(yè)課程。通過本課程的學習，要求學生掌握網頁設計的基本概念，學會使用常用的網頁設計工具和常用腳本語言，能夠設計制作常見的靜態(tài)和動態(tài)網頁，具備網站的建立和維護能力。同時通過本課程的學

4、習，培養(yǎng)學生的綜合職業(yè)能力、創(chuàng)新精神和良好的職業(yè)道德。（二）課程基本理念本課程的設計“以能力為本位、以職業(yè)實踐為主線、以項目課程為，主教體學”時各模塊既有獨立性，又有關聯(lián)性。獨立性是指各模塊設計案例、組織教學、突出重點時應該相互獨立，學生應該一個模塊一個模塊地掌握其知識點；關聯(lián)性是指各模塊間存在相互關系在重難點設計上應該加以配合如HTML語言模塊著重基本代碼的熟記和編寫;于較難編寫代碼的“框架、“層”“數(shù)據鏈接”等內容則放到TeamWeaver勺使用模塊中重點介紹。HTML網頁設計技術課程與計算機基礎Flash動畫、PhotoShop圖像處理、計算機網絡技術、數(shù)據庫等課程互相聯(lián)系、互相補充。本

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

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

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

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

9、鮮花直銷、個人網站精選、書籍專賣等。以若干個案例為載體，形成循序漸進、種類多樣的項目群，構建完整的教學設計布局。1、教學采用“四階段教學法”，將“教、學、練、做”融為一體。教學體現(xiàn)“教師為主導，學生為主體，訓練為主線”的原則，課堂上可以采用“四階段教學法”：第1個階段，案例引入，提出問題。通過案例演示，提出問題，給出知識點，講解案例應用背景，給學生一個切入點，建立感性認識。目的是激發(fā)學生的學習興趣、讓學生感到學有所用，從而明確本次課的教學目標。第2個階段，學生自主學習，嘗試解決問題。充分利用我校以及互聯(lián)網網絡教學資源，引導學生自主學習，找到解決問題的方法和操作技能，培養(yǎng)學生的自主學習意識和學習

10、方法。學生在學習和嘗試解決問題過程中，發(fā)現(xiàn)問題，提出問題，在問題的引導下學習相關的知識和操作技能。第3個階段，歸納總結，引申提高。在每次課結束前，引導學生進行歸納總結。對本次課的實際意義、重點、難點、容易出錯處等及時進行總結。并針對案例的不足之處，進行引申和提高。注意在這個階段，強調的是“引導”學生，而不是老師講解。第4個階段，舉一反三、學以致用。案例源于生活，最終要應用于生活。為了使學生能學以致用、舉一反三、觸類旁通，每次教學結束時及時布置相關的課后練習，使學生在課后進一步復習鞏固，并且將課后作業(yè)納入形成性考核的內容之一。同時給出下一次課的學習內容，提示學生預習。2、充分利用現(xiàn)代化教學手段，

11、提高教學效果教學中采用電子演示文稿、大屏幕多媒體聯(lián)機演示、網絡教學等各種先進的教學手段，使課堂教學生動活潑、引人入勝，提高了教學效果，同時提高了教學效率。包括：（1）利用多媒體教學系統(tǒng)廣播教學。把學生的共同問題（需要提示的重點）“通廣過播教學”，邊講邊演示，使學生即時看到操作效果。（2）利用網絡將課堂教學延伸到課外學，生根據需要通過網絡學習有關的內容教。師的課件和教學用資料都已都上傳到教學資源下載中心，方便學生課外學習和復習。（二）評價建議：對學生學業(yè)評價提出建議，體現(xiàn)評價的發(fā)展功能。1突出過程評價，以職業(yè)崗位工作過程為考評基礎以，全學期的教學情境進度為考核時間線以，一個完整的網站頁面設計制作

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

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

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

15、發(fā)表自己見解:啟發(fā)誘導難點提示個別指導個人操作小組討論5分鐘總結問題1:如何上網瀏覽網站？問題2：如果不知道某個網站的網址怎樣獲得該網站的網址或瀏覽該網站？，教師講授聽講5分鐘作業(yè)根據教學內容制定預習計劃后記學生能大致了解本門課程的目的、性質及任務，以及教學內容，能明確課程考核方匚教學內容一、網頁與網站的概念網頁：我們在瀏覽器中看到的頁面，它是一個單個的文件。網頁里可以有文字、表格、圖像、聲音、視頻等等。網站中的第一個頁面成為首頁或主頁。網站：存放在網絡服務器上的完整信息的集合體，它包含一個或多個網頁。這些網頁按照一定的組織結構，以鏈接等方式連接在一起，形成一個整體，描述一組完整的信息。二、網

16、頁的設計1、網頁主題網頁的主題指網頁所要表現(xiàn)的最主要的思想內涵，可以說師網頁的靈魂。主題的概念是很模糊的它，是一種約束，是同一站點中各個頁面于五彩擯紛中體現(xiàn)出一統(tǒng)風格的約束；它也是一種力量，是將各個設計者的作品有機結合起來的力量。主題必須b頁面主要推銷或展示的產品或服務緊密相關，同時它又必須有相當?shù)奈?。這方面如果處理不好，就會使站點來訪問者在其中的各頁面間移動時，可能會懷疑是否還在同站點，因為那些頁面看起來并不像屬于同一站點頁。面主題可以幫助設計者解決這一難題統(tǒng)。一的主題可以輕易地將不同設計者的不同風格統(tǒng)一起來，而又不會妨礙他們的設計思路和靈感。確定主題時應遵循的原則2、網頁的文字文字是網

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

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

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

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

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

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

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

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

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

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

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

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

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

30、時間樣式片段design-timestylesheets減少頁面編輯。改進后的CSS樣式面板可以使用戶很容易區(qū)分本地定義樣式和那些在外部樣式表中定義的樣式，時還提供了許多新的CSS2結構。（4）增強了Dreamweaver的模板功能DreamweaverMX2004增強了其模板功能，可以使用戶很容易達到以下目的：所有的區(qū)域可隨意選擇，通過使用重復區(qū)域在同一個界面中顯示多個項目；可以實現(xiàn)多個模板嵌套；使修改單個標識符的屬性變得可行。2、代碼方面新增功能（1）新增向導式代碼工作界面新增的向導式代碼工作界面可以使用戶在使JftmeSite（最好的HTML編輯器之一）或Macromedia的ColdF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

55、表單輸入標記符INPUT是表單輸入標記符，在表單創(chuàng)建中使用頻繁，大部分表單內容需要用到此標記符。其語法如下：INPUTtype=text/textarea/password/checkbox/radon/submit/reset/file/hidden/image/button各項的意義是：type：text表示輸入單行文本。type：textarea表示輸入多行文本。type：password表示輸入數(shù)據為密碼，用“*”表示。type：checkbox表示復選框。type：radio表示單選框。type：submit表示提交按鈕，數(shù)據將被送到服務器。type：reset表示清除表單數(shù)據，以利

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

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

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

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

60、選擇器的使用，較難理解，今后練習中應該注重培養(yǎng)靈活:能力。教學內容在網頁上利用1TML定位文字和圖像比較復雜必須使用表格標簽和隱式IF圖像，即使這樣也不能準確定位因為不同的瀏覽器和操作平臺其顯示的結果也不同。利用學習S屬性，可以精確地設定要素位置，并能將定位的要素進行疊加oCSS可以同時控制多重頁面的樣式和布局，能夠為每TML元素定義樣式，并將之應用于頁面設計中。1.1CSS概述網頁的主要組成可分為三個部分結構（Struetur）、表現(xiàn)（Presentation和行為（Behavior），對應的標準也分三個方面:結構標準、表現(xiàn)標準和行為標準結構標準的語言主要包括HTML和XML，表現(xiàn)標準的語言