靜態網頁設計課程是周口職業技術學院於2017年04月23日首次在中國大學MOOC開設的慕課課程、國家精品線上開放課程。該課程授課教師為劉蘊、李思廣、劉芳芳、陳鵬、王軍亞等。據2021年3月中國大學MOOC官網顯示，該課程已開課6次。
靜態網頁設計課程共十一章，主要包括網頁設計基礎知識、生活網網站的創建、生活網網站頁面的布局、輸入和編輯網頁元素、網站內容的連結與特效網頁的製作——套用連結與行為、利用模板和庫創建頁面、利用表單創建互動式頁面、項目綜合實訓分析、HTML5+CSS3、HTML5高級標籤、CSS3入門。
基本介紹
- 中文名：靜態網頁設計
- 類別：慕課、國家精品線上開放課程
- 提供院校：周口職業技術學院
- 授課平台：中國大學MOOC
- 授課教師：劉蘊、李思廣、劉芳芳、陳鵬、王軍亞等
- 開課時間：2017年04月23日（首次）
課程性質,課程背景,課程定位,適應專業,開課信息,課程簡介,課程大綱,課前預備,預備知識,學習資料,授課目標,課程特色,設計理念,開發思路,所獲獎項,教師簡介,
課程性質
課程背景
為了適合線上學習和混合式教學，依據靜態網頁設計的線下課程知識體系要求，周口職業技術學院開設了靜態網頁設計線上開放課程。
課程定位
該課程作為計算機相關專業的核心主幹課程，使學生掌握商業網站的開發流程，並能獨立進行操作。學生畢業後可勝任網站管理員、網頁設計師等工作崗位。
適應專業
靜態網頁設計課程是高職計算機套用技術、計算機網路、軟體技術等相關計算機專業的一門專業必修課程。
開課信息
開課次數 | 開課時間 | 授課教師 | 學時安排 | 參與人數 |
|---|---|---|---|---|
第1次開課 | 2017年04月23日~2017年06月30日 | 劉蘊、李思廣、劉芳芳、張鵬偉、侯艷芳、陳鵬、王軍亞、王換換、王貝 | 3~5小時每周 | 3982 |
第2次開課 | 2017年11月27日~2018年02月05日 | 4290 | ||
第3次開課 | 2018年04月02日~2018年06月30日 | 2618 | ||
第4次開課 | 2018年09月26日~2018年12月26日 | 劉蘊、李思廣、劉芳芳、陳鵬、王軍亞 | 3小時每周 | 5163 |
第5次開課 | 2019年10月10日~2019年12月19日 | 2~3小時每周 | 7406 | |
第6次開課 | 2020年03月16日~2020年06月06日 | 劉蘊、李思廣、劉芳芳 | 7896 | |
表格內容參考資料 | ||||
課程簡介
靜態網頁設計課程共十一章內容，第一章介紹網頁設計基礎知識；第二至三章介紹生活網網站的創建和生活網網站頁面的布局知識；第四至五章介紹輸入和編輯網頁元素和網站內容的連結與特效網頁的製作——套用連結與行為的內容；第六至七章介紹利用模板和庫創建頁面及利用表單創建互動式頁面的知識；第八章介紹項目綜合實訓分析；第九至十一章介紹HTML5+CSS3、HTML5高級標籤以及CSS3入門方面的知識。
課程大綱
周次 | 項目名稱 | 內容 | |
|---|---|---|---|
1 | 項目一、創建生活網網站 | 子項目一、網頁設計基礎知識 | 任務1、網頁設計基礎知識 任務2、了解網站製作流程 任務3、Dreamweaver CS6安裝及網站配色方案 |
2 | 子項目二、Dreamweaver CS6入門 | 任務1、面板基本操作 任務2、新建和管理站點 任務3、為首頁設定頭信息和頁面屬性 | |
3 | 子項目三、網頁結構的布局 | 任務1、使用表格布局頁面 任務2、使用AP DIV布局頁面 任務3、使用框架布局網頁 | |
4 | 子項目四、網站內容的編輯——輸入和編輯網頁元素 | 任務1、添加文本類網頁元素 任務2、在網頁中添加圖像 任務3、在網頁中添加FLASH對象 | |
5 | 子項目五、網站內容的連結與特效網頁的製作——套用連結和行為 | 任務1、設定網站中的超級連結 任務2、利用行為製作網站中的特效網頁 任務3、製作頁面中的彈出式選單 任務4、使用CSS美化網頁 | |
6 | 項目二、利用模板和庫製作網頁 | 任務1、利用模板製作網頁 任務2、利用庫項目製作網頁 任務3、綜合實訓 | |
7 | 項目三、使用表單創建互動式網頁（酒店客房預訂頁面設計） | 任務1、使用表單創建酒店客房預訂頁面 1、插入表單域 2、插入文本域 3、插入密碼域 4、插入多行文本區域 任務2、使用表單創建酒店客房預訂頁面 1、插入隱藏域 2、插入複選框 3、插入單選按鈕 4、插入選擇框 任務3、使用表單創建酒店客房預訂頁面 1、插入URL 2、插入圖像域 3、插入檔案域 4、插入按鈕 | |
8 | 項目四、企業綜合入口網站實訓——周口怡景田園網站設計 | 任務1、客戶需求分析的撰寫 任務2、網站建設方案的制訂 任務3、頁面風格定位 任務4、網站效果圖的設計 任務5、素材的準備 | |
9 | 任務1、網站的創建 任務2、網站的主頁設計 任務3、二級欄目網頁和內容網頁的製作 任務4、首頁彈出式選單的設定 任務5、網頁的超級連結的設定 任務6、網站的測試與發布 | ||
第一周 網頁設計基礎知識 | 第五周單元測驗 |
任務3：Dreamweaver CS6的安裝 | 第六周 利用模板和庫創建頁面 |
任務1：網站剖析 | 任務一 利用模板創建頁面 |
任務2：網站開發流程 | 任務二 利用庫項目創建頁面 |
第二周 生活網網站的創建——Dreamweaver CS6入門 | 利用模板和庫創建頁面單元測驗 |
前兩周單元測驗 | 第七周 利用表單創建互動式頁面 |
任務二 新建和管理站點 | 表單單元測驗 |
任務三 為網頁設定頭信息和頁面屬性——頁面總體設定 | 任務一 利用表單創建酒店預訂客戶頁面（一） |
任務一 初識Dreamweaver CS6 | 任務二 利用表單創建酒店預訂客戶頁面（二） |
第三周 生活網網站頁面的布局 | 任務三 利用表單創建酒店預訂客戶頁面（三） |
任務一 使用表格布局頁面 | 第八周 項目綜合實訓 |
任務二 使用AP Div布局頁面 | 任務一 個人網頁設計分析 |
任務三 使用框架布局網頁 | 任務二 文化類網頁設計分析 |
任務一 使用表格布局頁面2 | 任務三 旅遊休閒網頁設計分析 |
第三周單元測驗 | 第九周 項目綜合實訓 |
第四周 輸入和編輯網頁元素 | 任務一 遊戲娛樂網頁設計分析 |
輸入和編輯網頁元素單元測驗 | 任務二 房產網頁設計分析 |
任務一 添加文本類網頁元素 | 任務三 電子商務網頁設計分析 |
任務二 在網頁中添加圖像 | 第十周 項目綜合實訓——企業網站設計（怡景田園農莊） |
任務三 在網頁中添加多媒體元素 | 任務一 網站首頁設計 |
第五周 網站內容的連結與特效網頁的製作—— 套用連結與行為 | 任務二 二級欄目頁面和內容頁面的製作 |
任務一 設定網站中的超級連結 | 任務三 首頁彈出式選單的設計 |
任務二 利用行為製作網站中的特效網頁 | 任務四 網頁的超級連結的設定 |
任務三 製作頁面中的彈出式選單 | 任務五 網站測試與內容的發布 |
任務四 利用CSS美化頁面 | （註：課程大綱排版從左到右列） |
第一章 網頁設計基礎知識 | 第六章測驗 |
1.1：網站剖析 | 第七章 利用表單創建互動式頁面 |
1.2：網站開發流程 | 7.1 利用表單創建酒店預訂客戶頁面（一） |
1.3：Dreamweaver CS6的安裝 | 7.2 利用表單創建酒店預訂客戶頁面（二） |
第二章 生活網網站的創建 | 7.3 利用表單創建酒店預訂客戶頁面（三） |
2.1 初識Dreamweaver CS6 | 第七章測驗 |
2.2 新建和管理站點 | 第八章 項目綜合實訓分析 |
2.3 為網頁設定頭信息和頁面屬性——頁面總體設定 | 項目實訓概述 |
前兩章測驗 | 8.1 個人網頁設計分析 |
第三章 生活網網站頁面的布局 | 8.2 文化類網頁的設計分析 |
3.1 使用表格布局頁面 | 8.3 旅遊休閒類網頁的設計分析 |
3.2 使用AP Div布局頁面 | 第九章 HTML5+CSS3 |
3.3 使用框架布局網頁 | 9.1 初始HTML |
第三章測驗 | 9.2 HTML代碼編輯工具 |
第四章 輸入和編輯網頁元素 | 9.3 網頁基本信息 |
4.1 添加文本類網頁元素 | 9.4 基本HTML5標籤 |
4.2 在網頁中添加圖像 | 第九章測驗 |
4.3 在網頁中添加多媒體元素 | 第十章 HTML5高級標籤 |
第四章單元測驗 | 10.1 列表 |
第五章 網站內容的連結與特效網頁的製作—— 套用連結與行為 | 10.2 表格 |
5.1 設定網站中的超級連結 | 10.3 表單 |
5.2 利用行為製作網站中的特效網頁 | 第十章測驗 |
5.3 製作頁面中的彈出式選單 | 第十一章 CSS3入門 |
5.4 利用CSS美化頁面 | 11.1 CSS3簡介 |
第五章測驗 | 11.2 CSS3核心基礎 |
第六章 利用模板和庫創建頁面 | 11.3 文本樣式屬性 |
6.1 利用模板創建頁面 | 11.4 CSS3選擇器 |
6.2 利用庫項目創建頁面 | 11.5 CSS3盒子模型 |
（註：課程大綱排版從左到右列）
課前預備
預備知識
學習靜態網頁設計課程需要具備以下知識：
1、計算機套用基礎
（1）計算機的基本概念知識。
（2）計算機基本操作能力。
（3）Internet基礎知識。
2、PhotoShop基礎套用
（1）版面設計知識。
（2）配色相關知識。
（3）平面圖像處理基本技能。
學習資料
書名 | 作者 | 出版社 |
|---|---|---|
《Dreamweaver CS6實例教程》 | 魏三強、李靜、楊子燕 | |
《網頁設計與製作任務驅動式教程》 | 陳承歡 | |
《HTML5+CSS3網站設計基礎教程》 | 傳智播客高教產品研發部 | 人民郵電出版社 |
《HTML5+CSS3前端技術》 | 北京課工場教育科技有限公司 | 中國水利郵電出版社 |
表格內容參考資料 | ||
授課目標
通過該課程的學習使學生具備網頁製作、網站規劃與網站維護的專業能力，培養學生的團隊協作、溝通表達、工作責任心、職業規範和職業道德等綜合素質和能力。
課程特色
設計理念
該課程的設計體現“以能力為本位、以職業實踐為主線、以項目課程為主體”，打破了傳統的學科體系的模式，通過各項目的練習操作，熟練地掌握崗位所需知識和技能，並不斷強化。項目強調對學生操作能力和解決問題能力的培養，體現了職業教育“以就業為導向，以能力為本位”的職業教育理念。
開發思路
該課程主要以項目案例為主題，教材為參考，同時借鑑了一些企業網站。顛覆傳統講授風格，主要通過項目實例讓學生以師傅帶徒弟的形式一步一步學習項目開發流程。帶著對一個項目雛形的不斷完善，功能需求及其他功能的完善，進階，使學生掌握一個網站項目的設計與製作相關經驗。經驗從實踐中來，因此學生實驗課時約占到了總課時的三分之二。讓學生在職業實踐活動的基礎上掌握知識，增強課程內容與職業能力要求的相關性，提高學生的就業能力。
所獲獎項
2019年1月8日，該課程被中華人民共和國教育部認定為“國家精品線上開放課程”。
教師簡介
靜態網頁設計課程的授課教師均來自周口職業技術學院，其中教授的為劉蘊，副教授的為李思廣、張鵬偉，講師的為劉芳芳、侯艷芳、陳鵬、王軍亞，助教的為王換換、王貝。
