一、課程描述及課程目標

（一）課程描述

《網(wǎng)站設(shè)計》課程是面向電氣學院非計算機類專業(yè)的一門專業(yè)選修課,，涉及網(wǎng)頁基礎(chǔ),、HTML 標記、CSS 樣式,、網(wǎng)頁布局,、Javascript 編程基礎(chǔ)與事件處理等內(nèi)容,。通過本課程的學習，學生能夠熟悉Dreamweaver CS6環(huán)境,，學會使用HTML設(shè)計網(wǎng)站的基本頁面,，掌握網(wǎng)站發(fā)布和推廣的方法；通過CSS實現(xiàn)網(wǎng)站的整體變化上的美化和優(yōu)化,，從而改善網(wǎng)站的整體效果,；可以使用Javascript提升網(wǎng)站的靈活性和交互性，學會制作各種企業(yè),、門戶,、電商類網(wǎng)站。

（二）課程目標

本課程為計算機類專業(yè)的專業(yè)基礎(chǔ)課程,，要求學生能夠應用網(wǎng)站設(shè)計的基本知識及技能解決實際問題,，通過本課程的學習，學生應達到下列學習目標:

1.掌握網(wǎng)站設(shè)計的基本知識及技能,，核心能力1.1,。

2.具備使用HTML5+CSS3的基本技能進行網(wǎng)頁程序設(shè)計的能力，核心能力2.1,。

3.具備選擇合適的開發(fā)平臺進行程序設(shè)計的能力,，核心能力2.2,。

4.具備初步的計算機應用程序的設(shè)計能力,，核心能力3.1。

5.能夠?qū)嶒灲Y(jié)果,，通過文字、圖、表的形式撰寫實驗報告,，從而能夠完整表達對實驗原理及實驗內(nèi)容的理解,，核心能力4.1。

6.了解前端網(wǎng)站設(shè)計所涉及到的新技術(shù)和方法及在實際項目中的應用,，核心能力6.1,。

7.能夠主動做好課前預習和課后實踐，養(yǎng)成自主學習的意識和提高不斷學習的能力,，核心能力6.2,。

8.在教師的指導下，通過綜合實驗訓練遵守職業(yè)規(guī)范和道德,，訓練嚴謹?shù)膶I(yè)學習及工作習慣,，核心能力7.1。

二,、課程內(nèi)容

（一）項目1網(wǎng)頁制作基礎(chǔ)知識

主要知識點:

【任務1-1】 了解Web基本概念

【任務1-2】　網(wǎng)頁制作入門

【任務1-3】　Dreamweaver工具的使用

教學要求:通過本章的學習,，使學生了解 Web 標準及基本概念,，熟悉 HTML、CSS 及 Javascript 語言的發(fā)展歷史,，掌握 Dreamweaver 工具的基本操作,，能夠使用 Dreamweaver 創(chuàng)建簡單的網(wǎng)頁。

重點:Web標準,、HTML語言,、CSS語言和Javascript語言簡介、創(chuàng)建第一個網(wǎng)頁

采用的教學方法:任務驅(qū)動式教學,。

講授學時:1學時

實踐學時:0.5學時

（二）項目2　“說旅游”專題頁制作

主要知識點:

【任務2-1】認識HTML

【任務2-2】HTML文本控制標記

【任務2-3】HTML圖像標記

教學要求:通過本章的學習,，使學生掌握 HTML 文檔結(jié)構(gòu)，了解 HTML 文檔頭部相關(guān)標記,，熟悉 HTML 文本控制標記,，熟悉 HTML 文本控制標記，掌握圖文混排頁面的制作技巧,，學會制作圖文混排頁面,。，

重點:HTML 標記（單標記與雙 標記,，標題和段落標記,，div標記，常用圖像格式,，切片,。

難點:標記屬性，div標記,。

采用的教學方法:任務驅(qū)動式教學,。

講授學時:1學時

實踐學時:0.5學時

（三）項目3　 “網(wǎng)上花店”專題頁制作

主要知識點:

【任務3-1】CSS核心基礎(chǔ)

