About Classes Contact Handouts Nota Bene Search Toolkit Handouts » HTML Handouts » The Netscape Composer editor The Netscape Composer Tips and Hints I. The Page Title Format Menu then select Page Colors and Properties. The Title entry is located under the General tag. Make your page title as brief and descriptive as possible. This is the formal title of the individual web page. II. Hyperlinks A. Hyperlinks Hyperlinks have two parts: the URL of the page to open, and the link text, which is the colored text people will click on to open the page. You want to link text to briefly and accurately describe the page you are linking. Avoid link text that is essentially meaningless such as "click here". In this example the link text will be "Fulton County web site" and the sentence will read: Visit the Fulton County web site to learn more about the school system. Decide on the wording of the link text. Write a sentence that will gracefully incorporate the link text. You may need to massage the text a bit to make this happen. Use your mouse to highlight the link text Click on the Link button on the toolbar. When you click on the Link button a Character Properties window will pop up. There are three tabs in this window: "Character", "link" and "Paragraph". The Link (for setting your hyperlink) command is under the Link tab. Don't see the Link button on the toolbar? You can also open the Format Menu and choose the Character Properties option. Figure 1: Entering a hyperlink In the Link tab of the window, (see above image) enter the URL of the page you want to link (item 2). Notice item 1 in the above figure, it shows a reminder of the text you've highlighted to be the link text. B. Email Links It's always a good idea to make the link text for an email link the actual email address. Not all people care to use a browser's built-in email program for their email, and not all browsers support email. In these cases, by supplying the address itself as the link text, the reader can copy the address and paste it into her email program of choice. Type the email address and use your mouse to highlight the text, and enter the copy command (Edit Menu, select the copy option). Click on the Link button on the Composer Toolbar. This opens the Character properties window. In the field labeled Link to a page location or local file, type in the command mailto: (don't forget the colon at the end). Immediately following that colon (no blank space) paste in the copied email address, or just type it in. You want to see the entry look like this: mailto:samwise@samwisefish.com. You will, of course, enter the relevant email address in place of mine! Close the window. In the Composer window you will see the email address as a hyperlink! III. About Images and Color A. The Page Properties Check out the Graphics Toolkit for more discussions of images and color issues, and for links to archives of images, backgrounds and color pickers. Figure 2. The Page Properties window From the Composer Format menu select Page Colors and Properties , then click on the Colors and background tab (1.). Some of the information in this window is self- explanatory. Please make careful note of the following properties options. B. Setting a Background Image Click on the Format Menu then select Page Colors and Properties. This opens the Page Properties window. Click on the tab labeled Colors and Background. You can use the Choose button to browse your hard drive to find the image. You might find these sites useful for finding a background for your page. Doc Ozone Julianne's Backgrounds Wendy's Design Studio C. Choosing Page Background and Link Colors Choosing a Background Color It's always important to enter a setting for the background color. If you are using a background image, be sure to choose a color that is similar in darkness to the background image. Consider, for example, a case in which one might use a very dark background, starry night is an example. This is a black color with tiny twinkling dots of white. People generally use white text against this dark background image. I visited a site like that once. The author of the site did not set a background color for the page at all. This means the browser defaults to my own personal color setting. Since I was working with images turned off in my browser, when I viewed the page it was with my own individual browser setting of a white background! So I was receiving white text against a white background. Not very useful. D. Link and Text Colors The settings to consider for these colors are text The color of the regular text onscreen. link The color of UNvisited links.Most browsers default to blue. vlink The color of visited links. Most browsers default to magenta. alink The fast flash of color that appears when the link is selected. Most browsers default to red. You might consider keeping your color choices similar in tone to the default colors. When people become accustomed to seeing one color used in a certain concept, it can be confusing to see it used in a different way. An exception I've noticed is the use of a dark color for unvisited links and a paler hue of that color for visited links. This can create a striking and useful context. Read more about choosing colors and how to work with them in Netscape Composer on the Color Picker page. This page also links a terrific resouce that displays hundreds of colors for your picking pleasure! IV. Adding Images to a Page Composer isn't very helpful when it comes to placing an image on the web page! Recall in the last lesson you created a subdirectory under your fulton directory to contain images. In the directory named images you'll also place the pictures for the page you create in Composer. Once you've downloaded the image you want to use, and saved it in the directory with your web page file(s) you're ready to place the image on the page in Composer. In Composer click the cursor in the page where you want to place the image. Click on the Insert menu and select Image. The Image Properties window will appear. Considering the Alt Attribute in the Image Tag What if a person is not able to view images or chooses not to (to speed up the session)? The image tag contains (among others) an attribute, or sub setting, to allow you to enter text that people will see displayed if they are not viewing images: the alt (for "alternative") attribute. Be careful how you handle this alt setting. Try to think about form vs function. Leave the alt empty if the image doesn't add anything of substance to the page. In today's tutorial it would be appropriate to make the alt setting empty. But on the other hand, if an image is particularly significant, such as a photograph of your workplace, you might include the alt statement that describes the image: "image of our workplace" Please read more about the use of the alt attribute as you have time. Figure 3. The Image Properties window Selected Items on the Image Properties Window 1. Image Location Enter the directory and file names. 2. Leave image at the original location Be sure this is checked. This makes sure Composer knows to look in the directory with your web page for the image. 3. and 4. Alt Text/Low Res The alt text statement is what appears to people who can't see the image, because they have image display turned off in their graphical browser or because they have a disability that prevents them from seeing the page (they may be using a screen reader). The alt text statement also provides you with an opportunity to enter extra information about the image for everyone! Only enter an alt text statement if the image is significant to the discussion on the page. If the image is simply "eye candy" and has no significant purpose then enter null alternative text. Entering Descriptive Alternative Text Click on the button labeled Alt. Text/LowRes (Item 3, Figure 3). This will open the Alternate Image Properties window (Item 4, Figure 3). Enter a brief description of the image. Entering Null Alternative Text It's fine to display images on a webpage that have no direct bearing on the content but it's generally better to "hide" these images from text only browsers. To enter a null statement for an image, click on the Extra HTML button (Item 3a, Figure 3) and enter the following statement alt="" Notice that this statement contains two double quote marks in a row, with nothing, not even a blank space, between them. The double quote key is usually located just left of the Enter key, above the single quote mark so you'll have to hold down the shift key to type it. B. Image Width and Height It's important to include the width and height of an image in the image tag code. By including these numbers you make it possible for the browser to "book that space" while it's loading the page. This means the text before and after the image can be displayed while the image is loading. When people can read before the page has completed the load, they have the illusion of receiving the page faster! ;-) How to include these numbers? Open the image, just the image, in the browser. You can open the image right off your hard drive OR on a web page. From your hard drive In Netscape, click on the File menu Select Open Page Click on the button Choose file (in MSIE, Browse) Use the Open window that appears to locate the image on your hard drive. On a web page Netscape Place the mouse arrow anywhere on the image. Click the right, OR opposite mouse button. A menu will pop up. From that menu select View Image. This will open the image in the window. The size of the image will appear in the title bar of the window. MSIE Click the right, OR opposite mouse button. A menu will pop up. From that menu select Properties. This will display the Properties Window. The size of the image is listed as the Dimensions. This is telling you the image is 196 pixels wide and 230 pixels tall. The width is always given first. If you forget which is listed first, just look at the image and see if it appears taller than it is wide, or vice versa and go with corresponding larger and smaller numbers. In the case of this image of Samwise Lilypond you can see the image is taller than it is wide, so the small number, 196, refers to the width, and the larger number, 230, refers to the height. Both Netscape and MSIE present the width before the height. The alt text statement is of special importance in building websites that are ADA compliant (Americans with Disabilities Act). You can read more about ADA websites at the W3 organization's Web Accessibility Initiative project. V. Selected Composer Tutorials These are some of the better Composer tutorials I've found. If you find a tutorial you feel is useful please let me know. I'd be delighted to include it here! • Billings Composer Tutorial This tutorial includes separate instructions for Windows and mac users. • Netscape's Own Tutorial Pretty good explanation of options. • Netscape Resource Page A Handy list of tasks to do in Composer. • In- depth Composer tutorial Excellent use of screen shots. 1994 - 2008 Paula Edmiston http://theflyingcat.com/handouts/html/composer.html Last Edited: 01 Dec 05