一、課程描述及課程目標(biāo)

（一）課程描述

《網(wǎng)站設(shè)計(jì)》課程是面向全院專業(yè)的一門通識任選課，涉及網(wǎng)頁基礎(chǔ)、HTML 標(biāo)記、CSS 樣式、網(wǎng)頁布局、Javascript 編程基礎(chǔ)與事件處理等內(nèi)容。通過本課程的學(xué)習(xí)，學(xué)生能夠了解 HTML、CSS 及 Javascript 語言的發(fā)展歷史及未來方向，熟悉網(wǎng)頁制作流程、掌握常見的網(wǎng)頁布局效果、學(xué)會制作各種網(wǎng)頁。

（二）課程目標(biāo)

1. 熟悉網(wǎng)頁的制作流程，掌握常用的網(wǎng)頁布局效果，能夠制作各種類型的網(wǎng)頁。

2. 能夠?qū)唧w問題進(jìn)行分析，找到解決該問題所用的方法。

3. 能夠綜合運(yùn)用所學(xué)網(wǎng)站設(shè)計(jì)的基本知識，使用任務(wù)驅(qū)動式的項(xiàng)目開發(fā)方法，編寫程序完成專項(xiàng)實(shí)驗(yàn)和綜合實(shí)驗(yàn)；設(shè)計(jì)能夠解決實(shí)際問題的小型網(wǎng)站；將實(shí)驗(yàn)的完成情況，撰寫一份完整的實(shí)驗(yàn)報(bào)告。

二、課程內(nèi)容

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

主要知識點(diǎn):

【任務(wù)1-1】 了解Web基本概念

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

【任務(wù)1-3】　Dreamweaver工具的使用

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

重點(diǎn):Web標(biāo)準(zhǔn)、HTML語言、CSS語言和Javascript語言簡介、創(chuàng)建第一個網(wǎng)頁

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

講授學(xué)時:3學(xué)時

實(shí)踐學(xué)時:0學(xué)時

（二）項(xiàng)目2　“說旅游”專題頁制作

主要知識點(diǎn):

【任務(wù)2-1】認(rèn)識HTML

【任務(wù)2-2】HTML文本控制標(biāo)記

【任務(wù)2-3】HTML圖像標(biāo)記

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

重點(diǎn):HTML 標(biāo)記（單標(biāo)記與雙 標(biāo)記，標(biāo)題和段落標(biāo)記，div標(biāo)記，常用圖像格式，切片。

難點(diǎn):標(biāo)記屬性，div標(biāo)記。

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

講授學(xué)時:3.5學(xué)時

實(shí)踐學(xué)時:2.5學(xué)時

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

主要知識點(diǎn):

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

【任務(wù)3-2】CSS控制文本

【任務(wù)3-3】CSS高級特性

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

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

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

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

講授學(xué)時:3.5學(xué)時

實(shí)踐學(xué)時:2.5學(xué)時

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

主要知識點(diǎn):

【任務(wù)4-1】認(rèn)識盒子模型

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

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

【任務(wù)4-4】元素的浮動

【任務(wù)4-5】元素的定位

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

重點(diǎn):邊框?qū)傩裕瑑?nèi)邊距屬性，外邊距屬性，背景屬性，標(biāo)記，元素的浮動屬性，清除浮動，元素的定位屬性，相對定位，絕對定位。 ，

難點(diǎn):元素的浮動屬性，清除浮動。

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

講授學(xué)時:7學(xué)時

實(shí)踐學(xué)時:5學(xué)時

（五）項(xiàng)目5　“穿搭速遞”首頁制作

主要知識點(diǎn):

【任務(wù)5-1】列表標(biāo)記

【任務(wù)5-2】CSS控制列表樣式

【任務(wù)5-3】超鏈接標(biāo)記

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

重點(diǎn):無序列表

，有序列表
，定義列表

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

難點(diǎn):背景圖像定義列表項(xiàng)目符號，鏈接偽類控制超鏈接。

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

講授學(xué)時:3.5學(xué)時

實(shí)踐學(xué)時:2.5學(xué)時

（六）項(xiàng)目6　“千年之戀”注冊頁面制作

主要知識點(diǎn):

【任務(wù)6-1】認(rèn)識表格相關(guān)標(biāo)記

【任務(wù)6-2】CSS控制表格樣式

【任務(wù)6-3】認(rèn)識表單

【任務(wù)6-4】表單控件

【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式

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

重點(diǎn):CSS 控制表格邊框，CSS 控制單元格邊距，CSS 控制單元格的寬高，input 控件。

難點(diǎn):input 控件，CSS 控制表單樣式。

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

講授學(xué)時:7學(xué)時

實(shí)踐學(xué)時:5學(xué)時

三、課程的預(yù)期學(xué)習(xí)成果

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

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

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

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

四、課程要求

（一）出勤

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

（二）閱讀資料

學(xué)生應(yīng)認(rèn)真進(jìn)行課前預(yù)習(xí)，閱讀教材和指定參考書及重要的參考文獻(xiàn)。

（三）課堂展示

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

（四）課外實(shí)踐

本課程是實(shí)踐類課程，不單獨(dú)安排課外實(shí)踐。

（五）小考與期末考

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

（六）課程論文

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

（七）學(xué)術(shù)誠信

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

（八）剽竊的定義以及相應(yīng)的懲罰

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

五、課程資料

（一）教科書-必讀

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

（二）教科書-強(qiáng)烈推薦

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

[2] 鄭婭峰、張永強(qiáng). 鄭婭峰、張永強(qiáng).清華大學(xué)出版社.2016.01

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

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

（三）文章-必讀

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

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

