• 创建和运行你的第一个Web项目
  • 另请参阅：

    创建和运行你的第一个Web项目

    熟悉PhpStorm建议你从头开始创建你的第一个项目,实现最基本的功能。

    先创建并运行您的Web项目:

    1. 创建一个项目，对于这个，在主菜单中选择 File | New | Project ,新建项目对话框被打开。
    2. 在左边的窗格中，选择Empty Project。

    3. 在右边的窗格中,指定文件夹的路径来创建项目，例如：C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS\MyFirstWebProject ，在Location 文本框手动输入或者点击文本框旁边的Browse 按钮浏览。在打开的对话框选择目标文件夹。PhpStorm组成项目文件夹的路径如下:

      创建Web项目

      点击Create，然后就好了。

    4. 创建一个HTML文件，对于这个，在项目工具窗中右键点击项目目录，指向右键菜单上的New，然后选择HTML File

      新建HTML文件

    5. 在打开的新建HTML文件对话框中输入MyFile 然后点击OK。PhpStorm将为您创建存根文件,在专门的编辑器选项卡中打开它。

    6. 在<html />标签中输入示例代码:

      1.  <html>
      2.  <head>
      3.      <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
      4.      <title>Your first Web project</title>
      5.  </head>
      6.  <body>
      7.  <div id="map" style="width: 400px; height: 300px"></div>
      8.  <label for="latitude">Latitude:</label>
      9.  <input type="text" id="latitude" value="59.942402"/><br/>
      10.  <label for="longitude">Longitude:</label>
      11.  <input type="text" id="longitude" value="30.293661"/><br/>
      12.  <input type="submit" value="Show map" onclick=" showMap(document.getElementById('latitude').value,document.getElementById('longitude').value);"/>
      13.      <script type="text/javascript">
      14.          function showMap (latitude, longitude) {
      15.              var myMap = new ymaps.Map('map',{
      16.                          center:[latitude, longitude],
      17.                          zoom:16
      18.                      });
      19.                   }
      20.      </script>
      21.  </body>
      22.  </html>

    7. 保存文件，选择File | Save All 或者按 Ctrl+S。

    8. 运行你的程序，按照以下之一去做：

      • 选中View | Open in Browser，然后从列表中选择想用的浏览器。

      • 在浏览器工具栏点击想用的浏览器:

        浏览器图标

    9. 这个页面在浏览器中已经打开了，点击Show Map按钮，Yandex地图显示出来了，显示在圣彼得堡IntelliJLabs办公室的位置。

      Web测试页面

    另请参阅：

    规程：

    • 在浏览器中预览页面Web内容

    参考:

    • 新建项目对话框

    入门指南：

    • 用户界面引导