## 寫程式環境 - Sublime - Codepen (線上平台) ## 伺服器瀏覽&原理 - 瀏覽 在網站空白處按右鍵 ---> 檢查 ---> 切到「Network」 ---> 重新整理網頁 ---> 點選最初檔案 ---> Headers ---> 可看到要求網址(URL)與遠端位置(IP) - 原理 伺服器：遠方的一台電腦 ```mermaid graph TD; 將欲瀏覽資料丟至後端伺服器--->伺服器根據要求傳特定檔案回來 ``` ## 平台註冊&基礎設定 1. 網址列上打「codepen.io」進入首頁，點「Sign Up for Free」 ![](https://hackmd.io/_uploads/B1BAxzQY2.png) 2. 註冊並驗證信箱 ![](https://hackmd.io/_uploads/B1x1-zmYh.png) 3. 可從Trending參考他人作品 ![](https://hackmd.io/_uploads/rJ9k-fmK2.png) 4. 點入其中一個作品，若喜歡可按愛心收藏或點選「Fork」開新的pen編輯他人作品並儲存為自己的檔案 ![](https://hackmd.io/_uploads/rymafMQt3.png) ## 簡易實際操作 - 開啟一個new pen - 打入文字與HTML程式碼 ![](https://hackmd.io/_uploads/Sk6ktfQYh.jpg) - 按「Save」以儲存 - 在「Change View」裡可用「Debug Mode」檢視整頁網頁 ![](https://hackmd.io/_uploads/SkWyKMQth.jpg) ![](https://hackmd.io/_uploads/SykmYz7Kn.png) - 點選「Profile」--->「Public」，可看見以儲存的網頁 ![](https://hackmd.io/_uploads/rkoaKGXK3.png) ![](https://hackmd.io/_uploads/r1i6tzQt3.png) ## 使用sublime中快速鍵 1. ctrl+D : 選取相同的字，同步修改 2. ctrl+左中括號 : 往左縮排 ; ctrl+右中括號 : 往右縮排 3. ctrl+L : 選取一整行 4. ctrl+斜線 : 註解 5. shift+上下左右鍵 : 選取 :::warning 內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d :::