網(wǎng)頁設(shè)計教案

實操課程教案課程名稱：網(wǎng)頁設(shè)計授課班級：19中級廣告設(shè)計班授課教師：

教案首頁授課日期2020.11.9-11.10計劃課時8授課班級19中級廣告設(shè)計班審批簽字課題第一章網(wǎng)頁設(shè)計概述教學(xué)目的重點講授網(wǎng)站，網(wǎng)頁涉及的概念；了解網(wǎng)頁設(shè)計涉及的相關(guān)概念；了解網(wǎng)頁設(shè)計的語言HTML；掌握學(xué)習(xí)網(wǎng)頁設(shè)計的某一種工具；理解網(wǎng)站和網(wǎng)頁的關(guān)系。教學(xué)內(nèi)容本課程是非計算機專業(yè)的專業(yè)選修課。通過該課程的學(xué)習(xí)，引導(dǎo)學(xué)生了解網(wǎng)頁、網(wǎng)站、主頁和WWW服務(wù)器的基本概念，熟悉建立網(wǎng)站以及發(fā)布網(wǎng)站的步驟和過程；掌握使用可視化網(wǎng)頁制作工具Dreamweaver建立網(wǎng)站、制作網(wǎng)頁的方法；能夠收集制作網(wǎng)頁的多媒體素材，熟悉基本的圖像處理和動畫制作技術(shù)；掌握使用HTML語言的基本知識等。重點理解網(wǎng)站和網(wǎng)頁的關(guān)系；難點網(wǎng)頁設(shè)計工具軟件Dreamweaver和Photoshop的使用及應(yīng)用教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁組織教學(xué)1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入1.網(wǎng)絡(luò)的概念I(lǐng)nternet概述Internet是相互連接的網(wǎng)絡(luò)集合。網(wǎng)絡(luò)協(xié)議是網(wǎng)絡(luò)中的設(shè)備進行通信時共同遵循的一套規(guī)則，即以何種方法獲得所需的信息。WWWWWW(WorldWideWeb)簡稱為萬維網(wǎng)，客戶端只要通過“瀏覽器”（Browser）就可以非常方便地訪問internet上的服務(wù)器端，迅速地獲得所需的信息。域名與IP地址在Internet上的每臺網(wǎng)絡(luò)設(shè)備都要有一個唯一的地址才能被訪問到，這個地址就是IP地址。IP地址是由32位的二進制數(shù)值構(gòu)成，分成4組，轉(zhuǎn)化為十進制用點分隔，比如：1。域名系統(tǒng)是一個分層的樹狀結(jié)構(gòu)組織。域名的書寫格式為：葉節(jié)點名.二級域名.頂級域名2．網(wǎng)站與網(wǎng)頁的概念構(gòu)建WWW的基本單位是網(wǎng)頁。網(wǎng)頁中包含所謂的“超鏈接”，通過已經(jīng)定義好的關(guān)鍵字和圖形，只要用鼠標(biāo)輕輕一點，就可以自動跳轉(zhuǎn)到相應(yīng)的其它文件，獲得相應(yīng)的信息，從而實現(xiàn)網(wǎng)頁之間的鏈接，從而構(gòu)成了WWW的縱橫交織的網(wǎng)狀結(jié)構(gòu)。通過超鏈接連接起來的一系列邏輯上可以視為一個整體的頁面，則叫做網(wǎng)站。3．相關(guān)知識網(wǎng)頁制作工具網(wǎng)頁編輯工具網(wǎng)頁編輯工具主要分為標(biāo)記型和所見即所得型。所見即所得型的編輯軟件主要有：微軟的FrontPage和Macromedia公司推出的Dreamweaver。圖形和圖像處理工具目前常用的圖形和圖像處理工具主要是Adobe公司出品的著名的圖形圖像處理軟件：Photoshop和Macromedia公司推出的Fireworks。動畫制作工具目前常用的是Macromedia公司推出的Flash。HTML語言HTML語法結(jié)構(gòu)HTML文件的所有控制語句稱為標(biāo)簽，標(biāo)簽在一對尖括號之間，格式如下：<標(biāo)簽>HTML語言元素</標(biāo)簽>常見的HTML標(biāo)簽見講義內(nèi)容4.網(wǎng)頁設(shè)計師必備的專業(yè)素質(zhì)見講義內(nèi)容四、課堂作業(yè)布置，當(dāng)場討論寫作（1）網(wǎng)頁與網(wǎng)站有何不同？請舉例說明。（2）網(wǎng)頁構(gòu)成的基本元素是什么？（3）說出自己熟悉的3個網(wǎng)頁，并試分析它的歸類。五、小結(jié)：通過對網(wǎng)站網(wǎng)頁設(shè)計中涉及到的基本概念解釋，幫助學(xué)生理解掌握網(wǎng)頁設(shè)計的要求，區(qū)別網(wǎng)站與網(wǎng)頁的關(guān)系，增強學(xué)生網(wǎng)頁制作的素質(zhì)培養(yǎng)。教案首頁授課日期2020.11.13、11.16計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第二章網(wǎng)頁賞析教學(xué)目的初步了解網(wǎng)頁賞析要求；理解網(wǎng)頁賞析的理論要求；掌握網(wǎng)頁突破性設(shè)計的要素；分清各類網(wǎng)站的設(shè)計要求和框架；理解實例分析過程。教學(xué)內(nèi)容本課程是非計算機專業(yè)的專業(yè)選修課。通過該課程的學(xué)習(xí)，引導(dǎo)學(xué)生了解網(wǎng)頁、網(wǎng)站、主頁和WWW服務(wù)器的基本概念，熟悉建立網(wǎng)站以及發(fā)布網(wǎng)站的步驟和過程；掌握使用可視化網(wǎng)頁制作工具Dreamweaver建立網(wǎng)站、制作網(wǎng)頁的方法；能夠收集制作網(wǎng)頁的多媒體素材，熟悉基本的圖像處理和動畫制作技術(shù)；掌握使用HTML語言的基本知識等。重點網(wǎng)頁的布局結(jié)構(gòu)；網(wǎng)頁的色彩搭配。難點如何使學(xué)生對網(wǎng)頁設(shè)計感興趣。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入網(wǎng)頁設(shè)計與網(wǎng)站主題網(wǎng)頁設(shè)計與網(wǎng)站主題之間的關(guān)系歸納起來有三點，第一，設(shè)計應(yīng)滿足主題的要求，應(yīng)該為主題服務(wù)；第二，設(shè)計使藝術(shù)和技術(shù)交融，應(yīng)該是藝術(shù)和技術(shù)的完美結(jié)合。就是說，在保證“美”的前提下，不喪失網(wǎng)站的“功能”；第三，無論是“美”，還是“功能”，都是為了更好地表達網(wǎng)站的主題思想。網(wǎng)頁設(shè)計的優(yōu)秀與否，取決于設(shè)計師對主題的理解與掌握程度，好的頁面設(shè)計肯定是服從于網(wǎng)站主題，鮮明地突出網(wǎng)站的訴求主題。要使網(wǎng)頁從形式上獲得良好的誘導(dǎo)力，可以通過對網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序以及彼此之間的邏輯性來把握運用。各類網(wǎng)站的設(shè)計總體框架（1）門戶類網(wǎng)站（2）產(chǎn)品類網(wǎng)站（3）娛樂類網(wǎng)站（4）游戲類網(wǎng)站（5）時尚類網(wǎng)站（6）音樂類網(wǎng)站（7）雜志類網(wǎng)站（8）傳記類網(wǎng)站（9）個人類網(wǎng)站網(wǎng)頁顏色的使用風(fēng)格色彩是自然美、生活美、藝術(shù)美的重要組成部分。它代表著情感（綠色代表生命，紅色代表熱情，白色代表純潔，藍色代表深邃），代表著生活。沒有色彩的世界是死寂而平淡的。在主題明確的前提下，網(wǎng)頁可以用豐富的色彩來烘托主題，讓瀏覽者耳目一新的感覺。給人清新，如坐春風(fēng)，吃人生果，讓人感覺身上三萬六千個毛孔都滲透著激情。但多變的色彩不要干擾了瀏覽者的易讀，不可以濃妝艷抹，脫離主題。網(wǎng)頁賞析舉例說明各個網(wǎng)站的特點。（1）北京2008奧運會（2）百度搜索（3）HAO123網(wǎng)站（4）Pixar動畫工作室（5）故宮博物院（6）中國黑客聯(lián)盟（7）柯達相機（8）百威啤酒（9）Rabbit游戲三、簡單練習(xí)根據(jù)老師提供的素材資料，運用總結(jié)歸納的設(shè)計思路步驟，學(xué)生設(shè)計板式練習(xí)，目的是使學(xué)生熟悉設(shè)計思路、掌握設(shè)計要領(lǐng)及方法。要求學(xué)生將遇到難點，問題記錄下來，在教師演示作業(yè)時候認真聽看，解決問題。四、作業(yè)布置，學(xué)生討論回答1.怎樣保證網(wǎng)頁界面設(shè)計主題的鮮明性？2.網(wǎng)頁界面設(shè)計使用色彩的作用是什么？色彩主要用來完成哪些工作？3.打開互聯(lián)網(wǎng)，選擇一個網(wǎng)站，根據(jù)所學(xué)知識分析、評測之。五、小結(jié)在實際應(yīng)用中網(wǎng)頁應(yīng)當(dāng)在滿足完成功能的前提下才能講究藝術(shù)，如果一幀頁面無法完成其基本的表現(xiàn)或操作功能，則這樣的頁面再“美”也是無用的，因為網(wǎng)頁的藝術(shù)性、欣賞性是服務(wù)于功能的。了解了網(wǎng)頁界面的設(shè)計技術(shù)和方法，并將其融入自己的思想，消化理解，構(gòu)成自己認識世界、認識設(shè)計的較完整的思維理念，才能有根有據(jù)、有憑有證，由里及表、由表及里地評測、鑒賞和判斷設(shè)計作品的優(yōu)劣。教案首頁授課日期2020.11.17、11.20計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第三章網(wǎng)頁規(guī)劃與布局教學(xué)目的了解網(wǎng)頁的組織結(jié)構(gòu)，掌握網(wǎng)頁內(nèi)容上的組織方法；熟悉網(wǎng)頁設(shè)計的流程和注意事項；熟悉網(wǎng)站設(shè)計，掌握網(wǎng)站與網(wǎng)頁的區(qū)別。教學(xué)內(nèi)容本課程是非計算機專業(yè)的專業(yè)選修課。通過該課程的學(xué)習(xí)，引導(dǎo)學(xué)生了解網(wǎng)頁、網(wǎng)站、主頁和WWW服務(wù)器的基本概念，熟悉建立網(wǎng)站以及發(fā)布網(wǎng)站的步驟和過程；掌握使用可視化網(wǎng)頁制作工具Dreamweaver建立網(wǎng)站、制作網(wǎng)頁的方法；能夠收集制作網(wǎng)頁的多媒體素材，熟悉基本的圖像處理和動畫制作技術(shù)；掌握使用HTML語言的基本知識等。重點網(wǎng)頁規(guī)劃原則，網(wǎng)站規(guī)劃及其步驟；難點網(wǎng)頁規(guī)劃和合理布局。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入3.1網(wǎng)頁的組織結(jié)構(gòu)網(wǎng)頁的內(nèi)容和組織取決于網(wǎng)站的主題和定位。確定了網(wǎng)站的定位和模式，就可以對網(wǎng)頁的內(nèi)容進行組織、規(guī)劃和布局。3.1.1首頁的結(jié)構(gòu) 首頁一般包含主題、徽標(biāo)、企業(yè)精神、經(jīng)營理念、旗幟廣告、首頁鏈接、最新報道、聯(lián)系方式、招賢納士和欄目簡介等。3.1.2一般頁面的結(jié)構(gòu)一般頁面也稱子頁面，其結(jié)構(gòu)往往是依據(jù)要表現(xiàn)的內(nèi)容而定，形式比較單一。頁面的主題突出，取向性強，主要用于描述同一類事情。3.1.3網(wǎng)站頁面的組織結(jié)構(gòu)一般來說，設(shè)計網(wǎng)站常常采用順序結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)或復(fù)合結(jié)構(gòu)來組織頁面。3.2網(wǎng)頁內(nèi)容上的組織3.2.1綜述建設(shè)網(wǎng)站的第一步是收集資料，分門別類，將這些素材合理地分配到由超級連接組織的不同的網(wǎng)頁中，使得自己的網(wǎng)頁能夠吸引眾多的瀏覽者，網(wǎng)頁的內(nèi)容的有效組織是必不可少的。3.2.2組織網(wǎng)頁的方法1.突出個性；2.具有可讀性；3.完整性強；4.布局合理；5.重要信息放置在首頁。3.3網(wǎng)頁設(shè)計流程3.3.2網(wǎng)頁目標(biāo)和風(fēng)格網(wǎng)站包含著眾多內(nèi)容各異，錯綜復(fù)雜的網(wǎng)頁，這些網(wǎng)頁的內(nèi)容組織，材料收集和處理工作通?？梢詮膬蓚€方面入手。一是根據(jù)所需發(fā)布的信息確定主題，每個主題由專人負責(zé)收集相關(guān)資料和內(nèi)容。二是組織、精選一些能突出本網(wǎng)頁特色的內(nèi)容，烘托和突出主題，使本頁面與網(wǎng)站其他網(wǎng)頁有明顯的不同。3.3.3內(nèi)容組織網(wǎng)站內(nèi)容豐富，信息含量大，應(yīng)該運用一定的方式將其條理化，同時在一定程度上加以歸納后重復(fù)利用，使網(wǎng)頁較為整齊，脈絡(luò)清楚，讀起來也有重點。3.3.4頁面的組織原則將頁面含蓋內(nèi)容的整體布局的需要進行分組歸納，進行內(nèi)在聯(lián)系的組織排列，反復(fù)推敲標(biāo)題圖形與整體版面的關(guān)系，創(chuàng)造秩序使版面各元素成為豐富多彩而簡潔統(tǒng)一整體。3.3.5網(wǎng)頁制作見講義內(nèi)容3.3.6測試當(dāng)所有網(wǎng)站頁面制作完成之后，我們需要對每一幀頁面進行審查和測試，測試內(nèi)容主要包括功能性測試和完整性測試兩個方面。3.3.7發(fā)布、推廣整個網(wǎng)站設(shè)計、測試完成以后，就可以去尋找ISP(InternetServiceProvider，互聯(lián)網(wǎng)服務(wù)提供商)，將網(wǎng)站的所有內(nèi)容上載到互聯(lián)網(wǎng)上。載后的網(wǎng)站往往希望大量的瀏覽者訪問，提高自身的知名度，提升網(wǎng)站所有者的形象。我們可以嘗試使用推廣的方法。3.3.8反饋、評測網(wǎng)頁設(shè)計的優(yōu)劣是通過瀏覽者的認可而得出的，我們可以使用計數(shù)器、計時器、留言板、調(diào)查表以及有獎問答等形式收集數(shù)據(jù)，分析網(wǎng)站或某個網(wǎng)頁被訪問的次數(shù)或瀏覽者停留的時間，評測網(wǎng)頁的設(shè)計或內(nèi)容的新穎程度。三、作業(yè)布置（首頁一般包含哪些內(nèi)容？企業(yè)網(wǎng)站的首頁主要應(yīng)該突出哪些方面？網(wǎng)站的頁面之間通常采用什么樣的組織結(jié)構(gòu)？網(wǎng)狀結(jié)構(gòu)有何優(yōu)、缺點？用什么方法解決。四、小結(jié)：設(shè)計出達到用戶目的的網(wǎng)頁，吸引盡可能多的人參觀訪問是一個值得研究的課題材。一定要注重信息的調(diào)整、更新和修改，使網(wǎng)頁內(nèi)容始終處于一個不斷發(fā)展，日趨完善的動態(tài)環(huán)境中。能夠吸引大量的瀏覽者訪問網(wǎng)站只是成功的一半，若以新奇的版式、獨特的內(nèi)容和服務(wù)使瀏覽者再度來訪，或向其他人介紹網(wǎng)址，宣傳網(wǎng)站的內(nèi)容，才可能是真正的成功。教案首頁授課日期2020.11.23、11.24計劃課時8學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第四章網(wǎng)頁設(shè)計創(chuàng)意教學(xué)目的通過對創(chuàng)意思維及創(chuàng)意手法的講解，輔以對優(yōu)秀網(wǎng)頁作品的分析，啟發(fā)學(xué)生全面的創(chuàng)新思維，進而從多角度的思維中獨樹一幟，培養(yǎng)學(xué)生的個性化意識。讓學(xué)生對優(yōu)秀設(shè)計的創(chuàng)意進行解讀和闡釋，并分析其創(chuàng)新之處，鼓勵學(xué)生敢于發(fā)掘新意，提出自己獨到的見解。教學(xué)內(nèi)容通過對創(chuàng)意思維及創(chuàng)意手法的講解，輔以對優(yōu)秀網(wǎng)頁作品的分析，啟發(fā)學(xué)生全面的創(chuàng)新思維，進而從多角度的思維中獨樹一幟，培養(yǎng)學(xué)生的個性化意識。讓學(xué)生對優(yōu)秀設(shè)計的創(chuàng)意進行解讀和闡釋，并分析其創(chuàng)新之處，鼓勵學(xué)生敢于發(fā)掘新意，提出自己獨到的見解。重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué) （約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）4.1網(wǎng)頁創(chuàng)意設(shè)計中的基本要素4.1.1網(wǎng)頁中的文字字體的設(shè)計方法：改變文字大小、比例改變字體形態(tài)文字的三維效果色彩的改變機理及質(zhì)地置換及同構(gòu)文字的組合方法與形式字體的大小組合漢字與拉丁字母的組合漢字與具象形體的組合文字編排的形式4.1.2網(wǎng)頁中的圖像圖像在網(wǎng)頁中所占比例的大小直接影響整個頁面的視覺效果和情感表達。面積大的圖像在畫面中占的份量重，表達情感直接。容易吸引瀏覽者的注意。面積小的圖像通常在頁面中作點綴和呼應(yīng)，表達情感含蓄，給人精巧細致的感覺。4.1.3網(wǎng)頁設(shè)計中色彩的屬性及其應(yīng)用設(shè)計精良的網(wǎng)站總有其色調(diào)構(gòu)成的總體傾向,以一種顏色或幾種臨近顏色為主導(dǎo),使全呈現(xiàn)在某種和諧、統(tǒng)一的色彩傾向，如同人穿衣服。要想恰如其分的表現(xiàn)網(wǎng)頁中的內(nèi)容，在競爭對手脫穎而出的，信息空間的構(gòu)造也需要恰如其分的包裝和表達。4.2網(wǎng)頁創(chuàng)意設(shè)計的程序4.2.1前期策劃明確設(shè)計任務(wù)調(diào)查研究與分析創(chuàng)意開發(fā)修改及定案4.2.2后期更新及維護網(wǎng)站中隨著新信息的加入,老信息的刪除,要不斷的對網(wǎng)頁進行更新并維護,使其能始終正常運行。課堂實操，老師巡查指導(dǎo)（290分鐘）四、作業(yè)布置（約10分鐘）1.簡述圖形圖象的創(chuàng)意技巧。2簡述色彩的性格對突出網(wǎng)頁設(shè)計主題的作用。3.什么是創(chuàng)新性思維？五、小結(jié)（約10分鐘）通過對創(chuàng)意方法和創(chuàng)意步驟的了解，使學(xué)生掌握創(chuàng)意元素的搭配及創(chuàng)意的技巧。從而增強學(xué)生欣賞美和創(chuàng)造美的能力，創(chuàng)作出優(yōu)秀的、具有吸引力的作品。教案首頁授課日期2020.11.27、11.30計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第五章網(wǎng)頁編程語言教學(xué)目的5.1.1HTML的基本結(jié)構(gòu)文本標(biāo)記語言結(jié)構(gòu)簡單，語法較松散，易學(xué)易用。它是一種文字處理語言，而不是“程序”語言。超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。序（HTML的版本聲明）是超文本標(biāo)記語言的附加標(biāo)記，放在HTML文檔的第一行。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>

