Creating Web pages with Netscape Composer

Before we begin
This page was recently restructured. The contents on the World Wide Web are now divided into several pages. The page of introduction to the World Wide Web contains an introduction and a description of the elements that one finds on Web pages and Web sites.
There is also a page containing advices for the creating Web pages, the promotion of the site and the publication. Both following pages are for the conception of Web pages by using Netscape Composer ( this page) or Microsoft Word. There are many of the small advices that are included on these pages. The next page contains a description of the elements that one finds in a Web form page as well as its advantages and the limitations. To end, there is a page that contains the HTML codes that one finds on all the pages of Web. By understanding their functioning, you can compose better Web pages.

To be able to follow this exercise, you should first have on a computer Netscape Communicator. The images that you see on this page result Composer of Netscape Communicator 4.51. The previous versions are slightly different. So, for the exercises of this page, you should copy to a floppy disk of the following images: lignex.gif for the image that will be insert into the Web page, niceblue.gif for the thorough image of the Web page, boulep.gif for the image that will serve as button of navigation. It will be necessary you also the courrier.ppt presentation for the exercise. This is to demonstrate how to download a file other than a Web page. click the blue links and save these images on a floppy disk.

Introduction

What can you find on a Web page?
  • Text
  • Images
  • Dividing lines
  • Hypertext links
  • Navigation buttons
  • Tables
  • A background composed of an image
  • Frames
  • Forms
  • Programming (perl, Java, javascript, asp, xml...)
Most of these elements will be explained on this page. To start, you must open the Netscape Communicator program. It's the series of software that allows you to use several services of the Internet. Normally, it opens first in Netscape Navigator that allows you to " surf on Web ". From this point, it's necessary to open Netscape Composer.
Menu Communicator
*From the Communicator menu, select the Composer option.
OR
*Press the Ctrl and 4 keys.

Adding text

You must always remember that the most important element of a Web page is its contents. A ton of images and special effects will never replace a text that's clearly written.
*Write the following text: This is my first Web page.
*Press twice on the Enter key.
Even if the most important element is the text, it's always possible to change its presentation to make it more elegant or more informative. For that reason, there is a toolbar Composer that facilitates the presentation of the text.
Toolbar for the characters
If you don't see this toolbar:
*From the View menu, select the options Show and Formatting Toolbar.
On this toolbar, you'll find tools to change the presentation of the text and more. In the first place, there is a list of the styles that is of use to headings ( headings ). Followed then by the choice of font. Later, there is a size of fonts. Close, there is a list of the available colors. This choice is even vaster than you imagine it. Then, there are the options most often used for the text: the bold, the italic and the underlined.
But there is more. This toolbar offers you also the possibility of preparing a list "non-ordered", without numbers as well as an orderly list. The next exercise consists in creating a not orderly list.
*From the toolbar, press the Button lists not ordinnéebutton.
You can now begin to write your list.
*Write: List of points.
*Press the Enter key.
*Write: Practice for short lists.
*Press the Enter key.
*Write: very concise.
*Press the Enter key.
It remains that to end the list.
*From the toolbar, press the Button lists not ordinnéebutton.
The list is now ended. It should look like this.
  • List of points.
  • Practice for short lists.
  • Very concise.
The HTML format offers a way of aligning of the text. Buttons and serve for giving or for removing a retreat of a paragraph. The last option serves for aligning a paragraph of text. It's possible to align it on the border of left-handler(left) or right-hand side or to centre the paragraph.
There is also in the menu size(format) of the options to change the presentation of the text.
*Select the first sentence of the Web page (This is my first Web Web page).
*From the Format menu, select the Character Properties option.
*Click on the Character tab.

