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