Web Publishing for Students
Create Accessible Web Sites
Students With Disabilities and the Web
Study Plans Home

A school's Web site creates a first impression. It represents the school district and presents a huge opportunity to provide information and interact with the public.

Navigability - If you want people to hang out at your websites, one of the most important features you could add is easy navigation. There is no faster way on Earth to drive away viewers than to frustrate them by hiding what they are looking for.
There are several keys to designing a site that is easily navigable. Probably the most important is not
considering yourself as the norm. Simply put, most designers have a tendency to design the navigation
of their sites according to what is intuitive to them. However, what is intuitive to you, the designer,
may not end up being intuitive to the majority of your site's visitors. Designing for yourself and not your audience is probably the single most common mistake.
A good practice, if feasible, is to put your navigation design down on paper or in the form of a mock-up website. This will allow you to share your design with colleagues or better yet people in your target audience. For example, let's say you were designing a resource site for a national realtor's association. The people you need to get feedback from concerning your navigation plans would be a local realtor's association or maybe even the realtor's office that sold you your house.
Another important key to making a site that is easy to navigate is not building too many levels to your site. Now that's not to say you should organize your site on a single level, but keeping the number of levels a visitor has to transcend is definitely a plus. Obviously, the more content you add to a site, the more there becomes a need to add additional levels. While adding multiple tiers to your site may be inevitable, try to keep them to a minimum.
You should also always try to make your sites searchable by adding a search engine. Many web design packages like FrontPage and DreamWeaver have their own built in search engines which can make the process very easy. If you are designing a database driven site with something like ASP
or PHP you will be in for a bit more work to add a search engine. You will have to either write your own engine or possibly find some shareware or free code. However you accomplish it, a search option will become an invaluable tool on your websites.
Along the same line as a search engine would be a site map. Site maps are also very useful tools for visitors who are trying to find their way to a specific location on the site. Like the site itself, the organization of your site map is also very important. Generally, a site map will include almost all of the pages (if not all) on your site and be organized in a fashion similar to the site itself.
Finally, in addition to analyzing how your site will be organized you also need to consider how you will display that organization. You actually have several different choices available to you. One of the most popular choices today is the pop-out menu. Pop-out menus such as are found on many major retail sites like Eddie Bauer and Best Buy are a very effective way to hide and organize multiple levels of your web site. Other more simple solutions could include the logical use of the hover buttons or hyperlinks in a table.
In addition to the how is the where. For the user's convenience you might want to also consider having links to the major sections of your sites on both the top and the bottom of each page.
As a web designer, it is your responsibility to make the user's experience as easy and enjoyable as possible. While most users will never really understand all of the thought and effort that you put into improving their experience, it will keep them coming back for more.

Consistency - Don't confuse your viewers by radically changing your design from page to page. Consistency of design lets the user get familiar with the features of your site and "burns" the look of your site into their minds. There is a lot to be said for "branding".
Consistency in web designs is often an overlooked element. The more creative you are the easier it is to overlook its importance. What I mean by consistency is a design that flows from page to page with little change in the overall design. This doesn't mean that you have to have the exact same design
on each page with only the content changing but rather that your designs should maintain a consistency in all of the key elements.
For example, let's assume you are one of those overly creative types that should have been a painter but who's hand just won't cooperate with your imagination (which is why you opted for the computer as your canvas). You are designing a site for your local florist. You started by creating a home page with a wonderful floral border, their logo on the top and the navigation on the left. One of the links on the home page goes to a page about roses. Since you were in a clever mood you designed this page with a giant watermark rose in the middle and you moved the navigation to the top of the page with the
logo and decided to split this page into two frames, top and bottom.
While both pages that you designed are each quite wonderful in their own right there are some definite problems. After implementing the site you notice that most of your visitors tend to bail out after going only a page or two. The most likely reason is that your design confuses the heck out of them. The only consistency that you have provided for your visitors is keeping the logo in the same place. If it weren't for the logo they wouldn't even be sure that they were still on the same site.
My first rule of consistent design is to keep all of your key elements in the same place on every page. Here are some of my most important key elements:
Navigation - This is the most important key element in your design. If you move and/or change your navigation from page to page your visitors will become quite weary of chasing the navigation around the page as they move through your site and most likely give up.
Logos - Whether you are designing a site for personal or business use be sure to have a unique and easily recognizable logo displayed prominently on the site. In business, the logo is one of the important tools for building recognition. In web design it works much the same way by burning the image of the logo into the visitor's mind through repetition while at the \same time giving the visitor a sense of comfort in knowing they haven't been whisked off to some other place.
Colors - A consistent color scheme is a must. A good example of using a color change would be in a site like the florist example above where you might have two basic color elements and change a third element each time the visitor moved from one major section of the site to another, that is from roses to planters to balloons.
Frames - Never mix framed and non-framed pages. This will confuse your visitors faster than anything. If you decide to include frames in your designs keep the frame structure the same throughout. Don't rearrange your frame structure or pop back and forth between framed and non-framed pages.
The best way to learn about good website design is to visit some of the sites that make you feel the most at home and analyze them very carefully to see what it is that makes you comfortable. Odds are the things that make you comfortable with those sites were carefully considered when designing the sites and probably include some of the elements listed above.

Speed - Since broadband is becoming more prevalent you might think that download size is not really a concern anymore. Not true ... yet. With about 80% of all users still using a 56K or slower connection, download speed is still a very real concern. Keep your graphics optimized and don't go overboard with your imagery. File size is still important.
Speed is all about how patient your visitors are. Unfortunately, the trend is towards less patience rather
than more patience.
Graphics and Images - Quite often your graphics and images will constitute a larger percentage of your total download than the actual code of the page. Because of this it is critical that you keep in mind that while using more graphics may make your page more beautiful, it is often at the expense of download time.
Graphics/Image Software - Choose your graphics and image software carefully. The better your software the more control you will have over the graphics and images that you create. You will usually find that a change in quality from high to medium is almost indiscernible at 72 dpi (video level quality) but will reduce your overall file size from 30% to 50%.
Know your File Types - Be sure to save your graphics and images in the file type that is most suited for the occasion. If your graphics are straight text or some simple solid color graphics then the .gif format is probably going to be your best bet. If you have a photograph or other complex image then .jpg will probably be your best choice. Other file types such as .png or .bmp, for better or worse, are not commonly accepted in the web development world, so you are best to stick with .gif and/or .jpg. If keeping track of different file types sounds like too much of a pain to you though, then saving
everything as a .jpg will probably be the best option.
Combine Graphics with HTML Elements - Try combining elements that can be simply created
in HTML with custom graphics. For example, let's say you want a blue box at the top of your web page. Simple enough, just change the background color of a cell in a table at the top of the page. But what if you wanted rounded corners on that box? Instead of creating one big fixed-sized graphic
for the top of the page, you would just create a couple of rounded "end caps" to place in your table on either side of your blue cell. Now the only graphics that have to be downloaded are two very small .gifs instead of one much larger graphic. It also gives you a much more flexible solution that is more adaptable to different browser resolutions.
Optimize your Code -
HTML - Try to limit your code to only what is necessary. If you are using development software such as FrontPage or DreamWeaver you may want to take a look at the code that gets spit out. Often times packages like these will use a great deal of unnecessary or inefficient code that needs a bit of cleaning up. Also, try using Cascading Style Sheets whenever possible. Style Sheets will keep you from having to declare the same font types, sizes, etc. over and over again unnecessarily.
JavaScript - Keep in mind that it can often take several lines of JavaScript to do even a very simple task which can cause your page to grow out of control before you know it.
Beware of Animations - While animations are very necessary in today's web they can easily become huge resource hogs. If you are going to use animations on your pages then keep the frame rates to a minimum. If you want to use more complex animated effects then carefully consider what format will be best suited for your needs like Shockwave or an animated GIF. Also, keep in mind that too many different animations running simultaneously on a page can make the page itself and the animations of the page run sluggish.

Animated Gifs.com: http://www.animatedgifs.com

Things You Might Need to Build a Web Page: http://tewinkle.nmusd.k12.ca.us/building_a_web_page.html

