課程簡介
Course Introduction
教學(xué)大綱
Teaching Syllabus
一,、課程描述及課程目標
（一）課程描述
《網(wǎng)站設(shè)計》課程是面向全院專業(yè)的一門通識任選課，涉及網(wǎng)頁基礎(chǔ),、HTML 標記,、CSS 樣式、網(wǎng)頁布局,、Javascript 編程基礎(chǔ)與事件處理等內(nèi)容,。通過本課程的學(xué)習(xí)，學(xué)生能夠了解 HTML,、CSS 及 Javascript 語言的發(fā)展歷史及未來方向,，熟悉網(wǎng)頁制作流程、掌握常見的網(wǎng)頁布局效果,、學(xué)會制作各種網(wǎng)頁,。
（二）課程目標
1. 熟悉網(wǎng)頁的制作流程，掌握常用的網(wǎng)頁布局效果,，能夠制作各種類型的網(wǎng)頁,。
2. 能夠?qū)唧w問題進行分析，找到解決該問題所用的方法,。
3. 能夠綜合運用所學(xué)網(wǎng)站設(shè)計的基本知識,，使用任務(wù)驅(qū)動式的項目開發(fā)方法，編寫程序完成專項實驗和綜合實驗,；設(shè)計能夠解決實際問題的小型網(wǎng)站,；將實驗的完成情況，撰寫一份完整的實驗報告,。
（一）項目1網(wǎng)頁制作基礎(chǔ)知識
主要知識點:
【任務(wù)1-1】 了解Web基本概念
【任務(wù)1-2】 網(wǎng)頁制作入門
【任務(wù)1-3】 Dreamweaver工具的使用
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生了解 Web 標準及基本概念,，熟悉 HTML,、CSS 及 Javascript 語言的發(fā)展歷史，掌握 Dreamweaver 工具的基本操作,，能夠使用 Dreamweaver 創(chuàng)建簡單的網(wǎng)頁。
重點:Web標準,、HTML語言,、CSS語言和Javascript語言簡介,、創(chuàng)建第一個網(wǎng)頁
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué)。
講授學(xué)時:3學(xué)時
實踐學(xué)時:0學(xué)時
（二）項目2 “說旅游”專題頁制作
主要知識點:
【任務(wù)2-1】認識HTML
【任務(wù)2-2】HTML文本控制標記
【任務(wù)2-3】HTML圖像標記
教學(xué)要求:通過本章的學(xué)習(xí),，使學(xué)生掌握 HTML 文檔結(jié)構(gòu),，了解 HTML 文檔頭部相關(guān)標記，熟悉 HTML 文本控制標記,，熟悉 HTML 文本控制標記,，掌握圖文混排頁面的制作技巧，學(xué)會制作圖文混排頁面,。,，
重點:HTML 標記（單標記與雙 標記，標題和段落標記,，div標記,，常用圖像格式，切片,。
難點:標記屬性,，div標記。
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué),。
講授學(xué)時:3.5學(xué)時
實踐學(xué)時:2.5學(xué)時
（三）項目3 “網(wǎng)上花店”專題頁制作
主要知識點:
【任務(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é)會控制頁面中的文本外觀樣式。
重點:引入 CSS 樣式表（行內(nèi),、 內(nèi)嵌,、鏈入），CSS 基礎(chǔ)選擇器,，CSS 字體樣式屬性,，CSS 文本外觀屬性，CSS 定義背景顏色,，CSS 復(fù)合選擇器（標簽指 定,、后代、并集）,，CSS 優(yōu)先級,。
難點:CSS 層疊性與繼承性， CSS 優(yōu)先級,。
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué),。
講授學(xué)時:3.5學(xué)時
實踐學(xué)時:2.5學(xué)時
（四）項目4 “青春樹兒童攝影網(wǎng)”首頁
主要知識點:
【任務(wù)4-1】認識盒子模型
【任務(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 標記與浮動樣式對頁面進行布局,，
重點:邊框?qū)傩裕瑑?nèi)邊距屬性,，外邊距屬性,，背景屬性，標記,，元素的浮動屬性,，清除浮動，元素的定位屬性,，相對定位,，絕對定位。 ,，
難點:元素的浮動屬性,，清除浮動。
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué),。
講授學(xué)時:7學(xué)時
實踐學(xué)時:5學(xué)時
（五）項目5 “穿搭速遞”首頁制作
主要知識點:
【任務(wù)5-1】列表標記
【任務(wù)5-2】CSS控制列表樣式
【任務(wù)5-3】超鏈接標記
教學(xué)要求:通過本章的學(xué)習(xí),，使學(xué)生掌握無序列表、有序列表及定義列表,，熟悉列表的嵌套,，掌握超鏈接標記，掌握鏈接偽類,，能夠使用無序列表,、有序列表及定義列表對頁面進行布局，學(xué)會使用鏈接偽類控制頁面中超鏈接的樣式,。
重點:無序列表,，有序列表
，定義列表
北京圖像定義列表項目符號,，創(chuàng)建超鏈接（超練級標記a）,，鏈接偽類控制超鏈接。
難點:背景圖像定義列表項目符號,，鏈接偽類控制超鏈接,。
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué)。
講授學(xué)時:3.5學(xué)時
實踐學(xué)時:2.5學(xué)時
（六）項目6 “千年之戀”注冊頁面制作
主要知識點:
【任務(wù)6-1】認識表格相關(guān)標記
【任務(wù)6-2】CSS控制表格樣式
【任務(wù)6-3】認識表單
【任務(wù)6-4】表單控件
【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式
教學(xué)要求:通過本章的學(xué)習(xí)，使學(xué)生理解表格的創(chuàng)建,，掌握表格樣式的控制,，掌握表單相關(guān)標記，熟悉表單樣式的控制,，能夠創(chuàng)建具有相應(yīng)功能的表單控件，學(xué)會通過控制表單樣式美化表單界面,。
重點:CSS 控制表格邊框,，CSS 控制單元格邊距，CSS 控制單元格的寬高,，input 控件,。
難點:input 控件，CSS 控制表單樣式,。
采用的教學(xué)方法:任務(wù)驅(qū)動式教學(xué),。
講授學(xué)時:7學(xué)時
實踐學(xué)時:5學(xué)時
在本門課程結(jié)束時,，學(xué)生應(yīng)該能夠:
1,、熟悉網(wǎng)頁制作流程
2、掌握常見的網(wǎng)頁布局效果
3,、掌握各類網(wǎng)頁的制作,。
（一）出勤
學(xué)生應(yīng)積極參與課堂教學(xué)并完成相關(guān)的作業(yè),、實驗內(nèi)容,。
（二）閱讀資料
學(xué)生應(yīng)認真進行課前預(yù)習(xí)，閱讀教材和指定參考書及重要的參考文獻,。
（三）課堂展示
根據(jù)時間及課堂班人數(shù),，在可能的情況下安排小組實驗課程討論與效果演示。
（四）課外實踐
本課程是實踐類課程,，不單獨安排課外實踐,。
（五）小考與期末考
無小考，期末以課程設(shè)計的方式進行考核,。
（六）課程論文
以平時作業(yè)為主,，安排小案例實驗作為期中檢查。
（七）學(xué)術(shù)誠信
按中山大學(xué)南方學(xué)院相關(guān)規(guī)定執(zhí)行,。
（八）剽竊的定義以及相應(yīng)的懲罰
剽竊是嚴重違反學(xué)校規(guī)章制度的行為,。一經(jīng)發(fā)現(xiàn)，將上報相關(guān)部門,，并受到包括開除學(xué)籍在內(nèi)的嚴厲處罰,。
（一）教科書-必讀
黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
（二）教科書-強烈推薦
[1] 黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
[2] 鄭婭峰、張永強. 鄭婭峰,、張永強.清華大學(xué)出版社.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ù)的應(yīng)用和實現(xiàn)[J]. 數(shù)字技術(shù)與應(yīng)用, 2017(1):83-83.
[2] 楊遠峰. FLASH交互性動畫在網(wǎng)頁設(shè)計中的應(yīng)用與研究[J]. 電腦知識與技術(shù), 2017, 13(4):197-198.
[3] 孫晗. 網(wǎng)頁設(shè)計中計算機多媒體技術(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] [美] 達科特（Jon Duckett） 著,；劉濤，陳學(xué)敏 譯.Web設(shè)計與前端開發(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é)活動
1、個人預(yù)習(xí)
2,、課堂講授
3,、課堂問答
4、實驗講解
5,、案例討論
6,、課后實驗
7、期末課程設(shè)計
（二）對預(yù)期學(xué)習(xí)成果的考察
預(yù)期學(xué)習(xí)成果 | 教學(xué)活動 | 學(xué)習(xí)成果考察內(nèi)容:作業(yè)/課程實驗 |
項目1 網(wǎng)頁制作基礎(chǔ)知識 | 1,2,3,4,5,6,7 | 實驗1:熟悉Dreamweaver工具,，利用該工具制作一個簡單的網(wǎng)頁 |
項目2 “說旅游”專題制作 | 1,2,3,4,5,6,7 | 實驗2:制作“說旅游”專題頁 |
項目3: “網(wǎng)上花店”專題頁制作 | 1,2,3,4,5,6,7 | 實驗3:制作“網(wǎng)上花店”專題頁 |
項目4 “青春樹兒童攝像網(wǎng)”首頁 | 1,2,3,4,5,6,7 | 實驗4:制作“青春樹兒童攝影網(wǎng)”首頁 |
項目5 “穿搭速遞”首頁制作 | 1,2,3,4,5,6,7 | 實驗5: 制作“穿搭速遞”首頁 |
項目6 “千年之戀”注冊頁面制作 | 1,2,3,4,5,6,7 | 實驗6:制作“千年之戀”注冊頁面 |
（一）評分體系
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è)習(xí)慣（核心能力7.1）。
周次 | 課程要點 | 理論學(xué)時 | 實驗學(xué)時 | 習(xí)題學(xué)時 |
1 | 理論: 項目1 網(wǎng)頁制作基礎(chǔ)知識 【任務(wù)1-1】 了解Web基本概念 【任務(wù)1-2】 網(wǎng)頁制作入門 【任務(wù)1-3】 Dreamweaver工具的使用 | 3 | 0 | 0 |
2 | 理論: 項目2 “說旅游”專題頁制作 【任務(wù)2-1】認識HTML 【任務(wù)2-2】HTML文本控制標記 【任務(wù)2-3】HTML圖像標記 | 3 | 0 | 0 |
3 | 實驗1:熟悉Dreamweaver工具的使用,，練習(xí)文本控制標記和圖像標記的使用，制作“說旅游”專題頁 | 0.5 | 2.5 | |
4 | 理論: 項目3 “網(wǎng)上花店”專題頁制作 【任務(wù)3-1】CSS核心基礎(chǔ) 【任務(wù)3-2】CSS控制文本 【任務(wù)3-3】CSS高級特性 【任務(wù)3-4】布局及定義基礎(chǔ)樣式 | 3 | 0 | 0 |
5 | 實驗2: 制作“網(wǎng)上花店”專題頁 | 0.5 | 2.5 | 0 |
6 | 理論: 項目4 “青春樹兒童攝影網(wǎng)”首頁 【任務(wù)4-1】認識盒子模型 【任務(wù)4-2】盒子模型相關(guān)屬性 【任務(wù)4-3】元素的類型與轉(zhuǎn)換 實驗4-1:練習(xí)課堂中的例子,，并重寫個人簡歷頁面（需用到盒子模型） | 3 | 0 | 0 |
7 | 實驗3:利用文本控制標記,、圖片標記等制作個人簡歷頁面，并利用盒子模型進行布局。 | 0.5 | 2.5 | |
8 | 理論: 項目4 “青春樹兒童攝影網(wǎng)”首頁 【任務(wù)4-4】元素的浮動 【任務(wù)4-5】元素的定位 | 3 | 0 | 0 |
9 | 實驗4:制作“青春樹兒童攝影網(wǎng)”首頁 | 0.5 | 2.5 | 0 |
10 | 理論: 項目5 “穿搭速遞”首頁制作 【任務(wù)5-1】列表標記 【任務(wù)5-2】CSS控制列表樣式 【任務(wù)5-3】超鏈接標記 | 3 | 0 | |
11 | 實驗5: 制作“穿搭速遞”首頁 | 0.5 | 2.5 | |
12 | 理論: 項目6 “千年之戀”注冊頁面制作 【任務(wù)6-1】認識表格相關(guān)標記 【任務(wù)6-2】CSS控制表格樣式 | 3 | 0 | 0 |
13 | 實驗6:利用表格重新制作個人簡歷,，并用CSS控制其樣式 | 0.5 | 2.5 | 0 |
14 | 理論: 項目6 “千年之戀”注冊頁面制作 【任務(wù)6-3】認識表單 【任務(wù)6-4】表單控件 【任務(wù)6-5】CSS控制表單樣式CSS控制表單樣式 實驗6-2:利用表單控件制作簡單的網(wǎng)頁表單 | 3 | 0 | 0 |
15 | 實驗6: 制作“千年之戀”注冊頁面 | 0.5 | 2.5 | 0 |
16 | 課程設(shè)計 | 0 | 3 | 0 |
17 | ||||
18 | ||||
19 | ||||
20 | ||||
總學(xué)時 | 26.5 | 21.5 | 0 | |
教學(xué)隊伍Teaching Members
相關(guān)課程Correlative
Courses
