Preparing a Web Site

Click here for FrontPage Lessons
Click here for Netscape Composer Lessons

If you've just come here from the previous lesson, you can see that this page is very different from the last. You can't help but notice the background has changed. What's this below? A Picture?

Very Car!

Let's look at the things that make this page different from the last.

• We have color both in the background and in the text.
• There is a picture.
• Notice the animation?
• This list is bulleted.
• We also have links back to the previous page.
• We have a link back to "Educational Technology" right here and at the bottom of the page.
• As well, because this is a long page, we have anchor links to places in this page.

In this lesson, you will learn the basics. Below is a clickable list of those essentials.

• Creating a folder or directory and saving your html document
• Adding a title
• Adding a heading
• Adding text
• Adding a background
• Adding a link

Setting up a Web Site

Here's a list of the most important things to do "first" in PageMill.

1. Make a folder on your hard drive or server for all your files.
   • Files will include PageMill documents like this one as well as pictures. I cannot emphasize enough how important it is to place all your html documents, gifs and jpegs in that single folder. Later, you can do things differently, but as a novice, you will avoid many frustrating broken links if you have all your documents in a single folder.
2. Open PageMill by double clicking on the PageMill icon.
   • The icon can be on the desktop or within the hard drive. It may be under the Apple Menu in "Recent Applications", or it may be on the Launcher if your computer is set up that way.
3. When PageMill opens, a blank screen will appear in Edit mode. We use this mode to create a web page in the same way as we create documents in a word processor.
4. Save your untitled document in the following manner.
   • Select File... "Save Page As..."
   • Type a name for the file in lowercase with no spaces. Add a period (dot) htm and save to the folder you created in the first step above. Here's an example: firstwebpage.htm
5. Do each step above before going on.

Back to top

Adding the Title

In Edit mode, notice that the Title Bar indicates that your page is still an Untitled Document. You've saved it, but the title of the page that will appear in the Netscape or Explorer title bar will be "Untitled Document" unless you change it now. In this title, of course, you want to use capitals and spaces. Click inside the Title box and give your web page a suitable title and then save again with Command S.

Adding the Heading

1. Place your cursor in the typing area and type a heading for your web page. My First Web Page will do nicely. To center your heading, use the PageMill tool bar and your intuitive gifts to deduce the location of the icon that produces the centering effect you want. You will notice that when centering and left or right justifying, you don't need to select the text you typed. Your cursor only needs to be on the line or in the paragraph you want justified.
2. Next, make the text larger.
   • There are two ways (at least) to do this. When you're working with a heading, the easiest way to make a heading larger is to place the cursor next to the text you want as your heading and go to the Change Format box (that's the dropdown menu on the far left of the tool bar where you see the word "Paragraph" in a box). Click on that box and select "Largest Heading" from the choices. Now your heading is both centered and big. From this Change Format box, you may also select other options such as the Bullet List and Numbered List.
   • The other way to enlarge text is to select your text (paint it by clicking and dragging) and use the up and down triangular arrows in the tool bar. They're on either side of the zero and to the left of the B for boldface.

Back to top

Adding Text

When adding basic text after a title, press return and click "Paragraph" in the Change Format box. Switch to left justify, and begin typing a message. Explore the PageMill tool bar and discover how to change the color of text. Fool around with the boldface, italic and underline options. Naturally, you will want to experiment with fonts, too. Try adding bullet and numbered lists as well.

Back to top

Adding a Background

PageMill uses a window called the Inspector for basic page settings. If the Inspector is not on the screen, you can place it there by choosing "Window" in the menu bar and selecting "Show Inspector".

The Inspector will present the options you need in order to change the background. Click on "Background" in the Inspector page tab and simply choose a color. Cool, eh? Later you'll learn about background images and have even more fun.

If you're reasonable and intuitive, you can probably figure out how to add a background image right now!

Adding a Link

There are several types of links.

• Anchor Links
• Site Links
• URLs (Uniform Resource Locators)
• Sausage Links
• Golf Links
• Cuff Links

Only the first three links in the above list are currently used in web pages.

Anchor Links

Note: You really don't need this section right now. It's meant for longer documents, but you certainly may read this part and try my suggestions if you like. Alternatively, you may skip to Site Links.

Did you notice that you can link to a part of this page by clicking on one of the items in the list at the top? You can also click on the Back to top arrow and link back to the top (go figure). Well, those are anchor links. To set an anchor link, you need a long document like this one. Make your document longer by pressing the Return key about fifty times. Every ten rows or so, enter some text to link to. To place your anchors, you simply place the cursor next to the section where you would like your visitors to end up and insert an anchor by choosing "Insert" on the menu bar and selecting "Anchor". In order to establish a link to that anchor, you need to select (paint) the text that you want linked to the anchor and then click and drag the anchor to the selected text and drop it there. Your text is now linked to that specific anchor. In this page, there is an anchor at the top where all the Back to top links end up.

To get help with this and any other topic, select "Help" in the menu and choose "Index".

Site Links

These are links to places in your site. A web site has more than one page, and pages are all linked. When you upload your web site, all your links become addresses or URLs (Universal Resource Locators). Obviously, you can only link to another page in your site if you have more than one page, so you need to make a new page right now. Give it a name like secondwebpage.htm and save it to your folder. Link to that page by typing some text like, "Go to my next page." Paint that text and choose "Edit" from the menu bar. Then select "Make Link" (or Command M). The window that pops up will allow you to choose the path to your folder where you will select the link you want. Double click on the site link you want to make. Pretty simple stuff. Obviously, you want to save pretty regularly (Command S). Don't say I didn't warn you.

If you think about it, you probably realize that anything you can select can also be a link. Hmmmmm! Does this mean images (including animated gifs) can be selected and linked?

URL Links

These are the world wide web links that are so cool because they connect your site to the outside world. To make one, follow the same procedure as you did to make a Site Link, except that when you are in the "Link To" window, place a URL (web site address) in the box next to the box that says "Make WWW Link". In the window below, I have pasted the URL to the "Tools for Thought" site in the URL box.

A slick little move you all ought to glean from the example above is that you can copy URLs from the Netscape or Explorer Location Bars. Once copied, you can paste the URL into that little box in the "Link To" window. This saves time and eliminates keyboarding errors. "Copy and paste" is used a great deal in web page authoring.

Back to top