---
# System prepended metadata

title: 環境設置&第一個專案

---

# 環境設置&第一個專案
開一個新資料夾設置新的工作區開始Web開發吧～～
## 服務器設定
- 下載[Tomcat](https://tomcat.apache.org/)
    - 9為穩定版
    - 下載Win64 zip解壓縮後剪到喜歡的位置
- 在IDE中設定服務器
    - 按紅線處新增服務器
    ![](https://i.imgur.com/uPG7Kx5.png)
    - 選Tomcat（剛下載的版本）
    ![](https://i.imgur.com/E1dncFF.png)
    - 選擇Tomcat的路徑還有JDK版本
    ![](https://i.imgur.com/nz3YSi0.png)
    - 這樣Tomcat就住進（？）你的日蝕IDE了
    ![](https://i.imgur.com/S64b4Cj.png)
## 練習建立第一個Java Web專案
建立一個Dynamic Web Project，並檢查相關版本配置
![](https://i.imgur.com/5oXrMIu.png)
一直下一步直到出現這個自動產生web.xml，把它打勾
![](https://i.imgur.com/9HlNk3a.png)
## 調整出適合又舒適的開發環境
新的工作區設定檔跟之前的工作區不同，所以字體之類的可能會變小，還有提示字也要重加，這些都要再次調整，但最重要的是UTF-8編碼議題：
改螢光筆劃記的三個地方的設置，讓新開的檔案編碼預設均為UTF-8
![](https://i.imgur.com/wHOlAlK.png)
另外預覽用的瀏覽器可以改成自己喜歡的，這個設定在IDE最上面工具列Windows➡Web Browser中
## 目錄開法參考
- 網站的部分
主要開在webapp的資料夾下
![](https://i.imgur.com/BQrNGSP.png)
- Java程式碼的部分
    - 開package在Java Resources的src下方
## 新增一個Bootstrap4的模板
可以用VS Code搭配Bootstrap4擴充功能，開一個html檔輸入快捷`B4-$`得到尚無頁面內容的的Bootstrap4頁面原始碼，再把它貼到日蝕中的範本設定（但記得把導入的驗證部份砍掉，避免IDE亮黃燈）
### HTML的部分
![](https://i.imgur.com/aOy8HwA.png)
以後就可以這樣用範本，非常方便
![](https://i.imgur.com/hJ6wj5v.png)
### JSP
到JSP的設定下方比照HTML處理
但要加上這行：
```html=
<%@ page language="java" contentType="text/html; charset=${encoding}" pageEncoding="${encoding}"%>
```