From this window, you can change the presentation of the text of your page. It's possible to you to change the font, its size, its color as well as to put options of presentation. The next exercise consists in changing a little the presentation of the sentence.
*From the list of possible fonts, select the Arial font.
*Change the color to dark blue.
*Change the font size to 24.
*Activate the Bold style option.
*Press the OK button.
Here is what should be the result.
Text
There are two other tabs under the window Character properties. The tab Link allows you to create a link on the text to bring the reader to another Web page, to bookmark or another service of the Internet. This part will be seen in detail in the part on the links a little farther on this Web page.
The last tab, Paragraph, allows you to change the presentation of a paragraph. The option Paragraph style allows you to choose among one of the styles of presentation predetermined as a Web page.

Adding images

Without wanting to remove from the importance of the text, one of the elements that returned so popular World Wide Web is the capacity to show images. But careful! The Web accepts only three images formats: gif, jpeg and png. For more details of the three image formats, click here to return to the previous page in the part on the images. assure that the images that you want to use are in one of these formats. Otherwise, you should use a software for the conception of images such as Photoshop, PaintShop Pro and several others to convert your image in one of the accepted formats.
The next exercise consists in placing images on the Web page as well as for the bottom of the screen. You will previously have copied files asked at the beginning of this page on a floppy disk. The procedure that follows presumes that you'll take the images required from your floppy disk.
*Press the Button embellishes with imagesbutton.
OR
*From the Insert menu, select the Image option.
This opens a window that offers all the options for an image. These options are under three tabs Image, Link and Paragraph. Under the Image tab, there are the options to choose an image and how to place it around the text of the Web page.

To choose the image

Before inserting an image into a Web page, it's at first necessary to have created it or to have found it among a collection of images on compact disc or on the Internet. assure that there are no copyrights or a registered trademark on the image that you want to use. If you are not certain, don't use it.
*Press the button Choose File...
*Select the reader where is the image looked for. For the exercise, select the reader A (floppy disk 3 ½).
Choice of the reader
*Select the folder (or file) where is the file. For this exercise, there is not it.
*From the list of the images of the folder, select the file of the image. For the exercise, select the lignex.gif file.
*Press the Open button.
Window posting(showing) the name of the file.
*Press the Original button size.
*Press the OK button.
The following image will appear.
Image gif with animation of a process of proudction.
As you can notice it, this image is moving. It's the collection of images one behind the other one that gives the effect of animation. There are several small software that help you to create a full of life image. There is even on this site an animated images Web page that has other examples. The part of the image had also two other options.
There is however a problem. Because the image is a full of life image, Netscape Composer is always going to try to read the file on the floppy disk. To avoid this situation:
*From the View menu, select the Stop loading option.
The image will stop livening up until the presentation of the Web page.

To see these options or to modify the options of the image:

*Double-click on the image.
OR
*Click on the image.
*From the Format menu, select the Images properties option.
OR
*Press the Alt and Enter keys.

Leave image at the original location

Normally, Compose copy the image that you selected in the same folder (or file) as your Web page. However, he can be advantageous to leave the image with the same place; especially if you reuse the same image several times or for several Web pages. However, this is rarely the case.

Use as background

This option is to indicate Composing that you wish to use this image for the bottom of your Web page. It's moreover the next exercise. For the moment, don't select this option.

Text alignment and wrapping around embellish with images

Normally, only a line of text takes place close and at the foot of the image. With these options, it's possible to align the line of text with the height of the image, in the middle or at the foot of the image. Furthermore, it's also possible to surround the image of several lines of text as long as the image is stuck on the left or straight(or right,awkward or straight,awkward or right) border of the screen. For the moment, don't change this option.

Dimensions

So, it's very important "to reserve" the space for the image. In HTML format, the image is not "integrated" into the document. One space is reserved for it. To accelerate the view of the text, it's necessary to indicate how many spaces, in pixels (no light in the screen) that it's necessary to reserve. This accelerates the view of the text and the page because the Browser is not obliged to read at once the image to know the space that should be reserved for it. He can so put the text more quickly around the images.

Space around image

It's also possible to reserve of the space around the image horizontally and vertically. There is, besides, an option to frame(supervise) the image and decide on the thickness (always in pixels). However, this option is rarely used.

