課程簡介
Course Introduction
教學大綱
Teaching Syllabus
《網(wǎng)頁設計與網(wǎng)站建設》課程教學大綱
一、課程基本信息
（一）課程代碼及課程名稱
1.課程代碼:08197780
2.課程名稱（中/英文）:網(wǎng)頁設計與網(wǎng)站建設/Web design and website construction
（二）課程類別及課程性質(zhì)
專業(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)站維護。課程要重視實用性，前期講解基本知識體系，側(cè)重于構(gòu)建版式版面，后期覆蓋最新的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)頁，并能夠結(jié)合交互設計理論和方法進行動態(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)頁結(jié)合。
第四、掌握HTML5中畫布元素的繪圖步驟:創(chuàng)建、尋找、獲取、繪制。能用畫布元素結(jié)合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的基本構(gòu)成
二、HTML元素
三、HTML常用標簽
第二節(jié) 頁面布局與標簽（1學時）
一、標題和換行
二、段落和水平線段
三、文字和文字樣式
四、多媒體標簽:圖像、聲音、視頻
五、超鏈接
第三節(jié) 表格與表單（1學時）
一、表格的基本結(jié)構(gòu)
二、表格的屬性設置
三、表單
第二章 網(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)頁的構(gòu)成
三、利用表格布局
四、利用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)頁結(jié)合。
（二）本章教學重點與難點
重點: 1. Javascript的函數(shù)
2. Javascript程序的編輯和調(diào)試
3. 瀏覽器對象模型
4．文檔對象模型
難點:1. Javascript對象化編程
2. 事件驅(qū)動及事件處理
（三）教學內(nèi)容
第一節(jié) Javascript概述及變成基礎（1學時）
一、Javascript的起源、特點、作用和組成
二、Javascript程序的編輯和調(diào)試
三、Javascript的變量
四、Javascript函數(shù)及對象化編程
五、事件驅(qū)動及事件處理
第二節(jié) 瀏覽器對象模型（2學時）
一、體系結(jié)構(gòu)
二、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)建、尋找、獲取、繪制。能用畫布元素結(jié)合Javascript繪制簡單圖形。
（二）本章教學重點與難點
重點: 1.HTML5核心功能了解
2.HTML5畫布的繪圖步驟
3.繪制簡單圖形
難點:1. 結(jié)合Javascript繪制漸變、組合圖形
（三）教學內(nèi)容
第一節(jié) HTML5畫布基礎（3學時）
一、繪圖步驟
二、繪制直線、矩形、圓形、三角形、貝塞爾曲線
第二節(jié) HTML5畫布進階（3學時）
一、保存與恢復
二、移動與旋轉(zhuǎn)坐標空間
三、縮放圖形
四、圖形的組合
第六章 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)圖片翻轉(zhuǎ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.主要采用的幾種教學方法和手段
本課程是以理論加實踐學習相關知識，在理論上主要采用課堂講授法，同時為了鞏固知識點結(jié)合課堂練習和課程作業(yè)。并要求學生在進行實驗室上機操作時除了課堂內(nèi)容還要學習課外內(nèi)容。
九、考核與成績評定
1. 該課程與評價方法對應關系矩陣
課程名稱 | 對應的評價方法 | |||||||||
課堂表現(xiàn) | 實驗報告 | 項目作業(yè)或報告 | 課程作業(yè)或報告 | 口試 | 口頭報告 | 上機操作 | 實踐操作 | 期中考核 | 期末考核 | |
數(shù)據(jù)庫原理 | √ | √ | √ | |||||||
說明:每門課程應使用多種評價方式，注重過程評價，實現(xiàn)平時成績、期中成績與期末成績相結(jié)合，在相應的評價方法中打“√”。
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版。
十一、其他需要說明的問題
