網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁設(shè)計(jì)基礎(chǔ)本科課程教學(xué)大綱

1、網(wǎng)頁設(shè)計(jì)基礎(chǔ)課程教學(xué)大綱、課程總述本課程大綱是以2008年軟件工程本科專業(yè)人才培養(yǎng)方案為依據(jù) 編制的。課程名稱網(wǎng)頁設(shè)計(jì)基礎(chǔ)課程代碼18572課程性質(zhì)選修課先修課程計(jì)算機(jī)文化基礎(chǔ)、VisualBasic和數(shù)據(jù)庫等總學(xué)時(shí)數(shù)48周學(xué)時(shí)數(shù)3開課院系軟件學(xué)院任課教師邢芳、汪彩霞編寫人邢芳編寫時(shí)間2013.07.1課程負(fù)責(zé)人李華旸大綱主審人李華旸使用教材網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè) 科學(xué)出版社2013年1月教 學(xué) 參 考 資 料參考書目1網(wǎng)頁設(shè)計(jì)與制作李京文等安徽大學(xué)出版社。2. 網(wǎng)頁編程技術(shù)與實(shí)例譚浩強(qiáng)人民郵電出版社。3. Dreamweave， Flash， Fireworks網(wǎng)頁制作二合一培訓(xùn)教程，電 子工業(yè)

2、出版社，2006年1月4. 巧學(xué)巧用Dreamweaver制作網(wǎng)頁人民郵電出版社2004年版。5. 巧學(xué)巧用Flash制作動(dòng)畫曾順 人民郵電出版社2004年版。6. 網(wǎng)頁制作技術(shù) 譚浩強(qiáng) 清華大學(xué)出版社 2002年版。課 程 教 學(xué) 目 的網(wǎng)頁設(shè)計(jì)基礎(chǔ)是為網(wǎng)絡(luò)工程專業(yè)本科生開設(shè)的一門必修課，既可培養(yǎng)學(xué)生多方面的學(xué)習(xí)興趣，又可使學(xué)生掌握網(wǎng)頁制作的基本方法與 技巧。通過本課程的學(xué)習(xí)，學(xué)生應(yīng)了解HTML編輯語言，熟練掌握網(wǎng)頁 制作三劍客的基本操作與使用技巧， 包括用于網(wǎng)頁制作和網(wǎng)站管理的 Dreamweave、用于制作網(wǎng)頁動(dòng)畫的 Flash。課程教學(xué) 要求通過本課程的學(xué)習(xí)，要求學(xué)生達(dá)到知識(shí)和技能兩方

3、面的目標(biāo)。知識(shí)方面 熟練掌握 Web站點(diǎn)的基本概念；熟練掌握HTML標(biāo)記 文檔結(jié)構(gòu)和各種標(biāo)記的作用；掌握Dreamweaver CS5.5頁面設(shè)計(jì)方法 和常用的表單對(duì)象；了解Flash CS5.5基本知識(shí).技能方面熟練掌握利用HTML標(biāo)記進(jìn)行頁面設(shè)計(jì)的方法和技 巧；熟練掌握利用Dreamweaver CS5.5進(jìn)行頁面設(shè)計(jì)與布局的方法和 技巧；掌握利用Flash CS5.5進(jìn)行動(dòng)畫設(shè)計(jì)的方法和技巧.基本知識(shí)要求：1、熟練掌握Flash CS5.5的基本操作和使用技巧。2、熟練掌握Dreamweaver CS5.5的基本操作和使用技巧。 技能要求： 了解使用Dreamweaver CS5.5建立

4、和管理站點(diǎn)的方法； 掌握各種超級(jí)鏈接的創(chuàng)建方法； 掌握通過表格來進(jìn)行網(wǎng)頁頁面的布局方法； 掌握使用框架制作網(wǎng)頁的方法；掌握在網(wǎng)頁中創(chuàng)建、修改層和嵌套層的方法； 掌握利用時(shí)間線制作網(wǎng)頁動(dòng)畫的方法等； 掌握為頁面元素添加行為的方法； 掌握在網(wǎng)頁中制作多媒體的方法； 了解頁面中一些特殊效果的實(shí)現(xiàn)方法。訓(xùn)練要求：運(yùn)用Dreamweaver CS5.5和 Flash CS5.5獨(dú)立制作一個(gè)個(gè)性化的 個(gè)人網(wǎng)頁。課程的教學(xué) 原則和教學(xué) 方法課程的教學(xué)原則和教學(xué)方法：1、理論與實(shí)踐相結(jié)合的原則做到深入淺出，通俗易懂、生動(dòng)活潑；2、采用多媒體演示教學(xué)的方法，把握設(shè)計(jì)教學(xué)的特點(diǎn)，堅(jiān)持以設(shè)計(jì) 帶動(dòng)軟件的學(xué)習(xí)，努力消

