Making a Web Page

By Suzi Israelsson

I would like to thank the many Technology Teachers from ASD that helped me get started and a special thanks to John Wallace of Tundra Technologies for taking me under his wing to show me how to put it all together!

The first and most important part of putting a web page together is getting organized. If you are going to have links with many pages connecting to your site be sure to organize your folders before getting started. Whenever you move a web site around on your hard drive, all the information must go with it in the same format as created or you could get broken links. The best thing is to figure out where you want to keep it stored, organize your folders, and then leave it there simply adding information to your folders as you go!

Example:

First make a folder on your desktop and title it. If you have access to the documents folder in your hard drive, that is the best place to store your work but to get started we can use the desktop.

 

Inside the new folder make two more folders and title them images and media. After you open Claris Home Page, click on File (from the menu bar), drag to Save As, title your new web page, and Save it in Web Page folder you created. It should look like this:

 

Okay, now we are ready to design your new page. As you edit pictures or text that will be used in the web page, you can place the pictures and information in the appropriate folder so you can insert it into your web page.

Return To Top

Setting the Background: Click on the tool Document Options .

The following screen will appear...

You can click and make changes including color of the background or even inserting a pattern background from another file. Be sure any inserted items are stored in the proper place (image folder) within the web page folders.

Note: there is a library section that has more background options to choose from like the one for this background. All you do when you find one you like is to click on it and then click the background icon at the top of the library feature you're in. If you insert one you do not like, simply go up to the menu bar and click on Edit / Undo. Explore on!!!!!
Go to Libraries to find out more about this.

Return To Top

The Insert Table icon will look like this.
Click on it and the following will appear. If the "Cells" file is on top, simply click on "Table" to switch.

The very first thing JW taught me to do was insert an invisible table so cyber space would not control my web page rather I would in that my page design would look the same on every computer regardless of the size monitor being used for viewing. So once the background is set, we shall now set an invisible perimeter in which everything we include in our web page will be located within. If you look at the second graphic above you will see that Row is set at 1, Column is set at 1, Width is changed to 732 pixels by clicking on the little arrow key (that is an apx. number and can be changed to meet your needs), and most important of all, Border is set at 0 so the table will be invisible to the viewer!

You can insert as many tables as needed (be sure they are within the invisible table) and even insert tables within tables. Each time you insert a table you will need to make adjustments. This can include many things: Cell spacing and padding, location of media or images, individual cell background options, adjusting sizes to cells, and adding / deleting rows or columns as you go. You will want to preview it in a browser to be sure it is behaving the way you desire. It might be tricky at first but you will get the hang of it.

Return To Top

If you haven't saved your work yet, when you click on Preview in Browser, it will automatically ask you to save. If you are simply ready to save your work all you need to do is go to File / drag to Save As.
When naming your file avoid using upper case letters, spaces, etc; rather, keep to the lower case letters for a title to your web page. If you must have a space between words, use the underscore key (shift key with the hyphen key). You will see that .htm is automatically added to your title so you do not have type that in. Be sure to save you new page in the folder that you created for the web page. If this is the home page, first page, or only page it should be on the first level in your folder. All additional web pages that will be connected to your home page should be kept in additional folders within the web page folder therefore making it a second or deeper layer depending on the depth of your web page. Those folders should follow the same organizational lay out as the first folder!
Click here to find out more about organization...

 Return To Top

Claris Home Page provides a variety of graphics that you can use in designing your web page. The only problem I have found in using these is that if you edit your web page in a different program, like Dreamweaver, you loose the graphic.

To use the libraries, all you need to do is click on various sub titles to search for what you need. When you find something you like, simply click on it and a box with anchors (little squares) will appear around it. You can change the size of the graphic by click/hold and dragging on the anchors. Just click /hold and drag it to your web page and place it where needed. You might need to use your tool bar to move it around once you've inserted it. I use tables to keep information organized. Click here to find out more about tables... Above is what the graphic would look like highlighted under libraries.

Return To Top

Before we begin inserting any graphics, pictures, or documents into our web page we must first be sure we have placed them into the images folder or media folder depending on the document.
Click here to find out more about organization...

Okay, once all of that is in place you are ready to go:

Images Click on the Insert Image icon or go up to the menu bar, Select the desired image from your file and click open. The image will appear where ever your cursor is. You can click and drag on the anchors to size the picture but it is highly recommended that you do any downsizing and editing prior to inserting any image into your web page. The larger the file, the more memory it will take to load. Just because we use the anchors to decrease the visual size of the image does not mean the file size will change. Think as small as possible so it will load as fast as possible. AND do this before inserting to your web page!

Files Go up to the menu bar, Choose the desired file and it will appear as a link with the title of the file underlined so when it is clicked on you will be connected to that file and be able to read the contents. If you are wanting to have the words from a file appear on your page, simply copy and paste them into your page saving any changes and of course double checking that they have been edited.

Return To Top

Anchors maneuver the viewer through the web page, up and down within the files created by the designer. All of my subtitles are examples of anchors. I also have a couple of "click here to go to" that connect you to another place within the same web page. There are two steps in creating an anchor.

First put your cursor where you want your anchor to go by clicking on that spot.
Then click on the Insert Anchor icon located on the tool bar. Be sure to name each and every anchor or it will keep the name anchor and that can be very confusing!

Second go to the text or graphic that you want to link to your anchor. Select it by clicking and highlighting it.
Then click on the Link Editor icon located on the tool bar. Here you will need to click on the little black triangle and drag through the options until you find the anchor you created. After you have made your selection check by making sure the "Remove Link" button is no longer gray. Also a thin box will surround the graphic or a line will appear underneath the selected text letting you know the link is activated. If you many pages within your web page and you are linking back and forth, you can also click on "Browse File" to find your anchor.

To inactivate a link, simply click on it so the Link Editor will appear and click on "Remove Link".

Note: You do not have to create anchors to take you back to the top of a page for that choice is already provided, you simply have to do the linking.

Links can take you to files within your web page and better yet connect the viewer to Webpages other than yours on the Internet. Only you, the designer of the web page, can make these links so if you want to be connected to someone else's web page you must ask them to link you to it. You can get access to them but it does not link back. The viewer uses the back key to get back into your web site at that point.

Linking to a URL: Surf the Net until you find the page desired that you want to link to. Highlight the URL and copy it. Go back to the Claris Home Page document you are working on, click on Link Editor and paste the URL in the window. Be sure to hit the Return key on your keyboard afterwards to activate the link. If the middle button bar is still gray, then the link is not activated.

Return To Top

Click on the Upload icon located at the top right side of the tool bar.

The following window will appear.

Click on the Set FTP Options button.

Fill in the spaces with your Site's information:

All site web pages will be linked to the LKSD home page so all should have this as the server name.
The user name will be your SITE NAME. Note this for some sites have different village names or school names!
Your password is on file with Burt Bates, the LKSD Web Master. Once you enter this, you can click the Save Password unless you are using an unsecured location to store your web page (hopefully not).
Then click okay and you will return to the Upload window.

Be sure to click in the box next to include image files.
Then click the Upload button and ... TA DA !!!!!!!!!

Thanks to Burt for providing the information for us to Upload!

Return To Top

You should now be up and running. If not, call us!

Suzi Israelsson @ (907)543-4930
Burt Bates @ (907)543-4940