Alt. LowRes Text/

Besides the image, it's recommended to add a text that describes the image. This is very practical when the Browser is in the incapacity to show the image. At least the reader knows what should have appeared. There is so now another reason. Even if one does not think of it, there are more and more visual handicapped persons who use the Internet. For them, a description is essential.
The option LowRes allows to show a small image quickly to be then replaced by a more detailed and more impressive image. This option is rarely used because the Browser should possibly load two images instead of one.

The tab Link

As for the text, it's possible to have a link on an image. It's enough to enter the name of the Web page, the " bookmark ", the address of E-mail, a name of file or another service of the Internet. The links are described besides details a little farther of this page.

As for the text, there are also options to align the image. These options are rarely used for an image.


Insert an image for the bottom of the Web page.

The next exercise consists in inserting an image for the bottom of the Web page. It's recommended well to choose the bottom of page to facilitate the reading of the text. If there is not enough contrast between the text and the bottom, the text will be difficult to read.
*Press the button Button embellishes with images.
OR
*From the Insert menu, select the option Embellishes with images.
*Press the button Choose File...
*Select the reader where is the popular image. For the exercise, select the reader A (floppy disk 3 ½).
*Select the folder (or file) where is the file. For this exercise, there is not it.
*From the list of the images of the folder, select the file of the image. For the exercise, select the niceblue.gif file.
*Press the button Open.
*Select the option Uses(wears out) have background.
*Press the OK button.
You will notice that the bottom of the page is now the blue pattern for the image that you selected. There are several software to create capital of pages. There is some more of images already prepared on the World Wide Web that you can use. It's enough a little to look. Compose offer another way of choosing an image as the bottom of Web page. It will be seen toward the end this page.

The horizontal lines

The horizontal lines are used to separate the various parts of a document.
*Having inserted an image, press the button Button lines.
OR
*From the Insert menu, select the option Horizontal line.
A horizontal line will fit in the length the screen.
*To modify the line, double-click on the horizontal line.
OR
*Click on the line.
*From the Format menu, select the option Horizontal line properties.
OR
*Press the keys Alt and Enter.
Menu lines horizontal
*Modify the options to those shown in the image above.
*Press the OK button.
The horizontal line will change format according to the options that you chose. Here is a list of the options with a short description.

Option Description
Height Thickness of the line
Width Width of line. Can be shown in percentage of the screen or pixels (hurt by light in the screen).
Alignment Location horizontal of the line (left, centred or right).
3D shading Put one shadow in the line. Only practical for thin lines.
Extra HTML This window offers the most frequent options. But there are the other options that are not shown. Here is an example: BORDERCOLOR = " BLUE "
Save settings have default This option is very practical if you think of putting several horizontal lines with the same options in your document.

Adding links

The element that differentiates World Wide Web of the other services of the Internet (E-mail, FTP, IRC, Newsgroups...) the capacity of resources of hypertext links is. There are however several types of links: {FTP}
+External link: link on another Web page or on another site.
+Internal link: The term in English is a " bookmark ". Word uses the term "bookmark" and Netscape Composer uses the term " target ". The class(course) ADM1421 uses the term " internal link ". It's the link in the another place on the same Web page that is at present in the screen.
+Link at addresses of E-mail.
+Link to servers ftp, servers gopher or newsgroups that are the other services of the Internet.
+Link to documents.
Fortunately, the concept to create a link is always the same. The next exercises consist in creating links with various elements.

Link on a Web page

