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