2021年4月8日 星期四

sublime Visual Studio Code 安裝與使用html5

 Sublime

  1.  先下載 sublime。
    https://www.sublimetext.com/3
  2. 下載package control,這是我覺得奇怪的地方,若是每個使用者必須安裝的功能,為什麼不能直接就在軟體中呢???(商業考量@@)。
    https://packagecontrol.io/installation
  3. 安裝package control,照著上面網頁中的指示。先安裝package control(install package control),然後再下載(control.sublime-package)放到sublime安裝位置中的Packages裡。
  4. 安裝中文套件。
    先(shift + ctrl + p)叫出command,簡單輸入install,就會呼叫package control:install package,點選這個。裡面有很多套件可以使用,這邊再輸入chineseLocalizations並點選就安裝成功了。
  5. 新增html
    一開始新增的檔案都是plain text,要點選右下角改成html,即可。並在檔案中輸入<html>就完成了。
  6. emmet套件可以快速產生html、CSS,第一次覺得tab好用(雖然平常都是用tab縮排)
    先安裝emmet,接著在html中輸入div*4 再按 tab鍵,就可以直接產出四個div。
    div+a 、div>div*2、div#wrapper、.background

 VS Code

  1. 先看看說明,並下載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來判斷螢幕寬度

  1.  html那邊在head加入,好讓不同寬度的裝置搭配不同的CSS
    <link rel="stylesheet" href="mediaQuery480.css" media="screen and (max-width:480px)">
  2.  html那邊在head加入,讓螢幕初始縮放比例為100%
    <meta name="viewport" content="width=device-width; inital-scale=1.0">
  3. CSS那邊就加入,開始調整畫面囉
    @media screen and (max-width:480px){
        /* 如果裝置寬度小於或等於480px,就會載入這個CSS */

 Bootstrap

  1. https://getbootstrap.com/
  2.  加入bootstrap.css與 bootstrap.js。CSS通常放在head那邊,js放在footer之後(JQUERY也是)

 變成Android App

  1. 下載安裝java JDK
    將JDK的BIN加入到環境變數
  2. 下載安裝 Android Studio
    要取得並安裝 Android SDK(4.1.3直接內建)
  3. 下載安裝 Node.js
    npm install -g cordova
  4. 接下來都用cordova 來新增(只能用一般 cmd 操作,不用管理員)
  5. cmd D槽,然後 codrova create 專案資料夾
  6. 複製相關檔案到專案中,cmd 到專案中,cordova platform add android
  7. 編譯出apk,cordova build android
  8. 還是要去下載gradle,然後再android studio設定gradle的目錄位置,並在執行gradle.bat(在下載的gradle中)

 

 感謝"秒懂,行動網頁設計"的作者

 

 

 

 

沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。