Getting Started

This tutorial acquaints you with the basics of using Studio for HTML authoring. Completing the tutorial produces a Web page that looks like the one below. It combines text, color, layout, formatting, and links in an attractive, functional design. The techniques you learn here apply to the major elements of building Web content.

Working in ColdFusion Studio

Before beginning this tutorial, you should become familiar with the Studio Workspace. The material presented here assumes a working knowledge of interface elements such as toolbars, the QuickBar, the Files tab, and the Editor. These components are described in "Exploring the Studio Workspace".

Studio's tag editors and drag-and-drop feature automatically add the correct syntax, such as quotes, brackets, and the equal sign, when inserting code. If you edit the code manually, be sure to maintain these elements in their proper places.

Opening the default template

When you first open Studio, it displays a new, untitled document. If you do not see this document, click the New button on the Main toolbar. It looks like this:

Setting a working directory

All the files you need to complete this sample page are in a single directory. If you accepted the defaults when installing Studio, the directory path is Program Files\Allaire\ColdFusion Studio 4.5\Help\Using ColdFusion Studio\03 Learning HTML and CSS\tutorial files. Navigate to this folder in the Universal Files tab. All file operations can now be done without having to change directories.

We're using a single directory to make the tutorial easier, but when you develop Web content on your own you will want to keep your document files and supporting files (images, media, scripts) in separate folders.

Note To create the tutorial page:
  1. Open Studio and select the "Untitled" document in the editor.
  2. Type Archaeology Tours between the <TITLE></TITLE> tags to replace "Untitled".
  3. Choose File > Save to open the Save dialog box.
  4. Enter tour.htm in the File name text box and save the file in the tutorial files folder.

    This step ensures that Studio will correctly determine the file paths when you create links by dragging and dropping links to images and other files.

To preview the sample page online, open the tour_html.htm file.

Tip Browsers ignore line breaks, tabs, and spaces in HTML documents. As you build the page, you can add line spacing and indenting to make your code and content more readable. For a full discussion, see Chapter 6, "Best Practices for Coding HTML and CFML".