The first exercise consists in creating a link on the main page of the university of Quebec in Montreal.
*Make a block with the word This of the first line of the Web page.
*Press the button Link button.
OR
*From the Insert menu, select the option Link.
OR
*Press the keys Ctrl, Shift and L.
The window to create links on the text appears. The first part indicates on that text the link will be placed. In that case, it's about the text This. Down, it's necessary to indicate the address of the Web page, as well as its bookmark (or target) if need be. In the last box, there is a list of the bookmarks of the common(current) page or the page on that there will be a link.
Window of the links
*In the golden box Link to page rent local take off, write the following address: http://www.uqam.ca.
*Press the OK button.
There is now a link on the word This that will bring you to the main page of the University of Quebec in Montreal ( UQÀM) when you'll click on this link.
It's however necessary to pay attention to the address that one gives to the link. If the link is for another Web page of the same site, it's better to write only the name of the page (conceptw.htm for example).
However, if the Web page is on another site, you have no choice to write the complete address. This address always begins by http://that is the name of the service for the World Wide Web ( HyperText Transfert Protocol). Then there is a name of the server where is this page. For the example, it's about www.uqam.ca. To end, there is a name of the Web page.
If it's not indicated, the Browser fetches automatically the index.html file. It's generally the hidden file that contains the list of the files of the folder (or file). It's however possible to you to save a file under this name. It will be whose page by default and should so be the main page of the site. It's moreover the case for this site.

Link inside a Web page or a " bookmark ".

The next exercise consists in creating a link in another part of the same Web page. It's also called a " bookmark " in English or an internal link. It's first necessary to place a " bookmark " or a " target " on the page then to create a link on this one.
*Place the cursor at the end of the Web page.
*Press the Enter key around thirty times.
This is to make sure that the beginning of the Web page is not visible at the same time on the screen. The link will be on this first line. It's now necessary to write a little text before inserting the " bookmark ".
*Write the following text: This is the end of the Web page.
*Press the button Button target.
OR
*From the Insert menu, select the option Target.
Menu of the bookmark or target
It's now necessary to give a representative name to this " target ".
*Write the word: at the end.
*Press the OK button.
Icone for a target
The following icon will appear to indicate that there is a " target " or " bookmark " in this place.
To modify the target:
*Double-click on the icon.
OR
*Click on the icon.
*From the Format menu, select the option Target properties.
OR
*Press the Alt and Enter keys.
Now the " bookmark " is inserted, it's necessary to create a link on this one.
*Place the cursor on the first line of the Web page.
*Make a block with the word Web.
*Press the button Link button.
OR
*From the Insert menu, select the option Link.
OR
*Press the keys Ctrl, Shift and L.
The window of the links will open.
Menu of the link with the target at selected player's end
* assure that the option Show targets in: is on Current page.
*From the list of the available " targets ", select the fine " target ". Press the button OK.
The next time when you'll click the link, it will go to the end of the Web page. You can put several targets to return you to several places on the same Web page; even the beginning.

Link in the E-mail

It's also possible to create a link on an address of E-mail. The next exercise consists in creating a link at your address of E-mail. If you don't know or have not no address of E-mail, use the following fictitious address: jeans tremblay@cie.abc.com.
*Write the following text: You can join me at the following address: jeans tremblay@cie.abc.com.
*Make a block with the address of E-mail.
*Press the button Link button.
OR
*From the Insert menu, select the option Link.
OR
*Press the keys Ctrl, Shift and L.
The window for the links will open.
Window for link
*In the box Link to has page, write: mailto: followed by your address of E-mail or the fictitious address given previously.
*Press the OK button.
Your Web page has now a link at an address of E-mail. But attention! This link will only work if the reader of the page entered certain data the Browser such as: its name, its address of E-mail, the name of it's server of E-mail and its account number. Certain pries allow you also to enter your password.
The reason is simple, it's impossible to send on the Internet of the "anonymous" messages. So, the data is necessary. It's as for that reason that one writes generally the address of E-mail and that one creates a link on this one. If the reader can not or does not want to enter his coordinates, he can always write the address to send it a message a little later.

Link to a document