【任務3-2】CSS控制文本

【任務3-3】CSS高級特性

教學要求:通過本章的學習，使學生了解 CSS 樣式規(guī)則,，掌握 CSS 字體樣式及文本外觀屬性,，熟悉 CSS 復合選擇器，掌握 CSS 層疊性,、繼承性與優(yōu)先級,，掌握引入 CSS 樣式表的不同方式，學會控制頁面中的文本外觀樣式,。

重點:引入 CSS 樣式表（行內(nèi),、 內(nèi)嵌、鏈入）,，CSS 基礎(chǔ)選擇器,，CSS 字體樣式屬性，CSS 文本外觀屬性，CSS 定義背景顏色,，CSS 復合選擇器（標簽指 定,、后代、并集）,，CSS 優(yōu)先級,。

難點:CSS 層疊性與繼承性， CSS 優(yōu)先級,。

采用的教學方法:任務驅(qū)動式教學,。

講授學時:3學時

實踐學時:3學時

（四）項目4　“青春樹兒童攝影網(wǎng)”首頁

主要知識點:

【任務4-1】認識盒子模型

【任務4-2】盒子模型相關(guān)屬性

【任務4-3】元素的類型與轉(zhuǎn)換

【任務4-4】元素的浮動

【任務4-5】元素的定位

教學要求:通過本章的學習，使學生了解盒子模型的概念,，掌握盒子的相關(guān)屬性,，熟悉元素的類型與轉(zhuǎn)換，掌握元素的浮動與定位,，掌握清除浮動的方法,，能夠使用 DIV 標記與浮動樣式對頁面進行布局，

重點:邊框?qū)傩?，?nèi)邊距屬性,，外邊距屬性，背景屬性,，標記,，元素的浮動屬性，清除浮動,，元素的定位屬性,，相對定位，絕對定位,。 ,，

難點:元素的浮動屬性，清除浮動,。

采用的教學方法:任務驅(qū)動式教學。

講授學時:3學時

實踐學時:3學時

（五）項目5　“穿搭速遞”首頁制作

主要知識點:

【任務5-1】列表標記

【任務5-2】CSS控制列表樣式

【任務5-3】超鏈接標記

教學要求:通過本章的學習,，使學生掌握無序列表,、有序列表及定義列表，熟悉列表的嵌套,，掌握超鏈接標記,，掌握鏈接偽類，能夠使用無序列表,、有序列表及定義列表對頁面進行布局,，學會使用鏈接偽類控制頁面中超鏈接的樣式。

重點:無序列表

，有序列表
,，定義列表

北京圖像定義列表項目符號,，創(chuàng)建超鏈接（超練級標記a），鏈接偽類控制超鏈接,。

難點:背景圖像定義列表項目符號,，鏈接偽類控制超鏈接。

采用的教學方法:任務驅(qū)動式教學,。

講授學時:2學時

實踐學時:1學時

（六）項目6　“千年之戀”注冊頁面制作

主要知識點:

【任務6-1】認識表格相關(guān)標記

【任務6-2】CSS控制表格樣式

【任務6-3】認識表單

【任務6-4】表單控件

【任務6-5】CSS控制表單樣式CSS控制表單樣式

【任務6-6】布局及定義基礎(chǔ)樣式

【任務6-7】制作頭部及導航模塊

【任務6-8】制作“banner”及“內(nèi)容”

【任務6-9】制作“頁腳”模塊

教學要求:通過本章的學習,，使學生理解表格的創(chuàng)建，掌握表格樣式的控制,，掌握表單相關(guān)標記,，熟悉表單樣式的控制，能夠創(chuàng)建具有相應功能的表單控件,，學會通過控制表單樣式美化表單界面,。

重點:CSS 控制表格邊框，CSS 控制單元格邊距,，CSS 控制單元格的寬高,，input 控件。

難點:input 控件,，CSS 控制表單樣式,。

采用的教學方法:任務驅(qū)動式教學。

講授學時:5學時

實踐學時:4學時

（七）項目7　“趕快回家網(wǎng)”首頁制作

