Home  ·  Hours  ·  Library Catalog  ·  Magazines, Journal Articles, Newspapers  ·  Contact Us

Create Your Own Homepage Creating and Publishing A Homepage Using Netscape Page Composer

Note: These instructions work best with Netscape 7.x or Mozilla 1.x.   Features have changed since Netscape 4.7x and Netscape 6.x.  Netscape 7 and has mainly three features:

1. Navigator - A graphical World Wide Web browser that links to millions of web sites all over the world
2. E-Mail and Newsgroups - An Email/newsgroups program to send and receive email messages
3. Page Composer - A web page editor that allows you to create or make changes to your homepage.

For a comprehensive web style guide and other information from the Yale University Center for Advanced Instructional Media, visit http://info.med.yale.edu/caim

Getting Started

Adding and Manipulating Text

After typing text into your home page, use the mouse to highlight all or some of the text. You can change the properties of highlighted text using the buttons shown below.

To Change Paragraph Styles: There are a number of styles, including 6 heading styles (numbered 1 through 6). Heading 1 is the largest, while heading 6 is the smallest. Position the cursor anywhere in the paragraph you want to stylize. Click on the arrow next to "Normal" in the style box to display the drop down list, then select the style you want. Examples of the 6 heading styles are shown below. These header tags will automatically insert a blank line after the header.
 

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

 

To Change the  Appearance of Text Characters: From the toolbar, you can change the color (clicking actually on the black square) ( ) or make size of your text smaller ( ) or bigger ( ).   You can also choose Bold, (B), Italics (I) or Underline (U).

 To change the font of the text, you need to go to the Format pull down menu and select Font.   In Netscape 7 in addition to the generic plain font styles of Variable Width or Fixed Width, there is also Helvitca, Arial, Times, and Courier.  Select one of these to format your screen.  By default, your text is in the Variable Width font.   

To Change the Horizontal Alignment of Text and Images: The horizontal position of text affects an entire paragraph, so simply place the cursor anywhere in the paragraph and click on the desired alignment button. To indent more than one paragraph, start selecting text anywhere in one paragraph and end the selection anywhere in the last paragraph. You can increase or decrease the indentation of text using the first two alignment buttons. Notice that the left, center, and right alignment buttons are in a drop down list, as shown to the right.
 

Add Background Colors

In Netscape 7, setting the Background Color can now also be done from your toolbar, by clicking on the white square of the Black/white square icon:  ( ).  A selection will appear from which you can choose a background color.  Keep in mind that your background color should contrast nicely with the color of your text (for example, no dark colors with a black background, such as dark violet.  No too light colors with a white background such as yellow).  A good guideline is to have only dark colors with a light background and vice-versa.  The goal is to make your page readable, before making it look "cool."

Add Page Title All web pages must have a title.   To title your page, go to the Format pull down menu and select Page Title and Properties.  In the title line, enter a descriptive title for your page.  NOTE: giving the page a title is different from saving your page and naming the .html file.  The title will be visible in the title bar of the browser window, so choose words that reflect the content of your page.  In the Author line, enter your name.  In the Description Line, type one to two sentences that describes what your page is going to be about.  All of these fields will be picked up by search engines and will be useful to those who are viewing your web page.

Save Your Page 
Give your new page a file name by choosing Save from the File menu, or by clicking on the floppy disk icon shown above. Enter a file name that ends with the file extension .html, such as mypage.html.You can also specify the drive and directory where you want your file to be saved. Click the Save button in the Save As window to save the file.
 

View Your Page in the Browser 
The Page Composer editor displays your home page in a format that is very close to how it will look in a browser.However, there are a few features that only work or display properly in the browser view.
 

 

