網(wǎng)頁設(shè)計與制作教學(xué)大綱.doc

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