主要知識點:

【任務7-1】Javascript概述

【任務7-2】Javascript語言基礎(chǔ)

【任務7-3】流程控制語句

【任務7-4】函數(shù)

【任務7-5】布局及定義基礎(chǔ)樣式

【任務7-6】制作“頭部”模塊

【任務7-7】制作“導航”模塊

【任務7-8】制作“banner”和“時間”

【任務7-9】制作“客運信息”模塊

【任務7-10】制作“底部”模塊

教學要求:通過本章的學習,，使學生掌握 Javascript 基本語法,，掌握運算符和表達式的使用方法，掌握條件語句,、循環(huán)語句及跳轉(zhuǎn)語句,，掌握 Javascript 中函數(shù)的調(diào)用及變量的作用域，能夠通過運算符和表達式進行簡單計算,，學會使用流程控制語句編寫 Javascript 程序,。

重點:Javascript 引入方式，Javascript 基本語法,，變量和數(shù)據(jù)類型,，條件語句，條件語句,，函數(shù)及其調(diào)用,，。

難點:函數(shù)變量的作用域,。

采用的教學方法:任務驅(qū)動式教學,。

講授學時:3學時

實踐學時:3學時

（八）補充內(nèi)容:HTML5中的音視頻,、過渡和動畫。

主要知識點:

1.audio和video標簽的使用

2.CSS中的過渡屬性及其應用

3.CSS3中的變形屬性及其應用

4. CSS3中的動畫及動畫效果的應用,。

教學要求:通過本章的學習,，使學生掌握 audio和video標簽的使用，理解過渡屬性,，能夠控制過渡時間,、動畫快慢等常見過渡效果，掌握CSS3中的變形屬性,，能夠制作2D轉(zhuǎn)換,、3D轉(zhuǎn)換效果，掌握CSS3中的動畫,，能夠熟練制作網(wǎng)頁中常見的動畫效果,。

重點:CSS3中的過渡、變形與動畫效果,。

難點:CSS3中的過渡,、變形與動畫效果

采用的教學方法:任務驅(qū)動式教學。

講授學時:2學時

實踐學時:1學時

三,、課程的預期學習成果

在本門課程結(jié)束時,，學生應該能夠:

1、熟悉網(wǎng)頁制作流程

2,、掌握常見的網(wǎng)頁布局效果

3,、掌握各類網(wǎng)頁的制作。

四,、課程要求

（一）出勤

學生應積極參與課堂教學并完成相關(guān)的作業(yè),、實驗內(nèi)容。

（二）閱讀資料

學生應認真進行課前預習,，閱讀教材和指定參考書及重要的參考文獻,。

（三）課堂展示

根據(jù)時間及課堂班人數(shù)，在可能的情況下安排小組實驗課程討論與效果演示,。

（四）課外實踐

本課程是實踐類課程,，不單獨安排課外實踐。

（五）小考與期末考

無小考,，期末以課程設(shè)計的方式進行考核,。

（六）課程論文

以平時作業(yè)為主，安排小案例實驗作為期中檢查,。

（七）學術(shù)誠信

按中山大學南方學院相關(guān)規(guī)定執(zhí)行。

（八）剽竊的定義以及相應的懲罰

剽竊是嚴重違反學校規(guī)章制度的行為,。一經(jīng)發(fā)現(xiàn),，將上報相關(guān)部門，并受到包括開除學籍在內(nèi)的嚴厲處罰。

五,、課程資料

（一）教科書-必讀

黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1

（二）教科書-強烈推薦

[1] 黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1

[2] 鄭婭峰,、張永強. 鄭婭峰、張永強.清華大學出版社.2016.01

[3] 傳智播客高教產(chǎn)品研發(fā)部. HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程[M]. 人民郵電出版社, 2016.

[4] 黃睿. 網(wǎng)站設(shè)計項目化教程[M]. 人民郵電出版社, 2015.

（三）文章-必讀

[1] 狐貍不歸.網(wǎng)站建設(shè)步驟詳解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16