（四）文章-強(qiáng)烈推薦

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

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

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

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

（五）其他參考資料

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

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

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

六、教學(xué)活動以及對于預(yù)期學(xué)習(xí)成果的評估

（一）教學(xué)活動

1、個人預(yù)習(xí)

2、課堂講授

3、課堂問答

4、實(shí)驗(yàn)講解

5、案例討論

6、課后實(shí)驗(yàn)

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

（二）對預(yù)期學(xué)習(xí)成果的考察

預(yù)期學(xué)習(xí)成果	教學(xué)活動	學(xué)習(xí)成果考察內(nèi)容:作業(yè)/課程實(shí)驗(yàn)
項(xiàng)目1 網(wǎng)頁制作基礎(chǔ)知識	1,2,3,4,5,6,7	實(shí)驗(yàn)1:熟悉Dreamweaver工具，利用該工具制作一個簡單的網(wǎng)頁
項(xiàng)目2 “說旅游”專題制作	1,2,3,4,5,6,7	實(shí)驗(yàn)2:制作“說旅游”專題頁
項(xiàng)目3: “網(wǎng)上花店”專題頁制作	1,2,3,4,5,6,7	實(shí)驗(yàn)3:制作“網(wǎng)上花店”專題頁
項(xiàng)目4 “青春樹兒童攝像網(wǎng)”首頁	1,2,3,4,5,6,7	實(shí)驗(yàn)4:制作“青春樹兒童攝影網(wǎng)”首頁
項(xiàng)目5　“穿搭速遞”首頁制作	1,2,3,4,5,6,7	實(shí)驗(yàn)5: 制作“穿搭速遞”首頁
項(xiàng)目6 “千年之戀”注冊頁面制作	1,2,3,4,5,6,7	實(shí)驗(yàn)6:制作“千年之戀”注冊頁面

七、評估的程序和方法

（一）評分體系

1、出勤率: 20%

2、課堂參與: 加分

3、課堂實(shí)驗(yàn)及作業(yè): 30%

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

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

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

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

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

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

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

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

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

八、教學(xué)進(jìn)度與學(xué)時分配表

周次	課程要點(diǎn)	理論學(xué)時	實(shí)驗(yàn)學(xué)時	習(xí)題學(xué)時
1	理論: 項(xiàng)目1 網(wǎng)頁制作基礎(chǔ)知識 【任務(wù)1-1】 了解Web基本概念 【任務(wù)1-2】　網(wǎng)頁制作入門 【任務(wù)1-3】　Dreamweaver工具的使用	3	0	0
2	理論: 項(xiàng)目2　“說旅游”專題頁制作 【任務(wù)2-1】認(rèn)識HTML 【任務(wù)2-2】HTML文本控制標(biāo)記 【任務(wù)2-3】HTML圖像標(biāo)記	3	0	0
3	實(shí)驗(yàn)1:熟悉Dreamweaver工具的使用，練習(xí)文本控制標(biāo)記和圖像標(biāo)記的使用，制作“說旅游”專題頁	0.5	2.5
4	理論: 項(xiàng)目3　 “網(wǎng)上花店”專題頁制作 【任務(wù)3-1】CSS核心基礎(chǔ) 【任務(wù)3-2】CSS控制文本 【任務(wù)3-3】CSS高級特性 【任務(wù)3-4】布局及定義基礎(chǔ)樣式	3	0	0
5	實(shí)驗(yàn)2: 制作“網(wǎng)上花店”專題頁	0.5	2.5	0
6	理論: 項(xiàng)目4　“青春樹兒童攝影網(wǎng)”首頁 【任務(wù)4-1】認(rèn)識盒子模型 【任務(wù)4-2】盒子模型相關(guān)屬性 【任務(wù)4-3】元素的類型與轉(zhuǎn)換 實(shí)驗(yàn)4-1:練習(xí)課堂中的例子，并重寫個人簡歷頁面（需用到盒子模型）	3	0	0
7	實(shí)驗(yàn)3:利用文本控制標(biāo)記、圖片標(biāo)記等制作個人簡歷頁面，并利用盒子模型進(jìn)行布局。	0.5	2.5
8	理論: 項(xiàng)目4　“青春樹兒童攝影網(wǎng)”首頁 【任務(wù)4-4】元素的浮動 【任務(wù)4-5】元素的定位	3	0	0
9	實(shí)驗(yàn)4:制作“青春樹兒童攝影網(wǎng)”首頁	0.5	2.5	0
10	理論: 項(xiàng)目5　“穿搭速遞”首頁制作 【任務(wù)5-1】列表標(biāo)記 【任務(wù)5-2】CSS控制列表樣式 【任務(wù)5-3】超鏈接標(biāo)記	3	0
11	實(shí)驗(yàn)5: 制作“穿搭速遞”首頁	0.5	2.5
12	理論: 項(xiàng)目6　“千年之戀”注冊頁面制作 【任務(wù)6-1】認(rèn)識表格相關(guān)標(biāo)記 【任務(wù)6-2】CSS控制表格樣式	3	0	0
13	實(shí)驗(yàn)6:利用表格重新制作個人簡歷，并用CSS控制其樣式	0.5	2.5	0
14	理論: 項(xiàng)目6　“千年之戀”注冊頁面制作 【任務(wù)6-3】認(rèn)識表單 【任務(wù)6-4】表單控件 【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式 實(shí)驗(yàn)6-2:利用表單控件制作簡單的網(wǎng)頁表單	3	0	0
15	實(shí)驗(yàn)6: 制作“千年之戀”注冊頁面	0.5	2.5	0
16	課程設(shè)計(jì)	0	3	0
17
18
19
20
總學(xué)時		26.5	21.5	0