Creating a website - Text Instructions

This page contains all the instructions on the other pages, listed in a printer-friendly format.

1. Create a new folder on the Desktop (you can use the menu command File→New Folder) and name it so that you can distinguish it easily. For example, if my site is about ants, my folder might be named "mathews-ants."
2. Launch Mozilla. You will use Mozilla's Composer component to create your website.

In the following steps you will create all your pages and give them titles. Nothing should be in the content of the pages yet. You should create your home page first and name the file "index.html", and then create your other pages.

3. Choose the File→New→Composer Page menu command.
4. Before typing anything, save your new page. A dialog will appear asking for your page title. Choose a short name with no spaces, punctuation or capital letters.
5. Now you'll get a save dialog box. The file name should be the same as the title you just typed, with the addition of ".html". Make sure to save the file in your folder.

Make sure you have created all your pages and saved them into your folder. In the following steps you will type some template text into one of the pages you just created.

6. Align the text insertion point (the blinking line) to the center of the page using the center alignment button in the toolbar of the window.
7. Type "Main Heading" at the top of the page. Type return twice to move down two lines. Now, type the text of your links with vertical bars between them. To type a vertical bar, hold down shift and look above the return key.
8. Click to place the text insertion point (the blinking line) back on the top line. Find the menu in the toolbar that says "Body Text," and choose Heading 1. This will turn that text into a heading, which makes it larger on the page.

To make working links on your template page, do the following for each.

9. Select the text that you want to become a link and click on the Link button in the toolbar.
10. In the dialog sheet, click on "Choose File...", then open the file you want to link to.
11. You should see the file name in the dialog sheet. Click OK to finish. The text should now be blue and underlined, indicating that it is now a link.

The following steps will finish the basic setup of your website. You will copy the template from one page to all your other pages and then customize them all. At the end, you should have a set of pages that are linked together and have descriptive headings.

12. Select everything on the template page (Edit→Select All will do this quickly) and copy it.
13. Go to one of your blank pages (you can click on the window directly, or choose it from the Window menu.)
14. Paste (Edit→Paste) into the blank page. Replace the generic page heading (Main Heading) with something appropriate to the page.
15. Select the link that points to this page. You don't need this to be a link, since clicking on it would not have any effect. Choose the Format→Remove Links menu command.
16. The text should still be selected. Use the toolbar button to make it bold. This will be a good visual cue to the users indicating the page they're on.

The next several steps will guide you through adding an image to a web page.

17. Make sure you have a folder for images in your website folder.
18. Browse to the image that you want to use. Find the Control key at the bottom of the keyboard, on the far left or right. Holding this key down, click on the image. Choose "Save Image As..." from the contextual menu that pops up.
19. Find your image folder in the save dialog. Be sure to name the file using a short word without spaces. Do keep the extension at the end (most likely ".jpg" or ".gif").
20. On your page in Composer, the text insertion point (the blinking vertical bar) indicates where the image will appear in your page. Be sure it is positioned where you want your image to go. Click on the image button in the toolbar at the top of the window. Note that you don't have complete control of where an image will go on the page; think of images as part of the text.
21. In the dialog sheet, click on Choose File... and open an image from your folder to insert.
22. In the text box labeled "Alternate Text:", type in a brief description of the image. This text will show up on the page if the image could not be loaded for some reason.