現代網頁設計工作坊
本教學是以 PHP Web 程式設計師的角度來看現代的網頁設計，不牽涉美工層面，透過免費的網頁版型來學習網頁設計所需的各項基礎知識，再輔以各種新觀念與新技術的集合體，如框架(Framework)的利用來加速開發，如此周而復始的學習基礎知識與新技術讓自己的開發實力逐步提升，課程最後希望能建構一個以適應性網頁呈現的小型會員系統。
參與學員請自備筆記型電腦，建議使用 Windows 7 64 bit 以上版本，請確保下列工作環境
現代網頁的基礎知識，指的是全球資訊網協會(World Wide Web Consortium，W3C)所制定的標準，我們必須學習的重要標準如下：
- 結構標記語言(Structural Languages)：HTML5
- 外觀呈現語言(Presentation Languages)：CSS31、MathML
- 腳本語言(Scripting Languages)：Javascript52
- 物件模型(Object Models)：DOM3、BOM
現代網頁必須具備的新觀念與必須丟棄的舊觀念，表列如下：
| 應學習的新觀念 | 應丟棄的舊觀念 |
|---|---|
| 適應性網頁 | 表格或框架排版 |
| Git | 使用外掛程式，如 Flash、Java、Sliverlight |
| AJAX | 絕對單位大小(px,pt...) |
| 向量字型/圖型 | 限制運行的瀏覽器版本 |
| SEO | 判斷瀏覽器版本(navigator.useerAgent) |
| OWASP Top10 | 使用舊版的 JavaScript 函式 |
| MVC | 使用 mouse over |
| Regular Expression | |
| 雙向繫結 |
針對 PHP Web 開發必須學習的基礎知識有
- 伺服器維運：Nginx, MariaDB, PHP (WT-Server)4
- 程式語言開發：PHP
- 資料庫連接：PDO, ODBC, JSON
- 程式碼編輯器使用：VSCode5 / ATOM, Notepad++
- 前端網頁撰寫準則：前端程式碼準則
- CSS 撰寫準則：CSS 筆記、建議與指導方針總整理
而針對前端網頁建議學習的函式庫或框架，僅就具代表性的部分條列如下
- Javascript 類型：jQuery, TypeScript, VUE.js
- CSS 類型：pure.css, LESS
- 混和類型：Bootstrap, HTML KickStart
推薦自修書
- HTML5 完美風暴（第三版）
- PHP、MySQL與JavaScript學習手冊(第四版)
- 你所不知道的 JS：導讀，型別與文法
- 你所不知道的 JS：範疇與Closures，this與物件原型
- 現代 PHP
本著登高必自卑、行遠必自邇的學習次第，先學習網頁的基礎知識，再多多參考現代網頁的設計理解設計新觀念，未來再多樣化的學習各種新技術與框架，確實理解網頁設計的精要，別期望讀過一次就能立即了解所有的東西，良好的基礎是需要逐步建構完成的，多花點時間複習幾次。 以下為本課程的教學錄影(陸續增加中...) new
- 第 1 堂課錄影 2016-07-04
- 第 2 堂課錄影 2016-07-18
- 第 3 堂課錄影 2016-07-25
- 第 4 堂課錄影 2016-08-01
- 第 5 堂課錄影 2016-08-08
- 第 6 堂課錄影 2016-08-29
1CSS 是 Cascading Style Sheets，串接樣式表的簡稱，最新版是CSS3，主要的目的是將檔案的內容與呈現區隔開來。
2Javascript 這個腳本語言的標準規格，叫做 ECMA-262，這個規格，是由ECMA International (歐洲計算機製造商協會)這個組織所制定，所以也稱呼它為ECMAScript，最新版是 ECMAScript6。
3DOM 是Document Object Model 文件物件模型的簡稱，簡單來說，透過DOM API 可以讓我們將網頁中所有的標籤定義，包括文字，都視為一個物件，透過腳本語言，我們可以動態地更動其中的內容。
4WT-Server是一套可在Windows環境下，快速佈署 Nginx、MariaDB、PHP 等服務的軟體，這類的軟體也稱為 WNMP ，本工作坊未來會用到此軟體，請有空先安裝它。
5Visual Studio Code 是微軟基於 Electron 編輯器的開放原始碼，重新打造的一款可支援Windows、Linux與Mac平台的程式碼編輯器，簡稱 Code，本工作坊未來會用到此軟體，請有空先安裝它。