Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「數位相簿很上手」目錄
1. 開發環境與工具
1-1 GitHub Pages
1-2 Git
2. Bootstrap4 - 網格系統
2-1 佈局頁面
2-2 網格系統
2-3 網格注意事項
2-4 自動的平均分配欄寬
2-5 水平對齊
2-6 垂直對齊
2-7 Column 排序
2-8 欄的推移
2-9 上課練習
3. Bootstrap4 -通用類別
3-1 Colors
3-2 CLEARFIX 清除浮動
3-3 Codepen-實用的線上編輯器
3-4 Display 屬性
3-5 上課範例
4. Boostrap4 元件
4-1 上課範例
5. 表格排版
5-1 建立入口網站
6. 輪播 (Carousel)
6-1 卡片
6-2 fork
6-3 上課範例
7. 建立電子相簿版型
7-1 上課範例
8. 建立電子相簿版型(二)
8-1 css
8-2 播放圖示置中
8-3 上課練習
8-4 lightGallery 插件控制
8-5 總結
9. 上方選單
9-1 一般導覽列
9-2 多層下拉選單
10. 免費、付費樣板
11. unitegallery
12. 成果展
12-1 unitegallery
13. 雲端應用研究社-3
14. 雲端應用研究社-4
15. 雲端應用研究社-5
16. 雲端應用研究社-6-卡片的應用
17. git 更新
1-1 GitHub Pages
數位相簿很上手
1. 開發環境與工具
一、Gmail帳號
上課必須有一個Gmail帳號,老師上課會做螢幕錄影,影片上傳至雲端硬碟,下課後同學可以自行下載複習
申請Gmail
二、GitHub帳號
GitHub 除了提供免費的 Git Server 外, 當做靜態檔案的伺服器。
每個帳號可以設定一個「github.io」的子網域,例 https://
webugm
.github.io/
官網:
https://github.com/
註冊帳號
註冊完成須至電子信箱收驗證信
三、建立專案(repository)
第一個專案名稱,建議「
username
.github.io」,
如此設定的GitHub Pages的網址為「https://
username
.github.io/」,
其它的專案則為「https://
username
.github.io/
專案名稱
」
設定為GitHub Pages(
username
.github.io
專案預設已開啟GitHub Pages
)
圖解:
https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=859
本期課程統一數據庫:
tncomu
四、Git軟體
官網:
https://git-scm.com/
下載:
https://git-scm.com/download/win
在下載頁面,會自動偵測適合版本的安裝版,
建議取消
,改用「攜帶版」安裝
執行「
PortableGit/git-bash.exe
」
設定Git
config
環境
git config --global user.name "
tawan158
"
git config --global user.email "
tawan158@ugm.com.tw
"
git config --global color.ui true
git config --list
請自行將紅字部份,換成自己的
GitHub帳號
與
GitHub
email
每次第一次上傳時,GitHub會要求輸入「
帳號
」、「
密碼
」,如果在各位家裡的電腦,則是做過一次,就會記錄起來,不用每次輸入
但教室電腦會還原,所以建議將替換過的指令,記鍵在Google文件中,方便下次設定使用
第一次「push」時,會要求「
GitHub 帳號、密碼
」
我們是使用GitHub Pages服務,所以只會用Git的幾命令而已
把遠端的專案下載至本地端,如果專案是要當
網頁伺服器
,建議先設定完「GitHub Pages」再「clone」
「
cd
/c/ugm/github
」=> 改變目錄位置。
藍字部份請用滑鼠拖曳
「
git clone
https://github.com/tawan158/tncomu.git
」,只要是Git的命令前面都要加git, 藍字部份請至
GitHub
取得
=> clone之前,不能有「
tncomu
」資料夾,否則無法
clone
「cd
/c/ugm/github/
tncomu
」=>把目錄切換至「
tncomu
」,注意此時最右方應該會
(master)
上傳檔案三個步驟
git add
.
git commit -m "訊息"
git push origin master
五、文字編輯器
32bit sublime text3
64bit sublime text3
codepen
六、安裝免費樣板
範例:
https://tawan158.github.io/
1. 開發環境與工具
1-1 GitHub Pages
1-2 Git
2. Bootstrap4 - 網格系統
2-1 佈局頁面
2-2 網格系統
2-3 網格注意事項
2-4 自動的平均分配欄寬
2-5 水平對齊
2-6 垂直對齊
2-7 Column 排序
2-8 欄的推移
2-9 上課練習
3. Bootstrap4 -通用類別
3-1 Colors
3-2 CLEARFIX 清除浮動
3-3 Codepen-實用的線上編輯器
3-4 Display 屬性
3-5 上課範例
4. Boostrap4 元件
4-1 上課範例
5. 表格排版
5-1 建立入口網站
6. 輪播 (Carousel)
6-1 卡片
6-2 fork
6-3 上課範例
7. 建立電子相簿版型
7-1 上課範例
8. 建立電子相簿版型(二)
8-1 css
8-2 播放圖示置中
8-3 上課練習
8-4 lightGallery 插件控制
8-5 總結
9. 上方選單
9-1 一般導覽列
9-2 多層下拉選單
10. 免費、付費樣板
11. unitegallery
12. 成果展
12-1 unitegallery
13. 雲端應用研究社-3
14. 雲端應用研究社-4
15. 雲端應用研究社-5
16. 雲端應用研究社-6-卡片的應用
17. git 更新
1-1 GitHub Pages
友善列印 & 下載 PDF
匯出 MarkDown 格式