網站開發的第堂課 - ddstudio.tw · about me(mike) 學歷： 2008 台灣學科海洋系畢業...
TRANSCRIPT
網站開發的第⼀一堂課網站開發的第⼀一堂課原型駭客網路有限公司
講師：Mike
About Me(Mike)About Me(Mike)
學歷：
2008台灣⼤大學⼯工科海洋系畢業2012University of Michigan EE:Systems Master 畢業
經歷：⼤大學畢業開始接觸網站程式，⾄至今已有五年多。待過IT Strategists, LAAFT, TaipeiDigbil, TaipeiPrototype Hacker, Taipei
尋找創業路上的夥伴！
這堂課的⺫⽬目標這堂課的⺫⽬目標......
5/24 看你們的表現!
3-4⼈人⼀一組製作出⼀一個簡易的官⽅方or形象網站
這堂課的⺫⽬目標這堂課的⺫⽬目標......
讓想進WEB領域或是已經在WEB領域的⼈人可以互相認識，增加公司之間交流的機會
上課隨時可以發問，儘管舉⼿手或是打斷我不好意思發問的學員，就⽤用打的吧 lol
助教看到會協助回答
http://tlk.io/prototype-hacker
什麼是網站什麼是網站為什麼你看得到網站？
Server, Database
HTTP(HTTPS) Request
HTTP(HTTPS) Response
Server side language:
PHP, Ruby, Python, C#, Java,nodeJS 等
Client side browser:
HTML, CSS, JAVASCRIPT
使⽤用者從瀏覽器發出請求
伺服器回應請求
什麼是網站什麼是網站
伺服器端運算完程式，送到⽤用⼾戶端的瀏覽器。
在瀏覽器端，你只看得到HTML, CSS, JAVASCRIPT
Demo先來安裝必要的軟體吧！
什麼是網站什麼是網站
Server<?php echo '<h1>Hello World!</h1>';
?>
Browser<html> <head></head> <body> <h1>Hello World!</h1> </body></html>
安裝軟體安裝軟體XAMPP: 本地端的伺服器https://www.apachefriends.org/index.html
SUBLIME TEXT: 程式編輯器http://www.sublimetext.com/3
安裝軟體安裝軟體安裝完XAMPP後，開啟Apache
安裝軟體安裝軟體瀏覽器輸⼊入URL:
http://localhost (本機)⾒見到下⽅方畫⾯面即為伺服器啟動成功
安裝軟體安裝軟體Sublime Text 3
安裝遇到問題要舉⼿手喔！安裝好了，回頭看伺服器語⾔言範例
基本概念基本概念
HTML: HyperText Markup LanguageCSS: Cascading Style SheetsJavascript: 絕對不是Java Script 也不會是Java+Script jQuery是Javascript的Library 有句名⾔言是： Javascript跟Java的關係 ⼤大概就跟hotdog與dog⼀一樣
基本概念基本概念原則：(想像蓋房⼦子)
HTML⽤用來做內容結構CSS⽤用來做樣式(Style)
Javascript⽤用來做效果以及運算邏輯
CSS3現已可做⼤大量的效果，新的趨勢也會將效果慢慢轉移到⽤用CSS去完成
Javascript現在也可以寫Server side的語⾔言
HTMLHTML
起⼿手式 (boilerplate)http://html5boilerplate.com/
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>網站開發的第⼀一堂課</title> </head> <body> <h1>Hello, world!</h1> </body></html>
DOCTYPE: 宣告很重要！描述此份檔案的型態與版本html: tag裡⾯面包含所有與此份HTML⽂文件相關的資訊
head: contain meta data. 關於⾴頁⾯面的資訊都在此區 title->瀏覽器標題, meta->⾴頁⾯面描述, 關鍵字, ⾴頁⾯面相關資訊body: 網⾴頁本⾝身內容都要裝在⾝身體(body)裡
HTMLHTML<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>網站開發的第⼀一堂課</title> </head> <body> <h1>Hello, world!</h1> </body></html>
HTMLHTML
既然他是markup language，接下來要開始被markup標籤轟炸了...
開了，要記得關⾨門，不要忘記close tag，不過有些tag不需要關⾨門， Ex: <img>雖然現代瀏覽器會⾃自動幫你補，但這種事⾃自⼰己做好⽐比較保險。
<h1></h1> <p></p> <div></div>
<span></span> <label></label> <img>
HTMLHTML
標題 Heading
<h1>h1 heading</h1><h2>h2 heading</h2><h3>h3 heading</h3><h4>h4 heading</h4><h5>h5 heading</h5><h6>h6 heading</h6>
h1⼀一個⾴頁⾯面只⽤用⼀一個重要性依次遞減
http://www.w3schools.com/tags/tag_hn.asp
HTMLHTML
段落 Paragraph<p>這是⼀一段愛與冒險的故事，他說：<strike>別讓勝⽂文不開⼼心</strike>。<br>網路上盛傳<em>婉君</em>就是所謂的<strong>網軍</strong>，殊不知天底下有那麼多⼈人叫做婉君，<br>那到底是婉君多還是網軍多呢？</p>
<br>: 換⾏行
<em>: 強調(斜體)
<strong>: 重要
<strike>: ⼀一直線橫跨⽂文字
http://www.w3schools.com/tags/tag_p.asp
HTMLHTML
清單 Lists<ul> <li>陳汝斌</li> <li>趙衍慶</li> <li>李宏信</li> <li>陳永昌</li> <li>馮光遠</li> <li>連勝⽂文</li> <li>柯⽂文哲</li></ul>
<ol> <li>陳汝斌</li> <li>趙衍慶</li> <li>李宏信</li> <li>陳永昌</li> <li>馮光遠</li> <li>連勝⽂文</li> <li>柯⽂文哲</li></ol>
un-ordered list (無順序)
ordered list (有順序)
http://www.w3schools.com/tags/tag_ul.asp
http://www.w3schools.com/tags/tag_ol.asp
HTMLHTML
標籤內可以有屬性(property)<a href="http://www.google.com" target="_blank">Google連結</a>
<input type="text" value="你的⼤大名" id="urname">
href, target屬於a tag的標籤屬性type, value屬於input tag的標籤屬性
HTML5開始可使⽤用global attributes: data-*
*為任意字詞
每個標籤可使⽤用的property只需要上網⼀一查就知道
class, id 為通⽤用屬性，可以做css樣式以及javascript的容器選取器，⾮非常重要！
HTMLHTML
連結 (hyperlink)
<a href="http://prototype-hacker.com" target="_blank">前往原型駭客網路官網</a>
href: 放連結，可為相對路徑，也可以是絕對路徑
target: 選擇打開連結的⽅方式，_blank為開新視窗分⾴頁
mailto: 開啟郵件程式寄送信件
http://www.w3schools.com/tags/tag_a.asp
HTMLHTML
圖⽚片 (image)<img src="http://graph.facebook.com/mingkai.ko/picture?width=200" alt="Mike facebook profile picture" width="200" height="200">
src*: 圖⽚片的來源，可以是相對路徑或是絕對路徑
alt*: 如果圖⽚片讀取不到顯⽰示的代表⽂文字
width, height: 指定寬⾼高，單位像素
[ Note ] CDN: content delivery network
快速讀取檔案的網路雲端，⼀一般⼤大型的網站會將圖⽚片以及影⽚片放在
CDN，以減少⾃自⼰己server端的檔案⼤大⼩小，加速整體網站速度。
Facebook現在提供graph API，可讀取每個⼈人的profile picture
no closing tag!
http://www.w3schools.com/tags/tag_img.asp
HTMLHTML
⽂文字區塊 (input)<input type="text" value="Hello World" name="greeting"><input type="password" name="userpass"><input type="submit" value="送出"><textarea rows="4" cols="50"></textarea>
type: 指定此輸⼊入的格式為何
val: 表單送出去的值
name: 表單送出去之欄位變數
rows, cols: ⾏行數與欄數
http://www.w3schools.com/tags/tag_input.asp
HTMLHTML
表單 (form)<form method="GET" action="/">
</form>
method: 送出表單的⽅方法, GET or POST
action: 送去哪個地⽅方 or 網址
需搭配後端server做進⼀一步的資料庫存取操作
http://www.w3schools.com/html/html_forms.asp
HTMLHTML
無語意標籤 (div, span)
<div>div is a block element</div><span>span is an inline element</span>
div: 顯⽰示為區塊 display: block
span: 顯⽰示為同⾏行元件 display: inline
http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/tags/tag_span.asp
HTMLHTML
Tips:
⽤用對標籤很重要!!! 會影響網站的SEO先從內容結構做起，再做樣式(style)(沒有牆壁怎麼漆油漆)
[ Note ] SEO: Search Engine Optimization
搜尋引擎優化
換句話說，SEO做的好，網站⽐比較容易被搜尋到
HTMLHTML
實作練習
內容⺫⽬目標：
範例：
Please follow:
http://www.nytimes.com/2014/12/09/nyregion/a-royal-visitor-
joins-new-york-citys-first-lady-in-harlem.html?
hp&action=click&pgtype=Homepage&module=photo-spot-
region®ion=top-news&WT.nav=top-news&_r=0
http://prototype-hacker.github.io/website101-html.html
https://github.com/prototype-hacker
Developer ToolDeveloper Tool
開發者⼯工具
每個瀏覽器都有內建的開發者⼯工具，⼀一般來說按右鍵然後inspect element即可開啟。
功⽤用：檢測HTML的元素檢查CSS的樣式，並直接對它做修改Javscript的程式檢測，可以設定斷點(breakpoint)
Developer ToolDeveloper Tool
開發者⼯工具1. Chrome
右鍵 -> inspect element (檢查元素)直接按鍵盤 F12 ，有些電腦需要加fn鍵
Developer ToolDeveloper Tool
開發者⼯工具2. Firefox
有內建的開發者⼯工具，不過⼤大家都⽤用Firebug附加元件 -> 搜尋 Firebug -> 點選安裝完成後如下圖
Developer ToolDeveloper Tool開發者⼯工具
2. Firefox開啟⽅方式相同，F12，或是點擊右上⽅方⼀一顆蟲的按鈕
CSSCSS
style引⼊入⽅方式1. in-line: 直接寫在tag上<p style="width: 200px; color: blue;">I am a paragraph.</p>
2. in-page: 寫在⾴頁⾯面上⽅方的<head>裡，⽤用<style></style>包起來<style>
</style>
p{ width: 200px; color: blue; }
2. outer-link: 將樣式統⼀一寫在.css裡，並在<head>裡⾯面⽤用<link>引⼊入<link rel="stylesheet" href="style.css">
CSSCSS
Selector 選擇器的使⽤用 (對"誰"做樣式)
直接使⽤用標籤名稱 ( div, p, span, h1 )使⽤用class (.) => 重複沿⽤用樣式的元素使⽤用id (#) => ⼀一個⾴頁⾯面只有⼀一個id, 單⼀一元素
div{ color: red;}p{ margin-bottom: 10px;}.line{ border-bottom: 1px solid #000;}#special{ border: 1px solid #000;}
CSSCSS
Selector 選擇器的使⽤用 (對"誰"做樣式)
直接使⽤用標籤名稱 ( div, p, span, h1 )p{ color:#000; }
可以搭配標籤屬性input[type="text"]{ color:#000; }
搭配滑⿏鼠移動屬性a:hover{ text-decoration: underline; }
CSSCSS
Selector 選擇器的使⽤用 (對"誰"做樣式)
使⽤用class (.) => 重複沿⽤用樣式的元素.block-element{ display: block; }
.login-btn{ border: 1px solid #000; background: #fff; border-radius: 0px; color: #000;}
.login-btn:hover{ background: #000; color: #fff;}
CSSCSS
Selector 選擇器的使⽤用 (對"誰"做樣式)
使⽤用id (#) => ⼀一個⾴頁⾯面只有⼀一個id, 單⼀一元素#header{ position: fixed; top:0; }
#header{ position: fixed; top: 0; width: 100%; height: 80px; background: #fff; color: #000;}
CSSCSS
Selector Precedence 選擇器優先順序tag裡 > in-page <style> 裡 > outer-link <link>
Ex. http://codepen.io/ph-mike/pen/YPqXjJ
同⼀一個階層的⽐比較id > class > tag
!important最⼤大(沒事不要⽤用)
CSSCSS
Box Model ⼀一定要懂
article: http://prototype-hacker.com/css3-box-model%E5%8E%9F%E7%90%86/
CSSCSS
⽂文字⼤大⼩小的單位 (px, em, pt)
px(像素): 固定單位em(相對⾧長度): 不固定，可有⼩小數點
1em = 16px = 12pt
新⼿手還是先從px⽤用起吧！
對照表: http://pxtoem.com/
CSSCSS
顯⽰示區塊⽅方式 (block, inline-block, inline)
block: ⼀一個區塊元素，佔據⼀一整⾏行空間，有寬⾼高inline: 同⾏行元素，無法設寬⾼高，寬度根據內容inline-block: 同⾏行的區塊，可在同⾏行內佔據空間
Demo: http://codepen.io/ph-mike/pen/ogxXmP
CSSCSS
Media Query (RWD 控制你的⾏行動裝置)
media query怎麼寫@media (max-width: 920px){ .block{ width: 48%; font-size: 17px; }}
@media (min-width: 480px) and (max-width: 480px){ .block{ width: 100%; font-size: 14px; }}
CSSCSS
很多很多的性質 property
color, font-size, background, text-align, text-decoration,width, height, border, padding, margin, display, position,
z-index, float
不需要死記，寫過⼀一次就知道了!不知道怎麼使⽤用? 上網查 or 問問題
CSSCSS
來做個練習吧！
⺫⽬目標: http://codepen.io/ph-mike/pen/wBGKGG
Desktop Mobile
什麼是bootstrap
BootstrapBootstrap
Bootstrap是twitter的開發⼈人員預先寫好的cssframework，現也有提供js的基本功能。
所以到底是什麼？
其實就是幫你寫好的介⾯面程式懶⼈人包！
將預寫好的class name⽤用在標籤上，即完成樣式。
裡⾯面的Grid System相當完整，許多開發者都⽤用bootstrap當
基底來進⾏行開發。
BootstrapBootstrap
Grid System 格線系統
每個區塊padding15px (可改)row代表⼀一個全排格 (左右margin會調整-15px回去)每個row裡⾯面可再分⾄至12格col-lg-*, col-md-*, col-sm-*, col-xs-*
( *填上你需要的格數 )
也可指定元素可顯⽰示時的寬度 ===> visible-lg, visible-md, visible-sm, visible-xs或是指定元素要隱藏時的寬度 ===> hidden-lg, hidden-md, hidden-sm, hidden-xs
BootstrapBootstrap
Container 主容器
<div class="container">I am a container.</div>
Bootstrap幫我們寫好主容器的寬度螢幕 >= 1200px ====>1170px
992px <= 螢幕 <1200px ====> 970px750px <= 螢幕 < 992px ====> 750px
螢幕 < 750px ====> auto
BootstrapBootstrap
Grid System 使⽤用原則.row裡⾯面放12個份數(col-**加起來要12)
若需要置中的container，把外層⽤用container包起 來(.container -> .row)
Ex: http://codepen.io/ph-mike/pen/yyOdrv
<div class="container"> <div class="row"> <div class="col-md-4 block"> <img src="http://lorempixel.com/800/600/" alt="lorem pic"> </div> <div class="col-md-4 block"> <img src="http://lorempixel.com/800/600/" alt="lorem pic"> </div> <div class="col-md-4 block"> <img src="http://lorempixel.com/800/600/" alt="lorem pic"> </div> </div></div>
BootstrapBootstrap
Component 使⽤用原則
去bootstrap網站找，整段複製貼上，改內容就好。
現場⽰示範⽐比較快
http://codepen.io/ph-mike/pen/yyOdrv
BootstrapBootstrap
Component 使⽤用原則Button
http://getbootstrap.com/css/#buttons
<a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">
BootstrapBootstrap
Glyphicons
one more thing...
[ Note ] icon-font 字體圖像
⽤用字體來作為icon
好處是：可以⾃自由調整顏⾊色以及⼤大⼩小
<span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="glyphicon glyphicon-fire" aria-hidden="true"></span><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-music" aria-hidden="true"></span>
http://codepen.io/ph-mike/pen/zxqgBb
BootstrapBootstrap
格點練習
1. 2. 3. 4. 5.
http://riotdesign.eu/en/http://prototype-hacker.com/https://yowureport.com/https://careher.net/https://www.lyft.com/
GitGit
Git是什麼？可以吃嗎？下⾯面的東⻄西⺫⽬目前不懂其實可以忽略...
GitGit
Git是什麼？可以吃嗎？
以下情況你們會怎麼解決?
兩個⼈人⼀一起寫網⾴頁，只有兩個檔案:index.html & style.css，怎麼共同完成⾸首⾴頁的開發呢?你有兩台開發電腦，⼀一台在公司⽤用，⼀一台在家裡⽤用，怎麼把code帶回家加班呢?開發到第⼆二個版本時，客⼾戶突然說我⽐比較喜歡原來的版本...
GitGit
Git是什麼？
為了要共同協作，分⼯工合作，雲端備份，版本控制於是Git誕⽣生了。
每個⼈人在本機端存好檔，上傳到遠端的git，Git⾃自動幫你確認你的code與⺫⽬目前的code相不相容(版本有沒有到最新)，若不相容則不允許你上傳，會要求先更新下載成最新版本後才可上傳。
GitGit
Git指令
git clone xxx(放遠端url)：拿遠端的資料檔案(repository)
git add . (將local的資料增加到local端)
git commit -m 'message' (將⺫⽬目前尚未存的批次存在本地端)
git push origin master (將本機資料上傳到遠端git)
git pull origin master (將本機檔案更新到遠端最新檔)
git config --global user.email [email protected]
排版⼩小技巧排版⼩小技巧將item固定在容器內的特定位置：⺟母層與⼦子層
設定⺟母層position: relative來固定⼦子元素位置position: absolute
<div class="block"> <button class="btn btn-success">More</button></div>
.block{ position: relative; width: 200px; height: 200px;}.block .btn-success{ position: absolute; right: 0; bottom: 0;}
http://codepen.io/ph-mike/pen/PwzQyX
排版⼩小技巧排版⼩小技巧置中
使內容置中<style>
</style><div class="content"> my content</div>
.content{ text-algn: center; }
排版⼩小技巧排版⼩小技巧置中
在版⾯面內置中 ( 容器需有寬度 )
<style>
</style><div class="content"> my content</div>
.content{ width: 500px; text-algn: center; margin: 0 auto; }
<style>
</style><div class="content"> my content</div>
.content{ position: absolute; width: 500px; text-algn: center; left: 50%; margin-left: -250px; }
⼀一般狀況 位置是絕對時
排版⼩小技巧排版⼩小技巧圓型的⼤大頭照
border-radius設為50%
<style>
</style><img class="img-circle" src="http://graph.facebook.com/mingkai.ko/picture?width=200">
.img-circle{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
*圖⽚片需為正⽅方形
JavascriptJavascript
How it works?alert('Hello World!');console.log('Hello World!');var element = document.getElementById('header');
利⽤用Javascript的程式來操作⾴頁⾯面上的元件[ Note ] DOM Document Object Model
HTML的架構以階層式將元素⼀一層⼀一層包起，每個tag就像是⼀一個節點
再講下去應該有⼈人要睡著了...所以...
console: 輸出字串在console上⾯面
alert: 彈跳出瀏覽器警告視窗
var: 宣告javascript變數
JQueryJQuery
jQuery是什麼
jQuery是⼀一套Javascript的函式庫Library，幫助你快速的選擇⾴頁⾯面上的元件，操作並改變⾴頁⾯面上
的元件，也可以做⼀一些簡單的效果。
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
1. 引⼊入
怎麼寫？
2. 沒了 (就這麼簡單)
JQueryJQuery
jQuery是什麼
jQuery的宗旨是 write less do more!
⽤用法：選擇的⽅方式跟CSS⼤大略相同
. 代表class# 代表id
$("#header img").html();
$("") 裡⾯面裝選擇器選擇元件.html() 為寫好的function可直接使⽤用
JQueryJQuery
做個⼩小練習
利⽤用.css() 來動態更換元件上的顏⾊色
hint: .css('color', '#999999')
Javascript的語法：
除了if, else，每句結尾要有分號；
JQueryJQuery
起⼿手式
為了好整理程式碼，建議也是將code寫在外部再引⼊入。新增⼀一個檔案，叫做main.js在</body>結尾前引⼊入
$(document).ready(function() { // 當 DOM 載⼊入完成，執⾏行裡⾯面的程式});
程式碼寫在裡⾯面
JQueryJQuery
語法 Syntax
Functionfunction(){
}
function funName(){
}
jQuery執⾏行$('.select').toggleClass();
變數 var, 結尾 ;var myVar = 'website101 at Prototype Hacker';
JQueryJQuery
做⼀一個dropdown下拉選單
思考:1. 做好選單結構(ul, li)，並隱藏 (display: none;)2. 選擇觸發的按鈕並綁定click事件3. 在觸發事件的function裡寫程式讓選單出現
hint: slideToggle()
http://codepen.io/ph-mike/pen/NPrQWd
JQueryJQuery
.click()
syntax$('selector').click(function(){
// do the logic thing you need});
選擇器click點擊事件：點了之後執⾏行js程式邏輯
https://api.jquery.com/click/
JQueryJQuery
.addClass() / .toggleClass()
syntax$('selector').addClass('class-name');
$('selector').toggleClass('class-name');
選擇器新增、移除 class name
https://api.jquery.com/addclass/
JQueryJQuery
.hover()
syntax$('selector').hover(function(){
// things after hover effect});
選擇器hover事件觸發後要執⾏行的程式邏輯
https://api.jquery.com/hover/
JQueryJQuery
.children()
syntax$('selector').children('selector');
若children中選擇器未填，會列出全部
選擇器traverse常⽤用的選擇⼦子層元件的⽅方式
http://api.jquery.com/children/
JQueryJQuery
.parent()
syntax$('selector').parent('selector');
若parent中選擇器未填，會找最靠近的
選擇器traverse常⽤用的選擇⺟母層元件的⽅方式
http://api.jquery.com/parent/
JQueryJQuery
.css()
syntax$('selector').css('property','value');
使⽤用js動態更改選擇器的css樣式
http://api.jquery.com/css/
JQueryJQuery
.html()
syntax$('selector').html(value);
value可有可無
若有給值為更改選擇器內的html內容，若無給值為取出選擇器內的html內容
http://api.jquery.com/html/
JQueryJQuery
.hide() / .show() / .toggle()
syntax$('selector').hide();$('selector').show();$('selector').toggle();
選擇器隱藏或是顯⽰示或者是交替
http://api.jquery.com/toggle/
JQueryJQuery
快速做⼀一個Slider
與jQuery相依的套件相繼出現，怎麼選擇？網路上找評價或是去Github上⾯面看他熱⾨門的程度
思考：先準備好圖⽚片，⼀一次顯⽰示⼀一張，過場transition...
做完可能deadline過了...
⼀一般的功能不⽤用再⼿手刻
JQueryJQuery
快速做⼀一個Slider
1. 引⼊入資源(js, css, images/icons)2. 按照⽂文件檔設計好的結構撰寫html結構3. javascript觸發
FlexsliderDownload: http://www.woothemes.com/flexslider/
Learn by doing實做⼀一次吧！
好⽤用的好⽤用的LibraryLibrary
fontfont-awesome
bootsrap的icon不夠⽤用嗎？試試看font-awesome
http://fortawesome.github.io/Font-Awesome/
Google fontGoogle提供許多⽐比較精美的網路字體
https://www.google.com/fonts
Just font做中⽂文字體的基本上就這個了
http://www.justfont.com/
好⽤用的好⽤用的LibraryLibrary
js
js for everything關鍵字：jquery + "你要做的效果"
跑⾺馬燈
jquery marqueetyped.js
http://aamirafridi.com/jquery/jquery-marquee-plugin#examples
好⽤用的好⽤用的LibraryLibrary
假圖
(根據你指定的尺⼨寸隨機給你⼀一張圖)
(如果你愛吃⾁肉的話)
(單純的placeholder)
(可愛動畫電影系列)
http://lorempixel.com/800/600/
http://baconmockup.com/
http://placehold.it/
http://www.lorempicsum.com/#up
好⽤用的好⽤用的LibraryLibrary
假字
(英⽂文)
(中⽂文)
http://lorem2.com/
http://more.handlino.com/
⺫⽬目標網站⺫⽬目標網站你們完成了嗎？
⼩小demo: 原始碼：
http://prototype-hacker.github.io/demo.html
https://github.com/prototype-hacker
未來怎麼練習 ?
找⼀一個你覺得好看的網站，把它的template做出來吧！
http://themeforest.net/
⺫⽬目標網站⺫⽬目標網站DEMO TIME
Let's talk!
學習資源學習資源線上學習：
Treehouse: Codeschool: Codeacademy: Tuts+: Coursera:
http://teamtreehouse.com/https://www.codeschool.com
http://www.codecademy.com/http://webdesign.tutsplus.com/courses
https://www.coursera.org/
找答案：前端臉書社群: Stackoverflow:
https://www.facebook.com/groups/f2e.tw/http://stackoverflow.com/
學習資源學習資源
⽤用正確的⽅方式問問題：(online-coding)1. jsfiddle:
2. codepen: 3. jsbin:
http://jsfiddle.net/http://codepen.io/
http://jsbin.com/
學習資源學習資源
推薦的書籍1. 2. 3.
http://www.books.com.tw/products/0010663417?loc=003_013http://shop.oreilly.com/product/0636920038627.dohttp://shop.oreilly.com/product/9780987467485.do
＊書籍編寫與校正再出版往往耗費許多時間，網⾴頁技術卻不停更新，書上的技術容易跟不上最新的技術。如果可以的話，上網找資料問問題並不
停地練習才能跟得上技術的變化。
補充說明補充說明input tag是在⾴頁⾯面上需要使⽤用者輸⼊入資料時使⽤用
Ex. http://codepen.io/ph-mike/pen/EaKYyW
[ Note ] DNS: Domain Name System
網域名稱系統
每台Server都會分配到⼀一組unique的IP(50.87.151.117)
可將⼀一組符合規定內的名稱指定分配到IP上
DNS: http://www.google.com/
IP: 60.199.175.116
補充說明補充說明申請Github帳號https://github.com/
Bitbucket(unlimited private repository up to 5 members)
無限專案但最多只能分享給五個⼈人共同協作
https://bitbucket.org/
補充說明補充說明安裝Git！
為什麼沒有紙本講義？
愛地球省紙程式的所有範例以及⽂文件規範都在網路上網站的技術⽇日新⽉月異，印出來的技術⽅方式明年可能沒⼈人⽤用了...⺫⽬目標是讓學員可以⾃自⼰己利⽤用關鍵字找到完成網⾴頁的⽅方法
打完收⼯工打完收⼯工與我們保持聯絡
粉絲團：
原型駭客網路 Prototype Hacker
官網：
https://www.facebook.com/prototype.hacker.tw
http://prototype-hacker.com/
講師 Mikehttps://www.facebook.com/mingkai.ko