5、除教學(xué)中的僵化思想；3、講解與自學(xué)相結(jié)合的原則；4、在熟練掌握制作技巧的同時(shí)，加強(qiáng)對(duì)學(xué)生審美能力的培養(yǎng)，使得 藝術(shù)與技術(shù)并重。本課程的 實(shí)施與組 織課程的實(shí)施與組織本課程的教學(xué)以多媒體網(wǎng)絡(luò)課件作為教學(xué)媒體，采用大屏幕投影 教學(xué)，著重體現(xiàn)理論和實(shí)踐的結(jié)合。授課、上機(jī)操作并結(jié)合具體的設(shè) 計(jì)課題進(jìn)行教學(xué)，及時(shí)解決設(shè)計(jì)中遇到的實(shí)際問題，通過豐富多彩的 范例引起學(xué)生興趣，以設(shè)計(jì)帶動(dòng)軟件的教學(xué)。即講授理論的同時(shí)加入 具體的設(shè)計(jì)項(xiàng)目，力求達(dá)到實(shí)戰(zhàn)的效果。本課程教學(xué)環(huán)節(jié)包括課堂講解演示、課內(nèi)實(shí)驗(yàn)兩部分，為確保及 時(shí)鞏固練習(xí)，建設(shè)全部安排機(jī)房進(jìn)行（具備講課系統(tǒng)）。（1）課堂講解按學(xué)時(shí)分配表（2）實(shí)驗(yàn)安排每次講完

6、后即時(shí)練習(xí)本課程的重點(diǎn)難點(diǎn)重點(diǎn)：1、Dreamweaver CS5.5的人一機(jī)交互界面的組成與使用方法。2、 介紹手工設(shè)置文本格式的方法，如何利用HTML3、樣式和CSS樣式格式化文本的方法。4、全面介紹了在 Dreamweaver中表格的創(chuàng)建、調(diào)整、單元格的編輯 與屬性設(shè)置等操作的方法。5、介紹設(shè)置圖像的對(duì)齊方式、調(diào)整圖象的大小。6、介紹框架網(wǎng)頁的特點(diǎn)、框架網(wǎng)頁的創(chuàng)建、編輯、保存與應(yīng)用方法。7、全面介紹表單的創(chuàng)造、編碼、處理方法，以及各種表單對(duì)象的特 點(diǎn)與使用方法。8 了解圖層的概念、弓1導(dǎo)層的概念、遮罩層的概念以及它們的原理。難點(diǎn)：1、理解站點(diǎn)、網(wǎng)站、網(wǎng)頁及網(wǎng)頁屬性的概念。2、使用HTML

7、樣式和CSS樣式格式化文本。3、Flash CS5.5的簡(jiǎn)單動(dòng)畫、遮罩動(dòng)畫、形變動(dòng)畫以及引導(dǎo)層動(dòng)畫的 制作。課程考試1. 平時(shí)成績(jī)點(diǎn)到（20%）+課堂作業(yè)（20%）40%2. 基礎(chǔ)性實(shí)驗(yàn)報(bào)告30%3. 設(shè)計(jì)性實(shí)驗(yàn)報(bào)告30%、教學(xué)時(shí)數(shù)分配序 號(hào)單元主要內(nèi)容教學(xué)要求學(xué)時(shí)1網(wǎng)頁設(shè)計(jì)基礎(chǔ)理論 教學(xué)1、Internet 基礎(chǔ)2、設(shè)計(jì)你的網(wǎng)頁認(rèn)識(shí) Internet1實(shí)踐 教學(xué)優(yōu)秀網(wǎng)站設(shè)計(jì)賞析網(wǎng)站技術(shù)與藝術(shù)的結(jié)合22HTML標(biāo)記的綜合應(yīng) 用理論 教學(xué)1. HTML語言基本語法2. HTML語言實(shí)現(xiàn)了解HTMI語言的基本概念 與用法4實(shí)踐 教學(xué)1、掌握使用“記事本”編輯HTML的基本操作、并使用Interne

