Netscape Composer
From TechHelp
Contents |
[edit] Creating a Site and the Index Page
The first step in this process is to open your web design software, for this handout the pictures and steps reflect Composer. (Remember the software may be different, but a little poking around in another product will let you do all the same steps). Go to the Start Menu and select Netscape>Composer from the Program Menu. The program opens with a blank page to start with.
A good habit to get into is saving the page right away, and for web site design is to create a folder to save your information in. Composer, unlike other programs, doesn’t set up this folder for you. So you will want to create this folder and save your page at the same time. Go to File>Save. This will bring up a window where you will want to add information about your page.
Put the name of the page as you want it to appear in the Internet browser’s title bar, for example Mr. O’Brien’s Social Studies Page, and then click OK. This will open a window that lets you save the file in a specific location on your computer.
At this point you want to create a new folder where you will save all of your web sites information. To do this click on the New Folder icon 
at the top right hand side of this screen, give the folder a name that identifies the folder as your web page. Once you have created the folder open the newly created folder. The first page that you are going to create is called the index page, this page is your homepage, and it will be the first page that people see. When you work with web pages you shouldn’t include any spaces, capital letters, or apostrophes. To simulate a space in the name of a page use a dash (-) or underscore (_).
At this point you will have to move outside of Composer. To make sure that you saved the document and to create some structure for your site you will want to open the folder you just created from your desktop by going to My Documents>the folder you just created. You should see a file named index.html in this folder.
You will want to create two other folders to help organize site. In the folder you just opened right click and select New Folder. Name this new folder images, make sure to keep the name in lower case with no spaces. Create a second folder and name this folder pages, this will help you keep your information well organized and easy to find. However, don’t move the index page outside of this folder or into subfolders, the index page should be kept at the top level of your files. Now you should have a folder that looks like this.
[edit] Formating the Index Page
Now you are ready to start adding content to the actual page. One helpful strategy to organize the page is to insert a table inside of the page. To do this go to Table>Insert>Table.
This will open a window that lets you set the properties of your table.
Depending on the way you want to organize your page determines how you will set up your table. When you are at the table menu screen there are some areas that are very important to the way your page will appear to your audience. The first thing to consider is the Size of the table. You probably want to have at least two rows and one column. Border Size changes the size of your table’s border. This is measured in pixels (a pixel is; the basic unit of the composition of an image on a display). When the Border Size is set to 0 you will see a dashed line that represents the edges of the table. An important piece of this menu is the Width box. You will want set the number to 100 and make sure that you select in percent from the drop down menu next to the width. This allows you to design a page that changes size as the person viewing it changes the window size.
If you click on the Advanced Edit button you will see a menu that appears so that you can change other attributes of the table.
These include;
- Cell Padding is the amount of space between content inside of the cell and the cell wall.
- Cell Spacing is the amount of space between each cell.
- Border is the width of your tables outline, set this to 0 if you don't want any borders around your table.
Once you have set your parameters for the table click OK. You can always come back and change the table if you don’t like the way it works.
To change the table parameters later on you need to select the table then go to Table>Table Properties this will open a window where you can edit the properties of the table.
Notice that you can also change the Table Alignment which will make the table stay at the left, right, or center of the page. You can also change the Background Color of the table if you would like in this menu.
[edit] Adding Text
Adding text and changing text in Composer is similar to Word. The main concern when dealing with text is not entering it, but viewing it on the web. Most web browsers will read three typical fonts Arial, Times Roman, and Sans. You can use other fonts, but don’t rely on these fonts to appear on every computer.
A few things to keep in mind while you are typing your text are:
- Make sure that your text color and background don’t conflict, otherwise people might not bother even looking at the site.
- The idea of point size and justify aren’t as concrete in web design, different screen sizes and different computers will change the way the page is seen.
- Hitting return leads to the illusion of double spacing, to make the text stay closer together use Shift>Return.
Don’t let these things scare you, the fix is not difficult and you will find that your eye becomes more critical as you develop your design skills.
[edit] Adding Images, Colors, and Backgrounds
One thing about web pages is that all of the content that you add to each individual page needs to be uploaded with your pages when you upload it to the server. So if you want to add a picture to your web page you need to make sure that picture ends up with the rest of your site. To make sure that this happens we created the folder called images earlier. So before you add an image to your page you will want to copy the image into that folder. If your image is on your computer right now open the location of the picture. Then right click on the picture file and select Copy. Now you want to go to the image folder in your web site folder and right click and select Paste, now you have a copy of your picture in your web site folder. Now we are ready to insert our image, so navigate back to Composer. Then go to Insert>Image which will open a window that lets you select your file.
To choose an image click the Choose File button in the image properties window. Now go to your web site images folder and select the image that you just pasted into the folder.
Note: if you are adding pictures from the Internet or pictures off of a digital camera and you know that you will only be using them for your web page save them in your web sites image folder right away, this will save you from having to copying and pasting them there.
After you have selected the image your image properties menu should look like this.
You can choose to add alternate text if you would like.Note: Alternate text is useful for people who use screen readers due to poor eyesight. If you don’t want to use alternate text select the Don’t use alternate text check box.
Now that you have selected your image you want to make sure that it will fit inside of your web page. To do this click the Dimensions tab at the top of the image properties menu. This will change the menu to look like this.
You will want to set a Custom Size and make sure that the Constrain box is checked. Normal pictures on web pages are usually easily seen at roughly 350 x 350. To change the size type 350 into the height or width boxes, since you have the constrain box checked you will make sure the image isn’t distorted. Typing 350 for one dimension will change the other dimension. Once you have change the dimensions go ahead and click OK.
The last thing you may want to do that can include images is having a background for your web page. One thing to watch is the contrast between your background and your text, as this can be problematic to your audience. To change the background you need to go to Format>Page Colors and Background, this will bring up a window for changing the properties of your page.
To insert a background image click the Choose File button and choose your background image from your images folder.
Background Color
If you want to change the color of the background of the page you need to select the Use custom colors button then simply click on the colored button next to Background and you will be able to choose a color from a color picker.
[edit] Creating Links with Text and Graphics
Links in a Web page are designed to point to specific places on the Internet or within your Web site. To insert links you will want to first highlight the text you are going to hyperlink then go to Insert>Link. This will bring up a window that lets you point to the file where the hyperlink will go.
Here you can either paste the link in to the text area, or you can browse for a page that you have created by clicking on the Choose File button at the end of the link text area. Once you have told Composer where you are linking click OK. Now click off of the highlighted text and you should see a link. If you ever have to edit a link you will want to go to Format>Link properties.
To insert a link that people would click on a picture instead of the actual text you would want to follow the same steps as above, but instead of highlighting the text you would highlight the picture.
[edit] Creating Additional Pages
To create additional pages you would go to File>New Composer Page this would open another page for you to create. Make sure to save it and give it a name right away. Since this is your second page you can save it under any name you would like, perhaps something like homework, just remember no capitals or spaces, and save it in your pages folder.
