⼤大同⼤大學資研社網⾴頁設計系列教程 - 基礎概念

!主講：⼤大同⼤大學 資⼯工3B 紀冠宇

這堂課我們學什麼

聽我廢話

前端技術（HTML/CSS/Javascript）

後端技術（PHP）

資料庫管理（MySQL/MariaDB）

課程資訊

投影⽚片下載：http://www.slideshare.net

程式碼下載：http://www.github.com

詳細資訊：⼤大同⼤大學資研社官網 or FB社團

課程規畫第零周（本周）：基本課程介紹與環境建⽴立

第⼀一周：HTML與CSS 網⾴頁的基本設計

第⼆二周：PHP基礎語法與應⽤用

第三周：PHP進階語法與應⽤用

第四周：資料庫管理與規劃

第五周（如果有的話）：PHP Framework

何謂「網⾴頁設計」 What is the fuck of Web Design?

網⾴頁設計

對使⽤用者來說：淦！網路⼤大學怎麼這麼難⽤用！

對設計者來說：淦！使⽤用者習慣怎麼這麼差！

對⼯工程師來說：淦！設計師是不能有腦⼀一點？

對慣⽼老闆來說：啊就這樣？22k給你不要拉倒

從上述經驗來看，網⾴頁設計時主要有三種⼈人

A：使⽤用者 — 只出⼀一張嘴靠杯的⼈人

B：設計者 — 每天在靠杯⽼老闆跟使⽤用者的⼈人

C：⼯工程師 — 每天在靠杯⽼老闆跟設計者的⼈人

D：慣⽼老闆

網⾴頁設計者

⼜又稱為「前端設計師」，簡稱「前端」

你的⼯工作：

讓使⽤用者看到漂漂亮亮的網⾴頁

讓使⽤用者能夠流暢瀏覽網⾴頁

讓使⽤用者不要繼續靠杯

設計範例 - Ltayer官網

移動滾輪就能看到資訊

版⾯面簡單不複雜

http://ltayer.ltay.net

網⾴頁⼯工程師⼜又稱為「後端⼯工程師」，簡稱「後端」

你的⼯工作：

控制網站運作流程

確保網站安全

讓前端可以拿到他想要的資料

處理前端丟過來的資料

⼼心安理得(?)地拿薪⽔水

設計範例

就……程式碼啊（⾋艸

事關機密（？）

現在 勇者要決定道路

設計之路 - 前端

程式之路 - 後端

「請兩個⼈人太貴了，⼀一個⼈人解決吧」

–by 台灣慣⽼老闆

於是 勇者踏上了旅途（淚）旅程開始之前...…

先建環境

PHP網站環境建置如果是Windows的⽤用⼾戶

WNMP 2.1.3

設計給Windows使⽤用之開源網站集成套件

內含Ngnix+MariaDB+PHP

蛤？你說IIS？ 吃屎吧（o）

如果你願意的話，也是可以⼀一個個下載回來安裝

PHP網站環境建置如果是 Mac OS X⽤用⼾戶

MAMP

設計給Mac專⽤用的網⾴頁集合環境

普通功能免費（其實普通功能很夠⽤用了）

內含：Apache+MySQL+PHP

如果你要⽤用brew install ⾃自⼰己裝我也不反對啦（笑）

PHP 網站環境建置

如果你是Linux⽤用⼾戶

各系統狀況不同

請使⽤用時⾃自⾏行查閱相關資料

參考資料：

https://docs.google.com/a/winjet.com.tw/file/d/0B3G2AcuQwKkAekk5eXUxZzJ6T2M/edit

建置成果

Step 1. 在網站根⺫⽬目錄建⽴立index.php

Step 2. 在index.php中輸⼊入<?php phpinfo()?>

Step 3. 開啟瀏覽器，看到右圖內容表⽰示成功

網⾴頁開發建議軟體⽂文字編輯器：

Sublime Text （各平台）

Notepad++（限Windows）

瀏覽⼯工具

Chrome/Firefox （基本上最新協定通通⽀支援）

IE8（IE8是世界上最⻱⿔龜⽑毛的瀏覽器，根本惡夢）

謝謝各位 _(:3UL)_