8、tExplorer 測(cè)試HTML文件的操 作。2、掌握 HEAD TITLE、BODY等 基本標(biāo)記符的使用。3、掌握 P、BR HR Hn等標(biāo)記 符的基本用法。4、掌握align屬性的用法。5、掌握FONT標(biāo)記符的用法5、 掌握使用超鏈接標(biāo)記符的使用。6、掌握Table，框架和表單等基 本標(biāo)記符的使用。7、掌握屏幕效果的用法。8制作一個(gè)網(wǎng)頁熟悉：HTML文檔的基本結(jié) 構(gòu)；設(shè)置文本格式；設(shè)置 超鏈接、插入圖形、制作 表格、版面規(guī)劃。熟悉：設(shè)置超鏈接、插入 圖形、制作表格、版面規(guī) 戈嘰HTML語言的實(shí)際應(yīng)用83Flash簡(jiǎn)單動(dòng)畫制作理論 教學(xué)1 時(shí)間軸、幀、關(guān)鍵幀的概念2.動(dòng)畫的實(shí)現(xiàn)原理了解時(shí)間軸

9、與關(guān)鍵幀的概 念及動(dòng)畫的實(shí)現(xiàn)原理2實(shí)踐 項(xiàng)目1 制作直線、曲線、任意運(yùn)動(dòng) 的動(dòng)畫效果2.制作旋轉(zhuǎn)字體的動(dòng)畫效果掌握利用時(shí)間軸制作 flash簡(jiǎn)單動(dòng)畫的方法44Flash技術(shù)綜合應(yīng)用理論 教學(xué)1、圖層的概念2、引導(dǎo)層的概念3、引導(dǎo)動(dòng)畫的原理4、遮罩層與被遮罩層的概念5、遮罩動(dòng)畫的實(shí)現(xiàn)原理6、什么是形變動(dòng)畫7、形變動(dòng)畫的制作方法1、了解圖層的基本概念2、了解Flash MX中圖層 的類型3、掌握對(duì)圖層的各種基本 操作4、掌握引導(dǎo)層的使用方法5、了解遮罩層與被遮罩層 的基本概念6、掌握對(duì)遮罩動(dòng)畫的實(shí)現(xiàn) 原理7、掌握遮罩動(dòng)畫的制作方 法8、掌握形狀漸變動(dòng)畫和動(dòng) 作動(dòng)畫的制作方法，能獨(dú) 立完成簡(jiǎn)單動(dòng)畫的

10、制作5實(shí)踐 項(xiàng)目1、圖層的創(chuàng)建2、圖層與圖層之間的關(guān)系3、引導(dǎo)層的創(chuàng)建4、遮罩層與被遮罩層的創(chuàng)建5、遮罩層與被遮罩層之間的 關(guān)系6、遮罩層的創(chuàng)建7、形狀漸變動(dòng)畫的制作8 綜合采用引導(dǎo)、遮罩和形變 方法制作節(jié)日賀卡制作引導(dǎo)動(dòng)畫2、制作圖層動(dòng)畫3、制作太陽系九大行星 的旋轉(zhuǎn)動(dòng)畫制作遮罩 動(dòng)畫4、制作七彩字動(dòng)畫5、制作煙花效果動(dòng)畫6、了解形變動(dòng)畫是什 么？7、掌握形變動(dòng)畫的原理8、制作形變動(dòng)畫9、根據(jù)已經(jīng)學(xué)習(xí)過的 flash的動(dòng)畫，進(jìn)行綜 合練習(xí)105層與框架的綜合運(yùn) 用理論 教學(xué)1 .層的概念2 層的屬性3行為、事件及動(dòng)作的基本概 念4 行為、事件及動(dòng)作三者之間 的聯(lián)系5、框架網(wǎng)頁介紹6、框架網(wǎng)頁

