20171229內訓課程

PPT模板下载：www.1ppt.com/moban/ 行业PPT模板：www.1ppt.com/hangye/
节日PPT模板：www.1ppt.com/jieri/ PPT素材下载：www.1ppt.com/sucai/
PPT背景图片：www.1ppt.com/beijing/ PPT图表下载：www.1ppt.com/tubiao/
优秀PPT下载：www.1ppt.com/xiazai/ PPT教程： www.1ppt.com/powerpoint/
Word教程： www.1ppt.com/word/ Excel教程：www.1ppt.com/excel/
资料下载：www.1ppt.com/ziliao/ PPT课件下载：www.1ppt.com/kejian/
范文下载：www.1ppt.com/fanwen/ 试卷下载：www.1ppt.com/shiti/
教案下载：www.1ppt.com/jiaoan/ PPT论坛：www.1ppt.cn
內訓課程 (2)
網頁教學（一）
報告者:許育誠
報告：2017/11/29

課程大綱
2
 11/29 html css javascript 基本介紹
 Html 基本練習（語法教學）（2個）
 Css基本練習（語法教學）（2個）
 Javascript基本練習（語法教學）（5個）
 Ajax基本概念（1個）
 Bootstrap4前端框架介紹（1個）(上)(未交完)
 額外補充前端框架(Vue.js D3.js three.js)
 12/6 html css javascript 進階介紹
 Javascript進階練習（語法教學）（7個）
 Css補充flex怎麼使用
 Bootstrap4前端框架介紹（1個）（下）
 部落格網頁設計前端（運用 html css javascript bootstrap4）

安裝編輯器（sublime x vscode）
3
快速鍵：https://poychang.github.io/vscode-shortcuts/

4
Html實作範例
https://www.w3schools.com/html/
H1的tag 用來作大字體包含h1…….h6(大->小)
P tag用來作段落（ pargraph）
………
包含div tag table tag
span ul li <a> <img>
Textarea…..

Html 注意事項
5
http://www.flycan.com.tw/board/modules/ne
wbb/viewtopic.php?topic_id=17
可以放在h1後面讓他取代他

6
卡片式語法（Css語法包含html）
https://codepen.io/andy1229/pen/rYrEyE
.用的是class可以重複使用
＃用的是 id不可以重複使用#card

7
Javascript語法教學
https://mirlab.org/jang/books/javascript/domProp.asp?t
itle=6-1%20DOM%20%AA%BA%A9%CA%BD%E8

8
其他語言包含java php python 都有所謂的基
本語法那這裡只提幾個語法
For迴圈
http://www.wibibi.com/info.php?tid=182

9
If語法搭配js的date簡單判斷
https://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif

10
https://mirlab.org/jang/books/javascript/array2.asp?title=4-
2%20%B0}%A6C%AA%AB%A5%F3%AA%BA%A4%E8%AAk

11
https://www.w3schools.com/js/js_json.asp
http://www.smalljacky.com/programming-language/javascript-
programming
-language/json-teaching-format/

12
http://html5index.org/
https://pjchender.blogspot.tw/2017/08/html5-drag-and-drop-api.html

13
Javascript語法教學-30天
https://guahsu.io/JavaScript30/

Ajax基本說明
14
傳統網頁在使用者提交資料後（亦即對伺服器發出請求），必須
等到伺服器回應、重新整理頁面，才能繼續進行下一個動作，這
段期間內使用者不能對該頁面做任何的存取。而非同步請求允許
使用者在發出請求到伺服器回應的期間內繼續使用頁面（例如：
填寫剩餘表單），等到完成回應，瀏覽器僅更新部份資訊，藉以
達到更有效的即時互動

Ajax javascript基本操作
15
https://developer.mozilla.org/zh-
TW/docs/Web/Guide/AJAX/Getting_Started

Bootstrap4教學
16
http://bootstrap.hexschool.com/

補充教材
18
https://vuejs.org/ https://d3js.org/ https://threejs.org/

上課方式調查調整
19
是否需要調整上課方式？大家想
怎麼調整哪裡講得不太清楚？
大家前端有想學什麼方面嗎我朝
那方面準備？（ css3 jquery 套件）
第一堂課可能很無聊因為是講觀
念的東西後面幾堂課
會有很多實作是否是希望先看成
品的方式後實作還是我都幫大家
打好程式碼直接講程式碼呢

下禮拜預告
20
會開始帶大家寫css程式包含動
畫
會開始帶大家寫js以javascript30
天那個為主
會開始帶大家寫bootstrap4 以我
講義17頁為主
最後有多餘時間會再帶大家了解
websocket

內訓課程 (2)
網頁教學（二）
報告者:許育誠
報告：2017/12/05

排版-概觀
23
<div class="container">

</div>
<div class="container-fluid">
...
</div>
固定寬度置中寬度佔版面100%

