Sublime
- 先下載 sublime。
https://www.sublimetext.com/3 - 下載package control,這是我覺得奇怪的地方,若是每個使用者必須安裝的功能,為什麼不能直接就在軟體中呢???(商業考量@@)。
https://packagecontrol.io/installation - 安裝package control,照著上面網頁中的指示。先安裝package control(install package control),然後再下載(control.sublime-package)放到sublime安裝位置中的Packages裡。
- 安裝中文套件。
先(shift + ctrl + p)叫出command,簡單輸入install,就會呼叫package control:install package,點選這個。裡面有很多套件可以使用,這邊再輸入chineseLocalizations並點選就安裝成功了。 - 新增html
一開始新增的檔案都是plain text,要點選右下角改成html,即可。並在檔案中輸入<html>就完成了。 - emmet套件可以快速產生html、CSS,第一次覺得tab好用(雖然平常都是用tab縮排)
先安裝emmet,接著在html中輸入div*4 再按 tab鍵,就可以直接產出四個div。
div+a 、div>div*2、div#wrapper、.background
VS Code
- 先看看說明,並下載portable(zip)
https://code.visualstudio.com/docs/editor/portable
normalize
https://necolas.github.io/normalize.css/
JQuery
https://jquery.com/
html5shiv 讓舊的瀏覽器認識html5
https://github.com/aFarkas/html5shiv
Adobe color
https://color.adobe.com/zh/create/color-wheel
MediaQuery 用html與css來判斷螢幕寬度
- html那邊在head加入,好讓不同寬度的裝置搭配不同的CSS<link rel="stylesheet" href="mediaQuery480.css" media="screen and (max-width:480px)">
- html那邊在head加入,讓螢幕初始縮放比例為100%<meta name="viewport" content="width=device-width; inital-scale=1.0">
- CSS那邊就加入,開始調整畫面囉@media screen and (max-width:480px){/* 如果裝置寬度小於或等於480px,就會載入這個CSS */}
Bootstrap
- https://getbootstrap.com/
- 加入bootstrap.css與 bootstrap.js。CSS通常放在head那邊,js放在footer之後(JQUERY也是)
變成Android App
- 下載安裝java JDK
將JDK的BIN加入到環境變數 - 下載安裝 Android Studio
要取得並安裝 Android SDK(4.1.3直接內建) - 下載安裝 Node.js
npm install -g cordova - 接下來都用cordova 來新增(只能用一般 cmd 操作,不用管理員)
- cmd D槽,然後 codrova create 專案資料夾
- 複製相關檔案到專案中,cmd 到專案中,cordova platform add android
- 編譯出apk,cordova build android
- 還是要去下載gradle,然後再android studio設定gradle的目錄位置,並在執行gradle.bat(在下載的gradle中)
感謝"秒懂,行動網頁設計"的作者
沒有留言:
張貼留言
注意:只有此網誌的成員可以留言。