11、的使用和修改1、掌握各種超級(jí)鏈接的創(chuàng) 建方法2、掌握在網(wǎng)頁中創(chuàng)建、修 改層和嵌套層的方法3、掌握行為、事件、動(dòng)作3個(gè)基本概念4、了解框架網(wǎng)頁與普通網(wǎng) 頁之間的區(qū)別與聯(lián)系；5、掌握框架網(wǎng)頁在創(chuàng)建、 選擇、設(shè)置、存儲(chǔ)與應(yīng)用 方面的特點(diǎn)；6、掌握框架網(wǎng)頁的制作方 法。3實(shí)踐 項(xiàng)目1、制作圖層“顯示與隱藏”效 果2、制作動(dòng)態(tài)下拉菜單3、框架的編輯4、用框架設(shè)計(jì)頁面1、掌握層的特殊屬性2、掌握為頁面元素添加行 為的方法66簡(jiǎn)單圖片切割與組合理論 教學(xué)1. 對(duì) Photoshop 7.0界面進(jìn)行介紹；2. 套索工具，多邊形套索工具以 及磁性套索工具的使用與區(qū)別；1、了解圖像的處理2、掌握如何進(jìn)行摳圖；3、

12、掌握三種套索工具的使 用及屬性參數(shù)設(shè)置4、掌握?qǐng)D層的概念1實(shí)踐 項(xiàng)目1 實(shí)例演示如何對(duì)一張圖片進(jìn) 行局部圖像的套取。1、掌握photoshop的實(shí)際 應(yīng)用2、掌握?qǐng)D像數(shù)字化處理的 基本知識(shí)和基本技能2學(xué)時(shí)合計(jì)理論教學(xué)16實(shí)踐教學(xué)32備注：實(shí)踐項(xiàng)目可根據(jù)具體的情況進(jìn)行適當(dāng)?shù)卦鰷p三、單元教學(xué)目的、教學(xué)重難點(diǎn)和內(nèi)容設(shè)置第一課優(yōu)秀網(wǎng)頁賞析【基本要求】通過本課的學(xué)習(xí)，了解In ternet的一些基礎(chǔ)知識(shí)以及 Web的特性等，還需 要掌握 網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識(shí)、特點(diǎn)和運(yùn)用方法?！局攸c(diǎn)難點(diǎn) 】 重點(diǎn)： 設(shè)計(jì)你的網(wǎng)頁； 難點(diǎn)：1、 Internet 基礎(chǔ)；2、設(shè)計(jì)你的網(wǎng)頁； 第二、三、四和五課 HTML 語言介

13、紹【基本要求 】通過本課的學(xué)習(xí)， 掌握 使用“記事本”編輯 HTML 的基本操作、并使用 Internet Explorer 測(cè) 試 HTML 文件的操作； 掌握 HEAD 、TITLE 、 BODY 等基本標(biāo)記符的使用； 掌握 P、BR、HR、Hn等標(biāo)記符的基本用法；掌握align屬性的用法；掌握FONT標(biāo)記符的用法；掌握HTML 中超級(jí)鏈接標(biāo)志的使用；理解書簽超級(jí)鏈接的意義；掌握target屬性不同取值對(duì)應(yīng)的含義；掌握 制作顯示網(wǎng)頁效果及顯示網(wǎng)頁代碼的網(wǎng)頁，并實(shí)現(xiàn)相互鏈接；熟練掌握 制作網(wǎng)頁 ,并實(shí)現(xiàn)連接?！局攸c(diǎn)難點(diǎn) 】重點(diǎn)：1、 掌握設(shè)置文本格式的方法，能夠在HTML 頁中分段與換行、設(shè)

14、置段落對(duì)齊方式、設(shè)置字 體、字號(hào)和顏色、設(shè)置字符樣式以及插入特殊字符。2、 掌握列表格式的使用方法，能夠在HTML 頁中創(chuàng)建有序列表和創(chuàng)建無序列表。3、掌握在網(wǎng)頁中使用圖像的方法，能夠在網(wǎng)頁中插入圖像、設(shè)置圖像格式與布局以及播放 多媒體文件。4、掌握在網(wǎng)頁中使用字幕和背景音樂的方法，能夠插入字幕和背景音樂并進(jìn)行有關(guān)參數(shù)的 設(shè)置。難點(diǎn)：1、HTML 語言文檔及 HTML 中的表單元素屬性2、HTML 文檔中的絕對(duì)鏈接和相對(duì)鏈接3、程序的三種基本結(jié)構(gòu)4、程序功能實(shí)現(xiàn)第六和七課Flash 簡(jiǎn)單動(dòng)畫制作【教學(xué)要求 】了解： 時(shí)間軸與關(guān)鍵幀的概念掌握： 常用繪圖工具的使用掌握： 幀的概念及相關(guān)操作 掌握

