課程簡介
Course Introduction
教學大綱
Teaching Syllabus
一、課程描述及課程目標
（一）課程描述
《網站設計》課程是面向電氣學院非計算機類專業的一門專業選修課，涉及網頁基礎、HTML 標記、CSS 樣式、網頁布局、Javascript 編程基礎與事件處理等內容。通過本課程的學習，學生能夠熟悉Dreamweaver CS6環境，學會使用HTML設計網站的基本頁面，掌握網站發布和推廣的方法；通過CSS實現網站的整體變化上的美化和優化，從而改善網站的整體效果；可以使用Javascript提升網站的靈活性和交互性，學會制作各種企業、門戶、電商類網站。
（二）課程目標
本課程為計算機類專業的專業基礎課程，要求學生能夠應用網站設計的基本知識及技能解決實際問題，通過本課程的學習，學生應達到下列學習目標:
1.掌握網站設計的基本知識及技能，核心能力1.1。
2.具備使用HTML5+CSS3的基本技能進行網頁程序設計的能力，核心能力2.1。
3.具備選擇合適的開發平臺進行程序設計的能力，核心能力2.2。
4.具備初步的計算機應用程序的設計能力，核心能力3.1。
5.能夠將實驗結果，通過文字、圖、表的形式撰寫實驗報告，從而能夠完整表達對實驗原理及實驗內容的理解，核心能力4.1。
6.了解前端網站設計所涉及到的新技術和方法及在實際項目中的應用，核心能力6.1。
7.能夠主動做好課前預習和課后實踐，養成自主學習的意識和提高不斷學習的能力，核心能力6.2。
8.在教師的指導下，通過綜合實驗訓練遵守職業規范和道德，訓練嚴謹的專業學習及工作習慣，核心能力7.1。
（一）項目1網頁制作基礎知識
主要知識點:
【任務1-1】 了解Web基本概念
【任務1-2】 網頁制作入門
【任務1-3】 Dreamweaver工具的使用
教學要求:通過本章的學習，使學生了解 Web 標準及基本概念，熟悉 HTML、CSS 及 Javascript 語言的發展歷史，掌握 Dreamweaver 工具的基本操作，能夠使用 Dreamweaver 創建簡單的網頁。
重點:Web標準、HTML語言、CSS語言和Javascript語言簡介、創建第一個網頁
采用的教學方法:任務驅動式教學。
講授學時:1學時
實踐學時:0.5學時
（二）項目2 “說旅游”專題頁制作
主要知識點:
【任務2-1】認識HTML
【任務2-2】HTML文本控制標記
【任務2-3】HTML圖像標記
教學要求:通過本章的學習，使學生掌握 HTML 文檔結構，了解 HTML 文檔頭部相關標記，熟悉 HTML 文本控制標記，熟悉 HTML 文本控制標記，掌握圖文混排頁面的制作技巧，學會制作圖文混排頁面。，
重點:HTML 標記（單標記與雙 標記，標題和段落標記，div標記，常用圖像格式，切片。
難點:標記屬性，div標記。
采用的教學方法:任務驅動式教學。
講授學時:1學時
實踐學時:0.5學時
（三）項目3 “網上花店”專題頁制作
主要知識點:
【任務3-1】CSS核心基礎
【任務3-2】CSS控制文本
【任務3-3】CSS高級特性
教學要求:通過本章的學習，使學生了解 CSS 樣式規則，掌握 CSS 字體樣式及文本外觀屬性，熟悉 CSS 復合選擇器，掌握 CSS 層疊性、繼承性與優先級，掌握引入 CSS 樣式表的不同方式，學會控制頁面中的文本外觀樣式。
重點:引入 CSS 樣式表（行內、 內嵌、鏈入），CSS 基礎選擇器，CSS 字體樣式屬性，CSS 文本外觀屬性，CSS 定義背景顏色，CSS 復合選擇器（標簽指 定、后代、并集），CSS 優先級。
難點:CSS 層疊性與繼承性， CSS 優先級。
采用的教學方法:任務驅動式教學。
講授學時:3學時
實踐學時:3學時
（四）項目4 “青春樹兒童攝影網”首頁
主要知識點:
【任務4-1】認識盒子模型
【任務4-2】盒子模型相關屬性
【任務4-3】元素的類型與轉換
【任務4-4】元素的浮動
【任務4-5】元素的定位
教學要求:通過本章的學習，使學生了解盒子模型的概念，掌握盒子的相關屬性，熟悉元素的類型與轉換，掌握元素的浮動與定位，掌握清除浮動的方法，能夠使用 DIV 標記與浮動樣式對頁面進行布局，
重點:邊框屬性，內邊距屬性，外邊距屬性，背景屬性，標記，元素的浮動屬性，清除浮動，元素的定位屬性，相對定位，絕對定位。 ，
難點:元素的浮動屬性，清除浮動。
采用的教學方法:任務驅動式教學。
講授學時:3學時
實踐學時:3學時
（五）項目5 “穿搭速遞”首頁制作
主要知識點:
【任務5-1】列表標記
【任務5-2】CSS控制列表樣式
【任務5-3】超鏈接標記
教學要求:通過本章的學習，使學生掌握無序列表、有序列表及定義列表，熟悉列表的嵌套，掌握超鏈接標記，掌握鏈接偽類，能夠使用無序列表、有序列表及定義列表對頁面進行布局，學會使用鏈接偽類控制頁面中超鏈接的樣式。
重點:無序列表，有序列表
，定義列表
北京圖像定義列表項目符號，創建超鏈接（超練級標記a），鏈接偽類控制超鏈接。
難點:背景圖像定義列表項目符號，鏈接偽類控制超鏈接。
采用的教學方法:任務驅動式教學。
講授學時:2學時
實踐學時:1學時
（六）項目6 “千年之戀”注冊頁面制作
主要知識點:
【任務6-1】認識表格相關標記
【任務6-2】CSS控制表格樣式
【任務6-3】認識表單
【任務6-4】表單控件
【任務6-5】CSS控制表單樣式CSS控制表單樣式
【任務6-6】布局及定義基礎樣式
【任務6-7】制作頭部及導航模塊
【任務6-8】制作“banner”及“內容”
【任務6-9】制作“頁腳”模塊
教學要求:通過本章的學習，使學生理解表格的創建，掌握表格樣式的控制，掌握表單相關標記，熟悉表單樣式的控制，能夠創建具有相應功能的表單控件，學會通過控制表單樣式美化表單界面。
重點:CSS 控制表格邊框，CSS 控制單元格邊距，CSS 控制單元格的寬高，input 控件。
難點:input 控件，CSS 控制表單樣式。
采用的教學方法:任務驅動式教學。
講授學時:5學時
實踐學時:4學時
（七）項目7 “趕快回家網”首頁制作
主要知識點:
【任務7-1】Javascript概述
【任務7-2】Javascript語言基礎
【任務7-3】流程控制語句
【任務7-4】函數
【任務7-5】布局及定義基礎樣式
【任務7-6】制作“頭部”模塊
【任務7-7】制作“導航”模塊
【任務7-8】制作“banner”和“時間”
【任務7-9】制作“客運信息”模塊
【任務7-10】制作“底部”模塊
教學要求:通過本章的學習，使學生掌握 Javascript 基本語法，掌握運算符和表達式的使用方法，掌握條件語句、循環語句及跳轉語句，掌握 Javascript 中函數的調用及變量的作用域，能夠通過運算符和表達式進行簡單計算，學會使用流程控制語句編寫 Javascript 程序。
重點:Javascript 引入方式，Javascript 基本語法，變量和數據類型，條件語句，條件語句，函數及其調用，。
難點:函數變量的作用域。
采用的教學方法:任務驅動式教學。
講授學時:3學時
實踐學時:3學時
（八）補充內容:HTML5中的音視頻、過渡和動畫。
主要知識點:
1.audio和video標簽的使用
2.CSS中的過渡屬性及其應用
3.CSS3中的變形屬性及其應用
4. CSS3中的動畫及動畫效果的應用。
教學要求:通過本章的學習，使學生掌握 audio和video標簽的使用，理解過渡屬性，能夠控制過渡時間、動畫快慢等常見過渡效果，掌握CSS3中的變形屬性，能夠制作2D轉換、3D轉換效果，掌握CSS3中的動畫，能夠熟練制作網頁中常見的動畫效果。
重點:CSS3中的過渡、變形與動畫效果。
難點:CSS3中的過渡、變形與動畫效果
采用的教學方法:任務驅動式教學。
講授學時:2學時
實踐學時:1學時
在本門課程結束時，學生應該能夠:
1、熟悉網頁制作流程
2、掌握常見的網頁布局效果
3、掌握各類網頁的制作。
（一）出勤
學生應積極參與課堂教學并完成相關的作業、實驗內容。
（二）閱讀資料
學生應認真進行課前預習，閱讀教材和指定參考書及重要的參考文獻。
（三）課堂展示
根據時間及課堂班人數，在可能的情況下安排小組實驗課程討論與效果演示。
（四）課外實踐
本課程是實踐類課程，不單獨安排課外實踐。
（五）小考與期末考
無小考，期末以課程設計的方式進行考核。
（六）課程論文
以平時作業為主，安排小案例實驗作為期中檢查。
（七）學術誠信
按中山大學南方學院相關規定執行。
（八）剽竊的定義以及相應的懲罰
剽竊是嚴重違反學校規章制度的行為。一經發現，將上報相關部門，并受到包括開除學籍在內的嚴厲處罰。
（一）教科書-必讀
黑馬程序員.網頁設計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
（二）教科書-強烈推薦
[1] 黑馬程序員.網頁設計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1
[2] 鄭婭峰、張永強. 鄭婭峰、張永強.清華大學出版社.2016.01
[3] 傳智播客高教產品研發部. HTML5+CSS3網站設計基礎教程[M]. 人民郵電出版社, 2016.
[4] 黃睿. 網站設計項目化教程[M]. 人民郵電出版社, 2015.
（三）文章-必讀
[1] 狐貍不歸.網站建設步驟詳解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16
[2] 戴宏明. 營銷型網站規劃六步法[J]. 現代計算機, 2013(6):55-57.
（四）文章-強烈推薦
[1] 梁銀妮. Web網站中動態網頁設計技術的應用和實現[J]. 數字技術與應用, 2017(1):83-83.
[2] 楊遠峰. FLASH交互性動畫在網頁設計中的應用與研究[J]. 電腦知識與技術, 2017, 13(4):197-198.
[3] 孫晗. 網頁設計中計算機多媒體技術的應用[J]. 無線互聯科技, 2018(4):133-134.
[4] 最好用的10種HTML5應用開發工具推薦.http://www.php.cn/html5-tutorial-360161.html
（五）其他參考資料
[1] [美] 達科特（Jon Duckett） 著；劉濤，陳學敏 譯.Web設計與前端開發秘籍:HTML CSS Javascript jQuery 構建網站（套裝共2冊）.北京.清華大學出版社.2015.06
[2] 劉西杰，張婷 著. HTML CSS Javascript 網頁制作從入門到精通 第3版.北京.人民郵電出版社.2016.07
[3] HTML系列教程.http://www.w3school.com.cn/
（一）教學活動
1、個人預習
2、課堂講授
3、課堂問答
4、實驗講解
5、案例討論
6、課后實驗
7、期末課程設計
（二）對預期學習成果的考察
預期學習成果 | 教學活動 | 學習成果考察內容:作業/課程實驗 |
項目1 網頁制作基礎知識 | 1,2,3,4,5,6,7 | 實驗1-1: 熟悉Dreamweaver工具的使用，利用文本控制標記和圖像標記制作一個簡單的個人簡歷頁面 |
項目2 “說旅游”專題制作 | 1,2,3,4,5,6,7 | 實驗1-2:制作“說旅游”專題頁 |
項目3: “網上花店”專題頁制作 | 1,2,3,4,5,6,7 | 實驗2:利用CSS相關知識，對個人簡歷頁面的樣式進行設置，并重新對個人簡歷頁面進行美化和設計。 實驗3:制作“網上花店”專題頁 |
項目4 “青春樹兒童攝像網”首頁 | 1,2,3,4,5,6,7 | 實驗4:練習課堂中的例子，并重寫個人簡歷頁面（需用到盒子模型） 實驗5:制作“青春樹兒童攝影網”首頁 |
項目5 “穿搭速遞”首頁制作 | 1,2,3,4,5,6,7 | 實驗6: 制作“穿搭速遞”首頁 |
項目6 “千年之戀”注冊頁面制作 | 1,2,3,4,5,6,7 | 實驗7:利用表格重新制作個人簡歷，并用CSS控制其樣式 實驗8:制作“千年之戀”注冊頁面 |
項目7 “趕快回家網”首頁制作 | 1,2,3,4,5,6,7 | 實驗9:練習課堂實例 實驗10: 制作“趕快回家網”首頁 |
HTML5中的音視頻、過渡和動畫 | 1,2,3,4,5,6,7 | 實驗11:制作“工作日天氣預報” |
（一）評分體系
1、出勤率: 20%
2、課堂參與: 加分
3、課堂實驗及作業: 30%
4、期末課程設計: 50%
（二）考試內容及要求
考試包含以下內容:
1. 網站設計的基礎知識及使用（核心能力1.1）；
2. 能夠選用合適的程序開發工具（核心能力2.2）；
3. 能夠根據實際問題，對開發環境進行環境的配置（核心能力2.2）；
4. 根據實際問題的需求，設計并完成綜合實驗（核心能力3.1）；
5. 能夠根據課程要求，通過文字、圖、表的形式撰寫實驗報告，并進行簡單的分析（核心能力4.1、6.2）；
6. 能夠按照綜合實驗要求，按時完成綜合實驗，并培養良好的職業習慣（核心能力7.1）。
周次 | 課程要點 | 理論學時 | 實驗學時 | 習題學時 |
1 | 理論: 項目1 網頁制作基礎知識 【任務1-1】 了解Web基本概念 【任務1-2】 網頁制作入門 【任務1-3】 Dreamweaver工具的使用 項目2 “說旅游”專題頁制作 【任務2-1】認識HTML 【任務2-2】HTML文本控制標記 【任務2-3】HTML圖像標記 實驗1-1: 熟悉Dreamweaver工具的使用，利用文本控制標記和圖像標記制作一個簡單的個人簡歷頁面 實驗1-2:制作“說旅游”專題頁 | 2 | 1 | 0 |
2 | 理論: 項目3 “網上花店”專題頁制作 【任務3-1】CSS核心基礎 【任務3-2】CSS控制文本 實驗2:利用CSS相關知識，對個人簡歷頁面的樣式進行設置，并重新對個人簡歷頁面進行美化和設計。 | 2 | 1 | 0 |
3 | 理論: 【任務3-3】CSS高級特性 實驗3:制作“網上花店”專題頁 | 1 | 2 | 0 |
4 | 理論: 項目4 “青春樹兒童攝影網”首頁 【任務4-1】認識盒子模型 【任務4-2】盒子模型相關屬性 【任務4-3】元素的類型與轉換 實驗4:練習課堂中的例子，并重寫個人簡歷頁面（需用到盒子模型） | 2 | 1 | 0 |
5 | 理論: 項目4 “青春樹兒童攝影網”首頁 【任務4-4】元素的浮動 【任務4-5】元素的定位 【任務4-6】布局及定義基礎樣式 實驗5:制作“青春樹兒童攝影網”首頁。 | 1 | 2 | 0 |
6 | 理論: 項目5 “穿搭速遞”首頁制作 【任務5-1】列表標記 【任務5-2】CSS控制列表樣式 【任務5-3】超鏈接標記 實驗6:制作“穿搭速遞”首頁 | 2 | 1 | 0 |
7 | 理論: 項目6 “千年之戀”注冊頁面制作 【任務6-1】認識表格相關標記 【任務6-2】CSS控制表格樣式 實驗7:利用表格重新制作個人簡歷，并用CSS控制其樣式 | 2 | 1 | 0 |
8 | 理論: 項目6 “千年之戀”注冊頁面制作 【任務6-3】認識表單 【任務6-4】表單控件 【任務6-5】CSS控制表單樣式CSS控制表單樣式 實驗8:制作“千年之戀”注冊頁面 | 1 | 2 | 0 |
9 | 理論: 項目7 “趕快回家網”首頁制作 【任務7-1】Javascript概述 【任務7-2】Javascript語言基礎 【任務7-3】流程控制語句 【任務7-4】函數 實驗9:練習課堂實例 | 2 | 1 | 0 |
10 | 理論: 項目7 “趕快回家網”首頁制作 【任務7-5】布局及定義基礎樣式 【任務7-6】制作“頭部”模塊 【任務7-7】制作“導航”模塊 【任務7-8】制作“banner”和“時間” 【任務7-9】制作“客運信息”模塊 【任務7-10】制作“底部”模塊 實驗10: 制作“趕快回家網”首頁 | 1 | 2 | 0 |
11 | HTML5中的音視頻、過渡和動畫（補充） 實驗11:制作“工作日天氣預報” | 2 | 1 | 0 |
12 | 課程設計 | 0 | 3 | 0 |
13 | ||||
14 | ||||
15 | ||||
16 | ||||
17 | ||||
18 | ||||
19 | ||||
20 | ||||
總學時 | 18 | 18 | ||
