HomeSite Tutorial

Introduction

First make a new folder in your area called MySite. Copy all the .jpg files from the pool area to your MySite folder. Then start up HomeSite and open a new file with File->New

Choose the Default Template from the New Document Wizard and you are presented with the framework of a web page, as in the screen shot on the right.

Return to Contents List

Using Text

Now, after the /head tag, type in the text of this HomeSite Tutorial (the mock text below) down to 'Test your page by pressing the Browse tab. There is no image yet.'

The tags (inside angle brackets), such as p (start paragraph) and /p (end paragraph) can be obtained by right clicking at the point required in the text and selecting Insert Tag.... In the Tag Chooser select P (for paragraph) and press Select. Answer OK on the Tag Editor and close the Tag Chooser. You might need to cut and paste the tag to surround the relevant text.

Before you finish, go to the top of your file and enter the title My HomeSite Tutorial. Also, remove the body tag that was in the default template. Then save the page to your MySite folder, with the filename myhstutor.

Test your page by pressing the Browse tab. There is no image yet.

Return to Contents List

Here is the mock text.

<body text=Navy>
This page was created using HomeSite, which can be downloaded from <a href="http://www.macromedia.com">macromedia's Web site</a>
MACROMEDIA HOMESITE 5 TUTORIAL

First make a new folder in your area called MySite. Copy all the .jpg files from the pool area to your MySite folder. Then start up HomeSite and open a new file with File->New
 
Choose the Default Template from the New Document Wizard and you are presented with the framework of a web page, as in the screen shot on the right.
<ul><li>Using Text</li></ul>
Now, after the /head tag, type in the text of this HomeSite Tutorial (the mock text below) down to Test your page by pressing the Browse tab.
The tags (inside angle brackets), such as p (start paragraph) and /p (end paragraph) can be obtained by right clicking at the point required in the text and selecting Insert Tag. In the Tag Chooser select P (for paragraph) and press Select. Answer OK on the Tag Editor and close the Tag Chooser. You might need to cut and paste the tag to surround the relevant text.
Before you finish, go to the top of your file and enter the title My HomeSite Tutorial. Also, remove the body tag that was in the default template. Then save the page to your MySite folder, with the filename myhstutor.
Test your page by pressing the Browse tab. There is no image yet.

Including Images

You are now ready to add an image to your page. Return to Edit mode. On the line just before 'Choose the Default Template', use the Image button on the Common Quick Bar to add the following:

If there is any attribute (indicated by =) missing from your tag, enter it by hand now.

Test your page again.

Return to Contents List

Improving your Page

Test the link you defined at the top of the page too and notice its tag. Links can also be inserted with the Anchor button on the Common Quick Bar. You could experiment with this here.

Now try out changes to your page !!! Alter colours and font styles, resize the image and reposition it, add another section or two and some more line breaks ( ). You might also make a new image and insert it appropriately.

At some point, run Validate Document from the Tools menu selection and check the quality of your html. You may have some yellow warnings, but remove any red errors reported. Also run Spell Check... from the Tools selection and put a few more comments in your code.

Finally, save your new web page before exiting HomeSite.

Return to Contents List

Using Styles

You may have noticed that the use of 'Font' to set the properties of the text is nowadays deprecated. This is because there exists a much more convenient method for maintaining consistent text style across the various pages of a web site. This approach is known as Styles.

To illustrate this better, copy and paste in (just before the /body tag) the code for sections 2 and 3 from the html file, codesecs2and3.html in the pool area. Test your current page.

We now convert our tutorial to the use of styles. Insert a Style tag in the code immediately after the '!DOCTYPE' tab at the top. Between the style tag parts type the following definition:

BODY

{

color : Navy;

}

.Bold

{

font-weight : bold;

}

P.Navy

{

color : Navy;

}

P.Black

{

color : Black;

}

TABLE

{

padding : 3px;

}

{

text-align : center;

font-weight : bold;

}

You can now remove the 'Navy' color property from the 'body' tag. The 'BODY' style is actually already controlling the 'body' text properties.

All font tags that set the text colour of a paragraph to black can now be replaced with:

- making use of the P.Black style.

Don't forget the /font end tags as well. What 'end' tag should we replace these with ???

Next, we can substitute the 'b' tag with the .Bold class. The acknowledgment line now becomes:
This page was created using
HomeSite, which can be downloaded from ...

So first, test this is all working.

Then replace all other occurrences of the Font tag with an appropriate style. This involves introducing a couple more styles at the top of the html code, called '.Fuchsia' and '.Red'.

Finally, validate your document code again, to ensure all references to the deprecated tag have been removed.