A Browser is normally only capable of opening a file of HTML format, a Web page as well as the images of .GIF size(format).JPG and " PNG. There are however some exceptions. The pries can improve with one " plug-ins "; software that add features to the pries. For example, Acrobat Reader allows to open files of .PDF size(format). The FLASH module of Macromedia allows to see animations on Web pages. There are also additional modules to see virtual worlds (in 3 dimensions) or have of the music, of video etc. For quite other kind of file, the Browser will ask you if he should open it with one of the software installed on the computer or save the document on a floppy disk or a hard drive.
The next exercise consists in creating a link on a presentation PowerPoint. But the concept applies for any kind of document.
*Write the following text: This is a link to a document.
*Make a block with the word document.
*Press the button Link button.
OR
*From the Insert menu, select the option Link.
OR
*Press the keys Ctrl, Shift and L.
Window for the links
*In the box of the links, write the name of the document. For this exercise, write: courrier.ppt.
*Press the OK button.
As you'll click on this link from a Browser, this one will ask you if he should open or save the document.
To end the section on the links, it's necessary to mention that it's possible to create links towards other services of the Internet. You can create links to servers ftp ftp://nomduserveurftp, in server to gopher gopher://nomduserveurgopher, in newgroups news://nomdugrouped' interest. It's enough to write in the box of the links the name of the service (ftp, to gopher, news) followed of "://" and the address of the server or the newsgroup. Here are some examples.
Ftp://ftp.microsoft.com
Gopher://
News://comp.win95

Adding navigation buttons

A button of navigation is in fact that a relevant image with a link. What does one want to say by a relevant image? It's an image that incites the reader of the page to press this one to have an action: to move towards another page, another place, to open a document, a link of E-mail or another service. At the foot of each of the Web pages of this site, there are navigation buttons to move from a page to another. So, the main page of this site contains an image that allows you to reach several Web pages. The option of power to create links on parts of images is called in English a " imagemap ". This option is not available Composer.
The next exercise consists in inserting a button of navigation on your Web page. In fact, an image with a link.
*Press the button Button embellishes with images.
OR
*From the Insert menu, select the option Embellishes with images.
*Press the button Choose File...
*Select the reader where is the image looked for. For the exercise, select the reader A (floppy disk 3 ½).
*Select the folder (or file) where is the file. For this exercise, there is not it.
*From the list of the images of the folder, select the file of the image. For the exercise, select the boulep.gif file.
*Press the button Open.
*Press the Original button size.
*Press the OK button.
The following image will appear.
Ball clocking(pointing,sticking) towards the left. (Precedent)
It remains that to put a link on this image.
*Click on the image.
*Press the button Link button.
OR
*From the Insert menu, select the Link option.
OR
*Press on the Ctrl, Shift and L keys.
*Click on the tab Link.
Window of the links for the image
*In the box Link to page, enter the following address: http://www.er.uqam.ca/xw/xw999998.
*Press the OK button.
Besides going to the Web page, you could also have gone to a specific place of the page marked by bookmarks.

Tables

