網頁設計基礎課程是廣東工貿職業技術學院於2018年03月19日首次在中國大學MOOC開設的慕課課程、國家精品線上開放課程（高職）。該課程授課教師為郭建東、魯慶、黃培泉等。據2021年3月中國大學MOOC官網顯示，該課程已開課7次。
網頁設計基礎課程共八章，包括網站及網頁的創建、CSS+DIV布局簡單頁面、複雜頁面布局、導航設計、使用Spry框架製作複雜導航和可切換面板等內容。
基本介紹
- 中文名：網頁設計基礎
- 提供院校：廣東工貿職業技術學院
- 授課教師：郭建東、魯慶、黃培泉等
- 類 別：國家精品線上開放課程（高職）
- 授課平台：中國大學MOOC
- 開課時間：2018年03月19日（首次）
課程性質,課程背景,適應對象,課程定位,開課信息,課程簡介,課程大綱,課前預備,授課目標,所獲榮譽,教師簡介,
課程性質
課程背景
21世紀網際網路時代，網頁已經成為信息傳遞和互動的重要工具，人們通過網頁發布公司信息，了解世界各地發生的新聞事件，學習和傳遞新知識新技術，人們使用網頁記錄旅遊的足跡、成長的印記。在該背景下廣東工貿職業技術學院開設了網頁設計基礎課程。
適應對象
該課程面向網頁前端工作崗位。
課程定位
網頁設計基礎課程是一門專業基礎課，學生可以從零基礎開始學習這門課程仔蘭，後續課程包括：WEB前端頁面設計進階（JavaScript和JQuery）、網站最佳化，動態網頁設計、電子商務網站開發、移動套用開發等課程，該課程提供前端設計和美工（UI設計）動畫設計的基礎，為後續課程學習打下基礎。
開課信息
| 開課次數 | 開課時間 | 授課教師 | 學時安排 | 參與人數 |
|---|---|---|---|---|
第1次開課 | 2018年03月19日~2018年05月31日 | 郭建東 | 4~6小時每周 | 4603人 |
第2次開課 | 2018年09月10日~2018年12月16日 | 郭建東、魯慶 | 6199人 | |
第3次開課 | 2019年03月04日~2019年06月23日 | 郭建東、魯慶 | 3~5學時每周 | 5343人 |
第4次開課 | 2019年09月葛背拘09日~2019年12月23日 | 郭建東、魯慶、黃培泉、孔宇彥、張小蘭、楊瑩 | 3212人 | |
第5次開課 | 2020年02月23日~2020年06月14日 | 郭建東、魯慶、黃培泉、孔宇彥 | 4834人 | |
第6次開課 | 2020年09月20日~2021年01月13日 | 郭建東、黃培泉 | 1731人 | |
第7次開課 | 2021年03月01日~2021年06月18日 | 待定 |
（註：表格內容參考資料）
課程簡介
該課程帶領大家學會製作從簡單到複雜的網頁頁面製作，包括製作各類圖文混排頁面、多列布局的複雜頁面和各類導航製作等，掌握html/html5語言的基本語法、使用CSS布局和美化頁面、使用CSS3製作特效文字海潤腳蘭、圓角框線和動畫等，使用html5播放音頻和視頻檔案，使用Photoshop製作導航、按鈕、文字特效和修改簡單的網頁圖片素材、進行網頁的版本設計和圖片切片等。最後該課程將提供一個完整靜態網站製作的視頻講解。
課程大綱
第一單元網站及網頁的創建 1.1網站和網頁知識述 1.2創建網站和網頁 1.3在網頁中添加文字圖片 1.4CSS樣式初探 1.5設定文字和段落樣式 第二單元CSS+DIV布局簡單頁面 2.1CSS樣式、div層和命名規範 2.2使用CSS+DIV製作一列布局網頁 2.3製作一列布局圖文混排充境鑽的網頁 2.4導航欄添加列表文字宙姜墓 2.5html網頁元素初探 第三單元複雜頁面布局 3.1外部樣式的創建和引用 3.2使用CSS+DIV布局二列頁面 3.3使用CSS+DIV布局三列頁面 3.4使用CSS+DIV布局多列頁面 第四單元導航設計 4.1文字和圖片連結 | 4.2文字連結導航的製作與套用 4.3列表導航的製作與套用 第五單元使用Spry框架製作複雜導航和可切換面板 5.1多級橫嚮導航製作與套用 5.2多級豎嚮導航製作與套用 5.3選項卡式面板製作與套用 5.4多重摺疊面板製作與套用 5.5單摺疊面板製作與套用 第六單元HTML基礎 6.1html概述 6.2使用芝笑榜辯sublime編輯器編寫網頁代碼 第七單元HTML5基礎 7.1html5概述 7.2使用html5播放音視頻檔案 第八單元使用Photoshop處理網頁圖片 8.1初步了解Photoshop及網頁配色 8.2使用Photoshop製作導航等網頁元素 8.3使用Photoshop進行圖像合成和修飾 8.4使用Photoshop進行網頁版面設計 |
（註：課程大綱排版從左到右）
01網站及網頁的創建 了解什麼是網頁，掌握如何創建網站和網頁，並在網頁中添加文字圖片，初步了解CSS樣式在網頁中的作用，使用CSS樣式設定文字和段落樣式。 課時 1.1網站和網頁知識述 1.2創建網站和網頁 1.3在網頁中添加文字圖片 1.4CSS樣式初探 1.5設定文字和段落頸重辨樣式 02一列布局頁面製作 了解CSS樣式和命名規範，掌握一列布局的網頁的製作 課時 2.1CSS樣式、層和命名規範 2.2使用CSS+DIV製作一列固定寬度布局網頁 2.3使用CSS+DIV製作一列自適應寬度布局網頁 03圖文混排頁面製作 掌握一列布局圖文混排頁面的製作，並在導航欄中添加列表文字 課時 3.1圖文混排網頁製作 3.2導航欄添加列表文字 3.3html網頁元素初探 04二列布局頁面製作 使用CSS+DIV布局二列頁面，在網頁中添加文字圖片，並設定CSS樣式 課時 4.1外部樣式的創建和引用 4.2使用CSS+DIV布局二列頁面 05多列布局頁面製作 使用CSS+DIV布局三列和多列頁面 課時 5.1使用CSS+DIV布局三列頁面 5.2使用CSS+DIV布局多列頁面 06文字、圖片連結及套用 掌握文字和圖片連結的設定，並用連結文字製作導航 課時 6.1文字和圖片連結 6.2文字連結導航的製作與套用 07列表導航的製作與套用 掌握使用列表項製作橫向和豎嚮導航 課時 7.1豎向列表導航製作 7.2橫向列表導航製作 | 08使用Spry框架製作複雜導航 了解spry框架，學會使用spry框架製作複雜的橫向和豎嚮導航，並修改導航樣式課時 8.1多級橫嚮導航製作與套用 8.2多級豎嚮導航製作與套用 09使用Spry框架製作摺疊和可切換面板 了解spry框架，學會使用spry框架製作選項卡式面板、摺疊面板等，並修改面板樣式 課時 9.1可摺疊面板製作與套用 9.2多摺疊面板製作與套用 9.3選項卡式面板製作與套用 10HTML基礎 了解HTML語法基礎和網頁代碼結構，初步學會使用sublime編輯器編寫網頁代碼 課時 10.1html語法基礎 10.2使用sublime編輯器編寫網頁代碼 11HTML5基礎 初步了解HTML5語法與HTML語法的區別，學會使用HTML5語言播放音視頻檔案 課時 11.1Html5語法基礎 11.2使用Html5播放音視頻檔案 11.3HTML5拓展學習 12使用PS製作網頁素材 初步了解網頁的常見配色方案，製作導航、按鈕、特效文字等簡單的網頁圖片素材、設計網頁版面、學會圖片的合成修改和切片等。 課時 12.1初識PS 12.2使用PS製作圖片素材 12.3導航和banner圖片設計 12.4網頁版面設計 13網站整體設計 通過一個介紹詩詞曲賦的網站讓大家學習完成網站製作的流程和知識 課時 13.1網站的製作流程 13.2使用Photoshop切圖 13.3詩詞曲賦網站主頁和導航製作 13.4唐詩、宋詞、元曲、漢賦內容頁製作 13.5測試和發布網站 |
（註：課程大綱排版從左到右）
01網站及網頁的創建 課時 1.1網站和網頁知識概述（3小節） 1.2創建網站和網頁（2小節） 1.3在網頁中添加文字圖片（1小節） 1.4CSS樣式初探（3小節） 1.5設定文字和段落樣式（2小節） 01單元原始碼和圖片素材下載 01單元案例文字內容 開發平台軟體下載和安裝說明 01單元導學 01單元作業 01單元測試 02一列布局頁面製作 課時 2.1CSS樣式、層和命名規範（3小節） 2.2使用css+div製作一列固定寬度布局頁面（4小節） 2.3使用css+div製作一列自適應寬度布局頁面（2小節） 02單元原始碼和素材下載 02單元案例效果圖和文字素材 02單元導學 02單元作業 02單元測試 03圖文混排頁面製作 課時 3.1圖文混排頁面製作（3小節） 3.2導航欄添加列表文字（2小節） 3.3Html網頁元素初解（2小節） 優秀作品賞析1：心靈驛站-作品展示和原始碼下載 03單元原始碼和圖片素材下載 03單元案例效果圖和文字素材 03單元仿真練習效果圖 03單元導學 03單元作業 03單元測試 04二列布局頁面製作 課時 4.1外部樣式的創建和引用（3小節） 4.2二列布局頁面製作（3小節） 優秀作品賞析2：沙畫-作品展示和原始碼下載 04單元原始碼和圖片素材下載 04單元案例效果圖和文字素材 04單元仿真練習效果圖 04單元導學 04單元作業 04單元測試 05多列布局頁面製作 課時 5.1三列布局頁面製作（4小節） 5.2多列布局頁面製作（3小節） 優秀作品賞析3：古典音樂-作品展示和原始碼下載 05單元原始碼和圖片素材下載 05單元案例效果圖和文字素材 05單元仿真練習效果圖 05單元導學 05單元作業 05單元測驗 06文字、圖片連結及套用 課時 6.1文字和圖片連結（3小節） 6.2文字連結導航製作和套用（4小節） 優秀作品賞析4：書法網-作品展示和原始碼下載 06單元原始碼和圖片素材下載 06單元案例效果圖和文字素材 06單元仿真練習效果圖 06單元導學 06單元作業 06單元測試 07列表導航的製作與套用 課時 7.1豎向列表導航製作（2小節） 7.2橫向列表導航製作 優秀作品賞析5：瓷之都-作品展示和原始碼下載 | 07單元原始碼和圖片素材下載 07單元仿真項目效果圖和文字素材 07單元導學 07單元作業 07單元測試 08使用Spry框架製作複雜導航 課時 8.1橫向多級導航製作（4小節） 8.2豎向多級導航製作（4小節） 優秀作品賞析6：中華五嶽-作品展示和原始碼下載 08單元原始碼和圖片素材下載 08單元仿真項目效果圖 08單元導學 08單元作業 08單元測試 09使用Spry框架製作摺疊和可切換面板 課時 9.3選項卡式面板製作（4小節） 9.1可摺疊面板製作（4小節） 9.2多摺疊面板製作（4小節） 優秀作品賞析7：口琴-作品展示和原始碼下載 09單元原始碼和圖片素材下載 09單元案例項目效果圖和文字素材 09單元仿真練習效果圖 09單元導學 09單元作業 09單元測驗 10HTML基礎 課時 10.1HTML語法基礎（5小節） 10.2使用Sublime編輯器編寫網頁代碼（2小節） 優秀作品賞析8：中國傳統樂器-作品展示和原始碼下載 10單元原始碼和圖片素材下載 10單元案例效果圖和文字素材 Sublime編輯器下載 10單元導學 10單元作業 10單元測試 11HTML5基礎 課時 11.1HTML5語法基礎（3小節） 11.2使用HTML5播放音頻視頻檔案（3小節） 11.3HTML5-拓展學習 優秀作品賞析9：讓心去旅行-作品展示和原始碼下載 11單元原始碼、素材和課後項目仿真練習效果圖下載 11單元案例效果圖 11單元導學 11單元作業 11單元測試 12使用PS製作網頁素材 課時 12.1初識PS（5小節） 12.2使用PS製作圖片素材（4小節） 12.3導航和banner圖片設計（4小節） 12.4網頁版面設計 優秀作品賞析10：中國戲曲-作品展示和原始碼下載 12單元原始碼和圖片素材下載 12單元案例效果圖 12單元導學 12單元作業 12單元測試 13網站整體設計 課時 13.1網站的製作流程 13.2使用Photoshop切圖 13.3詩詞曲賦主頁和導航製作 13.4唐詩、宋詞、元曲、漢賦內容頁製作 13.5網站測試 13網站視頻介紹和原始碼下載 13單元網頁效果圖 13單元文字素材 13單元導學 |
（註：課程大綱排版從左到右）
課前預備
學習資料
| 書名 | 主編 | 出版時間 | 出版社 |
|---|---|---|---|
《網頁設計與製作案例教程》 | 郭建東 | 2016年 | |
《網頁設計案例教程》 | 2012年 | ||
《HTML5+CSS3網頁設計與製作案例教程》 | 2020年 | ||
《HTML5+CSS3網頁設計與製作案例教程（第二版）》 | 2019年 |
（註：表格內容參考資料）
授課目標
該課程的培養目標為掌握HTML/HTML5、CSS/CSS3基礎知識，能使用dreamweaver平台或Hbuilder開發軟體獨立完成靜態網站的設計製作，初步認識HTML5基礎知識，使用hmtl5進行音視頻檔案的播放；使用CSS布局和美化頁面、使用CSS3製作特效文字、圓角框線和動畫等；能夠使用PhotoShop製作網頁圖片素材，進行圖片的修改、合成和切片。
所獲榮譽
2020年11月25日，該課程被中華人民共和國教育部職業教育與成人教育司認定為“2020年國家精品線上開放課程（高職）”。
教師簡介
郭建東，女，廣東工貿職業技術學院計算機與信息工程學院專任教師，副教授，主持網頁設計基礎和ASP.NET動態WEB技術廣東省省級精品線上開放課課程建設。
所獲榮譽
2020年11月25日，該課程被中華人民共和國教育部職業教育與成人教育司認定為“2020年國家精品線上開放課程（高職）”。
教師簡介
郭建東，女，廣東工貿職業技術學院計算機與信息工程學院專任教師，副教授，主持網頁設計基礎和ASP.NET動態WEB技術廣東省省級精品線上開放課課程建設。