15、： 動(dòng)畫的實(shí)現(xiàn)原理 熟練掌握： 利用時(shí)間軸制作 flash 簡(jiǎn)單動(dòng)畫的方法 【重點(diǎn)難點(diǎn) 】重點(diǎn)：1、幀的種類與其各自的使用2、元件的概念 難點(diǎn)：1、掌握什么是關(guān)鍵幀、過渡幀、空白幀以及狀態(tài)保持幀2、動(dòng)作補(bǔ)間動(dòng)畫的制作【教學(xué)要求 】了解： 圖層的基本概念了解： Flash MX 2004 中圖層的類型了解： 遮罩層與被遮罩層的基本概念掌握： 對(duì)遮罩動(dòng)畫的實(shí)現(xiàn)原理掌握： 遮罩動(dòng)畫的制作方法掌握： 對(duì)圖層的各種基本操作掌握： 引導(dǎo)層的使用方法掌握： 形狀漸變動(dòng)畫和動(dòng)作動(dòng)畫的制作方法，能獨(dú)立完成簡(jiǎn)單動(dòng)畫的制作 熟練掌握： 遮罩的原理熟練掌握： 引導(dǎo)動(dòng)畫的制作熟練： 使用“自由變形工具”和“填充變形工具

16、”【重點(diǎn)難點(diǎn) 】重點(diǎn)：1、圖層與圖層之間的關(guān)系2、引導(dǎo)層的概念3、遮罩的概念4、遮罩動(dòng)畫的實(shí)例5、形變的概念以及其特性6、形變動(dòng)畫的實(shí)例 難點(diǎn)：1、引導(dǎo)層的軌跡的制作2、引導(dǎo)動(dòng)畫的制作3、遮罩層與被遮罩層的遮罩原理4、遮罩動(dòng)畫的制作5、形變動(dòng)畫的制作原理6、形變動(dòng)畫的實(shí)體的特殊性第十三、十四和十五課 層的應(yīng)用和框架的應(yīng)用以及行為 【教學(xué)要求 】 了解： 層的概念； 了解： 行為的概念；了解 框架網(wǎng)頁與普通網(wǎng)頁之間的區(qū)別與聯(lián)系；掌握 框架網(wǎng)頁在創(chuàng)建、選擇、設(shè)置、存儲(chǔ)與應(yīng)用方面的特點(diǎn)；掌握 框架網(wǎng)頁的制作方法。掌握： 層的特點(diǎn)與分類；掌握： 層的用途掌握： .層的插入和繪制層掌握： 行為的相關(guān)屬性

17、熟練掌握： 層屬性設(shè)置【重點(diǎn)難點(diǎn) 】重點(diǎn)：1、 層的用途2、 層的插入和繪制層3、層屬性設(shè)置4、使用層的行為制作下拉菜5、行為設(shè)置等內(nèi)容及如何為一個(gè)對(duì)象附加行為。6、框架網(wǎng)頁的特點(diǎn)、框架網(wǎng)頁的創(chuàng)建、編輯、保存與應(yīng)用。 難點(diǎn)：1、層的顯示隱藏行為屬性內(nèi)：顯示下的屬性 :default inherit （ 在不同瀏覽器下的默認(rèn)狀態(tài) ） visible （ 顯示 ）hidde n（隱藏）溢出下的屬性 :visible （默認(rèn)）hidde n（只顯示原始大小內(nèi)的內(nèi)容）scroll （出現(xiàn)滾動(dòng)條 ）auto （超出范圍自動(dòng)出現(xiàn)滾動(dòng)條） ；2、行為的概念3、框架的運(yùn)用；第十六課 簡(jiǎn)單圖片切割與組合【教學(xué)要求 】掌握： 切割工具等工具的作用及參數(shù)設(shè)置方法掌握： 圖像的基本知識(shí)掌握： 層的概念掌握： 色彩的調(diào)整。【重點(diǎn)難點(diǎn) 】 重點(diǎn)：1、切割工具的使用及其屬性的設(shè)置2、圖像色調(diào)調(diào)整3、圖層使用 難點(diǎn)：1、多種套索工具的使用2、圖層的樣式的使用四、教材網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè) .前沿文化.科學(xué)出版社 .2013 年 01月.五、主要參考資