[2] 戴宏明. 營銷型網(wǎng)站規(guī)劃六步法[J]. 現(xiàn)代計算機, 2013(6):55-57.

（四）文章-強烈推薦

[1] 梁銀妮. Web網(wǎng)站中動態(tài)網(wǎng)頁設(shè)計技術(shù)的應用和實現(xiàn)[J]. 數(shù)字技術(shù)與應用, 2017(1):83-83.

[2] 楊遠峰. FLASH交互性動畫在網(wǎng)頁設(shè)計中的應用與研究[J]. 電腦知識與技術(shù), 2017, 13(4):197-198.

[3] 孫晗. 網(wǎng)頁設(shè)計中計算機多媒體技術(shù)的應用[J]. 無線互聯(lián)科技, 2018(4):133-134.

[4] 最好用的10種HTML5應用開發(fā)工具推薦.http://www.php.cn/html5-tutorial-360161.html

（五）其他參考資料

[1] [美] 達科特（Jon Duckett） 著,；劉濤,，陳學敏 譯.Web設(shè)計與前端開發(fā)秘籍:HTML CSS Javascript jQuery 構(gòu)建網(wǎng)站（套裝共2冊）.北京.清華大學出版社.2015.06

[2] 劉西杰，張婷 著. HTML CSS Javascript 網(wǎng)頁制作從入門到精通 第3版.北京.人民郵電出版社.2016.07

[3] HTML系列教程.http://www.w3school.com.cn/

六,、教學活動以及對于預期學習成果的評估

（一）教學活動

1,、個人預習

2、課堂講授

3,、課堂問答

4,、實驗講解

5、案例討論

6,、課后實驗

7,、期末課程設(shè)計

（二）對預期學習成果的考察

預期學習成果	教學活動	學習成果考察內(nèi)容:作業(yè)/課程實驗
項目1 網(wǎng)頁制作基礎(chǔ)知識	1,2,3,4,5,6,7	實驗1-1: 熟悉Dreamweaver工具的使用，利用文本控制標記和圖像標記制作一個簡單的個人簡歷頁面
項目2 “說旅游”專題制作	1,2,3,4,5,6,7	實驗1-2:制作“說旅游”專題頁
項目3: “網(wǎng)上花店”專題頁制作	1,2,3,4,5,6,7	實驗2:利用CSS相關(guān)知識,，對個人簡歷頁面的樣式進行設(shè)置,，并重新對個人簡歷頁面進行美化和設(shè)計。 實驗3:制作“網(wǎng)上花店”專題頁
項目4 “青春樹兒童攝像網(wǎng)”首頁	1,2,3,4,5,6,7	實驗4:練習課堂中的例子,，并重寫個人簡歷頁面（需用到盒子模型） 實驗5:制作“青春樹兒童攝影網(wǎng)”首頁
項目5　“穿搭速遞”首頁制作	1,2,3,4,5,6,7	實驗6: 制作“穿搭速遞”首頁
項目6 “千年之戀”注冊頁面制作	1,2,3,4,5,6,7	實驗7:利用表格重新制作個人簡歷,，并用CSS控制其樣式 實驗8:制作“千年之戀”注冊頁面
項目7　“趕快回家網(wǎng)”首頁制作	1,2,3,4,5,6,7	實驗9:練習課堂實例 實驗10: 制作“趕快回家網(wǎng)”首頁
HTML5中的音視頻、過渡和動畫	1,2,3,4,5,6,7	實驗11:制作“工作日天氣預報”

七,、評估的程序和方法

（一）評分體系

1,、出勤率: 20%

2、課堂參與: 加分

3,、課堂實驗及作業(yè): 30%

4,、期末課程設(shè)計: 50%

（二）考試內(nèi)容及要求

考試包含以下內(nèi)容:

1. 網(wǎng)站設(shè)計的基礎(chǔ)知識及使用（核心能力1.1）；

2. 能夠選用合適的程序開發(fā)工具（核心能力2.2）,；

3. 能夠根據(jù)實際問題,，對開發(fā)環(huán)境進行環(huán)境的配置（核心能力2.2）；

