Eclipse Web Development
TOC
- Overview
- Alternative
- Explore the IDE
- Toolbar Icons
- Create New Web Project
- Run the Project
- Create a Static Web Project
- Using the Editor
- Links
Overview
Learn about Aptana or Web Tools Install. This is an old document. I don't use these tools anymore. We can make Eclipse much more comfortable for web development by adding in the Aptana tools.
http://download.aptana.com/studio3/plugin/install
Choose Help | Install New Software. Press the Add button. Set:
- **Name:**Aptana
- URL: http://download.aptana.com/studio3/plugin/install
Step through the wizard.
Alternative
I suggest going with the Aptana Plugin, however, alternatively, you can do this:
Choose Help | Install New Software from the Eclipse menu. Select the following in the Work With drop down:
Scroll to the bottom to the Web, XML, Java EE and OSGi Enterprise Develpment section.
- Choose Eclipse Web Developer Tools
- JavaScript Developer Tools
- Web Page Editor
You can have both Aptana and the Web Developer Tools installed at the same time. However, it can be confusing. To uinstall the Web Developer Tools, choose Help | About | Installation Details and follow the wizard.
Explore the IDE
Let's take a moment to get familiar with the IDE.
Toolbar Icons
- Build All
- Outline
- App Explorer
- Aptana Start Page
- Show Preview
- Terminal
- Theme Preferences
The Commands Menu
Create New Web Project
Make sure you can see the App Explorer and the Project Explorer. The App Explorer is on the Toolbar, you can reach Project Explorer by choosing the following from the menu:
- Window | Show View | Project Explorer
Here are the steps to create a new project
- File | New | Web Project or File | New | Other | Web Project
- If you want a default Index.html file then choose Basic Web Template
- If you want an empty project, choose Default Project
- We will HTML5 boilerplate later. Skip them for now.
- After creating your project, choose File | New From Template | HTML | HTML 5 to add an HTML 5 file to your project.
And nearly always add jQuery by putting on of these in your <head> element:
- <script src="http://code.jquery.com/jquery.min.js"></script>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
\