Make your own banner for your web page at: http://www.wtv-zone.com/BannerzRus/ 

Good-looking Web sites start with a cohesive color palette - one that draws the viewer's eye to the important information on your Web page. This article offers advice on choosing a color palette as well as applying colors to the elements on your page.
http://www.microsoft.com/insider/mi/pfwebcolpal.htm

Though for most teachers the end of the school year means saying goodbye to students, some stay in contact during the summer months through free Web pages created with SchoolNotes.com. Post summer reading lists and summer camp information, or if you are traveling someplace exotic, chronicle your vacation so that students can follow along from home.  Visit  http://www.edgate.com/notes.html to learn how to create and update your own Web page (without having to know how to write code), and to see what other educators in your area are doing.

WHO REALLY BENEFITS FROM A CLASS WEB SITE http://www.techlearning.com/db_area/archives/WCE/archives/silver5.htm?
One teacher provides the answer as she explains how the effort and expense involved in creating a class Web site paid off for her second grade students, their parents and relatives, other teachers and students, and even herself.

The Elated Tool Box: http://www.elated.com/toolbox/ has free web templates, animations, web buttons, graphics and more.  Just be sure to link what you use to their web site. 

SPICE UP YOUR WEBSITE WITH ENCARTA SEARCH AND MAP TOOLS
Add an encylclopedia search tool or a map finder to your Web site for speedy access to information on Encarta(r) Online. The tool just opens another instance of a browser over the existing window so visitors are still at your site.  Download these FREE* tools today: http://www.microsoft.com/insider/mi/pfenctools.htm  

Lots of people, organizations, and companies publish to the Web. At first, only a few individuals had that knowledge necessary to publish Web pages. Now almost anyone can publish on the Web because the technology is not too formidable. Basically, anyone with a computer, an Internet connection, and something to say can have a Web site. On the World Wide Web, there are corporate image sites, small businesses, government agencies, universities, schools, political organizations, charities, clubs, special interest groups, and thousands of individuals. Some individual’s sites are devoted to hobbies, special interests, family albums, and personal newsletters.

At its simplest, a Web page’s HTML file is just text with a few embedded codes. As a result, it’s possible for anyone with a text editor to create an HTML file that will produce a simple Web page. Also, there are many tools, like Composer, FrontPage and Dreamweaver, that are available to make creating a Web page easy and fun. Composer is an HTML document editor. It can be used for more than just to make Web pages. It can be used to make pages on an intranet, for email (messenger), and for newsgroup articles (Collabra).

Creating Web pages is the easy part. What you really need in order to publish on the Web is access to a Web server. Many service providers offer Web site hosting as part of the package of services they include with basic Internet access accounts. An alternative to publishing on the Web is to publish on an intranet. It uses the same technology as the World Wide Web, it is just available to a different audience. Intranets are available only to those connected to the same local area network. The same tools, Composer and Navigator, are used to create and view HTML documents on an intranet that you use to create an view Web pages on the Internet.

Planning a Web Site

First, set a goal. A Web site should have a purpose, a mission, and a reason for existence. This goal should be the guiding principal as a site is designed. Everything about the site should support the goal. It is often helpful to write out a sentence or two articulating the purpose of the Web site. The purpose of having a written goal for the Web site is to help keep the work focused. As the Web site is developed, looking at the goal from time to time is a good idea. If some aspect of the site doesn’t match up to the stated goal, then something needs to change—either the content or the goal. After the goal is decided, selecting and developing content can begin. Text can be written, graphics can be found or drawn, and other sites to link to can be located.

Second, define the audience. Who will be viewing the Web site needs to be determined. The viewers’ background and previous experience, their interests, their tastes, and why thy might be visiting the site all need to be considered. Part of the goal is to reach the target audience as effectively as possible. All Web site design decisions should be based on the needs and wants of the viewers who have been determined to be the target audience. The keys to successfully communicating with the audience is to first identify the audience, and then to anticipate that audience’s reaction to the various elements of the Web site design. The Web site can then be tailored to the intended audience, from the way the information is organized to the kind and number of images to the colors and fonts used.

Next, organize the information. The best way to start developing content for the Web site is to organize the things you have and know about—existing documents and images, samples of publications in other media, information on Web sites you admire, samples of Web sites you hate (and why you hate them), clip art collections and information on sources of Web art, media, and special effects.

Then, create a storyboard. With the materials and information you want to work with, sit down and plot the site out. A storyboard is a sketch of the home page and each page it will link to. Include all the elements being considered—text, images, buttons, and hyperlinks. As you plan the Web site, you need to work on two different levels. First, you need to plan the flow of the information and the appearance of the page.

Second, you need to design a map of the site as whole so you can visualize how all the pages relate to each other and how they work together to create a whole site. Remember that users don’t expect to read an entire Web site. They want to jump quickly to an item that interest them and then move on to something else.

Make site navigation easy for viewers. Users need to be able to move around a Web site quickly and easily to locate and access information. The most important factor in making your Web site easy to navigate is organization. Designing a well-organized site allows you to present information in such a way that it is easy for viewers to see and understand where things are located and how to find what they need. That’s one of the reasons why storyboarding is so important. Besides good organization, for ease of use, incorporate navigation aids that provide easy one-click access to key locations and sections of your Web site. You can use text links, buttons, graphic icons, or image maps (clickable images) to identify and link to important destinations, such as the home page, next page, or starting points for key topics. It is essential to make the navigational elements obvious, simple to use, consistent throughout the site, and to place them where they are readily available to help viewers find their way around the site. Users need to be able to move around a Web site quickly and easily to locate and access information. The most important factor in making your Web site easy to navigate is organization. Designing a well-organized site allows you to present information in such a way that it is easy for viewers to see and understand where things are located and how to find what they need. That’s one of the reasons why storyboarding is so important. Besides good organization, for ease of use, incorporate navigation aids that provide easy one-click access to key locations and sections of your Web site. You can use text links, buttons, graphic icons, or image maps (clickable images) to identify and link to important destinations, such as the home page, next page, or starting points for key topics. It is essential to make the navigational elements obvious, simple to use, consistent throughout the site, and to place them where they are readily available to help viewers find their way around the site.
The site should also be accessible to people with disabilities. For specific information on how to acheive this, visit my page on this site: Create Accessible Web Sites

A Browser-Friendly Site

Different brands and versions of Web browsers have different capabilities. Older versions of browsers may not be able to view all of the latest changes in Web design.

Another factor to consider when designing a site is the size of the files that make up your Web pages. HTML files are generally quite small, even when they contain large quantities of text. Images and multimedia files can be very large. The biggest problem with large files is the time it takes for the page to appear in the visitor’s Web browser window. Some studies suggest that a Web surfer will wait only about 12 seconds for a page to download. This may be a little short but a page should certainly download in less than 30 seconds so viewers will stay at your site.

Maintain Your Web Site

A good Web site needs to be updated on a regular basis. As a result, you can’t consider your job finished when you complete the process of planning, producing, and posting a Web site. You must devote time to the continued care of your Web site. From time to time, you need to add new information and cut out outdated material, particularly broken hyperlinks. A Web site is an ongoing commitment that can be a very rewarding experience.

Using composer to create or edit Web pages and other HTML documents is like using a word processor. You work in a WYSIWYG (What You See Is What You Get) environment that provides a reasonable approximation of what your page will look like when viewed in a browser. In Composer, you type your text on a screen that looks and acts like most word processing programs. You can select text and format it using menu commands and familiar toolbar buttons.

As you create a page in Composer, you are actually building a text file that contains, in addition to any text on your page, HTML markup codes for text formatting, layout, graphics, and hypertext links. You don’t need to know the code however. Not HTML codes appear in Composer’s normal view of your page, and you enter your formatting choices by choosing menu commands, clicking toolbar buttons, and setting options in dialog boxes, instead of by typing markup codes.

Starting a New Page

Open Netscape, choose the Composer icon in the lower right corner.
Editing an Existing Page
To open an existing page in Composer from a file, go to File, Open, then Choose File.
If you want to open a Navigator page into Composer, type the URL for the web page in the text box, being sure that in "Open location or file in:" is marked for Composer.
If you are browsing a Web page in Navigator and want to load that page in to Composer to edit, just go to File, Edit Page. The Web page at that location will appear in the edit window of Composer.

