實操課程教案課程名稱：網頁設計授課班級：19中級廣告設計班授課教師：

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

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

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