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