4. 根據(jù)實際問題的需求,，設(shè)計并完成綜合實驗（核心能力3.1）,；

5. 能夠根據(jù)課程要求，通過文字,、圖,、表的形式撰寫實驗報告，并進行簡單的分析（核心能力4.1,、6.2）,；

6. 能夠按照綜合實驗要求,，按時完成綜合實驗，并培養(yǎng)良好的職業(yè)習慣（核心能力7.1）,。

八,、教學進度與學時分配表

周次	課程要點	理論學時	實驗學時	習題學時
1	理論: 項目1 網(wǎng)頁制作基礎(chǔ)知識 【任務1-1】 了解Web基本概念 【任務1-2】　網(wǎng)頁制作入門 【任務1-3】　Dreamweaver工具的使用 項目2　“說旅游”專題頁制作 【任務2-1】認識HTML 【任務2-2】HTML文本控制標記 【任務2-3】HTML圖像標記 實驗1-1: 熟悉Dreamweaver工具的使用，利用文本控制標記和圖像標記制作一個簡單的個人簡歷頁面 實驗1-2:制作“說旅游”專題頁	2	1	0
2	理論: 項目3　 “網(wǎng)上花店”專題頁制作 【任務3-1】CSS核心基礎(chǔ) 【任務3-2】CSS控制文本 實驗2:利用CSS相關(guān)知識,，對個人簡歷頁面的樣式進行設(shè)置,，并重新對個人簡歷頁面進行美化和設(shè)計。	2	1	0
3	理論: 【任務3-3】CSS高級特性 實驗3:制作“網(wǎng)上花店”專題頁	1	2	0
4	理論: 項目4　“青春樹兒童攝影網(wǎng)”首頁 【任務4-1】認識盒子模型 【任務4-2】盒子模型相關(guān)屬性 【任務4-3】元素的類型與轉(zhuǎn)換 實驗4:練習課堂中的例子,，并重寫個人簡歷頁面（需用到盒子模型）	2	1	0
5	理論: 項目4　“青春樹兒童攝影網(wǎng)”首頁 【任務4-4】元素的浮動 【任務4-5】元素的定位 【任務4-6】布局及定義基礎(chǔ)樣式 實驗5:制作“青春樹兒童攝影網(wǎng)”首頁,。	1	2	0
6	理論: 項目5　“穿搭速遞”首頁制作 【任務5-1】列表標記 【任務5-2】CSS控制列表樣式 【任務5-3】超鏈接標記 實驗6:制作“穿搭速遞”首頁	2	1	0
7	理論: 項目6　“千年之戀”注冊頁面制作 【任務6-1】認識表格相關(guān)標記 【任務6-2】CSS控制表格樣式 實驗7:利用表格重新制作個人簡歷，并用CSS控制其樣式	2	1	0
8	理論: 項目6　“千年之戀”注冊頁面制作 【任務6-3】認識表單 【任務6-4】表單控件 【任務6-5】CSS控制表單樣式CSS控制表單樣式 實驗8:制作“千年之戀”注冊頁面	1	2	0
9	理論: 項目7　“趕快回家網(wǎng)”首頁制作 【任務7-1】Javascript概述 【任務7-2】Javascript語言基礎(chǔ) 【任務7-3】流程控制語句 【任務7-4】函數(shù) 實驗9:練習課堂實例	2	1	0
10	理論: 項目7　“趕快回家網(wǎng)”首頁制作 【任務7-5】布局及定義基礎(chǔ)樣式 【任務7-6】制作“頭部”模塊 【任務7-7】制作“導航”模塊 【任務7-8】制作“banner”和“時間” 【任務7-9】制作“客運信息”模塊 【任務7-10】制作“底部”模塊 實驗10: 制作“趕快回家網(wǎng)”首頁	1	2	0
11	HTML5中的音視頻,、過渡和動畫（補充） 實驗11:制作“工作日天氣預報”	2	1	0
12	課程設(shè)計	0	3	0
13
14
15
16
17
18
19
20
總學時		18	18