課程簡介
Course Introduction
教學大綱
Teaching Syllabus
《網(wǎng)頁設計與網(wǎng)站建設》課程教學大綱
一,、課程基本信息
（一）課程代碼及課程名稱
1.課程代碼:08197780
2.課程名稱（中/英文）:網(wǎng)頁設計與網(wǎng)站建設/Web design and website construction
（二）課程類別及課程性質
專業(yè)任選課
（三）學時及學分:
總學時數(shù):48,；總學分數(shù):3。
其中,，講授學時:32 ,，實踐（實驗）學時:16。
（四）適用專業(yè)及開設學期
適用專業(yè):計算機軟件工程專業(yè)
開設學期:第5學期
（五）先修課程與后續(xù)課程
先修課程:《高級語言程序設計 》,、《網(wǎng)頁技術基礎》
后續(xù)課程:《網(wǎng)頁端應用設計與開發(fā)項目實踐》,、《移動端應用設計與開發(fā)項目實踐》
二、課程簡介
本課程介紹網(wǎng)頁設計與網(wǎng)站建設的基本知識,。通過本課程的學習,，掌握HTML、CSS和Javascript腳本語言的基本語法,，熟練使用網(wǎng)頁常用編輯工具Dreamweaver CS6,，熟悉這些基礎知識在網(wǎng)站建設與開發(fā)中的整合應用。要求在學習本課程之后能獨立進行網(wǎng)站前端設計,、網(wǎng)站應用開發(fā)和網(wǎng)站維護,。課程要重視實用性，前期講解基本知識體系,，側重于構建版式版面,，后期覆蓋最新的HTML5+CSS3的相關知識，重點研究響應式跨平臺網(wǎng)站的前端設計,。
三,、教學目的與基本要求
（一）該課程教學目的與專業(yè)培養(yǎng)要求對應關系矩陣
培養(yǎng)要求
課程名稱 | 培養(yǎng) 要求1 | 培養(yǎng) 要求2 | 培養(yǎng) 要求3 | 培養(yǎng) 要求4 | 培養(yǎng) 要求5 | 培養(yǎng) 要求6 | 培養(yǎng) 要求7 | 培養(yǎng) 要求8 | …… | …… |
數(shù)據(jù)庫原理 | ● | ● | ◎ |
說明:表格要清晰展示該課程與每項培養(yǎng)要求達成的關聯(lián)度情況，關聯(lián)度強的用“●”標識,，關聯(lián)度中等的用“◎”標識,，關聯(lián)度弱的用“○”標識；每門課程與4-8項（底線為總培養(yǎng)要求的50%）培養(yǎng)要求相關聯(lián)。
（二）教學目的
通過本課程的學習,，要求掌握HTML語言,、CSS層疊樣式表和Javascript語言使用，熟練使用網(wǎng)頁常用編輯工具,，掌握HTML5的畫布及視頻標簽的使用,，掌握CSS3的新增特性，能夠利用各種設計軟件制作出較為完整的網(wǎng)頁,，并能夠結合交互設計理論和方法進行動態(tài)網(wǎng)頁設計，要求學生在學習本課程之后能獨立進行網(wǎng)站建立,、網(wǎng)站應用開發(fā)和網(wǎng)站維護,。
通過本課程的學習，應使學生達到:
第一,、掌握網(wǎng)站建設的基本流程,。
第二、掌握前端設計HTML,、CSS,、Javascript等技術。
第三,、掌握HTML5+CSS3的相關知識,，研究響應式跨平臺網(wǎng)站的前端設計。
（三）教學要求:
第一,、掌握HTML基本語法,；理解表單的使用，能利用HTML和常用網(wǎng)頁編輯工具來編寫網(wǎng)頁和建立網(wǎng)站,；了解層疊樣式表,。
第二、從零開始學DreamweaverCS6,、創(chuàng)建表格與Div的布局,、制作網(wǎng)頁框架、使用CSS修飾美化網(wǎng)頁,、使用CSS和Div布局網(wǎng)頁,、運用行為制作交互網(wǎng)頁。
第三,、掌握服務器端腳本和客戶端腳本語言的概念,， Javascript基本語法；熟悉腳本語言中的部分重要對象,，了解如何將腳本語言和網(wǎng)頁結合,。
第四、掌握HTML5中畫布元素的繪圖步驟:創(chuàng)建、尋找,、獲取,、繪制。能用畫布元素結合Javascript繪制簡單圖形,。
第五,、掌握CSS3的新增屬性使用，掌握CSS3中transform,、transition,、animation的基本用法。
第六,、掌握Web服務器的安裝和配置,；理解靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的概念和執(zhí)行過程；了解網(wǎng)站的發(fā)布方法,。
四,、教學內(nèi)容
第一章 HTML入門（共3學時）
（一）本章教學目的和要求
通過本章學習，掌握HTML基本語法,、頁面布局與文字標簽,、超鏈接標簽與圖片標簽、表格標簽,、表單標簽等
（二）本章教學重點與難點
重點: 1. 超鏈接里的絕對地址和相對地址
2. 頁面布局與文本標簽
難點:1.頁面布局如何兼容不同的瀏覽器
2. 表單
（三）教學內(nèi)容
第一節(jié) HTML的基本語法（1學時）
一,、HTML的基本構成
二、HTML元素
三,、HTML常用標簽
第二節(jié) 頁面布局與標簽（1學時）
一,、標題和換行
二、段落和水平線段
三,、文字和文字樣式
四,、多媒體標簽:圖像、聲音,、視頻
五,、超鏈接
第三節(jié) 表格與表單（1學時）
一、表格的基本結構
二,、表格的屬性設置
三,、表單
第二章 網(wǎng)頁設計軟件DreamweaverCS6（共3學時）
（一）本章教學目的和要求
講解從零開始學DreamweaverCS6、創(chuàng)建表格與Div布局制作網(wǎng)頁,、使用CSS修飾美化網(wǎng)頁,、使用CSS和Div布局網(wǎng)頁以及運用行為制作交互網(wǎng)頁等內(nèi)容，讓學生學會網(wǎng)頁排版設計操作,。
（二）本章教學重點與難點
重點: 1. 使用Dreamweaver制作網(wǎng)頁
2. 利用DIV+CSS布局網(wǎng)頁
難點:1. 排版和設置網(wǎng)頁樣式
（三）教學內(nèi)容
第一節(jié) 網(wǎng)頁的布局（2學時）
一,、DreamweaverCS6的安裝和使用
二,、網(wǎng)頁的構成
三、利用表格布局
四,、利用DIV+CSS布局網(wǎng)頁
第二節(jié) 將Web頁面切片（1學時）
一,、Ps切片
二、Fw切片
第三章 CSS入門（共6學時）
（一）本章教學目的和要求
通過本章學習,，熟悉CSS層疊樣式表的使用,，熟練應用CSS規(guī)則設計網(wǎng)頁樣式。
（二）本章教學重點與難點
重點: 1. CSS的語法規(guī)則
2. CSS選擇器
難點:1. 網(wǎng)頁中如何應用CSS
2. 如何解決CSS沖突
（三）教學內(nèi)容
第一節(jié) CSS語法規(guī)則（1學時）
一,、CSS的優(yōu)勢
二,、CSS的書寫規(guī)則
第二節(jié) CSS選擇器（3學時）
一、元素選擇器
二,、類選擇器
三,、id選擇器
四、特定元素,、派生、多類選擇器
第三節(jié) 應用CSS（2學時）
一,、外部樣式表
二,、內(nèi)部樣式表
三、內(nèi)聯(lián)樣式表
第四章 Javascript入門（共6學時）
（一）本章教學目的和要求
掌握服務器端腳本和客戶端腳本語言的概念,， Javascript基本語法,；熟悉腳本語言中的部分重要對象，了解如何使用腳本語言和網(wǎng)頁結合,。
（二）本章教學重點與難點
重點: 1. Javascript的函數(shù)
2. Javascript程序的編輯和調(diào)試
3. 瀏覽器對象模型
4．文檔對象模型
難點:1. Javascript對象化編程
2. 事件驅動及事件處理
（三）教學內(nèi)容
第一節(jié) Javascript概述及變成基礎（1學時）
一,、Javascript的起源、特點,、作用和組成
二,、Javascript程序的編輯和調(diào)試
三、Javascript的變量
四,、Javascript函數(shù)及對象化編程
五,、事件驅動及事件處理
第二節(jié) 瀏覽器對象模型（2學時）
一、體系結構
二,、window對象,、Document對象、Location對象,、History對象,、Navigator對象
第三節(jié) 文檔對象模型（2學時）
一、HTML文檔對象模型節(jié)點樹
二,、訪問指定節(jié)點
三,、處理元素屬性
第四節(jié) 客戶端動態(tài)網(wǎng)頁編程（1學時）
一、動態(tài)修改文檔內(nèi)容
二、樣式表編程
第五章 HTML5入門及畫布（共6學時）
（一）本章教學目的和要求
通過本章學習,，掌握HTML5中畫布元素的繪圖步驟:創(chuàng)建,、尋找、獲取,、繪制,。能用畫布元素結合Javascript繪制簡單圖形。
（二）本章教學重點與難點
重點: 1.HTML5核心功能了解
2.HTML5畫布的繪圖步驟
3.繪制簡單圖形
難點:1. 結合Javascript繪制漸變,、組合圖形
（三）教學內(nèi)容
第一節(jié) HTML5畫布基礎（3學時）
一,、繪圖步驟
二、繪制直線,、矩形,、圓形、三角形,、貝塞爾曲線
第二節(jié) HTML5畫布進階（3學時）
一,、保存與恢復
二、移動與旋轉坐標空間
三,、縮放圖形
四,、圖形的組合
第六章 CSS3入門（共6學時）
（一）本章教學目的和要求
通過本章學習，掌握CSS3的新增屬性使用,，掌握CSS3中transform,、transition、animation的基本用法,。
（二）本章教學重點與難點
重點: 1.CSS3新增屬性選擇器
2.CSS3變形動畫
3.CSS3過渡動畫
難點:1.CSS3關鍵幀動畫
（三）教學內(nèi)容
第一節(jié) CSS3新增屬性（2學時）
一,、屬性選擇器
二、多欄布局
三,、多背景圖片
四,、字符串溢出
五、陰影與圓角
六,、邊框圖片
第二節(jié) CSS3動畫（4學時）
一,、形變動畫
二、過渡動畫
三,、關鍵幀動畫
第七章 動態(tài)網(wǎng)頁開發(fā)與網(wǎng)站發(fā)布（共2學時）
（一）本章教學目的和要求
通過本章學習,，掌握Web服務器的安裝和配置；理解靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的概念和執(zhí)行過程,；了解網(wǎng)站的發(fā)布方法,。
（二）本章教學重點與難點
重點: 1. 網(wǎng)站的工作機制
2. 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的概念
難點:1. 服務器的安裝和配置
2. 動態(tài)網(wǎng)頁的執(zhí)行過程
（三）教學內(nèi)容
第一節(jié) 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁（1學時）
一、動態(tài)網(wǎng)頁的特點
二,、靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的執(zhí)行過程
第二節(jié) 網(wǎng)頁設計與網(wǎng)站開發(fā)流程（1學時）
一,、ASP.NET與服務器配置
二,、網(wǎng)站發(fā)布前的準備
三、網(wǎng)站發(fā)布常見問題
五,、教學時數(shù)分配
《動態(tài)網(wǎng)頁開發(fā)與網(wǎng)站建設》課程教學時數(shù)分配表
總學時:48 學分:3
章次 | 章標題名稱 | 學時小計 | 講授 學時 | 實驗 學時 | 實踐 學時 | 討論,、習題課等學時 |
第一章 | HTML入門 | 5 | 3 | 2 | ||
第二章 | 網(wǎng)頁設計軟件DW | 5 | 3 | 2 | ||
第三章 | CSS入門 | 8 | 6 | 2 | ||
第四章 | Javascript入門 | 8 | 6 | 2 | ||
第五章 | HTML5入門及畫布 | 8 | 6 | 2 | ||
第六章 | CSS3入門 | 8 | 6 | 2 | ||
第七章 | 動態(tài)網(wǎng)頁開發(fā)與網(wǎng)站發(fā)布 | 6 | 2 | 4 |
六、實驗內(nèi)容與學時分配
《動態(tài)網(wǎng)頁開發(fā)與網(wǎng)站建設》課程實驗教學一覽表
序號 | 項目名稱 | 內(nèi)容提要 | 學時 | 實驗類型（演示,、驗證,、綜合、設計等） | 是否為 開放實驗 |
1 | HTML標記符的使用 | 文本標記,、超鏈接,、表格等 | 2 | 驗證 | 否 |
2 | 用DW編寫簡單網(wǎng)頁 | DW建站點流程 | 2 | 驗證 | 否 |
3 | 網(wǎng)頁布局與CSS層疊樣式表的使用 | 利用DIV+CSS布局并美化網(wǎng)頁 | 2 | 設計 | 是 |
4 | Javascript 基礎 | 表單驗證和簡單動態(tài)效果 | 2 | 驗證 | 否 |
5 | HTML5畫布繪制同心圓 | Canvas繪制直線、三角形,、矩形和圓形 | 2 | 驗證 | 否 |
6 | 利用CSS3動畫實現(xiàn)圖片翻轉 | 變形動畫,、過渡動畫、關鍵幀動畫 | 2 | 驗證 | 否 |
7 | 設計開發(fā)應用網(wǎng)站 | 布局合理,、頁面美觀,、風格統(tǒng)一 | 4 | 設計 | 是 |
七、本課程的實踐環(huán)節(jié)
本課程實踐環(huán)節(jié)是為了更好的鞏固課堂上所學到的語言,，總共16學時,，包括理論教學中的HTML，CSS,，JS、HTML5中畫布功能以及CSS3中動畫實現(xiàn),。最終以實驗報告來進行考核,。
八、主要的教學方法與教學手段
1.課程與教學方法,、教學手段對應關系矩陣
課程名稱 | 對應的教學方式方法 | ||||||||||||
講授法 | 啟發(fā)式 | 討論法 | 案例法 | 項目教學 | 實驗室 實驗 | 技能訓練 | 研究與設計 | 小組教學 | 個別教學 | 課程作業(yè) | 課外閱讀及自學鍛煉 | …… | |
數(shù)據(jù)庫原理 | √ | √ | √ | √ | |||||||||
說明:每門課程應使用多種教學方式方法,，在相應的教學方式方法中打“√”。
2.主要采用的幾種教學方法和手段
本課程是以理論加實踐學習相關知識,，在理論上主要采用課堂講授法,，同時為了鞏固知識點結合課堂練習和課程作業(yè)。并要求學生在進行實驗室上機操作時除了課堂內(nèi)容還要學習課外內(nèi)容,。
九,、考核與成績評定
1. 該課程與評價方法對應關系矩陣
課程名稱 | 對應的評價方法 | |||||||||
課堂表現(xiàn) | 實驗報告 | 項目作業(yè)或報告 | 課程作業(yè)或報告 | 口試 | 口頭報告 | 上機操作 | 實踐操作 | 期中考核 | 期末考核 | |
數(shù)據(jù)庫原理 | √ | √ | √ | |||||||
說明:每門課程應使用多種評價方式，注重過程評價,，實現(xiàn)平時成績,、期中成績與期末成績相結合，在相應的評價方法中打“√”,。
2.具體考核與成績評定辦法
根據(jù)教學目的和要求,，本課程采用課程設計形式考核,。按照平時，實驗報告,，期末作品成績3:3:4進行最終成績評定,。
十、推薦教材及參考書
（一）推薦教材
《HTML5+CSS3從入門到精通》,，李東博主編,，清華大學出版社，2013年,。
（二）參考書
1. 《網(wǎng)頁設計與制作-Dreamweaver CS5標準教程》,，修毅主編，人民郵電出版社,，2013年,。
2. 《HTML、CSS和Javascript入門經(jīng)典》,，Julie Meloni編,，陳宗斌譯，人民郵電出版社,，2015年第2版,。
3. 《ASP.NET從入門到精通》，明日科技主編,，清華大學出版社,，2012年第3版。
十一,、其他需要說明的問題
