WEB
網頁開發環境
By - 點點
Index
Codepen
- 網頁編輯器
- 網頁搜尋 "codepen"
- 註冊帳號
codepen
建立檔案
- 建立一個新的 "Pen"
Codepen
- 建立一個新的 "Pen"
- 分為三個區塊分別為 HTML、CSS、JS
檔案命名
網頁的長相會出現在這
codepen
<body></body>裡面的東西寫在這
(使用者看得到的東東)
其他設定<head></head>裡面的東西
vscode
學校的電腦有不需要下載
回家可以安裝在自己的電腦上
- Microsoft 的免費編輯器
- 下載 -> https://code.visualstudio.com/
vscode
下載按這邊
- Microsoft 的免費編輯器
- 下載 -> https://code.visualstudio.com/
vscode
你的作業系統是哪個就點哪個
vscode
.exe 檔點開來，然後一直順著點下去就 ok 了
建立檔案
在電腦建立新的檔案夾 -> 右鍵建立新檔案夾
-> 按Open Folder，開啟你剛剛建的檔案
功能說明
開好的檔案夾會出現在左側欄
滑鼠移動到檔案夾名稱處，會出現這個，按這裡新增檔案
Extensions 可以下載擴充功能
新增檔案
HTML 副檔名 .html
CSS 副檔名 .css
JavaScript 副檔名 .js
開啟網頁
按這個可以打開網頁
或在左側欄按滑鼠右鍵點這個，開啟檔案總管，點開 .html 檔，就會將網頁開啟在瀏覽器中
"Ctrl" + "S" 儲存檔案，每次寫完都要記得儲存。
VScode
然後你就學會在 VSCode 裡面寫網頁啦！
開發者工具 F12
到瀏覽器中，開啟任一個網頁，按鍵盤上的 F12 可以打開開發者工具，可以檢查該頁面，或者在網頁任一處滑鼠右鍵點 "檢查" 選項。
F12
F12
在寫網頁的時候，可以在開發者工具修改，此時顯示在瀏覽器的網頁會被暫時改動，重新整理後就會消失。因此用以調整網頁並即時查看效果，確認後就可以複製到原檔案中。
F12
F12