教學課程Pdf備份

HEY,WEB
網站實戰課程
WELCOME TO
請先至_____下載ＰＰＴ

想先問⼤大家幾個問題
BEFORE STARTING
• ⾃自我介紹
• 有什麼想做的服務或創業？（這很重要！）
• 有什麼程式經驗（有破codecademy關卡嗎？）
• 呈上，在新學網⾴頁上⾯面，有遇到什麼問題嗎？
• 希望可以在這⾨門課獲得什麼？

請⼤大家互相幫忙教學，才有時間教更多東西。︒
預訂教學課程
• 如何在本機端開啟[實戰：使⽤用sublime] -5分鐘
• html/css 如何溝通 [實戰：gostbutton⾃自我創意練習] -20分鐘
• 整合html/css/javascript+bootstrap[實戰：猜拳⼤大作戰] -30分鐘
• bootstrap theme介紹[實戰：landingPage創業的開始] -20分鐘
• 中場休息
• vue.js 前端框架⼊入⾨門[實戰：todolist] -30分鐘
• firebase 前端⼯工程師跨⼊入後端利器⼊入⾨門[實戰：存資料] -30分鐘
• firebase + vue.js +html/css/javascript +codepen 整合 [實戰：⼤大學⽣生聯誼版] -30分鐘

觀念建⽴立
HTML:⾻骨架
CSS:⾐衣服
JAVASCRIPT:動作
VUE.js:完成動作更⽅方便⼯工具
Bootstrap: 假兩件的⾐衣服
Firebase: ⼈人腦記憶庫
Bootstrap Theme:別⼈人幫你穿好⾐衣服了

如何在本機端開啟？（實戰：使⽤用sublime）

HTML/CSS 如何溝通︖？
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
法⼆二：
法⼀一：
將css放在<style type=“text/css"> 和 </style>之間
記得把此css檔放在同個資料夾下
<head>
<style type="text/css">
abbr
{
font-size: 12px;
}
.text10pxwhite
{
font-size: 10px;
color: #FFFFFF;
}
</style>
</head>

GHOST BUTTON 教學
<head>
button{
color:black;
background-color:transparent;
border:none;
padding: 15px 32px;
border: 2px solid black;
}
button:hover{
color:white;
background-color: black;
border:none;
padding: 15px 32px;
}
</style>
</head>
<body>
<button>ClickMe</button>
</body>

本範例完整原始碼
<body>
<br>
<div>
<br><br>
<img src="http://www.fotor.com/images2/features/
photo_effects/e_bw.jpg" alt="Mountain View" style="width:
304px;height:228px;">
<br>
<h2>Welcome To The Game</h2>
輸⼊入姓名<input></input><br><br>
<button>ClickMe</button>
</div>
</body>
<head>
<meta charset="utf-8">
button{
color:black;
background-color:transparent;
border:none;
padding: 15px 32px;
border: 2px solid black;
}
button:hover{
color:white;
background-color: black;
border:none;
padding: 15px 32px;
}
div{
text-align: center;
}
body{
background-image:url("http://
photo.kids21.cn/tpzk/201305/
W020130506586817535301.jpg");
background-size:cover;
}
</style>
</head>
• 實戰：⾃自我創意練習

HTML與JAVASCRIPT溝通
法⼀一：
在<script>和</script>中間放⼊入javascript程式碼
可放在head之間，也可放在body底下
<script src=“index.js”></script>放在<head>與</head>之間
法⼆二：

HTML與JAVASCRIPT溝通
<body>
<br>
<div>
<br><br>
<img src="http://www.fotor.com/images2/features/
photo_effects/e_bw.jpg" alt="Mountain View" style="width:
304px;height:228px;">
<br>
<h2>Welcome To The Game</h2>
輸⼊入姓名<input id="name"></input><br><br>
<button onclick="outPutName()">ClickMe</button>
<h1 id="showName"></h1>
</div>
<script>
function outPutName(){
var inputName = document.getElementById('name').value;
document.getElementById("showName").innerHTML =
inputName + "是⼤大正妹！";
}
</script>
</body>
實戰⼩小練習

BOOTSTRAP
網址：HTTP://GETBOOTSTRAP.COM/

練習：猜拳⼤大作戰
（javascript邏輯判斷部分，codecademy的javascript課程有講解）
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au
+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
}
div{
text-align: center;
}
button{
color:white;
background-color:green;
border: none;
padding: 15px 32px;
border-radius: 5px;
border: 2px solid white;
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 0.4s;
}
button:hover{
color:green;
background-color:white;
border: none;
padding: 15px 32px;
border-radius: 5px;
text-align: center;
border:2px solid green;
}
a{
color:blue;
}
.shine{
background-color: white;
opacity: 0.5;
color:blue
}
</style>
<br><br><br><br> <br><br><br><br><br>
<h1 id="title"> 猜拳⼤大作戰 </h1>
<div>
<p>Made by <a href="https://www.facebook.com/groups/563393953840442/?ref=ts&fref=ts">Hey,Web!</a></p>
<button onclick="clickx()">Start</button>
</div>
<script>
function clickx(){
document.getElementById("title").className = "shine";
document.getElementById("title").innerHTML="Gaming";
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random(); //電腦隨機產⽣生變數
console.log(computerChoice);
if (computerChoice < 0.34) { //判斷電腦所選擇的拳路
computerChoice = "rock";
} else if(computerChoice < 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var compare = function(choice1,choice2){ //宣告新的⽅方法來⽐比較輸贏
if(choice1 === choice2){
document.getElementById("title").innerHTML="平⼿手！";
}else if(choice1 === "rock"){
if(choice2 === "scissors"){
document.getElementById("title").innerHTML="rock wins";
}else{
document.getElementById("title").innerHTML="paper wins";
}
}else if(choice1 === "paper"){
if(choice2 === "rock"){
document.getElementById("title").innerHTML="paper wins";
}else{
document.getElementById("title").innerHTML="scissors wins";
}
}else{
if(choice2 === "rock"){
document.getElementById("title").innerHTML="rock wins";
}else{
document.getElementById("title").innerHTML="scissors wins";
}
}
};
compare(userChoice,computerChoice);
}
</script>
</body>
</html>

LANDING PAGE
BOOTSTRAP THEME
免費版型網址：HTTP://STARTBOOTSTRAP.COM/TEMPLATE-CATEGORIES/ALL/

中⽂文官網：HTTPS://VUEJS.ORG.CN/
VUE.JS入⾨門
Tip:練習可⽤用jsbin來線上練習
練習範例1:雙向綁定

中⽂文官網：HTTPS://VUEJS.ORG.CN/
VUE.JS入⾨門
Tip:練習可⽤用jsbin來線上練習
練習範例2:渲染列表

官網：HTTPS://FIREBASE.GOOGLE.COM/
FIREBASE成⽴立專案步驟

1.初始化，貼到sublime之中
FIREBASE初始化＆存資料測試
2.更改firebase資料庫存取權限
3. 簡單存資料
在Database的規則中
firebase.database().ref('users/').set({
username: '周杰倫',
phone: 0983244306
});
在初始化程式碼的下⽅方，</script>上⽅方，加上以下程式碼
4. 開啟網⾴頁執⾏行/firebase中確認存資料成功

教學課程Pdf備份

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a 教學課程Pdf備份

Semelhante a 教學課程Pdf備份 (6)

教學課程Pdf備份