網(wǎng)頁(yè)設(shè)計(jì)與制作大綱.doc

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