This Composer 4.7 Teaching Reference will show you how to perform the following tasks on your Web page:
- add text
- insert images
- create hyperlinks
You will also learn to use tables to format your page and how to manage your files. You will build your page using Netscape Composer 4.7, which comes packaged in the FREE suite, Netscape Communicator.
If you have any experience using a word processing program, it will take you little time to master Netscape Composer. Composer is one of many WYSIWYG (What You See Is What You Get) Web authoring programs that enable authors to create pages in a user friendly, point and click environment similar to modern word processing programs. Learning to use Composer will give you enough background in the use of a Web editing program to allow you to easily transfer your knowledge to any other editing program.
|
|
|
Before beginning work on your new Web page, it is a good idea to create a folder into which you will put all the files associated with your new page. This folder may be on a disk, on your desktop, or on your hard drive. Organizing a Web site into folders makes sense if you are building a large site with many pages.
In order to keep these activities simple, we ask that you just put all the files associated with your page on one floppy disk. In effect, you will be treating your floppy as one big folder.
Activity: Place a floppy disk into the "A" drive.
Now that you have a place to put all of the materials associated with your new Web page, you can begin creating content.
|
|
|
| Opening Netscape Composer | |
|
One way to access Composer:
|
|
Selecting File | New from the Netscape menu gives you three choices for starting a new Web page:
- Blank Page: Opens a blank page
- Page From Template: Imports a sample page to the editor allowing you to replace the graphics, links and text of the sample page with your own
- Page from Wizard: Accesses a rather simplistic tool that guides the author through the creation of a basic page
Remember that selecting Help | Help Contents from the Composer or Navigator menu accesses the online notes for using Composer to create or edit a Web page. When in doubt, read the directions.
Activity: From the familiar Netscape browser, select File | New | Blank Page.
|
|
|
From the Composer menu when you select File | Save As, you will be able to save your newly created file to any folder you have created for this purpose or in our case on your floppy disk.
You will see the "Save As" dialog box which will prompt you for file name, location, and extension. Follow the instructions carefully
|
|
The Windows file management dialog box is a very familiar window to computer users. There are always three questions that need to be addressed in this box:
- Save in:
Where do you want to put your file?
Use the black triangle to the right of the "Save in" box to locate your 3 1/2 Floppy (A:) drive or a folder you have created. - File name:
What do you want to call your file?
The home page of your site should normally be called index. You will type the word index into the "File Name" box where you currently see the word schedule above. Index is used because most servers use index.html as the default page. In other words, when you type in the address http://www.cnn.com you actually open the file http://www.cnn.com/index.html, which is the default page. - Save as type:
What type file do you want to save your file as?
Most Web pages use only three types of formats: HTML for text, and GIF and JPG for images. Normally, Windows senses the type of file you are saving and defaults to the proper extension, in this case HTML.
|
|
|
| Editing with Composer Menu and Toolbars | |
One look at the interface of Composer shows a collection of buttons and menus that help authors accomplish all of the tasks involved in building a Web page. Let's make a distinction in terminology here: The buttons you see on Composer are collectively known as the Toolbars.
The words you see above the toolbars, such as File and Edit are known collectively as the Menu
We will be referring to the toolbars and the menu often so make sure you understand the difference. Each button on the toolbars has one function while each word on the menu bar offers a host or menu of options. If you are not sure what a button does, point at it and it will reveal its function. As always, when all else fails, read the directions. You will find a guide online under Help on the menu.
|
|
|
Text is the backbone of any Web page. Web authors can type text directly into a page or copy text from elsewhere and paste it into a page.
Typing Text
- Place your cursor where you want to insert text and begin typing.
- Use the Enter key to create a new paragraph or space between sections of text.
- Use the Backspace key to delete backwards or the Delete key to delete forward.
- Use the Left, Center, and Right Justify buttons on the bottom toolbar to position text on the page.
Activity: Type Welcome to Mrs. Brown's Classroom (substitute your name) on your page and center your text.
|
|
|
You can copy text from word processing documents, e-mail, and Web pages, and then paste the text into your Web page.
Activity: Copy text from another Web page into your new page. Simply position your cursor over a word on a page of your choice viewed in the Netscape browser and do the following steps:
- Select the text you want to copy by clicking and holding down the left mouse button, then drag the cursor across the text you would like to copy. Once you have done this, let go of the mouse button.
- Position the cursor anywhere on the selected text and click the right mouse button. Do not hold it down, just click.
- Select Copy from the drop down menu and click. The text you have just copied will be stored on an internal "clipboard" and will remain there until you copy something over it and exit the program.
- Return to Composer, position the cursor where you want to paste the text, right click to access the drop down menu and Paste.
|
|
|
To operate on text you must always first select the text to be operated upon by dragging the cursor across the text with the left mouse button held down. See the highlighted text in the box below.
All the tools you need to edit text are found on the toolbar in the next graphic.
Once text is selected you can choose font style, size, and color, by using the drop down menu boxes on this toolbar.
Style: 
Size: 
Color: 
Font size and style can also be changed by highlighting the text and selecting Format in the menu.
These buttons on the bottom toolbar allow you to make text bold, italics, or underlined (very confusing to visitors to your page who think of underlined text are links). Additional buttons on this toolbar allow you to create bulleted or numbered lists, indentations, or justify left, center or right.
If you wonder what a particular button on Composer's toolbars does, point at the button and it will reveal its function.
|
|
|
The creation of the World Wide Web in the early 1990's and subsequent development of graphical browsers brought the Internet to life with a rainbow of colors, images, and sounds. Keep in mind when adding images to your page that while a picture may speak a thousand words, it can also add hundreds of seconds of download time to your page. Be judicious in your use of images. Listed below are some ways you can add an image to your page.
Saving an image
Inserting an image is a very simple process. However, before you insert an image on your page, you must first have an image.
Follow these simple directions to obtain an image from a page on the Web. First, point at an image and right click. You will see a dialog box much like the one above. From there you may select the following options:
- Save Image As: Allows you to save the image as a file on your system. Recommend you save images in the same folder as where you saved your Web page.
- Copy Image Location: Allows you to copy the image and immediately paste it into your page. You will be prompted to save the image when you save your Web page.
- Set as Wallpaper: You can use the image as "wallpaper" on your desktop.
- View Image: Opens the image in a browser.
Activity: Using the Netscape browser, go to the MAST Institute site at mast.unco.edu, point to the Institute's graphic (logo) and right click. Select Save Image As..., and save this image to your 3 1/2 Floppy (A:) drive. Follow the process of saving as described above for saving a file.
|
|
|
If you save this image to a folder (or in our case onto your disk), you will later need to insert the image into your Web page using the Image button on Composer's top toolbar. When you click the Image button you will see the following dialog box.
- Image location: The Choose File button at the top left of the box allows you to access all of the folders and files on your system.
- Text alignment: You may wrap text around a graphic in a variety of ways.
- Dimensions: You can change the size of your graphic.
- Space around image: Allows you to create space or borders around your image.
- Alternate Text/Low Resolution Image: This allows you to place text in the graphic's window as it is loading and place a graphic that has a smaller file size in the graphic window until the full graphic is loaded.
- Extra HTML: Allows you to add HTML attributes and Javascript to the image tag.
- Link tab: Keep in mind that the link tab allows you to turn an image into a hypergraphic link to another Web page.
To insert the image you will want to place your cursor on your Web page where you want your image inserted. Then click on the button in the dialog box that says Choose File. You will see a window similar to the Save As... window from Section 2. The difference will be that it will say Choose Image File in the title bar.
Make your selection by clicking on the appropriate graphic. The name of your selection will appear in the box next to File name: In this case, the file we have chosen is mindy2 and the type of file is a .jpg file.
Click on the Open button and then click on OK. Your image should appear.
Activity: Insert the graphic you saved from the MAST home page into your own Web page.
Image Considerations
There are innumerable techniques for minimizing the size of graphic files and thus minimize the load time of a page. Do a keyword search to peruse the Web for tools and tips. Many images can be compressed significantly without losing much quality. Image manipulation is an art that takes patience and persistence to master. Listed below are a couple tricks that will help you decrease the load time of your page.
Use an image more than once when appropriate. The first time a browser accesses an image, it "caches" the image on the hard drive. Subsequent "pulls" of the image will cause the browser to pull the image from cache, greatly increasing the speed at which the graphic loads.
Create "thumbnail" or miniature representations of large images and give the user the option of clicking on the thumbnail to access the larger image.
|
|
|
Graphic designers, accustomed to having total control over page layout in the print world, can find the layout limitations of Web page authoring frustrating. Because of the limitations of the HTML language, Web authors have taken to using tables to gain some measure of precision in the placement of text and graphics on a page.
To insert a table onto a page, click on the Table button on the toolbar or select Insert | Table on the menu. The Table Properties box, as shown below, will appear.
In the New Table Properties box set the number of rows and columns, border width, cell spacing, and table color. Most of the options are self explanatory. If you have questions click the Help button in the lower right hand corner of the box.
| Use tables to set rows and columns | Combine graphics and text in a table |
Place graphics in the table | Place tables within tables
You can do it! | 
Set table width to gain layout precision |
|
| Use tables for layout options | Tables can have borders or be invisible |
|
|
|
There may be no more important feature of the World Wide Web than the ability to create links between pages. Being able to link from your page to another page on the Web gives you the ability to create an incredibly powerful and useful site. There are several types of links.
- Absolute Links: External links pointing to external Web sites, rather, pages that are not within your site. You must link using the full or absolute address of external sites. An example of an absolute address would be http://www.cnn.com .
- E-mail Links: Sometimes known as "mailto" links connecting to someone's e-mail address.
- Relative Links: Internal links pointing to other pages of your site.
- Hypergraphic Links: Links from an image to an external or internal URL.
- Target Links: These links point to a specific location within a Web page. For example, you might provide a link from the bottom of a page back to the top or vice versa. Or, you might create a table of contents or index at the top of your page that includes target links to specific sections within your page or site.
You can create any of the above types of links using a straight text format (hypertext) or by creating a linked image (hypergraphic). We explore the types of links and the Hypertext and Hypergraphic formats below.
Hypertext Link
| Method 1 | Method 2 |
| Click the Link button on the top toolbar which launches the "Character Properties" dialog box. | Create and select the text in your page to highlight it. |
| Enter text to be displayed for the link (this will be the blue underlined text the user sees). | Click the Link button on the top toolbar which launches the "Character Properties" dialog box. |
| Enter the URL for the link in the "Link to" box. | Enter the URL for the link in the "Link to" box. |
| When in doubt, click the Help button! |
Activity: Create an absolute link on your page.
Relative Link
Activity: Next create a new secondary page named schedule.html and a relative link from your index.html page to your new page.
- Click on the New button in the Composer toolbar and select Blank Page from among the choices offered.
- Save this second page to the folder that holds your Web content (in our case on your floppy disk) and name the file schedule.html.
- Go back to your index.html page and type the word Schedule somewhere on it.
- Highlight the word Schedule and select the Link button on the top tool bar.
- Click the Choose File button, shown below, and find the schedule page on your floppy drive.
- Click on the schedule file to select it and then click on Open.
- The schedule file will be inserted into the link to box.
- Click OK to create the relative link from your index page to your news page
|
|
|
You can create an e-mail or mailto link the same way as a hypertext link, with one minor change.
| Method 1 | Method 2 |
| Click the Link button on the top toolbar which launches the "Character Properties" dialog box as shown below. | Create and select the text in your page to highlight it. |
| Enter text to be displayed for the link (this will be the blue underlined text the user sees). | Click the Link button on the top toolbar which launches the "Character Properties" dialog box as shown below. |
| In the "Linkto" box, type the command mailto: immediately followed by an e-mail address. | In the "Linkto" box, type the command mailto: immediately followed by an e-mail address. |
| When in doubt, click the Help button! |
Activity: Create an e-mail link on your page.
|
|
|
Select a graphic of your choice by clicking on it. This is the graphic equivalent of highlighting or selecting text.
Click the Link button on the toolbar.
Notice that the Link source is already filled in for you. This is because your link text is your image. Enter the URL in the "Link to page location" box as shown below.
Your hypergraphic link can be a relative link, an absolute link, a mailto link, or a target link.
Activity: Insert a graphic on your page and create a hypergraphic link.
|
|
|
Target links point to a specific location within a Web page. Such links might provide a link from the bottom of a page back to the top or vice versa. Or, you might create a table of contents at the top of your page that includes target links to specific sections within your page or site.
There are two steps to creating one of these links.
First, place the cursor or select the text to where you want to link and click the Target button on the toolbar. You should see the dialog box below which asks you to give the target a name. The name given to this target is top. Click OK.
Once you have clicked the OK button, a small bullseye  target will appear in place of your cursor. This bullseye target, while showing in Composer, will not show when the page is viewed in a browser.
Second, link to your target by creating a hyperlink to it. In this example, the words Top of Page in the Link source box will be linked to the target named top. Notice that the created target name was conveniently placed in the "Select a named target in current page" area. To select the target simply click on it. The name of the target, preceded by the # symbol, will appear in the "Link to" area.
Click on OK and you will have created your target link.
Activity: Create a target link on your page.
Navigation Bars
When you add additional pages, your Web home page becomes a Web site. As your site grows, providing a clear navigation interface becomes increasingly important. A navigation bar should contain a link to your home page and links to other main pages in your site. If appropriate, Webmaster and other contact information can be added. Navigation bars need to be in a consistent place on every page. Where is the navigation bar on these sites: MAST , CNN , and DZFX ?
|
|
|
So far, we have covered the basics of creating a Web page. There are many things you can do to add organization and flair to a page such as including background colors, changing font styles, and inserting horizontal rules. There are a few things to keep in mind once you get away from the basics of Web authoring and into enhancements.
- Try to keep your Web page under 50K in size, that's 50,000 bytes, to keep download time to a minimum. Remember that any enhancement will probably increase the download time of your page. Be judicious.
- Remember that some browsers may not support the enhancement you want to add. It's fine and fun to use your imagination and creativity, but don't get so far out there that few surfers have the patience or browser ability to appreciate your genius.
|
|
|
Horizontal rules are breaks in a page, like the ones inserted above and below this section, that create order on a page. To create a horizontal rule, click the Horizontal Line button on the top toolbar or select Insert | Horizontal Line from the menu.
A transparent line will appear across your page.
|
|
|
| Choose a Color Scheme for Your Web Page/Site | |
On the menu, select Format | Page Colors and Properties. Select the Color and Background tab in the Page Properties window and you will see the box below.
Select an appropriate color scheme from among the choices offered. Make sure that chosen colors work together and that link or followed link colors do not get lost in the selected background. It is a good idea for new Web authors to be conservative with colors until they get a good feel for how the use of color schemes transfer their visitor's browsers. If you have questions don't hesitate to use the Help button.
Distributing your site involves many tasks not previously associated with the distribution of other media. When we use the word "distribute" here we mean that we want our target audience to learn of the existence of and be able to access our Web site. All of the work you do in creating a Web site is for naught if no one knows your site exists. Later in this teaching reference you will read some tips for getting your site noticed. Completing the General tab in the Page Properties box, shown below, is a first step in publicizing your site. To access the box, click on Format | Page Colors and Properties and select the General tab. This dialog box invites you to enter some very important information.
Title: All Web pages have titles. You will see a page's title at the very top of the page in the blue border area. There are two important things to remember about titles:
- When a visitor bookmarks your page, whatever title you have given the page will show up in the visitor's bookmark library. Use short but descriptive titles so users can identify your bookmark and visit again.
- Some search engines catalog sites by title so be very careful about the wording you use.
Other Attributes: Netscape will use the words you enter in the Keywords and Classification boxes to create meta tags within your HTML coding. Certain search engines use programs called spiders to catalog sites based on the words found in "meta tags".
Activity: Complete the boxes contained in the General tab of Page Colors and Properties, to include "Other attributes", for your Web pages.
|
|
|
| Preview Your New Web page in a Browser | |
What you see in your WYSIWYG editor will closely, but not exactly, approximate how the page will appear in a Web browser. Every so often click the browser Preview button to preview your page in Netscape Navigator browser. If you would like to see your page in a different browser, open that browser and click File | Open and locate your Web page on your floppy drive. Remember that not all browsers support all fonts, colors, or effects. You will sometimes be surprised how your page is rendered. Factors that influence how your page is rendered in a browser including the following:
- Many generations of the two most widely used browsers, Netscape Navigator and Microsoft Internet Explorer, are still in use. Not all browsers support all fonts, colors and effects.
- Mac's and PC's may display pages differently.
- The screen resolution setting will have an effect on how a page looks.
- The appearance of your page can be affected by the font size and color scheme set on the individual's browser.
- A Web surfer can set a browser to display text only. This will certainly change the look of your page if you use graphics and is a good reason to use "alternative representations" of images.
The only way to deal with the above factors is to steer a middle course. Don't go wild with graphics and effects. Rely on the tried and true; that which you know will work on most machines with most browsers. There is no substitute for experience when it comes to using images in a Web page.
Activity: Click the Preview button to preview your page in the Netscpae Navigator Browser.
View and Edit the HTML Source Code of Your Page
In the "old days", Web authors were wizards who created their Web magic by writing raw HTML code. WYSIWYG authoring tools have relieved authors from much of this tedium. Still, there may be cases where you must get into your code to see what is causing a problem. Other times, you may be directed by a Webmaster or system administrator to paste some raw code into your page to create a specific effect. You may also want to view the raw code of someone else's Web page to see how they created an effect. No matter how vigorously you try to avoid it, as a Web author, someday you will find yourself pouring over HTML Code.
Activity: While viewing your Web page you may view the code by selecting View | Page Source from the menu. This will launch a second windows in which you can view the html code of that page. In this window you can not edit.
To edit the code you must select Tools | HTML tools | Edit HTML source from the menu. Netscape should launch a small window from which you can edit the text. If this does not happen and you are asked to choose a program to edit the HTML, Notepad is an excellent choice and comes standard on most Windows based PCs.
|
|
|
| Publishing your Web page or Web site | |
Once you are satisfied with a Web page you have created you can present it to the Web world by uploading the page and all associated graphic files to a Web server.
A Web server is nothing more than a computer with a unique Internet address that is connected to the Internet 24 hours a day 365 days a year. The Publish Files box appears when you click the Publish button on the Composer toolbar. The box gathers information needed to "upload" the text and image files that comprise your Web page. You must provide several pieces of information:
- HTML Filename: The file name to be sent to the Web server
- HTTP or FTP Location: This is the route to the directory on the Web server that will hold your Web page/site. Obtain this pathway from your Webmaster or system administration.
- User name and password must be provided in order to gain access to the Web server.
- Confirm with your system administrator that the "permissions" are set on the Web server so that you can upload into your folder on the server.
- Other files to include: Shows where images reside on your machine and asks which files you want to upload to your Web server.
IMPORTANT: Click the "All files in pages' folder" option to send all the files from the folder you created on your floppy.
Once all of the blanks have been filled, click OK and Netscape will upload your page and all associated server to the Web server. You will need to re-upload any time you make changes to a Web page.
IMPORTANT NOTE: Whenever you make changes to your local copy of a Web page, you must first Save those changes on your computer before uploading the revised page to the server. Failure to click SAVE prior to uploading a page will result in you uploading the page without the changes you have made.
Alternative Publishing Method
The method listed above for transferring files to a Web server is quite common and can be used to transfer files across long distances. In fact your Web site could be hosted on a server anywhere in the world and you could upload files to that server as easily as if it were in the next room. However, there are other ways to publish your Web files.
An alternative method is to copy your files to a disk and deliver the disk to your ISP or Web Administrator who will copy your files from the disk to the server.
|
|
|
A Web page is just that, a single page. A Web site, on the other hand, can hold anywhere from one page to thousands. These pages can be secondary and tertiary pages in relation to the first Web page. As the number of pages in your site increases, managing the growing number of images and links and making changes to the site become daunting tasks. Composer will work fine for creating and managing a small Web site. You can now add multiple pages within your site and create relative links to them.
Important: Remember to develop a Navigation bar for your pages to help visitors to your site move about the different sections.
Considerations for Large Web Sites
Larger sites require the use of a full fledged Web site management program. Web site development programs, such as Macromedia's Dreamweaver and Microsoft's Frontpage help Webmasters keep track of hundreds of folders, files, graphics, and hyperlinks that make up the typical Web site.
There are an abundance of great Web authoring and Web site management tools on the market. In fact the field changes so rapidly that is is impossible to keep up with the changes. To find the latest and greatest Web authoring and Web site management tools do a keyword search in a search tool of your choice.
Steps in Creating a Web Site
It may seem strange to introduce this topic towards the end of this teaching reference after we have already created our Web page (even a very small two-page Web site.) There is a method to the madness.
Many Web authors jump right into Web site development before completely thinking through and working site details with all of the principals involved. Such a rush to creation usually results in redesign and rework later. Now that you have seen, worked with, and used many of the elements of a Web page/site you have a better idea of just what issues need to be considered and discussed prior to and during the creation of your real Web site. With a bit of experience under your belt, the following topics will make more sense to you.
There are basically three steps involved in the creation of a Web page or Web site: Design, production, and distribution.
Design
To start the process, gather the Web development team to discuss and agree upon the look, feel, and function of the site. Decide upon responsibilities for page creation, updates, maintenance and so forth. Make sure editorial, graphic design, and technical people are included in design talks and that all agree on the look, feel, and function and that technical features are doable. There are three main items to consider.
- Goal Definition: Determine exactly what you hope to accomplish with the site. Establish goals for the content on the page, number of pages, and usefulness to your students and staff.
- Information Architecture: Make sure the editorial, graphic design and technical folks agree on what features will be included in your site (interactivity, search engine, forms, ???) and that what you hope to accomplish will work. Site structure must be examined and agreed upon. The Webmaster or team leader will work with the technical folks in generating server "permissions" for team members allowing only assigned team members to write to certain files on the Web server.
- Interface Design: Editorial, graphic design and technical folks must agree on how the site will look, feel and function. Speed and graphic design considerations must be balanced. The site's internal link structure or navigation bar should also be determined at this point. How will visitors move around the site?
Production
The following are items to consider during production and publication:
- Content Creation: Create a time table for team members to finish drafts and final versions of their sections.
- Scripting and Programming Needs: Editorial and design people need to work with the technical folks to identify and generate necessary scripts and programs.
- Testing: Before presenting your Web to the world test all of its functions on a server that is not open to the public.
Distribution
Create and Register your URL: It is a good idea to select and register an Internet address or URL (Uniform Resource Locator) early in the Web development process. Your URL should be short, catch, and easy to type and remember. You can register a URL with the following sites:
Currently, the cost is $70 for the first two years and $35 per year after that.
Activity: Think of a URL that you might want to use and check to see if it is available at Register.com or at Networksolutions.
|
|
|
| Web Authoring and Site Management Programs Summary | |
There are four primary tasks in creating a Web page or site:
- Creating text
- Inserting images
- Creating hyperlinks
- Managing files files which might include uploading and downloading files to and from a Web server
In this teaching reference we have examined all of these topics and given you the basic tools necessary to begin the creation of a single Web page or even a simple Web site. Remember that there is an abundance of free reference material on the Web regarding every aspect of Web authoring. When in doubt
- Click HELP and read the instructions.
- Do a keyword search on the Web for your area of iterest.
- Post a question to a Newsgroup.
- Read a book.
- Ask a more experienced author for assistance.
There is no substitute for experience in becoming an accomplished Web author.
Resources
At MySimon.com you may quick search for current prices of popular Web Authoring software programs.
|
|
|
| Help Others Find Your Site | |
Most of the Internet search programs are based on keyword searches of site registrations. In order for friends and potential customers to find your Internet site you need to register your site with all of the major Internet search tools. This is done by going to a site such as:
- Submit It (http://www.submit-it.com/) - register your site with multiple search engines, there is a charge
|
|
|
Feedback on this Workshop
Congratulations! We're Done!
For questions or comments about this workshop, please contact JaneBrown at P.R.B. Corp. (jane.brown ---at--- prbcorp.com)
|