其中，x代表標(biāo)記名稱。<x>和</x>就如同一組開關(guān)：起始標(biāo)記<x>為開啟(ON)的某種功能，而結(jié)束標(biāo)記</x>(通常為起始標(biāo)記加上一個斜線/)為關(guān)(OFF)功能，受控制的文字信息便放在兩標(biāo)記之間。例如：<i>這是斜體字</i>。標(biāo)記之中還可以附加一些屬性(Attribute)，用來完成某些特殊效果或功能。例如：<xa1="v1",a2="v2",...,an="vn">受控文字</x>其中，a1,a2,...,an為屬性名稱，而v1,v2,...,vn則是其所對應(yīng)的屬性值標(biāo)記(Tags)和屬性(Attributes)構(gòu)建了HTML的語法。瀏覽器只要讀到HTML的標(biāo)記和屬性，就會將其解釋成網(wǎng)頁或網(wǎng)頁的某個組成部分，5.1.3HTML語言的常用標(biāo)記具體內(nèi)容見講義三、課堂實操，老師巡查指導(dǎo)（約200分鐘）四、作業(yè)布置（約10分鐘）1.超文本標(biāo)記語言HTML大約是在那一年發(fā)布的？2.HTML語言的文件結(jié)構(gòu)可分為那三個部分？五、小結(jié)（約10分鐘）超文本標(biāo)記語言HTML是學(xué)習(xí)網(wǎng)頁制作的基礎(chǔ)，但這也是藝術(shù)專業(yè)學(xué)生感覺最吃力的部分。教師必須幫助學(xué)生轉(zhuǎn)變形象思維習(xí)慣，逐步熟悉、理解HTML語法。教案首頁授課日期2020.12.1、12.4計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題實驗項目一用HTML制作簡單網(wǎng)頁教學(xué)目的掌握HTML文檔的基本結(jié)構(gòu)、標(biāo)記和標(biāo)記屬性的概念及作用；學(xué)會使用文本編輯軟件建立和編輯HTML文檔的方法；能夠使用標(biāo)記在網(wǎng)頁中插入和編輯基本的網(wǎng)頁元素；能夠利用表格標(biāo)記建立和編輯表格，學(xué)會在表格中使用其他網(wǎng)頁元素。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）實驗項目一用HTML制作簡單網(wǎng)頁【學(xué)習(xí)目的】重點講解了文本的修飾、插入圖像、超鏈接的建立這三部分，通過學(xué)習(xí)，學(xué)生應(yīng)掌握如何向網(wǎng)頁中添加文本、插入圖像并建立超鏈接等內(nèi)容。一、案例導(dǎo)入：西部旅游網(wǎng)該網(wǎng)站實例包含了若干個網(wǎng)頁，在網(wǎng)頁中添加文本、插入圖像、建立超鏈接，涉及到的知識點有以下幾點：頁面屬性的設(shè)置及文本的修飾；插入圖像，插入圖像對象實現(xiàn)特效；多個網(wǎng)頁之間建立超鏈接。二、頁面屬性的設(shè)置選擇“修改”菜單｜“頁面屬性”命令，彈出“頁面屬性”對話框。設(shè)置相應(yīng)的參數(shù)。三、文本的修飾１、輸入文本2、插入水平線3、文本特殊格式：上標(biāo)和下標(biāo)4、文本屬性的設(shè)置5、段落格式的設(shè)置6、列表格式的設(shè)置7、滾動文本四、設(shè)置超級鏈接1、URL地址2、超鏈接的分類頁面鏈接錨記鏈接空鏈接電子郵件鏈接3、選擇鏈接目標(biāo)五、使用圖像圖像是網(wǎng)頁中非常重要的元素，網(wǎng)頁中添加精致、美觀的圖像，會使網(wǎng)頁變得豐富多彩。在插入圖像時，首先要考慮圖像在頁面中的整體效果，其次應(yīng)綜合考慮圖像的質(zhì)量和下載速度。目前網(wǎng)頁中支持的圖像格式有以下三種：Gif：索引顏色格式，最多支持256色，為無損壓縮，有透明處理的功能，支持動畫效果。Jpg：聯(lián)合圖像專家組，有較高的壓縮比，屬有損壓縮，要選擇合適的壓縮品質(zhì)，支持真色彩。Png：可移植網(wǎng)絡(luò)圖形，是專門針對Web開發(fā)的無損壓縮圖像，支持真色彩和透明處理。1、插入圖像2、設(shè)置圖像屬性3、制作圖像映射三、課堂實操，老師巡查指導(dǎo)（約200分鐘）四、作業(yè)布置（約10分鐘）1.運用HTML語言制作一個簡單的靜態(tài)網(wǎng)頁。五、小結(jié)（約10分鐘）重點講解了文本的修飾、插入圖像、超鏈接的建立這三部分，通過學(xué)習(xí)，學(xué)生應(yīng)掌握如何向網(wǎng)頁中添加文本、插入圖像并建立超鏈接等內(nèi)容。教案首頁授課日期2020.12.7、12.8計劃課時8學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第五章網(wǎng)頁編程語言5.2CSS層疊樣式表教學(xué)目的了解CSS的定義、概念和作用；理解CSS樣式表的作用和意義；掌握CSS樣式表的結(jié)構(gòu)；掌握在網(wǎng)頁中添加CSS的方法。掌握三種添加樣式信息的方法，會使用CSS設(shè)置網(wǎng)頁格式和列表的格式。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）5.2CSS層疊樣式表5.2.1層疊樣式表簡介CSS樣式表是由一系列樣式選擇器和CSS屬性組成，它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、列表屬性以及精確定位網(wǎng)頁元素屬性等，增強了網(wǎng)頁的格式化功能。使用CSS樣式表的另一個優(yōu)點是可以利用同一個樣式表對整個站點的具有相同性質(zhì)的網(wǎng)頁元素進行格式修飾，當(dāng)需要更改樣式設(shè)置時，只要在這個樣式表中修改，而不用對每個頁面逐個進行修改，簡化了格式化網(wǎng)頁的工作。利用CSS樣式還可以代替表格進行網(wǎng)頁布局，這是目前較為流行頁面排版方式。5.2.2創(chuàng)建層疊樣式表選擇器類型有以下三種：(1)類(2)標(biāo)簽(3)高級定義的位置有以下三種情況：選擇“僅為該文檔”，此時CSS樣式的代碼會嵌套在網(wǎng)頁<head>和</head>標(biāo)簽中。選擇“新建樣式表文件”，則彈出“保存樣式表文件為”對話框，選擇樣式文件的存儲路徑和文件名，單擊“保存”按鈕，將CSS樣式代碼單獨存放在一個CSS文件。選擇“已有的某CSS文件”，將新建的CSS規(guī)則寫入已有的CSS文件中。5.2.3層疊樣式表的結(jié)構(gòu)樣式規(guī)則：定義元素內(nèi)文本的樣式。例如，可以創(chuàng)建一個樣式規(guī)則，指定所有<H2>標(biāo)題的顏色都為暗綠色，還可以對選定的網(wǎng)頁部分應(yīng)用樣式規(guī)則。例如，可以指定網(wǎng)頁的某一特定段落顯示為粗體。樣式規(guī)則示例如下：H2{color:limegreen;}規(guī)則的第一部分稱為選擇器。每個選擇器都有屬性以及對應(yīng)的屬性值。上面的示例中H2是規(guī)則選擇器。大括號內(nèi)的部分稱為聲明。聲明由兩部分組成：冒號前面的部分是屬性，后面的部分是該屬性的值。例如：H1{color:blue;}其中，H1為選擇器，color:blue為聲明。在該聲明中，color是屬性，blue是屬性值。5.2.4層疊樣式表應(yīng)用樣式表可用于：覆蓋瀏覽器的默認設(shè)置：每個瀏覽器都有其獨特的網(wǎng)頁顯示方式。早先，開發(fā)人員無法控制瀏覽器中網(wǎng)頁的顯示方式。通過使用樣式表，用戶可以使用自己的設(shè)置覆蓋瀏覽器的常規(guī)設(shè)置。頁面布局：使用樣式表可以指定顯示的字體、修改文本的顏色等，而無需更改網(wǎng)頁結(jié)構(gòu)。這意味著設(shè)計人員可以將網(wǎng)頁的視覺設(shè)計從網(wǎng)頁的邏輯設(shè)計中分離出來，對二者分別進行設(shè)計。多個文檔鏈接到一個樣式表上：可以將樣式表存成一個單獨的文檔，然后將其鏈接到多個網(wǎng)頁中，這樣會使這些網(wǎng)頁具有相同的外觀，而且，對樣式表進行修改時，所有與該樣式表鏈接的文檔都會體現(xiàn)所做的修改。三、課堂實操，老師巡查指導(dǎo)（約290分鐘）四、作業(yè)布置（約10分鐘）1．試述三種創(chuàng)建CSS樣式表的方法。2．HTML在使用獨立的樣式表文件時，可以采用哪些方法？試舉例說明。3.在組成CSS樣式表的規(guī)則中有哪些選擇器？各有什么區(qū)別？五、小結(jié)（約10分鐘）這一部分包含很多CSS樣式表定義規(guī)則的內(nèi)容，依據(jù)各種應(yīng)用范例來講解效果更直觀。CSS樣式表是本課程十分重要的一個部分，必須讓學(xué)生掌握。教案首頁授課日期2020.12.11、12.14計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題實驗項目二CSS樣式表的應(yīng)用教學(xué)目的進一步了解CSS樣式的概念與作用；了解CSS樣式的格式規(guī)則及樣式類型；掌握CSS樣式設(shè)置與管理方法；掌握在網(wǎng)頁設(shè)計與維護中應(yīng)用CSS樣式的方法。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）實驗項目二CSS樣式表的應(yīng)用背景知識根據(jù)本章所學(xué)的CSS樣式表的知識，再綜合前面所學(xué)的創(chuàng)建站點及編輯網(wǎng)頁的知識，制作精美的網(wǎng)頁及應(yīng)用CSS擴展功能。實驗準備工作:素材、網(wǎng)頁元素及網(wǎng)頁樣圖，發(fā)送到學(xué)生的主機中。實訓(xùn)要求利用CSS樣式表制作精美的網(wǎng)頁。要求：根據(jù)給定的素材，首先設(shè)置頁面屬性其次定義特定Id的DIV標(biāo)簽的CSS樣式，然后插入DIV標(biāo)簽，在DIV中插入內(nèi)容，最后通過定義類，設(shè)置圖像CSS樣式。在網(wǎng)頁中添加CSS擴展效果：濾鏡要求：制作：投影字體、發(fā)光字體、圖像的透明效果、圖像的波浪效果等。課時安排：2課時實訓(xùn)指導(dǎo):具體步驟見講義三、課堂實操，老師巡查指導(dǎo)（約200分鐘）四、作業(yè)布置（約10分鐘）課后完善實驗項目二的網(wǎng)頁制作。五、小結(jié)（約10分鐘）這一部分包含很多CSS樣式表定義規(guī)則的內(nèi)容，依據(jù)各種應(yīng)用范例來講解效果更直觀。CSS樣式表是本課程十分重要的一個部分，必須讓學(xué)生掌握。教案首頁授課日期2020.12.15、12.18計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第五章網(wǎng)頁編程語言復(fù)習(xí)課教學(xué)目的回顧第五章的重要知識點；要求學(xué)生結(jié)合兩次實驗課講述自己的體會。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）復(fù)習(xí)課內(nèi)容：學(xué)生講述學(xué)習(xí)本周的心得體會。教師講評學(xué)生實驗項目一、實驗項目二作品中的主要問題。教師回顧本章的主要內(nèi)容：HTML的基本結(jié)構(gòu)HTML語言的語法HTML語言的常用標(biāo)記創(chuàng)建層疊樣式表層疊樣式表的結(jié)構(gòu)層疊樣式表應(yīng)用三、課堂實操，老師巡查指導(dǎo)（約200分鐘）四、作業(yè)布置（約10分鐘）課后完善實驗項目二的網(wǎng)頁制作。五、小結(jié)（約10分鐘）這本章內(nèi)容豐富并且十分重要，有必要安排復(fù)習(xí)課幫助學(xué)生回顧、消化所學(xué)知識。教案首頁授課日期2020.12.21、12.22計劃課時8學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第六章網(wǎng)頁制作工具6.1.1Dreamweaver介紹6.1.2網(wǎng)頁屬性和頁面排版教學(xué)目的建議教師采用任務(wù)驅(qū)動方法，利用多媒體直接在工具軟件中進行可視化操作。應(yīng)先給出實例，并給學(xué)生演示運行后的結(jié)果，然后在工具軟件中逐步實現(xiàn)。。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）6.1Dreamweaver6.1.1Dreamweaver介紹Dreamweaver是Macromedia公司開發(fā)的，是制作網(wǎng)頁的工具,功能強大，內(nèi)容復(fù)雜。一、DreamweaverCS3版本的工作界面程序的主界面大致可分為下面幾個區(qū)域：1、菜單欄、2、“文檔”工具欄、3、“插入”欄、4、“標(biāo)準”欄、5、編輯區(qū)、6、狀態(tài)欄和各個面板。菜單欄：提供了全部的Dreamweaver命令。插入欄：在插入欄中包含了多個選項卡，每個選項卡中都提供了可插入到文件中的對象。文檔工具欄：代碼視圖、代碼與設(shè)計視圖、設(shè)計視圖、動態(tài)數(shù)據(jù)庫視圖標(biāo)題：輸入標(biāo)題即可。在瀏覽器中預(yù)覽：在瀏覽器中預(yù)覽頁面。F12標(biāo)準欄：包含新建、打開、保存、全部保存等。編輯區(qū)：在此區(qū)域內(nèi)可對網(wǎng)頁進行可視化編輯?！皩傩浴睓z查器：根據(jù)選定的對象不同，屬性檢查器中將自動切換相應(yīng)的選項，供用戶對其進行設(shè)置狀態(tài)欄：1、顯示窗口大小2、顯示此網(wǎng)頁的下載時間。(1)創(chuàng)建網(wǎng)頁后，首選需要設(shè)置頁面的屬性：“修改/頁面屬性”或“右擊編輯區(qū)－頁面屬性”。“標(biāo)題”欄設(shè)置的是頁面標(biāo)題。“背景圖像”：為網(wǎng)頁添加背景圖片。“背景”：背景顏色，默認為白色?！拔谋尽保悍擎溄游淖值念伾?。“鏈接”：鏈接文字的顏色?！霸L問過的鏈接”：已經(jīng)被單擊過的鏈接文字的顏色。“活動鏈接”：正在被單擊的鏈接文字的顏色。“左邊界”和“右邊界”：設(shè)置左部及頂部的頁邊距。“邊界寬度”：即內(nèi)容與左右邊框的距離。“邊界高度”：即內(nèi)容與上下邊框的距離。“打開”和“保存”文件。在Dreamweaver中，可以同時對多個文檔同時編輯。（2）使用文本：1、輸入和修改文本：屬性面板。2、輸入連續(xù)空格：Control+Shift+空格鍵3、輸入特殊字符：在插入欄中，選擇字符。4、查找替換文字：“編輯－查找和替換”5、段落的對齊：縮進和反縮進6、使用列表：有序列表和無序列表二、站點的定義由教師操作演示如何定義站點。三、創(chuàng)建頁面（約290分鐘）由教師操作演示如何創(chuàng)建頁面，學(xué)生實操四、作業(yè)布置（約10分鐘）1、復(fù)習(xí)本節(jié)課內(nèi)容五、小結(jié)（約10分鐘）本章包含了Dreamweaver軟件的大部分操作指令，要求學(xué)生課后多復(fù)習(xí)多練習(xí)。教案首頁授課日期2020.12.25、12.28計劃課時6學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第六章網(wǎng)頁制作工具6.1.3~6.1.7教學(xué)目的建議教師采用任務(wù)驅(qū)動方法，利用多媒體直接在工具軟件中進行可視化操作。應(yīng)先給出實例，并給學(xué)生演示運行后的結(jié)果，然后在工具軟件中逐步實現(xiàn)。。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）6.1Dreamweaver6.1.3Dreamweaver表格基礎(chǔ)設(shè)置表格包含以下三個基本元素：行、列、單元格表格的格式控制能力使設(shè)計者可以使用表格來構(gòu)造網(wǎng)頁的框架。先使用較大的表格對網(wǎng)頁的版面進行大致的控制，再使用嵌套的表格對細節(jié)進行刻畫。（1）插入表格的方法：“插入欄”－“表格”單元格填充：單元格的邊框和其中內(nèi)容之間的空白，它的默認值為“1”個像素。單元格間距：單元格與單元格的距離，默認值為“2”個像素。（2）選擇表格元素：選擇表格選擇行選擇列選擇單元格（3）處理表格的行和列：略（4）處理單元格：略（5）設(shè)置邊框和背景：作一個立體表格：制作只有1個像素的表格：細線表格的制作：制作圓角表格：用fireworks四張圓角圖片。格式化表格：“命令－格式化表格”（6）排序表格：“命令－排序表格”6.1.4Dreamweaver頭元素的設(shè)置和表單的工作原理一、用頭元素設(shè)置網(wǎng)頁信息：Dreamweaver定制網(wǎng)頁過渡功能：

