創建和運行你的第一個Web項目 · phpstorm手冊

# 創建和運行你的第一個Web項目熟悉PhpStorm建議你從頭開始創建你的第一個項目,實現最基本的功能。先創建并運行您的Web項目: 1. 創建一個項目，對于這個，在主菜單中選擇** File | New | Project** ,[新建項目](/參考/對話框/新建項目對話框/README.md)對話框被打開。 2. 在左邊的窗格中，選擇**Empty Project**。 3. 在右邊的窗格中,指定文件夾的路徑來創建項目，例如：**C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS\MyFirstWebProject** ，在**Location** 文本框手動輸入或者點擊文本框旁邊的**Browse** 按鈕![瀏覽](http://image.jellychen.cn/uploads/2016/10/browseButton.png)。在[打開的對話框](/參考/對話框/選擇路徑對話框.md)選擇目標文件夾。PhpStorm組成項目文件夾的路徑如下: ![創建Web項目](http://image.jellychen.cn/uploads/2016/10/webstdcreateNewProject.png) 點擊**Create**，然后就好了。 4. 創建一個HTML文件，對于這個，在[項目工具窗](/參考/工具窗參考/項目工具窗.md)中右鍵點擊項目目錄，指向右鍵菜單上的**New**，然后選擇**HTML File** ![新建HTML文件](http://image.jellychen.cn/uploads/2016/10/webstdcreateHtmlFile.png) 5. 在打開的**新建HTML文件**對話框中輸入**MyFile** 然后點擊**OK**。PhpStorm將為您創建存根文件,在專門的編輯器選項卡中打開它。 6. 在`<html />`標簽中輸入示例代碼: ```html <html> <head> <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script> <title>Your first Web project</title> </head> <body> <div id="map" style="width: 400px; height: 300px"></div> <label for="latitude">Latitude:</label> <input type="text" id="latitude" value="59.942402"/><br/> <label for="longitude">Longitude:</label> <input type="text" id="longitude" value="30.293661"/><br/> <input type="submit" value="Show map" onclick=" showMap(document.getElementById('latitude').value,document.getElementById('longitude').value);"/> <script type="text/javascript"> function showMap (latitude, longitude) { var myMap = new ymaps.Map('map',{ center:[latitude, longitude], zoom:16 }); } </script> </body> </html> ``` 7. 保存文件，選擇**File | Save All** 或者按 `Ctrl+S`。 8. 運行你的程序，按照以下之一去做： * 選中**View | Open in Browser**，然后從列表中選擇想用的瀏覽器。 * 在瀏覽器工具欄點擊想用的瀏覽器: ![瀏覽器圖標](http://image.jellychen.cn/uploads/2016/10/browserIcons.png) 9. 這個頁面在瀏覽器中已經打開了，點擊**Show Map**按鈕，Yandex地圖顯示出來了，顯示在圣彼得堡IntelliJLabs辦公室的位置。 ![Web測試頁面](http://image.jellychen.cn/uploads/2016/10/web_storm_first_project_output.png) # 另請參閱：規程： * [在瀏覽器中預覽頁面Web內容](/如何使用/常規指南/查看頁面Web內容/README.md) 參考: * [新建項目對話框](/參考/對話框/新建項目對話框/README.md) 入門指南： * [用戶界面引導](/如何使用/常規指南/用戶界面引導/README.md)