Very often, tables are used to show of the data to inform or to compare. But, in the HTML format, they have also another function: be able to align columns of text. Indeed, Web pages have no instructions for columns. So, it's possible to use the cells of a table to feign columns. It's not necessary to forget not to put a preview so that the effect is complete.
The next exercise consists in creating a small table with some of the available options.
*Press the button Button picture(table).
OR
*From the Insert menu, select the options Banks and Banks.
The following window will appear.
Menu of the options of the picture(table)
This part explains the various available options for the creation of a table. It's also necessary to use it to create a table that will be used for the next exercises.
In the first place, it's necessary to indicate how many lines ( rows ) and columns are necessary for the table.
*Enter the number 3 for the number of lines ( rows ).
*Enter the number 3 for the number of columns ( columns ).
It's then necessary to indicate if you want a description for the table. If yes, it's then necessary to say if you want this description above or below the table.
*Select the options Include Caption and Above banks.
These options are going to create a cell titles that will be placed above the table.
The next options consist in determining the frame of the table, the cells and the text.
The option To line line width is to determine the thickness of the border of the table. Normally, one leaves it to 1. If one does not want a border, one puts 0 (zeros). For the exercise, we are going to put an a little more thick border.
*Activate the option Line line Width.
*Place the width of the narrator in 5 pixels.
The option cell spacing is to determine the space, in pixels, between cells. Generally, the spacing is 0 (zeros).
*For this exercise, 1 the option Cell spacing enter.
The option Cell padding is to determine the space between the border of the cell and the text. This space is generally 1.
*For this exercise, 1 the option Cell padding enter.
For this exercise, the width of this table will be 400 pixels. For your next tables, you can determine the width of the table of your choice. There are two ways to determine the width of the table: in percentage of the screen or in pixels (or hurt by light in the screen).
*Activate the option width Bank.
*Enter 400 the second box.
*Between the options % of window and pixels, select pixels.
don't forget to put this last option in pixels. Otherwise, Composer the table will refuse to create and will show you the following screen:
enter a whole number between 1 and 100
It's normal because best that you can carry out is 100 % of the screen. If you see this screen, for the needs of the exercise, change the option of width pixels. The fractions are not allowed.
The option banks min. height serves for determining the minimal height of the table. She can be bigger if you enter enough text.
*For this exercise, don't activate the option Banks min. height.
The last option of this part of the window is Equal column widths. It fixes the width of all the columns to the same size. A little farther in this exercise, the width of columns will be changed and will not be the same. For that reason, this option should be déactivée.
*Deactivate the Equal column width option.
The options of the part Banks Background and to determine the thorough color of cells. It's possible to choose a color or same to place an image inside each of the cells. For the purposes of the exercises, a color will be put in the cells of the table.
*Press the grey button in quoted by the option Use to color.
A palette of color will appear.
*From the list of colors, select the one of your choice.
If you want the other colors, you can press the button Other at the foot of the window.
Options to determine colours
This window offers you several ways to choose a color. You can choose among basic colors, personalized colors, united colors or from the index RGB (Red, Green, Blue). This last index allows you to enter a number between 0 and 255 for the levels of red, green and blue. This offers you an incredible palette of a little more than 16 million colors. You can a little experiment to find a tint that pleases you.
But it's always possible to place an image inside. As for the part on the images seen first, it's enough to indicate the name of the image to the option Uses(wears out) Image.
After all these options to compose the table, here is the result.
Outline of the picture(table)
The next exercises will consist in personalizing the table to meet the needs better as well as to demonstrate you its other possibilities.

Write the text in the box of introduction

*Write the text following in the box of introduction: Activities of day.

Change the width of a column.

In its conception, Composer looks a width identical to all the columns of the table. The next exercise consists in changing the width of each of the columns of the table.
*Place the cursor in the first cell of the table.
*From the Format menu, select the Cells Properties option.
*Make sure to be under the Cell tab.
Options for the cell
*Click on the Cell width option.
*Change the number to 200.
*Change the option of size of % of table with pixels.
*Press the OK button.
The first column of the table will have now a width of 200 pixels. It's now necessary to repeat this operation for the second and third column of the table. However, their width of both other columns will be 100 pixels and not of 200 as for the first column. Here are the operations:
*Place the cursor in the second cell of the first line of the table.
*From the Format menu, select theCells Properties option.
*Make sure to be under the tab Cell.
*Click on the option Cell width.
*Change the number to 100.
*Change the option of size of % of table with pixels.
*Press the OK button.
And now, for the third column of the table.
*Place the cursor in the third cell of the first line of the table.
*From the Format menu, select theCells Properties option.
*Make sure to be under the tab Cell.
*Click on the Cell width option.
*Change the number to 100.
*Change the option of size of % of table with pixels.
*Press the OK button.

Insert one arranged in the table.

To have enough space to write all the text in the table, it's necessary to add one supplementary row.
*Place the cursor in any cell of the first line.
*From the Insert menu, select the options Table and Row.
Row will fit below the line where is at present the cursor.

Place a cell on several lines.