Giving the Page a Title

One detail of Web page design you’ll want to think about is what title to choose for your Web page. This will be the name of the Web page and will appear in the browser’s title bar when you view the page. The title also shows up as the name of your page when a reader creates a bookmark or shortcut to the page.

To add or change the title of your Web page, choose Format, Page Colors and Properties. Next click the General tab, and the options that describe your Web page will be displayed.

In the Title text box, type a title for you Web page. It is best to keep your title short. Enter your name in the Author text box. Click OK to close the dialog box and record the new title. The title will appear in Composer’s title bar.

Choosing Background Colors

The box design with bold black outlines is a great vehicle for keeping information clear, readable, and consistent.  The structure provided by the bold lines creates a strong site, and the black lines play well against the bold colors. 

A minor but important part of designing for the Web is ensuring that as you link pages, you display images at
consistent heights. When a user clicks through a site, the layout should remain in exactly the same position, as
pages in a book remain within the same template. As the bandwidth on the Web increases, the pages of a Web
sites will turn as easily as the pages in a book. Keeping the edges aligned within a template structure will create a
clean and professional design.

To select a background color for your Web page, choose Format, Page Colors and Properties. Click of the Colors and Background tab.

Click the Use Custom colors checkbox. Checking this option will instruct Composer to record you color settings in the HTML source code for your Web page. Otherwise, the viewer’s Web browser will display your page using the browser’s default color settings. In the Page Colors area, click the Background button. This mini-dialog box is really a list box of color samples.

Select a color by clicking the color sample of your choice. Composer immediately closes the list box and updates the sample display in the Page Properties dialog box so you can preview the effect of your color choice. After selecting a suitable color, click OK to apply the color to your Web page. Or click Apply to apply the background color setting without closing the dialog box. Then you can continue adjusting other settings such as the text colors. Composer will display the specified background color for your page with the background color as well.

Use of Color in Background Design

The default colors for a Web page are black text on a white or light gray background. Color on your Web page can make the page more interesting, but color must be used very carefully. The right combination of colors can make the page appealing and easy-to-read. The wrong combination of colors can produce a page that is unattractive and illegible. Colors also have a strong emotional and psychological effect that must be considered. In general warm tones—red, orange, yellow—seem to advance toward the viewer. They tend to convey excitement and energy. Cool colors—blues and greens—seem to recede away from the viewer. They tend to evoke feelings of tranquillity. The number and kind of colors you choose for you Web pages can influence a visitor’s perception of you site even before they read a single word. You can set a quiet, conservative tone by sticking with basic black and white and adding a few accents of navy blue or hunter green. You can create a feeling of festive excitement with the liberal use of bright, high intensity colors, especially reds and yellows.

One of the best ways to learn how to use color is to observe how other designers have used color. Studying magazines, brochures, annual reports, TV, and other Web pages to look at the colors used and how they affect your perception of the publication.

Your choice of color also determines the legibility of the text on your Web page. It is critical that your page be easy to read.

Text Colors

Along with the background color, you can also specify default colors for text. This is a way to develop a color scheme for your page. You can specify colors for regular text, hyperlink text, active hyperlinks (ones that have already been clicked), and visited hyperlinks (hyperlinks that have already been activated).

To set the default font colors for your Web page, choose Format, Page Colors and Properties. Click the Colors and Background tab. Click the button corresponding to the category of text you want to change. You can choose Normal Text, Link Text, Active Link Text, or Followed Link Text. No matter which button you choose, a color list will open where you can select a text color. Select a color by clicking the color of your choice. Composer will close the color list and update the sample display in the Page Properties dialog box so that you can preview the effect of your color choice. After selecting a suitable color scheme, click Ok to close the dialog box and apply the colors to your Web page.

After you develop an acceptable color scheme, you can make it the default for all new pages you create with Composer by checking the Save These Settings For New Pages checkbox. Click OK to close the dialog box and apply the settings. Thereafter, Composer will automatically use the same color scheme for any new page you create.

For more about color, visit my page on this site: Create Accessible Web Sites

Saving a Page

To save a page, choose File, Save As. "Save in:" should have your name, the "File Name:" should be the title of your Web page.

HTML Codes

Every page you create with Composer is really an HTML file-an ASCII text file with special codes added to the file to instruct a browser program, like Navigator, to display the text with certain formatting codes employed by most word processors. HTML codes are standardized, visible, and relatively easy to edit in the HTML document in a text editor such as Notepad, which comes with Windows 95. You will want to use Composer when working with your pages because it is much easier than editing event the simplest HTML codes in a text editor. However, a basic understanding of the HTML codes in your pages can come in handy in helping you understand how Composer behaves and what happens to your pages as they are viewed with different browsers. Also, editing HTML codes directly is the only way to implement some effects and features that are supported by the HTML standard but not by Composer, such as forms, style sheets, and Java applets embedded in a Web page.

When you examine the HTML source, you’ll see that is consists of the text that appears on the page, plus a bunch of codes enclosed in angle brackets:

<title>

These codes are called HTML tags and they tell the browser to do things like make some text bold, display an image, or divine a hyperlink. The browser doesn’t display the tags themselves, only the results of the instructions they contain.

To see the HTML codes with all of the markup codes exposed, in Composer, go to View, and choose Page Source, to open a View Document Source window.

Every HTML document must include certain tags, which identify the document as an HTML document and shows its beginning and end. HTML tags come in pairs. The <html> at the beginning of the document matches the </html> at the end of the document. The header of the document is enclosed between <head> and </head>. The body of the document is enclosed between <body> and </body>.

Look at your Web Site in Navigator

You’ve seen a preview of what your page looks like as you worked on it in Composer. Now to see what it will look like in a browser, Navigator, go to File, Browse Page, or on the toolbar, click Preview. If you have not already saved the page, Composer will prompt you to save it before Previewing it. Once the file is saved, a Navigator window will open and the page will appear in the browser.

To open other pages which were previously stored, start Navigator and choose File, Open File. The Open dialog box will appear. In the Open dialog box, highlight the file name for your page. Click the OK button. The dialog box will close, and in a few seconds your document will appear on screen.

If at any time that you are viewing a page in Navigator and an old version of your page appears, select View, Reload from the menu bar to load the latest version of your HTML document into memory or click on the Reload button in the menu bar.

Entering and Editing Text

Start typing to enter text at the insertion point in the Composer window. Composer will automatically word-wrap long lines of text to fit within the window. Press Enter only at the end of a complete paragraph. Each paragraph must be a single block of text in order for the viewer’s browser to re-wrap that text to fit in the window on each individual’s system.

Headings

After you enter some text, you many want to designate some of that text as headings. Headings are usually (but not always) larger and bolder than the body text of your page.

When you assign a heading style, it is for an entire paragraph. To Composer, any block of text that you end by pressing the Enter key is paragraph, even if that paragraph consists of only a word or two. Normally, a heading paragraph will be a short phrase that serves as a title or a headline introducing the topic of one or more longer paragraphs to follow.

HTML, and therefore Composer, supports six levels of headings. Each level of heading will look different when it is displayed in a Web browser such as Netscape. The standard headings correspond to the headings of a typical outline. As a result, the headings work especially well in a document organized in a classic outline style, but they can also work equally well in a variety of other contexts. The highest level, Heading 1, is the largest, while the lowest level, heading 6, is the smallest.

The actual appearance of each heading is different from one browser to the next. In other words, HTML allows you to say what text is a heading, but not what the heading will look like when viewed in Netscape, Internet Explorer, or a Macintosh system. The heading may look different in each.

To format a paragraph as a heading, simply click anywhere in the paragraph. It is not necessary to highlight the entire paragraph. From the Format toolbar, select a heading style from the Paragraph Style dropdown list, or go to Format, Headings.

If the Format toolbar is not visible in the Composer window, pull down the View menu and choose Show Format Toolbar.

Composer will format the paragraph as a heading of the level you select. Most browsers default to similar formatting for heading paragraphs however the actual appearance of headings can very depending on the user’s browser settings.