Save your page before exiting.

Return to Contents List

Making a Contents List

As your page gets l o n g e r it becomes inconvenient for the reader to have to search for the sections they are interested in. A means of indexing into the text is required. We make a Contents List at the front of the page and use internal hyperlinks to navigate to each section heading.

Locate your Contents List immediately after the MACROMEDIA HOMESITE 5 TUTORIAL heading at the top of the page. Start by placing a 'Name'd text heading there, as:

<a name="contents-list">Contents</a>

Notice the name 'contents-list' in the tag. This Name enables the user to return to this Contents List when they have finished reading any section.

So test this by copying and pasting in (just before /body) the text of section 4 and this section, up to this point (codesecs4and5.html), followed by the link tag below:

<a href="#contents-list">Return to Contents List</a>

Clicking on the 'Return to Contents List' link should do just that!

The link can, again, be created with the anchor button. Go into edit mode and check this wizard again, to see where the reference, #contents-list, to the destination is entered.

Now use the anchor wizard to put return links into your page after each section of your text.

Test all your internal links work and validate your code again. !!WOW!!

The fifth 'return' link can be repositioned to the end of the current section when you finish this exercise.

You are now ready to make the links from entries in the Contents List to the section they refer to, as in the Contents List of this page.

The first entry in the list links to Section 1 of the text. So type in this first list entry, just after the contents-list anchor tag, as follows:

<a href="#anchor-one">Section 1</a>         
Using Text

Each little piece of html in italics indicates 1 space character. Notice that the tag refers (links) to something by the Name of 'anchor-one'. We must therefore give the destination line, '1. Using Text', this Name. This is done like this:

<ol start="1"><li><a name="anchor-one">Using Text</a></li></ol>

So, replace the line of the section heading Using Text with this line. Take care that the new tags surround just the text of the section heading, or Validate Document will give you an error.

So validate your document again now, and test your Contents List entry fully.

Did it work ????

If so, extend the Contents List with entries for each of the sections so far.

Then make a new section called 'Introduction', which is the text up to the beginning of the first section and give it an entry in the Contents List too.

And finally, copy in the file 'codesec5remaining.html' and move the last 'Return to Contents List' to the end of it.

Before finishing, run the document validation again and save your page to your MySite folder, with the filename myhstutor5.html.

Return to Contents List

Using a Style Sheet

Your page is getting even l o n g e r ! It's time to break it up into several smaller chunks. We start by creating a style sheet to maintain a consistent appearance across our pages.

Use File->New and choose Blank Document, to create a file for your style sheet. With your tutorial also open, cut the block of styles from it and paste the styles into the new file. Remove the surrounding style and /style tags. The new file now contains just the style definitions, from that of BODY downwards.

The tutorial file has lost all its styles, but we can restore them by typing the following line in just before the /head tag.

Then save the new file as myhstutorstyles.css and the tutorial as myhstutorp1.html.

The filename extension .css stands for cascading style sheet. Notice the reference to this .css file in the link tag of the new tutorial file.

Try out your new tutorial. It should look exactly the same as before (boring!!!). If so, CONGRATULATIONS!!! You have written your first style sheet.

Finish by copying in the text of this section, codesec6.html, into your Page 1 html file and linking it to your Contents List.

Return to Contents List

Creating an Index

Next we make a separate index page for the Contents List.

Open a new default template, by selecting File->New and the relevant wizard. Copy the Header details from Page 1 to the new file, replacing the default Header provided. Change its Title to My HomeSite Tutorial Index

Now copy the initial text, down to the end of the Contents List, from Page 1 into the new Index page between the body and /body tags. Save your Index page as index.html. Note that the index page is always called index.html if the site is to be uploaded to the Internet.

Change Contents to Contents List in your Index page, save it, and then examine it in various browsers to make sure it looks right.

In Page 1, edit the tag for the second Return to Contents List link, to reference your index page. Change #contents-list to index.html#contents-list. Also, in the Index page, change the reference to #anchor-one to myhstutorp1.html#anchor-one. This makes the index link to Page 1, and at the end of the section, Page 1 returns to the Index page.

Press Save All on the main menu bar (most important!!!). Close Page 1 so that only the Index is in the editor window and then test your new links. If all works under Netscape and IE 5, validate your document saving any changes you have to make.

You can then repeat this for all the other links between the pages, to give a fully working Index page.

Now you can copy in the file codesec7.html, containing this section, just before the /body tag and make a contents list entry for it, using the methods you have just learnt.

Finally, if time permits, decide if there are any other pages you would like to split off and load separately. The smaller the page loaded, the faster your reader can load it!!!

Return to Contents List