It's first necessary to remove the cells of the line then to use the Colspan command "to spread(widen") the cell on several columns.
*Place the cursor in the first cell of the table.
*From the Edit menu, select the options Delete table and Cell.
The cell was erased by the first line of the table. It's necessary to repeat the operation second time only to have a cell on the first line.
*Place the cursor in the first cell of the table.
*From the Edit menu, select the options Delete table and Cell.
The next operation consists in indicating Composing to spread the only cell of the first line over the 3 columns of the table.
*Place the cursor in the only cell of the first line of the table.
*From the Format menu, select the Cells Properties option.
*Make sure to be under the tab Cell.
The option cell span of the cell
*Enter the number 3 in the columns box.
*Press the OK button.
Image of the picture(table) with a cell spread(widened) to the width of the picture(table) for the first line
The first cell extends over all the width of the table. This is interesting to write titles or long descriptions. The option Cell spans can also apply so much to columns and to rows. Regrettably, you'll have noticed that the options of width of the columns of the table were erased at the same time as the cells of the first line of the table.
*To solve the problem of width of columns, repeat the operation of width of columns but with the cells of the second line of the table.

Change the color of a cell

*Place the cursor in the first cell of the table.
*From the Format menu, select the Cells Properties option.
*Make sure to be under the tab Cell.
*Click on the grey box, or of color, next to the Use Color option.
*Select the color of your choice that is different from that at present used for the table.
*Press the OK button.
As you have just carried out it, every cell can have a different thorough color. If you want to practise the elements that you have just seen, to try to answer the following table.


List of the activities for week

Schedule of the activities

Lun

Mar

Sea

Game(set)

Ven
Morning
X




X
A the afternoon


X


Evening
X




X
Certain cells of the table above don't seem parce what the contents of cells are empty. It's enough to put a space in the empty cells so that it appear.

The Web page properties

As for the text, the images, the links and the other elements of the Web page, the Web page has too its own characteristics or properties. The next part consists in demonstrating you these properties and how to set favor.
*From the Format menu, select the Page properties option.
The following screen will appear.
First window on the properties of a web page
Under the General tab, there are the options to give a title to the page, the name of the designer of the page as well as the descriptions that will be of use to research sites to classify your Web page.
The box Title serves for giving a name to your Web page.
*In the Title box, enter the following text: Front Web page.
When you'll see your Web page, the title of your page will appear on the titles bar of the window; as this:
Block title of the web page having the title of the page
The box Author indicates the name of the designer of the Web page.
*In the Author box, write your name.
The box description is a comment that you can write. You are free to write the comments of your choice. The section Other attributes is useful for research sites. They read the text in boxes Keywords and Classification to help them to classify your Web page from their categories (Internet, computers, education...). To give you an idea of the categories of research sites, go to the main page of these sites. You will see their categories and can then decide in that your Web page would be better located.
*Click on the tab Colors and Background.
Second window on the properties of a web page
Under this tab, you'll find the options for the presentation of the Web page. You can determine the color of the text, the links as well as the bottom of the Web page. Under the part Colors page, you'll find the options for the color of the text and the links of the Web page. If you use the option Use viewer browser colors, you let to the reader determine his preferences in it's Browser. If you use the option Use custom colors, it's the designer of the Web page (you) who takes the control of colors. This can be necessary if you use a bottom of screen dark or want a presentation outside the common. Here is the list of the options so that a short description.

