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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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