An easy guide to webpage creation using Netscape Composer

Netscape Composer lets you create your own web pages and publish them on the web. The language of web pages is HTML (Hypertext markup Language). You don't have to know HTML to use Composer; it is as easy to use as a word processor.

Toolbar buttons let you add lists, tables, images, links to other pages, colors, and font styles. You can see what your document will look like on the Web as you create it.

First, launch Netscape Composer. This is an add-on application to another popular browser named Netscape Navigator. You can find Netscape Navigator in the Novell-delivered application window after having logged in the CEU network.

Create a new page from the Netscape Navigator browser

• Open the File menu, choose New, and then Composer Page. A Composer window containing a blank page opens.

To edit a page you're currently browsing in Navigator:

• In the Navigator window of the page you're viewing, open the File menu and choose Edit Page. You see a Composer window that contains the page you're viewing.

To create a new page in Composer:

• Click the New button in Composer's toolbar.

To open a page in Composer:

• Click on the Open button in Composer's toolbar

Saving and Browsing Your New Page

To save a document as an HTML file:

• Open the File menu and choose Save or click the Save button on the Composition toolbar.
• If you haven't already given your page a title, Composer prompts you to do so. Composer displays the page title in the browser window's title bar when you view the page in the browser. The document's page title also appears in your list of bookmarks if you bookmark the page.
• Composer then prompts you to enter a filename and specify the location where you want to save the file. Make sure you preserve the .html extension in the filename.

Important! It's imperative that the file names do not contain a space, capital letters or Central European special characters. If they do our links won't work later on. We should always substitute spaces with underscores.

To change the filename or location of an existing HTML file:

• Choose Save As and select a different filename or location.

When you save a page in Composer, all parts of the page (the HTML and the images), are saved locally on your hard drive. If you only want to save the HTML part of the page, you must change the Composer preference for saving pages.

View your page in a browser window :

• Open the File menu and choose Browse Page (or click the Browse button in the Composition toolbar). If you have not yet saved your document, Composer prompts you to enter a page title, filename, and location. The Composer window remains open behind the new Navigator window.

Setting Page Colors and Properties

• Format>Page Colors and Background
• to set the properties of your page: Format>Page Title and Properties. Set general information and properties for your documents, such as authoring information, keywords.

About the Colors and Background panel

Clicking on the "Use custom colors" radio button lets you specify how to use the browser's colors for linked text and document background or specify custom colors for the current document. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you’ve specified and then click Close to accept the changes and exit the dialog box.

• Custom colors
  Allows you to specify the color for Normal text, Link, Active Link and Followed Link text. Click the button to display the color palette and select the color you want. Sample text in the color you've specified appears to the right.

• Background
  Click this to display the Color dialog and choose a solid color to appear as the background for the current document.

• Use image
  Click Choose file to select an image file from the directory list and set it as background.

Note: Background images appear tiled and override background color selections.

Inserting an Image

• Place the insertion point where you want the image to appear in your document.
• Choose Image from the Insert menu or click the Image button on the Composition toolbar. The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.
• Click Choose file to select an image file from the directory list.
• Important: If you move an image file from the specified location, it will no longer appear on your Web page.

Editing an image

• after inserting the image, double click on it to access the Image Properties window
• Location tab: use it to add alternate text and to check the "URL is relative to page location" box
• Dimensions tab: use it for resizing your picture (insert new values for width and height)
• Appearance tab: use it to se a border around your image (dimensions should be specified in pixels), or to wrap the text around it (Align text to image)
• Link tab: use it to set the image as link

Working with Hyperlinks

A hyperlink is an active part of a document. When you click a hyperlink, you can link to:

• Parts of the same Web page. (named anchor)
• Files on your computer (html or doc./PDF files). (local link)
• Computers on the Internet. (remote link)

