Composer Tutorial
How do I link? - Stringing them along
Composer TutorialHow do I link? - Stringing them along |
|
|
|
In this tutorial, we'll learn how to add links to your pages. Text links
and graphic links are easy to make in Composer. This is a tutorial where
you will want to use the View Source option quite a bit so as to see how
the html code works when adding links.
You should be pretty familiar with setting up and saving your html pages now and for this tutorial we will need two of them. I have made 2 pages, naming them test1.html and test2.html so that you can follow along with me. Feel free to name them in whatever way you are comfortable with as long as they are in the same directory. Put header titles on each page to avoid confusion. |
|
 |
|
 |
|
Once again, add some lines of text and a graphic to your test1.html, or
if you've saved your original file, use that one. For our learning purpose,
it doesn't matter what you type or which graphic you use.
This is the page we will do all the linking from. Since we only have 2 pages set up, all the links will point to test2.html. |
|
|
First, highlight any word in your paragraph. The easiest way to highlight
a single word is to double click on it. Once you have it highlighted, click
on the Link button on the Composition Toolbar. You will be presented with
the Character Properties dialog box.
The top section tells you what word(s) you have selected to be the linked source. The middle section is where you tell Composer what or where you want to Link to. Type test2.html (or whatever you named your second page) in the text box. Although Composer is not that strict on being case sensitive, some web page servers are. So always try to use the correct case when linking. Click OK to accept the link. Deselect your text. Use your Preview button to see how Test Page 1 looks in the browser. You should now have an underlined word in your paragraph. Click on it - and yahoo! - you will be transported to Test Page 2. |
|
 |
|
Now isn't that just about the easiest thing you've ever seen? Now would
be a good time to view your source code. On my page, I highlighted the
word connections. Here is my code:
you'll need <A HREF="test2.html">connections</A> to those I have shown words before and after my linked text to give you a better reference. There are two tags used on either side of the linked text and they must always be used this way. You won't have to worry about this though because Composer knows what goes where and won't forget to put them in. |
|
| Let's work with the graphic now. Click on the graphic on Test Page 1. Click the Link button. As in the previous tutorial you are once again presented with the Image Properties dialog box but it has popped up with the second tab - Link - as the active tab. It tells you what graphic you've selected to be linked. Type test2.html once again in the text box. Follow the same procedures as above to test your link. You should be taken to Test Page 2 when you click on the graphic. |
|
 |
|
To the left is a cutout area of my Test Page 1 to show you what yours should
look like with a linked word and a linked graphic. Clicking on either of
these two things will take me to Test Page 2.
With this example you will see another one of those "helpful" options (I call it a flaw) that Composer has. See the blue border around the graphic? That's called a Solid Border and I hate them. Composer automatically sets up a solid border of 2 pixels whenever you link a graphic. If I wanted a border around them, I would rather put it there myself, thank you! I'm not sure why Composer does this but I can guess. I think it is so that other people who come to your page will automatically know that the image is a link and can be clicked on. |
|
| Since I don't like the solid borders and I hardly ever see people using them anymore, I'll tell you how to get rid of them. Using the Alt.Text/LowRes option that we learned in the last tutorial is a far better way (in my opinion) to show people that your graphic links to another page. |
|
|
|
 |
|
| Practice linking with other parts of your document. You can link anything on your page. A single word, a graphic, a whole paragraph, or a single letter. You can also link a space! You probably wouldn't want to but...the important thing is, you can. |
|
| When you are ready to put your web pages on line, linking to other sites on the Internet is just as easy as what we've done here. However, never link to other graphics, this will slow down the load time of your pages. Linking to another persons graphics is one of the biggest no-no's on the net and is referred to as band-width theft. If you look at my main page, you will see that I have a Paint Shop Pro button that links to Jasc's Software site. I downloaded that button to my hard drive then uploaded it to my server. Putting the link in place was done by the same procedure that we followed for our graphic link. The difference is that in order to link to a completely different internet site, you must type in the full url to that site in the Image Properties dialog box. |
|
| In this tutorial we learned how to link text and graphics from one page to another. We learned about the quirk of Composer in adding a Solid Border to linked graphics and how to rid ourselves of it. We learned a little about band-width theft and how to link to other sites. |
|
| Move on to: Tables101 |
|
| Go back one page |