This WebMaster Skills tutorial series is for webmasters who are familiar with HTML, and want to upgrade your working skills and keep current with new programs and techniques.

---

APTANA Editor: Review a Free Template, and Get Introduced to APTANA — a WebMasters’ Dream Editor

In this Lesson you will learn about the free, cross-platform APTANA Editing program, use it to review an open-source template, and gain an introduction to this very powerful development environment. We’ll stick to HTML and CSS editing here, and continue with AJAX features for APTANA in another tutorial. By the way, the “IDE” in the APTANA name stands for Integrated Development Environment — and integrated it is… in a big way.

To follow along with the lesson, first go get the APTANA Editor, download and install it. Next download the template we’ll review by clicking here.

Why APTANA? Like most webmasters, and College instructors, I have tried and worked with several different free and commercial editors. APTANA is one of the most comprehensive I have ever seen, it’s free, and has as a main mission to be an excellent AJAX development environment. It’s also tracking the curve of development for Apple’s successful new iPhone. It gives you some great time-saving coding assistance — don’t miss this.

1. When you start up the APTANA application for the first time, there is quite a lot going on within the user interface, so first, take a look at the overview graphic below to familiarize yourself with the different “views” that APTANA offers. Then you may wish to click the icon circled in the illustration below to simplify the window and concentrate just on your code for this exercise.

Above, APTANA is open with our template file for the exercise loaded. The various views are defined for you. Note that you can shut the other views off, and leave only your code editing window open (click icon circled in red above).

2. Next, we’ll take a closer look at the template, and also at the accompanying CSS file. Note that you use “File-Open” to open the CSS document since drag and dropping it to the upper left Code Assist View does not work for CSS files like it does for HTML or JavaScript files.

Above, our template file for this lesson (index.html in the “summer_holiday” file) is open showing both the Source View and Preview view which you may tab between (bottom tabs – circled). The two views at left have been minimized leaving the Outline View open at right (top), and the Validation View open at bottom (top illustration).

3. Since you are just getting used to APTANA, take some time to enjoy how it works. Try clicking on the elements in the Outline View (right) to see how APTANA jumps you right to the element you have clicked. In the next step, we’ll take a look at how the navigation tabs were created in your template, so practice jumping right to them using the Outline View.

Above jumping right to the list elements that create the navigation tabs in the template is a snap — just open the Outline View elements (grey triangles pop-down related elements), and click once on the element you want to see in the Code View window.

4. How is the top navigation done? In the HTML code, those links appear in the form of an unordered list (UL). The actual layout of that list is controlled in the CSS document that comes with your template — “style.css”, an external style sheet which “index.html” links to in the HEAD section.

The secret is the “inline” value for the property “display”, written “display: inline,” along with some other tricks written into the list code in CSS, as shown below, including use of the Float:left, Display:block, and background-image elements. This lines up the navigation tabs horizontally, and displays images to create the look of tabs. Open the external style sheet in APTANA, and take full advantage of the helpful Outline View to help you zero-in on the LI element for the List code that creates the horizontal navigation tabs (#navtabs li). Remember to use File-Open to open the CSS document (style.css in the template folder), since dragging and dropping the CSS document to the Code Assist View will not work (it works for HTML files, however).

Above, the “style.css” file has been opened in the Editor, and “#navtabs li” was clicked to jump to the code for that element. We can see that the property and value for the navigation list items have been written as “display: inline” which creates part of the horizontal tab effect. The second box shows another part of the list coding (lines 144 thru 162 – turn on line numbering by right clicking the grey bar at left in the code editor) to create the top navigation tabs.

Now take a look at what happens when key parts of the code to display the top navigation structure are removed (above). The red highlighted areas show where display: inline; float:left, and background properties have been removed rendering the links into a simple vertical list (circled above).

5. What about the Validation View? Well, it turns out that your free template has been written so well, that APTANA did not find any code for which to supply a warning. To give you an example (below), I took a look at my file written for this exercise, and APTANA warned me about use of a color name, instead of the hexidecimal value.

Above, APTANA caught my use of the word “tan” in the internal CSS Style Sheet for this exercise. It put an “X” by line 22 of the code where the offending word appears, and took me too that line when I double-clicked on the “tan is not a color value” line in the Validation View (at bottom).

That’s your first look at APTANA. I predict that of all the editors you’ve reviewed, it will rank very high on your list… especially if you plan to develop using AJAX. Even if you’re working mainly with HTML and CSS, there are a number of strong features that will help you out. Now it’s time to answer some questions.

---

Questions & Answers Discussion…

What is AJAX? AJAX stands for Asynchronous Javascript and XML, and represents a fusion of the best of Javascript eXtensible mark-up language to enable webmasters to create interactive web applications. The asynchronous part of the concept means that page reloading is not involved, so your program performs more like a desktop application.

What is Web 2.0? To a large extent, Web 2.0 has been born from AJAX and other technologies that move the web far beyond a static presentation of “brochure-like” information to actual usable applications and programs. Consumers are coming to expect this sort of interactivity online, and APTANA was created to provide a rich development environment for web coders.

What is Open Source? Open source represents a movement of web programmers who believe that the internet should provide useful information and applications for free. Many times, projects that are available open-source have requests for donations at their home sites, and I always recommend you support these developers. At this time, APTANA reports that it is venture funded, and no donation request appears at their home site.

About the Author: Scott Frangos is a web developer, college instructor, illustrator, and graphic designer. He is Managing Editor for WebFadds, and is also writing two forthcoming books for Web Masters. He lives in Portland, Oregon with wife and partner, Pepper, and their three dogs: Wisdom, Spirit, Steggman.

---

WebMaster Skills is an evolving series of articles which you may access in any order, depending on your level of knowledge and needs. The series covers techniques, applications, and concepts for today’s webmasters including AJAX, HTML, PHP, and Web 2.0 topics.

---