Creating Web Pages using Netscape Composer 4
Why Create Web Pages? How do I Create Web Pages? | What Can I do with the Pages I Create? | Basic Concepts | Approaches to Web Page Construction | Netscape Composer | Text | Graphics | Color & Background | Hyperlinks | Tables | Publishing your Pages | University Policies | Helpful Sites
Web pages provide communication using text and images with links to other pages. Web pages are multimedia; they can contain text, graphics, audio and video. The Web is a new communications medium with exciting possibilities. You will create web pages with Netscape Composer, part of the Netscape Communicator software suite.
You can post them on the server space that the university makes available. See the documents How to Create and Publish Individual Web Pages and Official Web Page Policies. Each user has a 10 megabyte space for pages. You can also post pages on sites outside of Loyola. There are several places that offer free Web page hosting, such as Angelfire, GeoCities, Tripod and Xoom. (See Yahoo! category Business and Economy > Companies > Internet Services > Web Services > Website Hosting > Free Web Pages for a longer list.)
Web pageA plain text computer file using HTML.
HTMLHypertext markup language, the instructions to a browser on how to display a page.
BrowserComputer software that requests and displays a web page. Runs on a computer with Internet access.
ServerComputer software that responds to requests by browsers to provide a web page over the Internet. Also refers to the computer running server software with an Internet connection.
Link (or hyperlink)An area of a document which will take the user to a new document. Can be text or a graphic.
Web siteA computer with an Internet connection, web server software, and one or more web pages.
Home pageThe first page the user sees at a web site. It usually acts as a navigation tool to other pages on the same site. Not all web pages are home pages.
TemplateAn outline of a web page. Provides consistent formatting for pages on a site.
Before you start
Plan, plan, plan. What information needs to go into your pages? Who is the intended audience? How will the material be divided up? How will viewers move from page to page?
Style and appearance
You can control text size, color and font, insert images, and color the background. It is not possible to completely control the appearance of a Web page to each and every user; there are different computers with different monitors and different Web browsers with different settings.
You must have permission to use text or graphics that you have not created. If not, you may be violating federal law. (Copyright help is at http://lcweb.loc.gov/copyright/ and http://fairuse.stanford.edu/.)
What do you want to do?
Set your goals. Break your content into parts (pages). Keep it simple: one topic per page. Consider your audience, but remember anyone can see pages posted on the Internet. Create a consistent look and layout.
How do you want to organize your material?
There are many approaches: chronological, geographical, topical, task-oriented, metaphoric, and more. How will users navigate among pages? Structures can be linear, by table of contents, or multiple links. Consider a mockup of your documents. What’s on the home page? How many pages do I need? How will individual pages be laid out? Is a template a good idea?
Some basic principles
(from Jeffrey Veen, Hot Wired Style. Wired Books, 1997.)
- Be simple. Break up text into sensible length, subject-oriented pages.
- Be fast. Avoid graphics and long pages.
- Be clear. Get down to business by avoiding lengthy introductions. Don’t make users guess how to navigate.
- Beware media. Use only what is absolutely needed. Graphics, audio and video take up a lot of file space and take time to download, especially for those using phone connections. Make text the core of your content.
Netscape Communicator is a package of several programs. The best known is Netscape Navigator, the graphical Web browser. Netscape Composer is software for creating and editing Web pages. Not every function is covered here.
Starting Composer brings up a blank web page. Text can be typed in directly or copied from another document. Composer can also be used to edit an existing web page. Composer has extensive help text; click on Help and drag down to Help Contents. The document comes across the Internet and may take a few minutes to load.
There are pull-down menus along the top: File, Edit, View, Insert, Format, Tools, Communicator, and Help. Left-click the mouse on one of them to see a menu of functions you can perform. Next down is the Composition toolbar. Each button has only one function. Last is the Formatting toolbar.
Do not save files using names with spaces. The name
hockey.htm is ok, but
is not. Use
html as the file
extension; stick with one or the other. Change any graphic file
names with spaces, too. Do not use capitals in graphic file names.
Reuse graphics on several pages to save space. You can use JPEG,
GIF and PNG graphics only. Keep web page files and graphics
together in one folder. Use just one floppy disk without
Adding text as in a word processor: simply type what you want. Formatting can be applied to selected text or to all text typed after the change. Pressing Enter will start a new line. Press the Tab key to move your text over by three spaces.
Headings are used to set off portions of text and indicate their relative importance to one another. Heading 1 is the largest and 6 the smallest. To create a heading, type your text, leave the cursor in the text, and click the down arrow by Normal. You will see the choices for heading1 to heading6, address, formatted, list item, desc. title, and desc. text. A list item is an item in a bulleted list.
Change the font with the next down arrow by Variable width. First you must select the text using the mouse so that it shows up as white against a blue background. Then select a font. Remember that the user will not see this font if it is not available on her machine; they will see a plain font. Be conservative in your choices.
Going right, the next choice is to select font size. The choices are more limited than those on a conventional word processor. Text color is next. The user can override your choices and specify their own default colors. This choice remains selected until you deselect it.
The next three buttons allow bold, italic and underlined text. For those with second thoughts, the Remove all styles button allows a return to conventional text without color, bold, italic or underline in the basic font. It will not remove items from a list.
The next two buttons create a bulleted or a numbered list. Type your text, select it and then click one of these buttons, or click the button and begin typing. A new bullet or number is started after each Enter. To stop creating a list, use Backspace.
Following these are the increase and decrease indentation buttons. This provides an indentation for an entire paragraph, not just a tab. Clicking on the alignment button brings up a set of three small buttons for right, center, and left alignment of text.
These functions will take you a long way in creating web pages. Most of these functions are also available from the pull-down menus. Many have keyboard equivalents, such as control + S for Save.
To add a picture, click on the Image button. This brings up the Image Properties dialog box. Click on Choose File to locate a file on your hard drive. It must be a GIF, JPEG or PNG file. Other files can be converted to these formats with software, e.g, Photoshop.
Pay special note to the buttons showing how text will be formatted next to the graphic. Text can be even with the top, the center or the bottom of the image. Text can also flow around the image.
Additional settings allow for changing the image size, but it can have odd effects. You can also set the amount of space around the image. The Alt.Text/Low Res. button allows you to put in text which will appear for those with text-only browsers or who have automatic loading of images off. To remove an image, click on it and press the Delete key.
You can create your own images with a drawing program such as Paint or Illustrator. Media Services has a scanner to convert printed images, photographs and slides to computerized form. They also have a digital camera to take photographs in computer format. There are also a number of clip art images available for purchase or through the Internet. See Yahoo! Computers and Internet : Graphics : Clip Art for a list.
To save an image from a web page, put the mouse cursor on the image and right click. Drag to Save Image As… and select a location like your floppy disk. Remember copyright! Do not use others' images without permission.
Besides setting text color can be set in the formatting toolbar, it is also possible to set a background color for the page. Click on Format and drag to Page Colors and Properties. In this dialog box, click on the Colors and Background tab. To change the page’s colors, first click the circle next to Use custom colors. Change the color of all regular text, of hyperlinks, and backgrounds from here. Click on the button with the color bar. This brings up a new box with 36 basic colors in it. Many of the dark colors along the bottom are indistinguishable, but true black is in the lower, left-hand corner. Some text and background color combinations are quite difficult to read.
You can make an image a background for a page. The graphic will be "tiled," that is repeated over and over, left to right and top to bottom. Backgrounds should be light and unobtrusive. A strong background will make text unreadable.
Click on the General tab to create a title for your page. This displays in the browser’s top line. It is helpful to let users know what they’re viewing. Author, description, keywords and classification do not appear to the user.
Select some text with the mouse and click on Link to create a hyperlink to another page. This dialog box has a space to directly enter a file name, but it is easier to click on Choose File to locate another web page you've created.
For fancy formatting, such as multiple columns, you must use tables. Click the Table button for the New Table Properties dialog box. The default settings are usually fine, but you will probably need to change the Number of rows and Number of columns. The number of rows and columns can be changed after the table is created. The size of the cells can be altered using the mouse or the Enter key. Table alignment is left, center or right. If border line width is set to 0, the border will not show in the page, but it appears as a dashed line in the editor. Click the gray box Use color to set the table background. Click Format and drag to Table properties to change the table, a row or cell.
Note also the alignment setting. This governs where the table will appear on the page. Tables can be inserted into individual table cells. Click off Border line width for a table with invisible borders. They show up on the screen as dashed lines. A blank column can serve as a spacer or a page margin.
Composer can place your pages to Loyola’s server. Click
the Publish button to see a window like the one at
the left. Your page title and file name should already appear at
the top. Other files to include will list your graphics and are
automatically copied. Under Location to publish to,
(see picture). Type in your user name and password in the boxes
below. Do not click Save password in a public lab!
Remember your disk space is limited to 10 megabytes. Click
All files in pages folder to publish many pages. The
page will be available to web browsers at:
http://www.loyno.edu/~hobbs/discography.html. To erase
files, log in to
nadal.loyno.edu with a telnet
cd public_html. Type
see file names. Type
rm and the file name to
permanently erase it. Publishing a revised file with the same name
overwrites an older version.
- Yale Web Style Guide
- Style Guide for Online Hypertext
- Yahoo!’s Arts : Design Arts> Graphic Design> Web Page Design and Layout and Computers and Internet > Information and Documentation > Data Formats > HTML > Guides and Tutorials categories
- Monroe Library web help pages
- Loyola web page policies
Now you're ready for Creating Web Pages with Netscape Composer Exercises!