WebStorm + BootStrap 安裝 用 Tomcat 部署Web專案（圖文詳解 + 例項 ）
WebStorm安裝和破解
1.官網下載
2.安裝 ，安裝地址看個人情況修改
. 32位 這裡選擇 32-bit launcher
. 64位 這裡選擇 64-bit launcher
3.破解
.第一次使用時會出現如下圖片，這裡選擇下面的選項
.
. 伺服器註冊碼 然後點選獲得註冊碼 ，複製註冊碼 ，到下方，就可以免費試用到明年5月份後
. 這個註冊碼也可以啟用PyCharm
. host 檔案位置 C:\Windows\System32\drivers\etc
BootStrap下載
. 建議下載中間的
WebStorm部署Tomcat伺服器
1. Tomcat 伺服器部署 參考 Tomcat使用和環境配置（圖文詳解）
2. 開啟WebStorm -->File --> Settings
3. Build,Execution,Deployment --> Deployment
. 新增 Tomcat 伺服器
.Tomcat 是本地伺服器 說以選擇 Local or mounted floder
. Webapps 伺服器檔案儲存位置
. 8080 埠（不解(▼へ▼メ)釋）
4.修改本地檔案儲存位置，伺服器檔案儲存地址，訪問地址
. WebStorm 一次只能執行一個專案
.T001_BootStrap 這裡是專案名
PS：在Deployment path on sever 中 不能只打一個 \
. Tomcat 無妨訪問根目錄下的 html 檔案 所以 寫法為 \ + 專案名（建議寫法）
. Web path on server : 這裡為訪問地址 寫法為 ：/ + 專案名（建議寫法）
5. 用BootStrap 寫一個 Html檔案
. bootstrap-3.3.7解壓檔案 --> dist --> css --> bootstrap.min.css
. 將bootstrap.min.css 複製到 專案中
. 新建HTML File
簡單程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="ViewPort" content="width=device-width,initial-scale=1">
<title>第一個BooStrap網頁</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
body{
padding-top: 50px;
}
.strter{
padding: 20px 15px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navber-header">
<a herf="#" class="navbar-brand">Project Name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li class="active"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="strter">
<h1> BootStrap Starter Template</h1>
<p class="lead">第一天測試結束！起來嗨٩(๑❛ᴗ❛๑)۶</p>
</div>
</body>
</html>6. 如圖
7.將檔案上傳到 伺服器 Tools --> Deployment --> Upload to ...
. WebStorm 不像 Eclipse 一次上創多個檔案
. WebStorm 一次上傳一個 檔案
若有多個檔案需多次上傳（如同時有CSS，JSP，HTML ，就需要上傳三次）
. Autonmatic Upload （always）：自動上傳 （建議開啟）
8. 執行Web專案
. WebStorm 不能自動開啟 Tomcat
. 這裡 我們 手動開啟 Tomcat
. 成功執行結果（如圖）