Text Attributes

Formatting details such as bold, italic, and underline, which change the appearance of text and differentiate certain text from the rest, are known as attributes in a word processor. The types of attributes you can specify using HTML are broken down into two classes: Physical attributes and Logical attributes.

The physical attributes specify how text characters will look: italic or bold, for instance. They will be italic or bold no matter which Web browser is used for viewing. The logical attributes specify the amount of emphasis you want to give important text and leave it up to the Web browser software to determine what physical attributes to use to make the text stand out from the normal body text. You can choose to make text big, small, emphasized, or strongly emphasized. Different Web browsers will have different ways of displaying logical attributes. Some may show strongly emphasized text as bold, others may show it as red or in a slightly larger size, for instance.

To apply physical formatting attributes to text in composer, highlight the text you want to format. Go to Format, Style, and choose one of the formatting attributes listed:

Composer adds the appropriate HTML tags to the source file for you page and displays the result on the screen.

If you make a mistake, you can return the text to its original unformatted state by selecting it and from the formatting toolbar, clicking the Remove All Styles button.

Or Or to the Format menu, choose Font to open the Properties dialog box, then click the Character tab. To format the selected text, check one or more options in the Style area, then click Apply or OK to apply the formatting. Composer displays the selected text with the formatting you specified.

The attributes used most—bold, italic, and underline—are also available as buttons on Composer’s formatting toolbar. The three buttons are near the middle of the formatting toolbar and each one has a large letter A on it. A is for bold, A is for italic, and A is for underline. To format text with the toolbar buttons, select the text and click the button corresponding to the attribute you want to apply. Composer displays the results immediately.

Composer has the ability to specify a font type to be used to display any text on your page. You can select any font available on your system and Composer will display the text using the font you specify.

Unfortunately, when a visitor to your Web site views your page, their Web browser displays the page using the fonts installed on the viewer’s system. That means the visitor will see the text of your page in the font you specified only if they have the same font installed on their system. If you use a font on your Web page that the visitor doesn’t have, the text you formatted will appear in a default font. If you want to be confident that the font you choose for some text and the font the viewer sees will be the same, you must choose one of the standard fonts that are found in some form on nearly every computer: Times Roman, Courier, Ariel or Helvetica. To change the font used to display text in Composer, select the text you want to format with a different font. Choose a font for the selected text by going to Format, Font, and choosing a font. Or click Format, Font, Other. The Font dialog box will open. Make your choices, then click OK. Or from the Format menu choose Character Properties. A dialog box will appear. Select the Character tab and choose a font from the Font Face drop-down list. Make any other choices you want, then click OK to close the dialog box.

A group of companies headed by Microsoft have proposed establishing a list of core fonts and encourage all Web users to install these fonts on their systems for displaying Web pages. Microsoft makes a selection of TrueType fonts available on its Web site for free downloading at: http://www.microsoft.com/truetype/  

You can set the font size for your Web page. HTML documents traditionally have supported seven different font sizes. A user defines a default text size for their Web browser, then the browser displays text in the default size and in six other sizes, two smaller and four larger, based on variations of the default size. These are called relative font sizes. In Composer, you can now use absolute font sizes. This means that you have the option of specifying type sizes in points, just like in a word processor. Using absolute font sizes gives you access to a wider range of text sizes and enables you to exercise more control over the way the text appears on the viewers screen. Remember that the sizes you specify may not be seen the same way on every viewer’s screen. Differences in screen size, video resolution, and browser settings can make all type appear larger or smaller on another system.

Composer can recorder fond size attributes on your Web page using relative sizes or absolute sizes, or a combination of both. In addition, Composer gives you the option of changing how the list of font sizes appears on the Composer toolbar and in the Character Properties dialog box. You can configure Composer to display font size options in one of three different ways:

• Relative sizes such as –2, –1, 0, +1.+2 +3, +4. These are seven standard font sizes recognized by all Web browsers. Size0 is the default text size.
• Relative sizes shown as point sizes. This option presents the seven relative font sizes as a list of point sizes based on the current default font size you have established for Composer and Navigator. Using this option makes it easy to visualize the effect of choosing different text sizes in your current Web page. Just remember that you’re really selecting relative sizes and that visitors viewing your Web page may see the fonts displayed in different sizes, relative to the default size setting in their browser.
• A combination list of font sizes listing both relative sizes and absolute font sizes. This option gives you the most versatility. When you select a font size expressed in points from this list, Composer inserts HTML codes in your Web page instructing the viewer’s browser to display the text in exactly that size. However, only the latest browsers can properly support this option.

To set how you want Composer to list font size options, click Composer’s Edit menu and choose Preferences. The Preferences dialog box will open with Composer highlighted in the Category list. Look at the Font Size Mode area and select on of the options. Click OK.

To change the size of the text, highlight it. In Composer’s formatting toolbar, click the font Size drop-down-list and choose a font size. Or click on Format, Font Size, and select a size. Or click on Format, Font, Other. Selecta size from the Size list box and then click the OK button to close the dialog box. (The Font dialog box always lists absolute font sizes, not relative font sizes.) Or click on Format, Character Properties. The Character Properties dialog box will appear. Click on the Character tab. Select a size from the Font Size drop-down list and click OK.

The initial cap effect is one good example of a way to use font size adjustments in your Web page. You can select the first letter of a word, then select a larger size from the Font Size drop-down list in the format toolbar. You might even repeat the process on each word of a title. The title below has a larger font size and bold on the first letter of each word:

INITIAL CAPS

Changing the font color is another way to change the appearance of the text on your page. Like the text attributes and font size settings, you can apply a color to a single character, a word, a line of text, or an entire paragraph. To change the color of text, highlight the text. Go to Format, Color. A Color dialog box opens. Click a color sample, then OK. Or after highlighting the text, go to Format, Font. The Properties dialog box opens. Click the Character tab, then choose a color from the Color drop-down-list. Click OK. Or choose a color from the color drop-down list in the Formatting toolbar (beside the font size number).

Alignment of Text

When you enter paragraphs of text, they will show up as left-justified like most often seen in print. However, you can change the alignment of a paragraph to make it either centered or right-justified instead of left-justified. Click to pull down the Format menu, click Align, an then choose left, Center, or Right. Or From the Format toolbar, click the Change Horizontal Alignment button at the right end of the toolbar. Then click one of the three buttons (Align left, Center, and Align Right) that appear. Or press Ctrl+L for left alignment, Ctrl+E for center alignment, or Ctrl+R for right alignment.

Paragraph Styles

In Composer you can create and display bulleted (unnumbered lists), numbered lists, and description (glossary) lists.

Bulleted lists, sometimes called unnumbered or unordered lists, are the most often used type of list. In a bulleted list, each paragraph is indented and preceded by a bullet or another symbol:

• Memorial Day
• Independence Day
• Labor Day

To create a bulleted list in Composer, Start by entering the text of the list. Type each list item as a separate paragraph and end it by pressing the Enter key. Drag the pointer across all the paragraphs of the list to select them. Apply the Bulleted list paragraph style to the selected paragraphs using one of the following techniques:

