網站規劃與設計-課程列表
其實網站要漂亮,CSS + Javascript 的功能是跑不掉的。而且,CSS 的版面配置與一些 UI 的設計也是需要花心思來了解的。 不過,在理解 CSS, Javascript 之前,如果沒有 HTML 的基礎概念,那大概很難立刻上手網頁設計。因此,這學期的課程中, 我們會先來學習最簡單的 HTML 標記與相關應用,之後再來使用 CSS 改變原本的 HTML 標記的屬性,讓網頁各個元件變得有趣! 之後會來玩一下版面配置與慣用的一些技術技巧,期中考每個同學需要製作 20 頁左右的個人網站~
期中考過後,我們就接著使用類似 PHP 的 include 引入函數的功能,將整個網站重組,讓未來的管理更加方便。 之後會帶入 javascript 的使用,最終就用 bootstrap 來快速的呼叫所需要的小圖示、小功能等任務。期末時,會分組, 同時帶入一個大型主題,讓每組同學自行尋找廠商,跟廠商討論所需要的技術,最後就直接期末報告囉!
評分標準:
- 每週作業: 40% (請勿遲交,扣分扣很重!)
- 期中網站: 20%
- 期末網站: 40% (分工合作,且需與店家合作設計!)
- 第 01 堂課 - 製作第一組簡單網頁
- 第 02 堂課 - 資料引用,表格,內置框架與多媒體
- 第 03 堂課 - CSS 初探:基本元素,設定,外部呼叫的方式
- 第 04 堂課 - CSS 文字,清單,表格,與繼承
- 第 05 堂課 - CSS 方塊模型
- 第 06 堂課 - CSS 背景,圖片,動畫簡介
- 第 07 堂課 - 導覽列設計與 HTML 5 版面介紹
- 第 08 堂課 - 版面規劃與設計
- 期中報告 - 製作一個 20 頁面以上的個人網站
- 第 09 堂課 - PHP 初探
- 第 10 堂課 - 初探 bootstrap 網頁製作
- 第 11 堂課 - bootstrap 的版面規劃
- 第 12 堂課 - 表單規劃與設計
- 第 13 堂課 - javascript 與 DOM 基礎
- 期末報告流程 - 至少 5 周時間完成
- 第 01 堂、瞭解 WWW、Browser、HTML、CSS、多媒體、資料庫、網頁程式語言、java scripts 相關性
- 第 02 堂、HTML 5 的版面設計 (doctype, html, body, header, nav, aside, footer),CSS 初探
- 第 03 堂、使用 ul, li 搭配 CSS 風格設定下拉式選單的功能 (純粹的 CSS 功能)
- 第 04 堂、利用 PHP 將固定的與變動的資料分割成不同的檔案,在將檔案組合成為一個獨立的網頁
- 第 05 堂、文字、清單、超連結等功能,重點是如何透過 CSS 去處理,而不是單純的使用 HTML 而已!
- 第 06 堂、影像、多媒體的應用等功能。必須要能夠透過 CSS 去處理與修改才好!
- 第 07 堂、表格的應用以及 iframe 內置框架的應用
- 第 08 堂、影音多媒體嵌入網站的應用
- 第 09 堂、期中考的小型網站建置演練
- 第 10 堂、多媒體網站規劃與建置注意事項與流程
- 第 11 堂、表單的應用與 PHP 資料擷取與應用
- 第 12 堂、簡易 PHP 的應用與 session 簡易認證功能
- 第 13 堂、到期末前所需要進行的期末報告流程進度 (可分工實作!)
- 第 14 堂、CSS 的背景圖示、與一般圖示搭配 html 之應用
- 第 15 堂、HTML5、Java script 與 DOM 基礎
- 第 16 堂課: 使用 Javascript 的套裝模組
- 第 17 堂課: 使用 Bootstrap 與 3D Gallery 的套裝模組