網頁設計與制作教學大綱一、課程的地位與性質“網頁設計與制作”是高職電子商務專業的職業技能課，重點講述網頁設計與制作的基礎知識、基本理論和基本技能，是一門包含了網頁、網站的概念、網頁主要工具軟件HTML、dream weaver中文版的使用以及網頁制作的拓展內容（Flash、Firework）等諸多知識的操作性極強的技能型應用課程。“網頁設計與制作”以“電子商務信息技術與應用”、“計算機輔助平面設計”為前期基礎課程，也是“電子商務網站規劃與管理”和“動態網頁設計與制作”等課程的前期基礎課程。二、課程的任務與目的通過對網頁設計與制作基礎知識和技能的學習,使學生系統了解網頁、網站的概念、網頁主要工具軟件dream weaver的使用等基礎知識，掌握網頁制作的拓展內容Flash、Firework，熟練運用網頁制作的工具軟件，使學生具有網頁、網站制作的知識與能力，具備應用電腦獨立開發網頁、網站并將網站上傳并測試的技能，具備解決網頁設計、網站開發中出現各種問題的能力。本課程培養學生的職業素養和創新能力，為日后走向工作崗位打下理論與實踐基礎。通過本課程的學習實現學生思想過硬、理論基礎扎實、實際工作能力強的教學目標。三、課程總體結構、教學環節和課時分配章課程內容課 時小計講授實驗案例其他1概述2202HTML10463Dream weaver基礎2114網頁中的基礎元素6335網頁頁面布局164126表單的應用4227網頁中的層和時間軸2118在網頁中使用行為4229CSS樣式使用82610網頁中的多媒體應用21111模板和庫21112站點測試和發布21113Flash 簡介2081214Fireworks8簡介可選學生自學合計803248四、教學內容第一章 概述 2學時教學目的：了解網頁及網站基本概念及網頁的基本要素分析教學重點與難點：網頁、網站設計流程，網頁基本要素第一節 網頁和網站 0.5學時一、網頁二、網站三、網頁的基本功能第二節 網頁中的主要元素 0.5學時一、文本二、圖像三、鏈接標志四、其他的基本要素第三節 網頁制作工具 0.5學時一、網頁編輯工具二、網頁圖像編輯工具三、動態網頁技術第四節 網頁設計的基本流程 0.5學時一、網站的設計流程二、網頁的設計與制作三、網頁的測試四、網頁上傳和發布第二章 HTML語言基礎 4學時教學目的：了解HTML文件的基本結構，掌握HTML中文本的編輯及圖像的語法，掌握HTML中各種設置超級鏈接的語法，掌握HTML中表格和框架的基本語法。教學重點與難點：HTML的語法結構、超級鏈接的語法、表格和框架的基本語法。第一節 HTML概述 （與第二節合為1學時）一、HTML簡介二、HTML語法結構第二節 文本的編輯 一、段落標記二、文本標記三、標題顯示等級四、列表第三節 圖像編輯 1學時一、插入圖像二、使用背景圖像第四節 建立超鏈接 1學時一、建立超鏈接二、使用書簽三、標記新窗口和基準鏈接第五節 表格與框架 1學時一、建立表格二、表格屬性三、建立框架四、框架屬性第三章 Dream weaver基礎 1學時教學目的：了解DW8的操作界面及常用命令，掌握規劃和創建站點的操作，掌握基本的網頁操。教學重點與難點：規劃站點的結構、網頁的基本操作第一節 Dream weaver 8工作界面 學時一、啟動和退出Dreamweaver二、Dreamweaver8操作界面第二節 規劃與創建站點 學時一、規劃網站的整體結構二、建立本地站點三、管理本地站點第三節 網頁文件的基本操作 學時一、新建網頁二、保存網頁三、關閉網頁四、打開網頁五、預覽網頁第四章 網頁中的基礎元素 3學時教學目的：通過本章的學習可以掌握在網頁中的文本和段落的設置方法，掌握圖像的插入及其屬性的設置的方法，熟悉頁面屬性的設置，熟悉各種超級鏈接及設置。教學重點與難點：文本和段落的設置文本、圖像的插入及其屬性的設置、超鏈接第一節 在網頁中插入文本 1學時一、插入文本二、設置文本格式三、段落格式的編輯四、設置列表五、簡單的CSS樣式應用第二節 在網頁插入圖像 （與第三節合為1學時）一、插入圖像二、設置圖像屬性三、編輯圖像四、圖像外部編輯五、鼠標經過圖像六、創建導航條第三節 插入其他網頁元素 一、水平線二、日期和時間第四節 設置網頁的頁面屬性 （與第五節合為1學時）一、打開頁面屬性對話框二、設置網頁的標題三、設置網頁的背景四、設置網頁的文本五、設置網頁的邊界第五節 設置超級鏈接 0.5學時一、超鏈接的路徑二、創建基本超鏈接三、錨點鏈接四、熱區鏈接五、電子郵件鏈接第五章 頁面布局規劃 4學時教學目的：學會運用表格進行數據展示及進行網頁布局，學會使用框架結構建立網頁。教學重點與難點：表格的插入、表格的編排和設置、利用表格進行布局第一節 表格的基本操作 1學時 一、插入表格二、添加內容三、選擇表格四、設置表格屬性五、編輯表格的基本操作第二節 表格布局 2學時一、布局視圖二、繪制布局表格和布局單元格三、編輯布局表格和布局單元格第三節 框架布局 1學時一、建立框架二、框架面板三、設置框架的屬性四、保存框架五、框架中的超鏈接第六章 表單的應用 2學時教學目的：表單，可以收集用戶的信息和反饋意見，是網站管理者與瀏覽者之間溝通的橋梁，在本章將學習如何使用表單創建描述表單信息的網頁。教學重點與難點：創建表單、處理表單的方法第一節 創建表單一、表單概述二、表單對象三、插入表單四、表單屬性第二節 創建表單對象一、創建文本域二、創建復選框三、創建單選按鈕四、創建列表/菜單五、創建文件域六、創建跳轉菜單七、創建按鈕八、創建單選按鈕組九、創建圖像域第三節 處理表單一、使用行為驗證表單二、利用郵件傳送表單第七章 網頁中的層和時間軸 1學時教學目的：通過教學，使學生掌握Dream weaver層的概念、層的操作方法；時間軸的概念、時間軸中各元素的功能及時間軸的常用操作方法。教學重點與難點：層的操作方法、時間軸操作方法第一節 層 一、創建層二、層的基本操作三、層與表格的轉換第二節 時間軸 一、認識時間軸二、創建動畫第八章 在網頁中使用行為 2學時教學目的：通過教學，使學生掌握Dreamweaver中行為的概念，熟練掌握使用行為面板對行為的各種操作方法。使用Dreamweaver 的內置行為為網頁對象添加各種常用的行為。教學重點與難點：使用Dreamweaver 的內置行為為網頁對象添加各種常用的行為第一節 認識行為 1學時一、認識行為二、使用行為面板三、增加行為的基本步驟四、修改行為第二節 使用Dreamwerver8內置的行為 1學時（可根據課時來安排是否完全講授）一、播放聲音二、打開瀏覽器窗口三、彈出消息四、轉到URL五、設置狀態欄文本六、拖動層七、顯示隱藏層八、檢查瀏覽器九、改變對象屬性十、控制Shockwave或Flash第九章 CSS樣式使用 2學時教學目的：通過教學，使學生掌握CSS樣式表的基本概念，會使用CSS樣式面板。掌握創建CSS樣式表的方法，新建CSS樣式表，設置CSS樣式定義對話框，創建外部CSS樣式表，使用和編輯自定義CSS樣式表。教學重點與難點：新建和和應用CSS樣式表，CSS經典應用（大字、下劃線）、濾鏡的作用。第一節 CSS樣式概述一、認識CSS樣式二、CSS樣式的類型三、CSS樣式面板第二節 使用CSS樣式一、創建CSS樣式二、附加外部CSS樣式三、應用CSS樣式四、編輯CSS樣式五、刪除CSS樣式第三節 CSS樣式設置（可根據課時來安排是否完全講授）一、類型二、背景三、區塊四、方框五、邊框六、列表七、定位八、擴展第四節 CSS樣式經典實例 一、改變鼠標形狀二、更改超鏈接的樣式三、應用CSS濾鏡第十章 網頁中的多媒體應用 1學時教學目的：通過教學，使學生掌握在Dreamweaver中插入音頻文件的方法，掌握在Dreamweaver中插入Flash文件的方法，掌握在Dreamweaver中嵌入視頻文件的方法。教學重點與難點：在Dreamweaver中插入音頻文件、Flash文件、嵌入視頻文件的方法。第一節 在網頁中插入音頻 一、鏈接到音頻文件二、在網頁中嵌入音頻文件三、在網頁加入背景音樂第二節 在網頁中插入Flash動畫 一、插入Flash文本二、插入Flash按鈕三、插入Flash動畫第三節 在網頁中插入視頻 一、鏈接到視頻文件二、在網頁中嵌入視頻文件第十一章模板和庫 1學時教學目的：通過教學，使學生了解Dreamweaver8模板和庫的作用，掌握模板和庫項目的創建操作，能夠應用模板和庫設計網頁，掌握利用模板和庫更新頁面的方法。教學重點與難點：應用模板和庫設計網頁，利用模板和庫更新頁面。第一節 模板一、創建模板二、刪除模板三、編輯模板四、由模板創建網頁五、更新模板第二節 庫一、創建庫項目二、刪除庫項目三、應用庫項目四、更新庫項目第十二章 站點測試和發布 1學時教學目的：通過教學，使學生掌握站點測試的內容與操作，掌握定義遠程站點的方法，使用Dreamweaver發布站點的操作。教學重點與難點：站點測試、定義遠程站點及發布站點。第一節 測試站點 一、瀏覽器兼容性測試二、超鏈接測試第二節 發布站點 一、申請空間和域名二、發布網站三、站點推廣第十三章 Flash 簡介 8學時教學目的：通過本章的學習，能夠熟悉Flash的操作界面，掌握動畫制作的基本流程，掌握各類動畫的制作方法，掌握在Flash中繪制圖形、建立元件等基本操作。教學重點與難點：在Flash中繪制圖形、建立元件等基本操作，各類動畫的制作方法。第一節 認識Flash 1學時一、Flash的操作界面二、Flash 的主要術語三、文件的基本操作第二節 Flash8 的基本操作 1學時一、繪制基本圖形二、文本的編輯三、建立元件四、導入位圖五、動畫制作流程第三節 制作Flash動畫 6學時一、文字特效二、逐幀動畫三、運動補間動畫四、形狀補間動畫五、引導層動畫六、遮罩動畫七、導出和發布動畫第十四章 Fireworks簡介（拓展內容，可根據學生的接受程序及教學進度來安排是否講授）教學目的：通過本章的學習，能夠熟悉Fireworks的操作界面，了解Fireworks 中的常用面板，并掌握Fireworks 中基本工具的使用方法。教學重點與難點：Fireworks的基本操作、Fireworks圖像處理的基本操作。第一節 認識Fireworks一、Fireworks8操作界面二、文件的基本操作第二節 Fireworks基本操作一、編輯圖像的基本操作二、繪制和編輯位圖對象三、繪制與編輯失量對象四、添加與編輯文本五、樣式的應用六、制作網頁導航實例第三節 Fireworks進階一、圖像的優化與導出二、切片的應用三、創建Gif動畫五、教學建議1、必須以實際出發，密切聯系當前網絡的實際情況，要按照洋為中用、外為我用的精神，認真學習網頁設計知識，加強動手能力的培養，不斷提高解決實際問題的能力。2、在學習中不僅要注重HTML和dreamweaver基本知識的掌握，還要對Flash 的主要概念和操作內容進行模擬和訓練，通過課堂學習、課后練習和模擬實驗、實訓及到業務部門實習，使基本技能的訓練得到加強，培養學生實際操作的能力。3、考試：本課程采取期末考試和