排版-概觀
24
響應式網頁有所謂的斷點
所有斷點包含用關鍵字的方式
來寫（sm md lg）

排版-網格
25
http://bootstrap.hexschool.com/docs/4.0/layout/grid/#如何運作
http://bootstrap.hexschool.com/docs/4.0/layout/grid/#等寬

排版-網格
26
http://bootstrap.hexschool.com/docs/4.0/layo
ut/grid/#order-classes
http://bootstrap.hexschool.com/docs/4.0/layo
ut/grid/#等寬度多行

排版-媒體物件
27
http://bootstrap.hexschool.com/docs/4.0/layout/media-object/#範例
http://bootstrap.hexschool.com/docs/4.0/layout/media-object/#巢狀

Css語法-display
28
https://css-tricks.com/snippets/css/a-guide-to-
flexbox/#flexbox-background

上課練習bootstrap4（網格）
30

上課練習bootstrap4（flex）
31

上課練習bootstrap4照片
32

33
回家作業（ CSS）
• 練習Css的display怎麼使用
• 想想看要怎麼設計屬於自己布落格不使
用其他的版型?? 下週看大家的規劃

Javascript 30天練習第一天
34

javascript 30天練習第一天語法教學
35
https://guahsu.io/2017/05/JavaScript30-01-
Java-Script-Drum-Kit/
https://github.com/guahsu/JavaScript30/tree/
master/01_Java-Script-Drum-Kit/

javascript 30天練習第一天參考資料
36
用於物件增加class屬性：
https://developer.mozilla.org/en-
US/docs/Web/API/Element/classList
用於 audio屬性的方法：
US/docs/Web/API/HTMLMediaElement
所有event事件查看：
https://developer.mozilla.org/en-US/docs/Web/Events
Js新寫法（template lierals）
US/docs/Web/JavaScript/Reference/Template_literals

內訓課程 (2)
網頁教學（三）
報告者:許育誠
報告：2017/12/ 12

內容-文字排版
39
http://bootstrap.hexschool.com/docs/4.0/content/typography/
#%E6%A8%99%E9%A1%8C

內容-文字排版（簡寫）
40
http://bootstrap.hexschool.com/docs/4.0/content/typography/
#%E6%A8%99%E9%A1%8C

內容-表格（帶框表格）
41
http://bootstrap.hexschool.com/docs/4.0/content/tables/#%E5
%B8%B6%E6%A1%86%E7%9A%84%E8%A1%A8%E6%A0%BC
http://bootstrap.hexschool.com/docs/4.0/content/tabl
es/#%E5%8F%AF%E6%BB%91%E5%85%A5%E8%A1%8C

元件-警報
42
http://bootstrap.hexschool.com/docs/4.0/com
ponents/alerts/#%E7%AF%84%E4%BE%8B

元件-警報
43
ponents/badge/#%E8%86%A0%E5%9B%8A%E
6%A8%99%E7%B1%A4

元件-麵包屑
44
ponents/breadcrumb/#overview

元件-按鈕
45
ponents/buttons/#%E6%A0%B8%E5%8F%96%
E6%96%B9%E5%A1%8A%E5%92%8C%E9%81%
B8%E9%A0%85%E6%8C%89%E9%88%95

元件-card
46
ponents/card/#%E5%9C%96%E7%89%87

元件-分頁
47
ponents/pagination/#%E7%A6%81%E7%94%A
8%E5%92%8C%E6%B4%BB%E5%8B%95%E7%8
B%80%E6%85%8B

元件-滑動監控
48
ponents/scrollspy/#%E5%B7%A2%E7%8B%80
%E5%B0%8E%E8%A6%BD%E7%9A%84%E7%A
F%84%E4%BE%8B

CSS3動畫
49
US/docs/Web/CSS/transform?v=control#Brows
er_compatibility

Javascript 30天練習第二天
50
http://guahsu.io/JavaScript30/02_JS-and-
CSS-Clock/index-GuaHsu.html

Javascript 30天練習第二天語法教
學
51
https://github.com/guahsu/JavaScript30/
blob/master/02_JS-and-CSS-Clock/index-
FINISHED.html

css position relative 用法一
52

css position relative 用法二
53

css position relative 用法三（混合）
54

語法補充教學（ css position relative）
55
https://codepen.io/andy1229/pen/Ljeraa

參考資料
56
Css動畫語法：https://developer.mozilla.org/en-
US/docs/Web/CSS/Reference
Css十種定位形式：http://www.see-design.com.tw/i/css_position.html
Bootstrap4語法：http://bootstrap.hexschool.com/
Javascript30天：https://guahsu.io/JavaScript30/

20171229內訓課程

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to 20171229內訓課程

Similar to 20171229內訓課程 (20)

Recently uploaded

Recently uploaded (12)

20171229內訓課程

Editor's Notes