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

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

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

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

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