使用 Node.js 與 Express 開一個專案
能夠在伺服器上面運行 JavaScript 的應用平台環境 NVM(Node Version Manager) 處理專案時需要不同的 Node 版本來執行（因有些 npm 模組有版本相容性問題） 下載1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash 開始一個專案 npm init 在 package.json 的 scripts 中新增”start”指令 "start": "node index.js" npm run start fs(File System)模組 取得 fs 1const fs = require('fs&#x..
更多
RWD 與 Bootstrap 入門
負責人：王婕瑜授課時間：2020-04-09 (四) RWD 基本概念 全名為：Responsive web design，響應式設計 主要目的是使網頁在各種尺寸的裝置上，可以呈現合適比例的原則。讓內容跟水一樣，在不同的容器（裝置）中流動，顯示最適合的模樣圖片來源 舉個例子，在這個網站裡，隨著螢幕寬度變小，它的 header 變為漢堡選單，文字自動換行，中央區塊的內容從橫向排列變為縱向排列，我們就可以說這個網站符合 RWD 的設計原則。要做到這樣的效果，需要 CSS 提供的 Media Queries 功能和 viewport 的設定。 總結 RWD 設計的特點： 彈性的圖片（依照螢幕大小比例伸縮） 流動的區塊（文字隨著螢幕大小換行） 多種版面（不同尺寸的裝置相對應的呈現方式） 為什麼要用 RWD..
更多
UI入門 - Figma筆記
UI/UX 介紹UI 使用者介面(user interface) 扮演人與機器之間的橋樑，汽車的方向盤，讓使用者覺得一目了然、好用，使用時外在的部分 UX 使用者經驗(user experience) 人遇上產品產生的想法，使用時內在的部分 UX Designer 主要找出使用者對產品的觀感跟心理認知 亨式番茄醬：醬料用到最後一滴時不好擠出來，改良包裝 AIDMA 法則改變使用者的心理狀態：觀感、企業形象關注>感興趣>記憶>行動 對 UI 的迷思 只要會用軟體就是懂 UI? 否 設計系統規劃的過程 接收使用者經驗反饋 學好平面設計就能做 UI? 風格一致、配色穩定 動態及互動設計 產品使用流程：合理、不會讓使用者困惑 心理學 Figma快捷鍵 Frame ..
更多CSS 定位大全- float 與 position
float 常見區塊(block)元素標籤：div、ul li、p、h1 元素寬度預設會撐到最大，使其占滿整個容器 可以設定長寬/margin/padding，但仍會占滿一整行 常見行內(inline)元素標籤：span、a、input、img 元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置 不可設定長寬，元素的寬高由它的內容撐開 display: inline-block; inline 屬性但可以設定寬高、margin、padding 文繞圖效果（block 變成 inline） float: 浮動方向; clear: both;清除浮動 left（靠左浮動） right（靠右浮動） none（預設值，也就是不浮動） inherit（繼承自父層的屬..
更多CSS 選擇器
同輩 Syntax Mean Selector A, B A 跟 B h1, h2 A + B 緊接 A 後面的 B h1 + p A ~ B A 後面的所有 B h1 ~ p 父子 Syntax Mean Selector A a A 裡的所有 a(含子層/子子層…) p span A > a A 下一子層裡的 a(不含子子層) article>h2 偽類 如果同時定義<a>的四種偽類，一般狀況應依此順序指定a:link→a:visited→a:hover→a:active，不然會有樣式覆蓋的問題（除非特殊設計考量） Syntax Mean Selector :hover 游標移到時 a:hover :active..
更多網路概論
電腦的運作-馮紐曼架構 輸入(鍵盤、滑鼠 -> 終端設備) CPU 控制器 負責流程 運算元 暫存器(記憶體) 輸出 終端機 terminal 負責輸入與輸出的視窗，再將資料傳給 shell shell 殼 windows -> PowerShell command line 只是仿終端機 zsh / bash / powershell 將指令傳給作業系統 流程 鍵盤(input) -> terminal -> shell -> OS 指令 ls / dir 列出目前資料夾 ping xxx.com 檢測某位址是否在運作 cd (=change directory) 改變位置 可直接拖拉資料夾進來(不用自己打) ...
更多Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo genera..
更多