Section 1: The Tool Bar

First, let's learn about the tool bar in Creatext. It has features to help speed up the process of making your web pages. Simple clicks is all it takes to do most tasks of choosing colors, saving your document and previewing it in your web browser.

Look at the first icon on the the left side of the tool bar. The one that looks like a page with the corner turned down, and has a red check mark. When the red check mark is present, it means your document hasn't been saved. Click on the icon and you will see a standard Macintosh Save Dialog Box appear.

(Find your Documents Folder, if it isn't the one already showing as the location to save the document.) Give your document a name that has a "dot" and html at the end of the name. Since the opening page of a website is usually index.html, let's go ahead and name our page, index.html and make a new folder named, My Web Pages, within the Documents Folder.

It is very important to have the name of your Creatext document end with .html The suffix, .html, enables a web browser to read and display your web page.


Once you have named and saved the document to your Documents Folder, All you need to do to save changes is click the Save Icon. It is automatically saved over the old document. Then click on the Internet Explorer icon to preview your web page. This is a real time saver in Creatext! Just click Save and then click the Browser Icon to preview your work. Simple!
Note: You can also preview in the Help Viewer or another web browser, such as Opera. (Safari is not included in Creatext at the present time.)

Now, let's look at the other features of the tool bar.
If you click on Recolor, all tags in your HTML document will be properly colored for easy identification.
Special changes all special characters to HTML entities.
Comment gives you a specially marked place for you to enter any comments you want to make in the document. The browser ignores these comments, so you can make notes to yourself as reminders, etc. and they won't show on your web page.

See the little Rainbow Icon? rainbow That's the Color Chooser. Let's take a look at that.

color_chooser

When you click on the Rainbow Icon, the Color Chooser opens and you can select colors for backgrounds, lines, table cells, fonts or any place you want color to appear on your web page.

There are several ways to choose a color. You can move the RGB Sliders back and forth to preview different colors in the horizontal bar where the blue is now showing. Notice the Hex code number, #0000FF, for blue is showing in the HTML Box in the lower right of the color chooser. Each time you choose a different color, the number for that color will appear in the HTML Box.

color_picker

Colors can also be chosen by name. If you want a color like Salmon, Teal, or even Olivedrab, click on the Color Names Button and choose a color by name. The list has a lot of colors to choose from.

color_names

Now, for the last things shown on the Tool Bar. browser_buttons The choices of how you want to view your web pages as you are constructing them.

Shown below, is the way I like to work and preview my work in Creatext. When I'm ready to preview my work in the web browser, first I click on the Save Button to save my work. Then, I click on the Browser Button to preview.

preview_1

Notice I'm not presented with a Save dialog box asking where I want to save the document. After it has been named and saved once, each new save is automatic. That's one of the best features of Creatext. As you work, just hit the Save Button and then the Browser Button to preview your work. You can do this as often as you like and it really speeds up your work! (NOTE: In the next release of Creatext, you won't even have to hit the Save Button!)

preview_2

When you click the Browser Button, the browser window becomes the active window and you can scroll up and down the page to preview you work. ( If you haven't launched your browser application, it will automatically launch when you click the Browser Button. )

When you are finished previewing your work, just click on the Creatext window to make it active and continue working.

Back to Tutorial Home Page
blue_left.jpg
NEXT