• Go to the Formatting toolbar, select List item. The bulleted list style is the default list type, so Composer will automatically apply the Bulleted style when you choose the generic List Item style.
• From the Format menu, select List, and then select Bulleted.
• Right-click the selected text and a pop-up menu will appear. Choose Paragraph/List. The Character Properties dialog box will open. Choose the Paragraph tab. From the Paragraph Style drop-down list select List Item. Then from the Style drop-down list select Bullet (Unnumbered List. Click the OK button.

To change the bullet shape, Select the text of the paragraphs you want to change. Right-click the selected text and a pop-up menu will appear. Choose Paragraph/List Properties. The Character Properties dialog box will open. Choose the Paragraph tab. Select a symbol from the Bullet Style drop-down list. Click OK.

Creating a numbered list, sometimes called an ordered list, is basically the same as a bulleted list, but with numbers in place of the bullets. Actually, the number can be a numeral, a letter, or a Roman numeral. The neat thing about numbered lists in HTML documents is that you just enter the list items as separate paragraphs and define the lot as a list-the browser will take care of adding the numbers when it displays the page. Because the browser adds the appropriate numbers to each item in a numbered list when a visitor views your page, you can edit the list-adding, deleting, and rearranging items-without worrying about renumbering the items. Start by entering the text of the list. Type each list item as a separate paragraph and end it by pressing the Enter key. Drag the pointer across all the paragraphs of the list to select them. Apply the Numbered List paragraph style to the selected paragraphs by going the Format menu, selecting List, and then selecting Numbered, or right-click the selected text and a pop-up menu will appear. Choose Paragraph/List Properties. The Character Properties dialog box will open with the Paragraph tab displayed. From the Paragraph Style drop-down list select List Item. Then from the Style drop-down list select Numbered List. Click the OK button to close the dialog box.

Composer displays the selected paragraphs as a numbered list. Each paragraph is indented and preceded by a placeholder symbol (usually #). When your page is viewed in a Web browser, the browser will replace the placeholder with a number.

List styles automatically indent text, but you can also indent text yourself. Go to the formatting toolbar and click the Decrease Indent or Increase Indent buttons as needed to change how far a paragraph is indented.

The standard numbering style for numbered lists is numbers such as 1, 2, and 3. If you prefer, you can specify another numbering style such as letters or Roman numerals. You can also define a starting point for the numbering scheme. This is useful when a numbered list is interrupted by other text. You can create one list, add some normal text, and then create another list that picks up where the first list left off so that the numbering continues instead of staring over. To change the number style or starting number for a list:

1. Select the text of the paragraphs you want to change.
2. Right –click the selected text and a pop-up menu will appear. Choose Paragraph/List properties. The Character Properties dialog box will open with the Paragraph tab displayed.
3. Select a style from the Number Style drop-down list.
4. If you want to change the starting number of the list, type a number in the Starting Number box. You must enter a number here, even if you chose one of the number styles that will label the list items with letters. For example, f you want the list to start with the letter E, you would enter 5 in the Starting Number box because E is the fifth number of the alphabet.
5. Click the OK button to close the dialog box and apply your selection.
6. Composer will apply your changes to the list. However, you may not see much difference. Changing the starting number for a list has no obvious effect in Composer because Composer displays placeholders for the numbers. The numbers don’t appear until you view the page in a Web browser. If you changed number styles, the number place-holder in front of each list item will change to reflect the number style.

A description list in a Web document is a special element designed to make it easy to format related items like terms and definitions. In fact, description lists are sometimes called glossary lists because glossaries are the most common application of description lists.

A description list consists of two components: a description title paragraph style (commonly used for a glossary term) and a description text paragraph style (commonly used for glossary definitions). Basically, the description list paragraph styles are just slight variations on the normal text style. The difference between the two paragraph styles is that the Description Title style is not indented and the first line of the Description Text style is indented one step. You can use the description list styles to create a glossary or other, similar list, or you can simply use the styles to create paragraphs of text with and without indents.

Using the description list styles are no different than applying any other paragraph styles to paragraphs in Composer. To apply one of the description list styles, simply follow these steps:

1. Start by entering the text of the description list. Type each list item as a separate paragraph and end it by pressing the Enter key. Be sure to make the description title (glossary term0 and description text (glossary definition) separate paragraphs.
2. Select the paragraph you want to format by clicking it.
3. Apply the appropriate description list paragraph style to the selected paragraphs using one of the following techniques;

• From the Paragraph Style drop-down list in the formatting toolbar select either Desc. Title or Desc. Text.
• From the Format menu, select Paragraph, and then select either Description Title or Description Text.
• Right-click the selected text and a pop-up menu will appear. Choose Paragraph/List Properties. The Character Properties dialog box will open with the Paragraph tab displayed. From the Paragraph Style drop-down list select either Desc. Title or Desc. Text. Click the OK button to close the dialog box.

Composer displays the selected paragraph with the style you chose, indenting it the appropriate distance for a description title or description text.

Inserting Addresses

An address is a special HTML paragraph style that was originally designed for formatting the address of the author of the page (the snail-mail address, the e-mail address, or both). Most Web browsers display an address paragraph in an italic font, smaller than body text. It’s handy to have the paragraph style available, so you don’t need to add separate font size and italic attributes to achieve the traditional appearance.

To enter an address in Composer, just type the address and then select it. With the text of the address selected, you can apply the Address paragraph style with one of the following techniques:

• From the Format toolbar, click to pull down the Paragraph Style drop-down list, and choose Address
• From the Format menu, choose Paragraph, and then choose Address.

Working with (Un)Formatted Paragraphs

Typically, the text on a Web page appears in a proportional or variable-width font such as Times New Roman. Also, Web browsers follow certain rules such as ignoring multiple spaces and automatically wrapping long lines of text to fit in the browser window. The combination of these features enables Web browsers to display text in a way that is attractive and easy to read, despite significant differences in the size of the browser window and the characteristics of different users’ computer systems.

Generally, this is a good thing. However, the developers of the HTML standard envisioned some circumstances in which users might miss the formatting capabilities of a plain text document using a fixed-width font. For example, you might want to simulate the appearance of a text-mode computer screen or create a crude table by using multiple spaces to separate lines of text into columns. The Formatted (sometimes called Preformatted) paragraph style addresses this need.

In the first versions of HTML, using the Formatted paragraph style was the only way to create a table. Now that table tags are supported by all the popular Web browsers, the Formatted paragraph style doesn’t get used much anymore. But it’s still available if you need it.

To use the Formatted paragraph style, follow these steps:

1. Drag the pointer across one or more paragraphs of text to select them.
2. Select the Formatted paragraph style using one of the following techniques;

• From the paragraph style drop-down-list in Composer’s formatting toolbar select Formatted.
• Click to pull down the Format menu, choose Paragraph, then choose Formatted.

Composer then applies the Formatted paragraph style to the selected text. The text appears in the fixed-width font and you can enter multiple spaces to separate words. Of course, in Composer, you can achieve essentially the same thing by simply changing the font in a normal paragraph to the fixed-width font.

Inserting Horizontal Lines

Horizontal lines (sometimes called horizontal rules or ruled lines) are lines that you can use to separate parts of your document. To place a horizontal line in you document first move the insertion point to the location where you want to add the rule. Then do one of the following:

• From the Composer toolbar, click the Insert Horizontal Line button (the next-to-last button).
• From the Insert menu, choose Horizontal Line.
• Composer inserts a horizontal line at the insertion point and adds space above and below the line.

The default horizontal line is four pixels thick, runs the full width of the browser window, and is shaded to create an embossed effect. You can change the appearance of the line by changing the settings in the Horizontal Line properties dialog box. Right-click the line to display a pop-up menu and choose Horizontal Line Properties to open the dialog box. In the Horizontal Line Properties dialog box you can specify the height, width, and alignment for the rule. If the 3-D Shading option is checked, you get a rule with the embossed effect; if you clear the checkbox a solid-colored rule with no shading is generated. After adjusting the settings, click OK to close the dialog box and apply the settings to the rule.

Check Your Spelling

Composer includes a feature to help you find and correct those embarrassing spelling errors before you post your page on the Web for the world to see. You need to remember to check every page before you publish it to the Web.

Before you use the Spelling tool for the first time, you must tell Composer what language you are using so the program can use the appropriate spelling dictionary. To do so, follow these steps:

1. Click to pull down the tools menu and select Language. The Language dialog box will appear.
2. Select the appropriate language from the list in the dialog box.
3. Click the OK button to close the dialog box and record your selection.

Composer will use the dictionary, with the language you specified, to check the spelling in your Web pages. Unless you create Web pages in more than one language, you’ll need to make this selection only once.

When you’re ready to check the spelling on your Web page, follow these steps:

1. Select the portion of the page where you want to check the spelling.

• Drag the pointer across some text to select it. You can select any amount of text from a single word to multiple paragraphs. If any text is highlighted when you start the Spelling tool, the program will check only the highlighted text.
• By default, Composer will check all the text on the current page. So, to check the entire Web page, you can either make sure all the text is selected (the hard way) or make sure no text is selected by simply clicking some text on the page (the easy way).

1. Click to pull down the Tools menu and choose Spelling. The Spelling dialog box will open. Composer compares the text on your Web page to the words in its spelling dictionary. If it finds a word on your page it doesn’t recognize, the program displays the unrecognized word in the Spelling dialog box along with a list of suggested alternatives. Then you can decide how to handle each unrecognized word.
2. Composer displays the first (or next) unrecognized word in the Not in Dictionary box. The proposed change to that word appears in the Change To text box.
3. When the Change To box contains the correctly spelled word, you can tell Composer how to handle the unrecognized word on your page by doing one of the following:

• To replace the unrecognized word with the corrected word shown in the Change To box, click the Change button.
• To replace all occurrences of the unrecognized word with the corrected word shown in the Change To box, click the Change All button.
• To accept the unrecognized word without making any change, click the Ignore button.
• To accept all occurrences of the unrecognized word in the selected text without making any change, click the Ignore All button.
• To accept an unrecognized word as correctly spelled and add it to Composer’s dictionary, click the Add button

1. Repeat steps 3 and 4 as needed until you’ve checked all the unrecognized words in the selected text.
2. When Composer finishes checking the selected text, the program will display a message to that effect in place of the Spelling dialog box. Click the OK button to close the message box and conclude the spell check.

Adding Images

You must always investigate the copyright status of any ClipArt you use for a commercial purpose and only use it LEGALLY. Making a sales presentation is definitely commercial use.

The images on your Web page can be anything. You can use charts, graphs, and diagrams to illustrate a point. You can use logos and graphic symbols to establish a visual identity for your page. You can use scanned photos and drawings to set a mood or show details. Background images can provide a backdrop as subtle as fine silk or rich as polished marble.

Most images that are part of a Web page are called inline images. These images typically appear over, under, or beside the text on a Web page. Each image is stored in a separate file. Normally, the images used on Web pages will be in one of two file formats – GIF or JPEG – designed to store graphic information in an efficient, compressed form.

Remember that beneath all of Composer’s fancy WYSIWYG (What You See Is What You Get) trappings, you are building an HTML source file that defines your Web page – and that HTML file is basically text. The inline images themselves are not included in the HTML source file – only an image tag that references the file name of the image file is stored in the HTML document. When the viewer’s browser encounters the image tag in the text of the HTML file, the browser loads and displays the inline image as part of the Web page.

You can’t position an image at just any random location on the page – it must be positioned in reference to some surrounding text. The image tag can be imbedded in the middle of a paragraph of text, placed at the beginning or end of a paragraph, or, ore often, placed in a paragraph of its own. The image tag anchors the image in the text. As the text flows from the top of the page to the bottom, the image will appear in its place within the text – moving with the text as it wraps to fit the browser window.

To add an inline image to your Web page in Composer:

1. Position the insertion point (the same insertion point you use for editing text) at the location on the page where you want to insert the image.
2. From the Insert menu choose Image or go to the Compose toolbar and click the Insert Image button. Either action will open the Image Properties dialog box with the Image tab displayed.
3. IN the Image Location text box, type the path and file name of the image file you want to use. Alternatively, you can click the Choose File button to open the Select Image File dialog box. From here select the image file and click Open to insert the file name into the Image Location text box back in the Properties dialog box.
4. Next, click a button in the Text Alignment or Wrapping Around Images area to specify how the image will be aligned on the Web page and the way the text should flow around it.
5. If you want to define a specific size of the image, you can enter values in the height and width text boxes. However, it’s usually easier to size an image visually after you place it on the page. You can just click the edge of an image and drag it to make the image larger or smaller. If you do decide to edit size information for the image, Composer provides a couple of tools to make your job easier.

• The Constrain option ensures that the image maintains its correct proportions. If the Constrain option is checked, you can enter a new size in either the Height or Width boxes, and Composer will automatically adjust the other setting for you. If you want to distort the image, clear the Constrain checkbox first. Then you can adjust the Height and Width settings independently without affecting the other.
• If your image sizing experiments get out of hand, click the Original Size button. Composer will return the image to the original size recorded in the image file, regardless of the changes you’ve mad since inserting the image.

1. In the Space Around Image area you can specify how much white space there will be between the edge of the image and the closest text. Enter values in the Left and Right text box and in the Top and Bottom text box as needed. In this same area, you can specify the width of a border that will appear around the image. The default value of 0 suppresses display of the border.

Not everyone can view images on a Web page – at least not very quickly. A few people still use text only systems. Many more users have systems that are capable of displaying images, but slow Internet connections mean that it takes a very long time for images to download and display. These users may elect not to display images as they surf the Web or they may simply follow a hyperlink to another page before the image has time to download. For these users, it’s important to supply an alternative preview to the full image while they wait for the main image to appear. HTML allows you to specify an alternative to the image in the form of a text description, a low-resolution image, or both. Another reason to use an alternative to the image is that it makes your sight accessible for people with handicaps.

2. To specify an alternative text or image, click the Alt Text/Low Res button to open the Alternate Image Properties dialog box. In the Alternate Text text box, type the text you want to appear in place of the image.
3. In the Low Resolution Image text box, enter the file name of another image. Presumably, this will be a lower-resolution version of the same image in a smaller file and will load much faster. When a user views your page, the browser will load the low-resolution image first and then replace it with the regular, higher-resolution image as the larger file is downloaded. After entering the information, click OK to close the Alternate Image Properties dialog box and return to the Image tab of the Properties dialog box.
4. Finally, click Apply or OK to add the image to your Web page. Composer will display the image as it will appear in most browsers. However, the text flowing around the image may not be properly rendered. Behind the scenes, Composer adds an <img> tag to the HTML source file for your Web page.

Moving and Resizing Images

To move an image, drag the image to a new location on the page. To resized an image, drag its border.

Moving an image changes the location of the <img> tag with respect to the rest of the text in the HTML file for your Web page and thus changes what text comes before and after the image. Moving an image does not change the alignment (left, right, or center) of the image or how the text flows around it. For that, you’ll need to edit the image’s alignment settings. To move an image,

1. Position the pointer over the image you want to move. Notice that the pointer changes to an arrow with a hand beside it. This is your cue that you can grab the image under the pointer and move it.
2. Click and drag the mouse to move the image. A border appears around the image to show that it’s selected and the pointer changes to an arrow with an image icon (the same one that is on the Insert Image button) beside it. As you move the pointer, the flashing insertion point cursor also moves to indicate where the image will be inserted into the text.
3. When the insertion point is in the correct position, release the mouse button to drop the image at is new location. Composer moves the <img> tag in the HTML source file and redraws the Web page in the edit window.

You can set the height and width of an image in the Properties dialog box when you add the image to your Web page. You can also edit those same settings at a later time by right-clicking the image and choosing Image Properties from the pop-up menu that appears. The height and width settings on the Image tab of the Properties dialog box enable you to specify the size of an image in pixels or as a percent of the size of the browser window.

Such precise numeric control is nice, but it’s usually much easier to size images visually, in relation to the text and the other images on the page. Composer makes it easy to visually resize images by manipulating the image in the edit window – you don’t have to open a dialog box. In fact, the process of resizing images will probably seem quite familiar because it’s essentially the same procedure you use to resize application windows on your Windows 95/98 desktop. To visually resize an image:

1. Select an image in the Composer edit window by clicking it.
2. Position the pointer over the edge (border) of the image. The pointer will change to a double-headed arrow.

• To change the height of the image, position the pointer over the top or bottom border.
• To change the width of the image, position the pointer over one of the sides.
• To change both the height and width proportionally, position the pointer over a corner of the image.

1. Click the border of the image and drag it to make it larger or smaller as needed. As you drag, the border changes to indicate the new size, but the image remains the same.

• Drag the border toward the center of the image to make the image smaller.
• Drag the border out, away from the center of the image to make the image larger.

1. When the border is the desired size, release the mouse button. Composer redraws the image at the new size (and records the height and width settings in the <img> tag for the image in the HTML file).

Aligning Images

The location of an inline image on your Web page is determined by the position of the insertion point when you insert or move the image. That is, the insertion point indicates the location where the <img> tag referencing the image is inserted into the text of the Web page. And the location of the <img> tag determines where the image falls in the flow of text from the top of the Web page to the bottom – what text comes before the image and what text follows it.

While the location of the <img> tag anchors the image in the text, it’s the alignment setting that control the finer points of the relationship between the image and the surrounding text.

Basically, there are two kinds of alignment that affect the position of an image on your Web page:

• Paragraph alignment (left, center, right)
• Text alignment (alignment with respect to the text within a paragraph)

The first kind of alignment – paragraph alignment – is easy to understand. The second is a little more tricky.

Because an image tag is embedded in a paragraph of text, the image will follow the same alignment on the page (left, center, or right) as the rest of the paragraph. If the image is small and located in the middle of a sentence, it will simply take its place like a special character in the text. In that cased, the paragraph alignment won’t make much difference in the position of the image. However, larger images are a different matter.

Quite often, you’ll find that the simplest way to work with an inline image is to place the image in a separate paragraph of its own. Then, ;you can use the regular paragraph alignment commands to align the image with the left or right margins, or the center of the page. What you are really dong is setting the alignment of the paragraph containing the image, not aligning the image itself on the page. Naturally, since you’re adjusting the alignment of a paragraph, you can do so using any of the same commands you use on plain text paragraphs:

• Click the Horizontal Alignment button in the toolbar and then click the Align Left, Align Center, or Align Right button.
• Right-click the paragraph (image) and choose Paragraph Properties from the pop-up menu displayed. The Character Properties dialog box will open with the Paragraph tab. Click the Left, Center, or Right radio button in the Alignment box and then click OK.

Text Flow around Images

In addition to controlling image alignment by setting the horizontal alignment of the paragraph containing the image, you can set alignment options for the image itself. The image-specific alignment options give you a measure of control over the relationship between the image and the surrounding text.

The text/image alignment options can be divided into two groups. The first group controls the vertical alignment of the image compared to the line of text in which it appears. These options really come into their own when working with small images that are embedded in text. Examples would be initial caps at the beginning of a paragraph and icons or other symbols appearing in the body of a paragraph.

The second group of text/image alignment options enables you to instruct the browser to wrap text around the image. By using these alignment options, you can achieve effects similar to the common magazine and newspaper layouts in which the text flows around the images on the page instead of stopping above the image and starting up again below it.

To set the image alignment option for an image, click a button in the Image Properties dialog box. You’ll find the buttons in the Text Alignment or Wrapping Around Images area in the middle of the Image tab.

There are seven buttons – five for text/image alignment and two options for wrapping text around an image. To select an alignment option, just click the corresponding button. You can select the image alignment option when you insert the image or any time you open the Image Properties dialog box to edit the image.

From left to right, the image alignment buttons are:

TEXTTOP Aligns the top of the image with the top of the text

ABXCENTER Aligns the vertical center of the image with the vertical center of the text

CENTER Aligns the center of the image with the baseline of the text

BOTTOM Aligns the bottom of the image with the Baseline of the text (this is the default alignment

ABSBOTTOM Aligns the bottom of the image with the bottom of the descenders (the tails of letters such as g and y that extend below the baseline)

LEFT Aligns the image with the left margin and wraps text around its right side

RIGHT Aligns the image with the right margin and wraps text around its left side.

When you first begin experimenting with the image alignment settings, you may be surprised (and even a bit confused) by the results you see in the Composer editing window and the slightly different appearance of the page when viewed in Navigator. Remember, the first five buttons affect the vertical alignment of the image compared to the text surrounding the <img> tag for that image. These alignment settings don’t affect the location of the image with respect to the text preceding and following the image. The align left and align right settings, on the other hand, can change what text comes before and after the image by pushing the image over to the left or right margin and allowing the text to flow around the image.

Dealing with Image File Formats

There are many different file formats in use for recording graphics data. It seems like every major graphics program has its own file format. Then there's an assortment of different standard formats used by scanner software, clip art collections, and the like. Dealing with the alphabet soup of file name extensions and abbreviations for file format names is a constant source of confusion and frustration for graphics professionals who must work with multiple file formats.

Fortunately, the World Wide Web community  has settled on a short list of file formats that are the supported de fact standards for images. Consequently, any image you create in Composer and want to include as an inline image in a Web document must be in one of two graphics file formats: GIF or JPEG. The GIF file format is the ever-popular standard for Web images. All Web browsers (except text-only browsers) can display GIF images.

Many Web browsers, including Navigator, can also display inline images in JPEG format. JPEG files are generally smaller in size than other image files, so they appear on screen much more quickly – a real advantage. The drawback for the publisher, however, is that to all Web browsers can display them. If you use a JPEG image, and a user tries viewing your document with a browser that can’t handle JPEG files, all the user will see is a little error message where the image should be.

By default, Composer presumes that the images you are adding are GIF or JPEG files. However, you can specify other file types when you insert images. As a result, you can include sounds, movies, video clips, and animations in you Web pages. Composer displays a placeholder icon in the edit window that you can manipulate (cut, paste, move, and edit) in much the same way you do ordinary images.

In addition to GIF and JPEG images files, Composer allows you to select and import images in one other file format – Windows Bitmap (BMP) files. Composer won’t actually use the BMP file, but the program will convert it to a JPEG file:

1. Use one of the standard techniques to insert an image into your Web page.  You can use the Insert Image command or Image button on the toolbar to open the Image Properties dialog box. Then select a BMP file as the Image Location, adjust other settings as needed and click the OK button to insert the image into you page.
2. When you attempt to insert a BMP image onto your Web page, Composer will automatically open the Image Conversion dialog box offering to convert the image to the JPEG file format. Click the OK button to accept Composer’s offer to convert the file.
3. Another dialog box – the JPEG Image Quality dialog box – then appears. Select High, Medium, or Low and then click the OK button. )Selecting High creates a higher-resolution image and a larger file. Selecting Low creates a lower-resolution image and a smaller file. Selecting Medium is usually a good compromise between the two extremes.)

Composer automatically reads the BMP image and creates a copy of the image in a new JPEG file. Then Composer adds the resulting JPEG image to your Web page.

Creating Textures with Background Images

The HTML standard makes special provisions for using an image to create a background for your Web page. The background image appears in the background with the text and inline images appearing in the foreground.

You can use any GIF or JPEG graphic file as your background image. For example, many companies like to use dimmed versions of their logos as background graphics – kind of like a watermark in expensive stationery. Another popular technique is to use a background image to simulate a texture such as paper, wood, stone, feather, or fabric.

You might expect that an image large enough to fill the entire background of a Web page would require a very large image file (and you would be right). When creating your background, consider your audience’s attention span because an image large enough to fill even a moderately sized browser window would probably require more time to download than most viewers are willing to invest to view your page. Another problem to be aware of is how big to make the background image because there’s no way to predict the exact size of the viewer’s browser window.

What makes background images practical is that the browser tiles the image you specify as a background to fill up the entire window. That is, it will repeat the image in its original size until it covers the page’s viewing area. As a result, you can specify a small, compact image file that will download quickly, even over a dial-up connection. The background image gets downloaded only once. The browser automatically displays as many multiple copies of the background image as needed to fill the background of the page without using the download time or memory resources required by a larger image.

Since the background image is tiled, only a small sample (less than an inch square) is required to create a texture such as paper, cloth, or stone. Textures such as wood grains and veined marble need slightly larger images to create attractive backgrounds. An image of a logo is likely to be even larger, but it’s still much smaller than a single page-sized image.

To specify a background image for your Web page, follow these steps:

1. From the Format menus choose Page Colors and Properties. This opens the Page Properties dialog box. If necessary, click the Colors and Backgrounds tab to display the background image options.
2. Click the Use Image checkbox in the Background Image area near the bottom of the dialog box to select it.
3. In the Use Image text box, enter the URL or the file name for the image file you want to use as a background. Optionally, you can click the Choose File button to open the Select Image File dialog box, where you can select the file instead of typing its file name.
4. After specifying an image file, click OK or Apply to apply the background image to your Web page.

Composer displays your Web page in the editing window with the specified background image. It’s a pretty good approximation of what most users will see when they view your page in their browser.

Images can be an incredibly powerful and versatile Web page design tool. You can achieve a tremendous range of effects with images – largely because an image in a Web page can be virtually anything. An image can contain a photograph, drawing, diagram, chart, graph, illustration, logo, symbol, or even text in a special typeface color or arrangement that would be difficult to reproduce with HTML commands. Regardless of the contents of an image, you work with it the same way when assembling your Web page in Composer. When you insert an image, it makes no difference whether the image is a photograph, a logo, or a bar chart. (At least, it makes no difference in the way you insert, move, and align the image in Composer. Of course, the contents of the image can make a big difference in the appearance of your page – and the message it conveys.

In addition to all the things you can do with regular images, there are a few special effects that can add even more pizzazz to your Web page. Some effects are subtle and others can be quite dramatic. What all the special effects have in common is that they are built into the image file when it is created. The Web browser may need the capability to recognize and display the special effect properly,. But you don’t have to do anything different to work with the file in Composer – you simply insert the image into your Web page just like any other normal image file.

Getting Linked Up

It’s the Hypertext links that are the defining characteristic of the World Wide Web. Hypertext links enable you to build relationships between Web pages. You can create links from a location in one Web page to different parts of the same Web page, to other files on your Web site, or to other files on the Internet or an intranet. When a visitor to your Web site views a Web page and clicks a hyperlink, they are transported to another Web address for supplemental information, a continuation of the same topic, or anything else you choose to link to.

A minor but important part of designing for the Web is ensuring that as you link pages, you display images at consistent heights. When a user clicks through a site, the layout should remain in exactly the same position, as pages in a book remain within the same template. As the bandwidth on the Web increases, the pages of a Web sites will turn as easily as the pages in a book. Keeping the edges aligned within a template structure will create a clean and professional design.

Creating Links

The appearance of a hyperlink when it shows up in a Web browser window will differ depending on the browser being used, but usually it will appear as underlined text in a special color. However, there’s much more to a hyperlink than an underline and a distinctive color. When you click the hyperlink, the browser loads the Web page with which the hyperlink is associated (the other end of the link, if you will) and displays it onscreen. Defining the target of the link is the important part of creating a hyperlink in Composer. You don’t have to worry about underlining text or changing its color – the browser will take care of that automatically.

Creating Hyperlinks to Other Files

The most common hyperlink is probably one that links a word or phrase of text to another Web page – either a Web page stored in another file on your Web site or a file located elsewhere on the Internet. To add a hyperlink between text on a Web page you are creating or editing in Composer and an external file;

1. If the text passage that is to contain the hyperlink does not already exist in your Web page, type it in using the normal text entry techniques.
2. Select the word or phrase that is to become the hyperlink. You can double-click a word to select it, or you can select a phrase by dragging the mouse pointer across it. It’s just like highlighting text for editing or for assigning an attribute such as bold or italic.
3. Begin defining the link by doing one of the following:

• From the Insert menu, choose Link.
• Go to the Composer toolbar and click the Insert/Make Link button.
• Right-click the selected text and choose Create Link Using Selected from the pop-up menu that appears, or Press Ctrl+Shift+L.
• Any of these actions will open the Character Properties dialog box with the Link tab displayed.

The selected text appears in the Link Source box near the top of the dialog box. This is the text that will receive the distinctive formatting of the hyperlink when it appears in the Composer editing window and the browser window.

1. In the Link To text box, enter the file name or URL for the Web page that you want to be the target of link. This is the file that will be displayed when the user clicks the hyperlink while viewing your Web page. (As an alternative to typing the file name into the Link To text box, you can click the Choose File button to open the Link To File dialog box and then select the target file.)
2. After you defined the hyperlink, click OK or Apply to insert the link into your Web page.

Composer formats the hyperlink text on your Web page and, behind the scenes, builds the HTML tag required to define the link between your Web page and the target file.

Creating Hyperlinks within a Web Page

In addition to hyperlinks to other Web pages, you can create hyperlinks to locations within the same Web page. You can use this kind of hyperlink to cross-reference two bits of text, or you can create a table of contents for a long Web page document by adding at the top of the page a list of headings that are each linked to the corresponding portion of the document.

Creating hyperlinks within a Web page is a two-part process – you first create a named target, a hidden HTML tag that Composer places in your Web page, and then you create a hyperlink that is linked to that target.

To create a named target for a hyperlink;

1. Move the insertion point to the location in your Web page where you want to create the target for a hyperlink.
2. From the Insert menu choose Target, or go to the Compose toolbar and click the Insert Target button. Composer will open the Target Properties dialog box.
3. Enter a short name for the target and click OK. Composer closes the Target Properties dialog box and inserts a small target icon into your Web page. Composer also inserts the corresponding tag - <a name="target text"> - into the HTML source code for your Web page.

The target will be invisible when you view the Web page with a browser. The target icon appears in the Composer window so you will have a visual clue to the target’s location. The icon also gives you something to select so you can move, add, or delete the target. To help you identify the target, Composer will display the name of the target in a small pop-up box if you place the pointer on the target icon and let it rest there for a couple of seconds.

After you create a target in your Web page, you still need to create a hyperlink to that target. To create a hyperlink to another location within the same Web page;

1. Select the text that you want to become the hyperlink.
2. From the Insert Menu choose Link, or go to the Compose toolbar and click the Insert/Make Link button. Either action will open the Character Properties dialog box with the Link tab displayed. The selected text of the hyperlink will appear in the dialog box’s Link Source text box.
3. In the Link To area, click the Current File radio button and then select a target from the Select a Named Target in Current Page list.
4. After you have defined the hyperlink, click OK or Apply to insert the link into your Web page.

HTML TARGETS IN COMPOSER (alternate directions)
Netscape Composer has a quick way to insert HTML targets within Web pages. You can link to these targets from elsewhere in the same page or from another page entirely. Go to the position in the page you wish to target and click Insert, Target, or click the Insert Target button (to the right of the Link button) in your toolbar. In the resulting dialog box, give your target a name and click OK. To link to that target, use the document file name and target separated by the pound (#) symbol.
For example, say you create a Web page and name it mypage.html. Insert a target somewhere within the page and name it tips. A link to tips in mypage.html should read mypage.html#tips. You can also link to the top of a page by simply using #top.

The Truth About Web Design Or "How to Build a Web Page in 25 Steps"
1. Download a piece of Web authoring software - 20 minutes.
2. Think about what you want to write on your Web page - 6 weeks.
3. Download the same piece of Web authoring software, because they have released 3 new versions since the first time you downloaded it - 20 minutes.
4. Decide to just steal some images and awards to put on your site - 1 minute.
5. Visit sites to find images and awards, find 5 of them that you like - 4 days.
6. Run setup of your Web authoring software. After it fails, download it again - 25 minutes.
7. Run setup again, boot the software, click all toolbar buttons to see what they do - 15 minutes.
8. View the source of others' pages, steal some, change a few words here and there - 4 hours.
9. Preview your Web page using the Web Authoring software - 1 minute.
10. Try to horizontally line up two related images - 6 hours.
11. Remove one of the images - 10 seconds.
12. Set the text's font color to the same color as your background, wonder why all your text is gone - 4 hours.
13. Download a counter from your ISP - 4 minutes.
14. Try to figure out why your counter reads "You are visitor number -16.3E10" - 3 hours.
15. Put 4 blank lines between two lines of text - 8 hours.
16. Fine-tune the text, then prepare to load your Web page on your ISP - 40 minutes.
17. Accidentally delete your complete web page - 1 second.
18. Recreate your web page - 2 days.
19. Try to figure out how to load your Web page onto your ISP's server - 3 weeks.
20. Call a patient friend to find out about FTP - 30 minutes.
21. Download FTP software - 10 minutes.
22. Call your friend again - 15 minutes.
23. Upload your web page to your ISP's server - 10 minutes.
24. Connect to your site on the web - 1 minute.
25. Repeat any and all of the previous steps - eternity.

This site began in March 1998 and was created by Janet Luch. 
Email questions and comments to: studyplans@yahoo.com