1. Select the text or image you want to create a link for.
2. Choose Link from the Insert menu or click the Link button on the Composition toolbar:
3. for Internal (local) links: Choose file>choose the file you want to link to
4. for External links: type the full address of the page you want to link to (http://www. etc). For these links to open in a new window, after typing the address, click on the "Advanced Edit" button>in the Attribute field select "target">OK>OK.
5. for Anchors: this involves 2 steps, inserting the anchor then linking to it.
   • To insert the anchor, click in the page where you need to link later on. Choose Insert>Named anchor. An anchor like icon appears, it will only be visible in Composer.
   • Save (this is important).
   • To link to that anchor, select the text you want to set as link>click the Link button>click on the drop-down menu in the box above the "Choose File" button>select the named anchor you inserted earlier (it should appear as #name).
6. for Contact links type the mailto: tag in the blank field above the "Choose File" button followed by an email address. The address should not be separated from the tag by a space sign.

When you link to a local document, you’re linking to a document on your computer; documents you reference don’t have to be in the same directory (it’s a good idea though). Linking to a remote document means you’re linking to somewhere on the Internet rather than on your local disk.

Just as with text, you can configure images to behave as links in your documents. When you click a linked image, the Navigator window displays the page that the image is linked to.

• Insert an image on your page.
• Select the image and then click the Link button on the Composition toolbar. You see the Link properties dialog box.
• Specify a link location.

Working with tables

Tables help you a great deal in setting the layout of your page, structuring information on columns, highlighting a navigational menu, etc. Working with tables in Composer is similar to a certain extent to MS Word: you can add rows, columns, modify their width, merge cell, split cells, set borders, set a certain background, etc.

• Inserting a table: Insert menu>Table>specify the number of rows and columns your table should have as well as its width (should be expressed in %) and thickness of its border
• Set the column width: select the column>right click on the selected cells>Table Cell Properties>under Size>Width>set a value in % (note that you should set the width fol ALL your columns)
• Set cell content alignment: right click on the cell>Table Cell Properties>under Content Alignment>set the vertical and horizontal alignment
• Set cell background color: right click on the cell>Table Cell Properties>under Background color>click on the square to activate the Color palette window
• (Re)Set table width and border thickness: right click inside the table>Table Cell Properties>select the Table top tab>change the width or thickness of border
• Set other table properties: right click inside the table>Table Cell Properties>select the Table top tab>set table alignment in the page, spacing and padding
• Delete a table, column, row or cell: Table menu>Delete>
• Select a table, column, row or cell: Table menu>Select>
• Inserting rows of columns: Table menu>Insert>
• Merging cells: select the cells you want merged>Table menu>Join selected cells

FTP

FTP is the software to transfer our pages from our computer to the server. At CEU we use LeechFTP which you can find in the Novell Delivered Applications folder, in the subfolders named Nador / Communication / FTP.

• The host or URL name is www.personal.ceu.hu
• Click File / Connect
• Your username and password have been given to you by the teacher of the course (if not, please contact the Computer and Statistics Center).

After entering them into the boxes, click on the OK button and the connection is established. You need to change the Local directory from c: to your p: drive, click on the Local menu and choose the Change Directory option.

Now you can transfer your files from the Local System window (left) to the Remote System (right) by selecting the file and pushing the upload files button on the top of the screen. Also you can download the files from the remote system to your computer the same way.

Modifying your page

Whenever you make a change on your page you always need to go through a 3-step-procedure:

1. Make the change in Composer, e. g. insert a new picture to your index.htm file. Save the changes
2. Connect to the server by FTP as described above. Upload the files you have changed, in this case index.htm and the image file you have used, e.g. image.jpg.
3. Disconnect from LeechFTP, using the File/Disconnect menu.

View the changes by the Netscape Browser.

• Open your page on the server www.personal.ceu.hu/students/00/Your_Name
• Press the Reload button on Netscape. This will show you the latest version of your page.

Converting word documents to HTM documents

For having word to html conversion the simplest way is saving it in html format.

Required steps:

1. Start Microsoft Word
2. File - Save as - files of type: htm, html
3. Now you can open the htm file in your Netscape Composer and make more changes

Good luck.

Additional help

Note that these instructions are only a guide. For additional help, you may want to try the Learning Word module found under the Help command on the main menu bar.

You might also want to consult the links to other online tutorials presented in the Web 1 course page.