Browser (Navigator) Includes Back, Forward, Reload, Home and Bookmark buttons to help you navigate on the World Wide Web. This view shows you how others will see your homepage.  You cannot make any changes to a page in the browser view.	Editor (Page Composer) Includes Save, Publish, Browse, Spell, Image, Table, and Link buttons. Also has text font, color, and alignment tools similar to those in a word processing program.  This view lets you make changes to your homepage.
To switch to the Edit View, pull down the File menu and select Edit Page, or click on the icon with the blue triangle and pen symbols in the task bar at the bottom of the screen.	To switch to the Browser View, pull down  the File menu and select Browse Page, or click on the Preview button (with the yellow ship's wheel) at the top of the screen. If you haven't saved your changes, you will be asked to do so.

 
 
 

Create Hypertext Links to Other Web Sites 
To create a hypertext link to a different Web page, highlight the text that you want to be the link, then click the link button. In the text box labeled Link Location, type the URL or Web address of the location you want to link to, such as, http://www.whitehouse.gov.  If typing in long URL's is not for you, you can also Copy and Paste.   Have aanother Netscape Navigator window open (Browse) and go to the page you want to link.  Click in the URL line once and then select Copy from the Edit pull down menu of the Netscape Navigator Browser.  Go into your Netscape Composer page you are creating and click on Link from the top toolbar.  Once the cursor is blinking in the Link Location line, on your keyboard hit Control and V at the same time.  The URL you have copied is pasted into the Link Location line.  Click on OK.

If you simply want to link to another one of your own Web page files in the same directory, enter the file name in the blank space, such as, mypage1.htm or click on Browse File to choose from among the files in your directories.

Create Hypertext Links to Other Parts Within a Page (Creating Anchors)  

Sometimes you may have extra long pages and may want to create what are called Jump Links, those that link to somewhere else on the same web page.  To be able to link to another point, you create what is called an Anchor.

1. To create an Anchor, move your mouse next to the text you want to link to.  Click next to the text until you see the cursor blinking.
2.  Go to the Insert  pull down menu and select Named Anchor.
3. Create your name for the anchor.
4. When you are ready to link, highlight the text or image you want to link to the anchor, just as you would if you were linking to another web page.
   
5. Go to Link from the top toolbar and click inside the Link Location line.
6. From Link Location select the pull down menu arrow on its right.  You will see a list of all anchors you currently have on your page.
7. Select the anchor that matches the name you gave it.  You have now created a Jump Link!
   

Make a  Bulleted or Numbered List of Items 
You can create lists and have the items  preceded with a bullet or an automatic number. Simply type the list, with each item on a separate line. Then select the text in the list and click on the desired button.  When done with the list and creating a new paragraph and it turns into another line of the list, check to see if the List icon from the toolbar is currently active.  If it is, simply click on it again, and the line will turn into a regular text line of a paragraph.

Graphics 

Graphic images can make your home page more interesting, attractive, and informative. You can get computer images by scanning an existing picture, creating your own using a graphics program such as PowerPoint or Photoshop, buying clip art or photographs on disc or CD-ROM, taking pictures with a digital camera, or by capturing them off the screen from the Internet.

There are many free and non-copyrighted graphic images available on the World Wide Web. You can find thousands of graphic images by searching on the keyword clipart in any search engine.  Regardless, you should always look carefully on the web page itself that features the graphic images whether there are any special restrictions of use.  Always contact the web page author or institution when in doubt.

Another good place to find graphics is at the following Web sites:

http://webclipart.about.com  This is the best place as the Guide of this site will only link to sites whose authors have given some type of permission to use the images stated.  Make sure to read any 

http://www.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics 

You can also search in Google Images: http://images.google.com/, but make sure you enter clipart as a keyword.  For example: +clipart +chickens .  

Capture graphic images off the screen: Graphics files must have the file extension .gif or .jpg (such as button.gif), and may be stored in any directory. You can capture and save graphics from any Web page by placing the cursor over the graphic you want to save, and clicking on the right mouse button, then choosing Save Image As. Make sure to note the directory location and filename of the saved file.
 
 

Insert Graphics
To add graphics to your home page: Click on the Image icon.      Next to the Image location text box, click the Choose File button. Then locate the graphic image file and click Open. Set any other parameters and click OK.

Remember that many resources on the World Wide Web, including graphics are protected by copyright. Download only those graphics that are clearly offered for free.

All Graphics Must have Alternate Text:  The Americans with Disabilities Act has a clause that requires all web pages to be accessible to all users, including users who are blind or sight-impaired.   A program that verbally recites the contents of a web page must be able to tell the user what an image is, then simply say "image."  Here's how to create "Alternate Text."

1. Click on the Image icon: 
2. In the Alternate Text line, type in words that describe the image.  For example for the Image button listed above, I titled it "Image Button."
   
 
3. To check to see your graphic has text, view your page in Browse, go to Page Info, and select Media.  All images on your pages will be listed.  Select the file that matches your image, and see that Alternate Text has something listed besides "Not Specified."

Link an Image to Another Web Site

You can turn a graphic image into a hyper link the same way you make a text link. Simply click on the image, then click on the Link button. Enter the URL and click OK.

Make a Table 
 

You can create a table to display information in columns and rows. Position the cursor where you want the table to appear and click on the Table button.  Enter the number of columns and rows in the corresponding boxes and click OK. You can then place information (text or graphics) into the cells of the table. If the text or graphics are already in your home page, just cut and paste or drag and drop them into the desired table cell. This is one way to place a block of text next to a graphic, as shown here.  Click the right mouse button anywhere in the table to get to the Table Properties where you can  set a variety of preferences using the Table, Row, and Cell options.

 

To hide the border lines:  Right click the table and select Table Properties, then, click the check box next to Border line width to turn off the borders.

This handout is an adaptation based on a handout originally designed for a web pages workshop given frequently by the University Of Arizona Library to students, faculty, staff, and even the general public (I was one of many librarians who had conducted this workshop, using the original handout).  The workshop was two hours long.  Many thanks to the hard work of the Undergraduate Services Team of UofA's Library who came up with the workshop and handout.  Thanks also to the web page design skills of Laurie Eagleson, Undergraduate Services Librarian.  This particular version is for Chabot College Library's course:  Internet Skills (Library Skills 3).