網(wǎng)頁過渡是指當(dāng)瀏覽者進入或離開網(wǎng)頁時，頁面呈現(xiàn)的不同的刷新效果，比如卷動、百葉窗等。這樣你的網(wǎng)頁看起來會更具有動感，不過也要注意適可而止，否則太花哨的變化也容易引起瀏覽者的反感。插入關(guān)鍵字：為了使已經(jīng)上傳到服務(wù)器上的網(wǎng)站能夠在搜索軟件中搜索出來，以提高網(wǎng)站的知名度，如：本網(wǎng)站的標(biāo)題輸入一個關(guān)鍵字檢索時，在搜索引擎上不僅可以查到很多網(wǎng)站，還可以查到很多網(wǎng)頁，大部分搜索引擎在查詢網(wǎng)頁時都是根據(jù)頭元素里的關(guān)鍵字來進行搜索的，顯示的內(nèi)容是在頭元素中的說明。二、使用表單：可以用表單來收集一些必需的個人資料，在電子商場購物時，收集每個網(wǎng)上顧客的關(guān)鍵詞然后提交到服務(wù)器上。從表單工作過程中可以看到，表單的開發(fā)可以分成兩個部分，一是具體在網(wǎng)頁上制作必需的表單項目，這一部分稱為前端，主要是在Dreamwaver進行，另一部分是編制如何處理這些信息的程序，這一部分稱為后端，主要是用具體的解釋或編譯程序制作(Perl,ASP,C,Jave)6.1.5Dreamweaver表單元素一個表單可以分為兩部分：一是Form標(biāo)簽，一是表單元素?；蠪orm標(biāo)簽主要表示提交的方式以提交給的程序，表單元素供瀏覽者填寫各種表單內(nèi)容。如果沒有Form標(biāo)簽，在測試表單時顯示都是正確的，但是絕對不可完成提交工作。由教師演示講解以下操作：插入一個空表單刪除表單插入/設(shè)置文本域插入/設(shè)置復(fù)選框插入/設(shè)置單選按鈕插入/設(shè)置單選按鈕組插入/設(shè)置列表/菜單插入/設(shè)置按鈕插入/設(shè)置圖形按鈕6.1.6插入多媒體元件及怎樣制作相冊在“插入欄”的“多媒體”中選擇“插件”。由教師演示講解以下操作：在網(wǎng)頁中加入音頻加入背景音樂"插入flash動畫插入flash文本插入flash按鈕插入fireworksHTML插入日期：插入－日期創(chuàng)建網(wǎng)頁相冊6.1.7Dreamweaver中的CSS窗口上方有“應(yīng)用樣式”和“編輯樣式”兩個選項，如果當(dāng)前選中應(yīng)用樣式，當(dāng)點擊某個樣式的時候，該樣式將應(yīng)用到當(dāng)前頁面選中的部分。如果當(dāng)前選中“編輯樣式”，當(dāng)點擊某個樣式的時候就會編輯該樣式模式。介紹窗口下方4個按鈕：第一個按鈕為附加樣式表，加入一個外部樣式表。第二個按鈕為新建樣式表，一般通過這個按鈕來創(chuàng)建新的CSS樣式表。第三個按鈕為編輯樣式表，點擊后會彈出編輯樣式表對話框，顯示了所有已存在的內(nèi)部和外部樣式表，可以在這個對話框里新建、編輯、刪除樣式。第四個按鈕：刪除樣式。詳細介紹CSS規(guī)則定義對話框的8張選項卡：類型；背景；區(qū)塊；方框；邊框；列表；定位；擴展。三、由教師操作演示如何創(chuàng)建頁面，學(xué)生實操（約200分鐘）四、作業(yè)布置（約10分鐘）1、復(fù)習(xí)本節(jié)課內(nèi)容五、小結(jié)（約10分鐘）本章包含了Dreamweaver軟件的大部分操作指令，要求學(xué)生課后多復(fù)習(xí)多練習(xí)。教案首頁授課日期2020.12.28、12.29計劃課時8學(xué)時授課班級19中級廣告設(shè)計班審批簽字課題第六章網(wǎng)頁制作工具6.1.8~6.2.3教學(xué)目的建議教師采用任務(wù)驅(qū)動方法，利用多媒體直接在工具軟件中進行可視化操作。應(yīng)先給出實例，并給學(xué)生演示運行后的結(jié)果，然后在工具軟件中逐步實現(xiàn)。。教學(xué)內(nèi)容HTML是標(biāo)準通用標(biāo)記語言(StandardGeneralizedMarkupLanguage，SGML)的一個子集，是標(biāo)記的集合。一般標(biāo)記是由一個起始標(biāo)記(OpeningTag)和一個結(jié)束標(biāo)記(EndingTag)所組成，其語法為：<x>受控文字</x>重點啟發(fā)學(xué)生全面的創(chuàng)新思維，培養(yǎng)學(xué)生的個性化意識。難點如何掌握不同性質(zhì)網(wǎng)頁的創(chuàng)意設(shè)計技巧。教學(xué)方法講授法為主教具電腦參考教材基本教材：《DreamweaverCS3+HTML超炫網(wǎng)頁設(shè)計與制作》胡菘.中國青年出版社參考資料：《精通CSS+DIV網(wǎng)頁樣式與布局》前沿科技曾順編著.人民郵電出版社《網(wǎng)頁制作實用教程》張淑清主編.人民郵電出版社．《網(wǎng)頁制作循序漸進教程》龍騰科技編著．兵器工業(yè)出版社備注教學(xué)過程第1頁一、組織教學(xué)（約10分鐘）1、檢查各機位表的就座情況，考勤并登記；2、及時給電腦有故障的個別學(xué)生調(diào)整機位，做好學(xué)習(xí)準備。3、考勤二、新課題引入（約40分鐘）6.1Dreamweaver6.1.8層由教師演示講解以下操作：（1）建立層：默認情況下，插入層的標(biāo)簽是DIV，這個標(biāo)簽在IE與Navigator中都支持。(2)建立一個嵌套的層：層的嵌套和表格的嵌套有些類似，就是在層里面再建立一個層。層的關(guān)系：它們可以有兩種關(guān)系，重疊（并列）與嵌套。并列就是指兩層是獨立的，任何一個層改變不會影響其它層。嵌套：父層改變屬性會影響子層的屬性。（3）建立一個完全處于父層之外的子層：不能在直接在父層之外建立子層的方法來建立，只能在父層之內(nèi)建立子層后，再將子層拖出父層。（4）改變層的屬性：用鼠標(biāo)直接拖運“層”的大小在屬性面板中輸入寬和高（5）用“Z軸”改變層的次序：（6）設(shè)置“溢出”選項：“溢出”選項是指當(dāng)層中的元素超出層的邊界時，如何處理。其中visible是不管層的邊界，顯示所有元素：hidden則是不顯示超出邊界的內(nèi)容：scroll是層的右方和下方出現(xiàn)滾動條而不論元素是否溢出，auto則是當(dāng)層中元素溢出時才出現(xiàn)滾動條。（7）層的剪輯：所謂剪輯就是保持一幅圖畫的完整性，而只顯示其中的一部分。對層也可以進行剪輯處理，只要指定需要剪輯的最左、最右、最上、最下的坐標(biāo)即可。（8）層面板：強烈推薦大家在用層的時候?qū)ⅰ皩印泵姘宕蜷_并使用。6.1.9行為行為是事件和動作的組合。事件是在特定的時間或是用戶在某時所發(fā)出的指令后緊接著發(fā)生的，例：網(wǎng)頁下載完畢，按下鍵盤，單擊鼠標(biāo)等。而動作是在事件發(fā)生后所要作出的反應(yīng)，例：打開的瀏覽器窗口、彈出菜單、播放音樂等。由教師演示講解以下操作：1、播放聲音：2、打開瀏覽器窗口：3、彈出信息：4、改變屬性:5、改變時間軸:6、拖動層：onmouseover(鼠標(biāo)經(jīng)過時拖動)7、設(shè)置文本：狀態(tài)欄中的顯示內(nèi)容！8、驗證表單：9、選擇超聯(lián)接文字，然后添加行為－顯示彈出式菜單。6.1.10模版與框架一、使用模板：由教師演示講解以下操作：1、創(chuàng)建模板：2、編輯模板：3、模板的使用與修改：（1）將模板應(yīng)用到文件中：（2）與模板脫離（3）用模板更新網(wǎng)頁和網(wǎng)站：二、框架框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁?？蚣苡蓛蓚€主要部分組成－框架集和單個框架?？蚣芗窃谝粋€文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，單個框架是指在網(wǎng)頁上定義的一個區(qū)域。<查看>－＜可視化助理＞－＜框架邊框＞使框架邊框在編輯窗口中可見。按住Alt鍵拖曳任意一條框架邊框，可以垂直或水平分割文檔。<文件>－＜保存全部＞首先保存框架集文件。依次要保存框架集中的其他頁面。保存對應(yīng)頁面的時候，該部分都將以虛線框顯示。保存的頁數(shù)為X＋1個網(wǎng)頁。由教師演示講解關(guān)于框架的操作。6.2Fireworks6.2.1Fireworks簡介Fireworks是一個強大的網(wǎng)頁圖形設(shè)計工具，使用它創(chuàng)建和編輯位圖、矢量圖形，還可非常輕松的做出各種網(wǎng)頁設(shè)計中常見的效果，比如動畫、翻轉(zhuǎn)圖像、導(dǎo)航條、下拉菜單等，設(shè)計完成以后，如果在網(wǎng)頁設(shè)計中使用，可將它輸出為HTML文件，還能輸出在Photoshop,Illustrator和Flash等軟件中編輯的格式。6.2.2圖形優(yōu)化和導(dǎo)出圖形在圖像插入到網(wǎng)頁之前，一般需要將圖像進行處理。在Fireworks中處理圖像一般遵循以下流程：創(chuàng)建圖形和圖像→創(chuàng)建Web對象→優(yōu)化圖像→導(dǎo)出圖像。6.2.3切片工具的使用為了獲取較高的下載速度，通常將網(wǎng)頁中存在的較大圖像切分成多個圖片，即切片，在下載網(wǎng)頁時對