Option Description
Normal Text Colour of the common text of the Web page
Link Text Colour of the text with a hypertext link.
Active Link Text Colour of the hypertext link as the reader clicks the link.
Followed Link Text Colour of a hypertext link the reader of that has already visited recently.
Background Colour of the bottom of the Web page
However, it's necessary to pay attention not to choose, at no moment, the white color as the common text. This can give a right-hand Web page. But, at the time of the printing of the Web page, the Browser does not print the bottom of the page. And especially, the text in white does not go out on a white sheet. So, the Web page that the user would have wanted to keep in reference is not printable if the color of the text is white. It's always possible to the reader to deactivate colors predetermined by the designer (to see preferences and fonts for Netscape). But this returns the task of the more difficult reader for nothing.
Below the options for the color of the text and the links, there is an option to insert an image for the bottom of the Web page. This option has priority by top the option for the thorough color of the Web page. For the bottom of the page, you can have an image or a color. But not both at the same time. As you have it can be noticed, there is already an image that is chosen as the bottom ( niceblue.gif ). It was one of the exercises on the images at the beginning of this Web page.
The last option of the page, Save these settings for new pages, is interesting if you want to use these same options to create several Web pages for the same site. No need to choose them again every time you add a Web page to a site.
*Click on the META Tags tab.
Third and last window on the properties of web pages
Under this tab, you'll find supplementary options better to identify your Web page. It's enough to write the name of the méta tag that interests you in the box Name as well as its value in the Been worth box and to press the button Set. You don't know it, but you have already used some META Tags. Under the tab General, the option Author, Description, Keywords and Classification are META Tags. You will find a more complete list on the following page under the section Meta Tags as well as their possibilities. {Meta Tags}

Save the Web page

The result all this work is to be capable of saveing your Web pages "to publish" them then on the Internet. This part of the page consists simply in saveing the result of all the exercises that you carried out until now. This will allow you then to see the result and to transfer the whole to a folder that will be accessible to all the readers of Web pages.
*From the File menu, select the option Save As.
*In the box of the upper left corner, select the reader of Floppy disk 3 ½ ".
Select the reader and the folder in that you go to save your Web page, it's time to give a name to your Web page.
*For this exercise, enter the box Name: page1.
*Press the Save button.
If you did not make the previous exercise on the properties of Web pages, Composer will ask you for the title of your Web page.
Name of the web page
Otherwise, Composer will save your Web page as well as the images on your floppy disk. If you had already saveed first time, Composer could ask you to save second time your images.
This images is already protected. Do you want to protect second time?
Because the images are already saveed on the floppy disk, it's useless to save it second time; unless you brought modifications to the image.

Preview of the Web page.

To see the result of the Web page is important. This is your chance to see your result and how the readers are going to interpret your Web page. It's also the time to see the defects of the page and to correct them before the general public sees it.
*Press the Perceived buttonbutton .
OR
*From the File menu, select the Browse Page option.
Composer will possibly ask you to save the page if you brought corrections. You should save your modifications before being able to continue. When you'll see the page, you can verify some points.
+Verify the functioning of the links: the word "This" on the main page of the UQÀM, the word "Page" at the end of the Web page and the button of navigation on the page of conception of Web page with Netscape Composer.
+Verify the adaptation of the image in the right-hand side of the screen.
+Verify the presentation of the table.
If the result is not what you waited for, re-verify the instructions of this page and bring so necessary corrections.

Publish the Web page

It remains the last stage; that to publish the Web page so that the public can see it. But previously, it's necessary that you have an account that is available on the public. Otherwise, it's impossible to transfer your Web page and the images to make them available on all.
*Press the Button Publishbutton.
Window of the options of publication
The window above will ask you for some data to be able to transfer your Web page, and the images that are included in your public folder. To reach your folder, it's then necessary to give the name of the server, preceded of ftp://, your account number onto this server and your password.
Regrettably, I have never managed to make this command work ! It's for that reason that I recommend you to use FTP by using WS-FTP or some other similar program.
Problem
Like Word, Netscape Composer has its small problems. But this can be problematic if your're not careful. Composer has some difficulty with the links on pages of relative addresses. The problem of the links does not appear when you have a link at an absolute address, that begins by http://, but an address of another Web page that meets itself in the same folder when you don't have to save the Web page. To avoid this situation, write some lines of your Web page and save it as soon as possible. add links to a saved first time the Web page.
If at the time of creating a link you see that it begins by file://, and that the link is for another Web page that is in the same file as the one that you compose, remove this part and leave only the name of the Web page. For example, a link file://c|/accrel.htm should be renamed accrel.htm. This will avoid you some stress.

No comments:

Post a Comment