Creating a Web page using Netscape Composer 7.x

Download Netscape 7

I. Starting a new page

 To begin, click on the File menu, pull down to New Document and over to Composer page.   Save the document. Your "home" page should be titled index.html and every page thereafter should have the .html suffix.  Your page title should be one word--no spaces.  The only characters you can use in your title are the dash and underscore (-_ ) Your index.html URL will be your home page. For Cameron faculty it will be http://www.cameron.edu/~yourlogin (http://www.cameron.edu/~karenh). Other pages will have the same URL adding a slash and the title of the page after your login. My Canada pictures are http://www.cameron.edu/~karenh/Canada.html.  It is case sensitive after the domain name.  For example:   www.Cameron.edu will get me the same page as www.cameron.edu.  But www.cameron.edu/~KarenH will not go to www.cameron.edu/~karenh.

II.  Text
Type (or copy/paste) the text you want to include in your web page.  You may change font, color, size, style and justification on the composition toolbar.
 
Click the pull down menu on the left to change Heading settings.  The color chip on top changes the color of the font, the bottom one changes the background color.      The next menus change font size, color, style, bullets, numbers, indentation and justification respectively. The text must be highlighted to apply settings.  In the Format menu, you can modify the font.  (*note: Choose a common font. The font must reside in the viewer’s machine or it chooses a default font.)  
 

III.  Copying clip art
 

You may copy clip art from various "free" sources on the WWW. I have provided a few locations for you under the WebTutorials and tools section. To copy a graphic, put your mouse on the graphic, right click and pull down to save image as or save picture as. Direct your Save in pull down to a folder in which you are working. (Mine is generally on the desktop.) The file name will default to its created name. You can change the name without damaging the graphic, but don’t add an extension.  You should save the graphic in the same location as your HTML page.  The name of the graphic must be one word--no spaces.

IV.  Inserting clip art  

You may add clip art that you have saved or scanned. All images must either be in GIF  JPG or PNG format. Store all the images you intend to use in the same file as your html file. To add the image, click on the Insert Image button on the right end of the top toolbar. Click on the Choose File button beside the Image location dialogue box. Choose the folder for the stored image, choose the image and click on open.  You'll have to insert Alternate text (text that pops up as the image is loading or replaces the image when the user turns off images).  If you prefer not to use alt. text, clic k the corresponding radio button.   Experiment with the other tabs.  

Dimensions allows you to set a specified heighth and width.  It will default to the size of the image unless you insert different dimensions.  NOTE:  Don't use this feature to decrease the size of the image because it will not decrease the file size.

Appearance will allow you to specify wrapping, so that your text wraps around the image according to your input.  You will also use this tab to put padding or borders around the image.  The top image to the right has a 2 pixel border.  The bottom one has no border.  

The link tab is discussed below.


V. Links
If you want to connect text or images to another location (hyperlink), highlight the text and/or image and click the link icon in the right end of the top toolbar. In the Enter a web location.. box, type the URL (Uniform Resource Locator) of the link to which you want to connect. (http://www.cameron.edu) To make an email link, type mailto:name@place.ext without spaces.  Hint:  Consider launching a browser in another window and just copying and pasting the URL into the web location field.  To copy, highlight the URL from the browser and then hit Ctrl + C.  To paste, put your cursor in the  location field and hit Ctrl + V.  This is much easier when the URL is long.

VI. Anchors 
An anchor is a link on the current page (intradocument link). To create an anchor, highlight the destination (target) text and click on the Insert menu and select Named Anchor. Next, highlight the text you want to link and click on the Link button.  Click on the arrow of the Link Location field and select the desired anchor.

VII. Tables

Because html doesn’t allow extra spacing or tabs, you must use tables to create multiple columns.

To create a table, click on the table icon in the upper right toolbar. Input the desired number of rows and the number of columns.  Then determine the border width.  Insert "0" if you don't want the border to appear. You may also choose a width  percentage or pixel width.  Using percentages creates a relative table that will change with your resolution, monitor size or browser window.  

 A fixed pixel width will remain the same and might require horizontal scrolling if the window is not large enough.    To add content, simply click in a box and type your text or insert your graphic. 

You may change the background of a cell by clicking the background color chip in the formatting menu. (See II above)

Modify your table attributes by clicking in any box and selecting the Table menu.

Insert a table within a table cell by selecting Table--Insert--Table.

You may delete it by clicking in any box and selecting Delete in the Table menu.

VIII. Horizontal Rule Lines

IX. Page Colors/backgrounds
 

To customize your colors and backgrounds, choose Page Colors and Background in the Format menu. You can change your text colors by clicking on the color boxes. You may customize your background color using that button. If you prefer an image for your background, check the Use Image box and input the and click Choose File and choose an image you’ve downloaded (just like clip art). This option will tile an image to create a background. Avoid backgrounds that are too "busy." Set your page title from Format--Page Title and Properties.  The title of your page appears in the task bar, at the top of your browser, in search engines and in the bookmark of the browser when a visitor bookmarks your page.  The more specific the title, the better for search engines to locate your content.

X. Browse

To preview your document, you may click the Browse button. This option allows you to examine your document before it is published. The appearance will be just as it will look once it’s on the Web.

XI. Publish 

Click the Publish icon in the top tool bar.
Outside of Cameron:
To publish your page on the world wide web, you must have a server and know it's ftp (file transfer protocol).  Once you have the ftp, insert it in the Publishing Address field on the Settings tab.  This procedure will publish your HTML page and all the graphics that are included in the page.  Then set up the Publish tab as indicated below.
Cameron University Procedures:
Before you can publish, you must have a Public_html folder in your CUOK account. Create a special directory public_html in your home directory by typing MakePublicHtml (case sensitive) at the $: prompt after logging in to CUOK. This step only has to be done once. Thereafter, when you publish, you must simply put the web page into the public_html folder by the following method:

Click on the publish icon.  In the  Publishing Address: window, type ftp://ftp.cameron.edu/.  The HTTP address will be the address of your home page.  At CU, it's http://www.cameron.edu~username.  If you can't remember your password, call x 2454 and ask the helpdesk to reset it.  

Then click the Publish tab.  Title your page in the Page Title box (if you haven't already done so--see IX). Include .html in the file name or it will default to .htm. The Index page is the only one that has to have the "l" but it’s best to be consistent. In the Site subdirectory... type public_html.  Leave thes images in the same location.  In the Input your User name and password for the CUOK server. You may save this information and use the default button for future publishing. Click on Publish to publish. At this point you can go to the address through Netscape and view your published Web page! (http://www.cameron.edu/~username/filename.html)

XII. Editing

After you have published your page, you may edit it at any time. Go to the page you want to edit and choose edit page from the file menu. You may edit as desired and then publish again.

XIII.  Etc.
This tutorial covers the basics.  I encourage you to explore the menus of each area to continue to refine your web designing capabilities.  Try this extensive tutorial for more instruction.