March 7 Web Design Lab Class

Creating a Web Site in Netscape Composer: Step by Step

for POLI 328A

See http://www.alexandrasamuel.com/netpolitics/webingredients.html for text and images you can use for this exercise.

NOTE: I strongly recommend that you write at least a draft of your paper in a word processor before you turn it into a web site. Then you can decide the best way of organizing and presenting your site in order to support the content of your paper.

How to…

A) Create a new page:

1. From the Communicator task bar, choose Composer. This will open a new page in Composer.

2. For each additional page, click the New button in the Composer task bar.

B) Save a new page:

1. When prompted, name this blank page (e.g. “Home”). This will be the title that appears at the top of the browser window.

2. When prompted to save your file to the hard drive, create a new folder or directory called yournamesite. Then name the file (“yournametest.html”), using all small letters.

C) Enter text on your page.

1. Click in the blank area of Composer, and type a line of text.

2. Type or paste additional text from a browser or word processor.

3. If your text quotes or draws on another source, you will need to reference it. Footnotes are difficult to create in a web page; instead, cite your source in brackets at the end of the relevant quotation or sentence, as in (Samuel, 2002). Then include the full bibliographic information on a separate page of the cite, using a standard bibliographic format, such as: Last name, first name. “Article title.” Journal Title. City: Publisher, Year.

D) Insert a hyperlink.

1. About hyperlinks: A hyperlink is a reference to another web page. Hyperlinks typically appear as blue underlined text (though you can change the way hyperlinks look on your page.) When you click on a hyperlink from within a browser, the browser loads the page whose address is contained in a hyperlink. A hyperlink consists of 2 parts: the text that appears as a link on your page, and the address that link refers to.

2. To create a hyperlink:

a. In your browser window, find a web page that you want to link to. Note the name of the web page. Highlight the full address of the page (“http://….”) in the address bar, and choose Copy from the menu bar.

b. In Composer, click the Link button.

c. Enter the name of the web page you’re linking to in the “link text” box.

d. Type or paste the full address of the web page in the “link location” box.

e. Click OK. Your link text should appear in blue in the Composer window.

3. Alternate method:

a. Type the name of a web page you want to link to. Select the text you want to turn into a hyperlink.

b. Click the Link button. The text you have highlighted will appear under “link text.”

c. Type or paste the full address of the web page in the “link location” box.

d. Click OK. Your link text should appear in blue in the Composer window.

4. Creating hyperlinks for web sources you are citing in text such as (Samuel, 2002).

a. Select the author’s name from within the in-text citation (in these example, you would highlight the word “Samuel”.)

b. Click the Link button. In the link window, enter the address for the article or source you are citing. Click OK.

c. The author’s name should now appear as a hyperlink.

E) Insert a graphic in your page.

1. Find a public domain graphic you want to use in your page. Save it to your hard drive by right-clicking on it and choosing Download image to disk. Make sure to preserve the .gif or .jpg extension at the end of the filename.

2. In Composer, click the Image button. This opens the “image properties” window.

3. In the “image properties” window, click on Choose file. Navigate to the image file you just saved, and click Open. Do NOT alter other image properties such as size, since this will usually distort the image’s appearance.

4. In the “alternative text” box, type a description of your image. (This makes your site more accessible to people with slow browsers, or visual impairments.) Then click OK.

5. You will now see a box in your Composer window, with the “Alternative text” text inside the box.

6. Save your web page again.

7. Confirm that your image has appeared by clicking the Browse button. This loads the page in the Netscape browser window, where your image should appear.

F) Create a table.

Tables provide an easy way of controlling the layout of your web page.

1. Click the New button in Composer to create a new page.

2. Click the Table button. Choose your number of rows and columns (I suggest 3 columns, and 5 rows).

3. Set the border width to 0 pixels. This makes the table invisible to viewers.

4. In the middle column of the top row, enter the title for this page.

5. In the middle column of the 3^rd row, paste a paragraph of text.

6. In the middle column of the 4^th row, insert an image. Select the placeholder that appears in your table, and hit the Align center button (it looks like several rows of lines, centered above each other).

7. In the middle column of the bottom row, paste another paragraph of text.

8. When you view your page in a browser, your text and image will be nicely centered and spaced.

G) Create a navigation structure.

1. Click the New button in Composer to create a new page.

2. Save this page as “yournametemplate.html”.

3. Click the Table button. Create a table with 1 row and 5 columns, and click OK.

4. Click inside the table that appears, and click the Table button again. The “Table properties” window appears.

5. Click on the Cells tab. Under “selection”, choose Row from the pulldown menu. This means that any changes you make will apply to the entire row (and since this is a single-row table, to the whole table).

6. Under “background color”, choose a colour you like – a colour different from the background colour in your main Composer window. Then click OK to close the Table Properties window.

7. Type text in each of the 5 cells in your table. The first cell should be called “home”. The other cells will correspond to the other major parts of your paper. Suggested cell names: 2 = “Introduction”. 3= “Evidence”. 4=”Conclusion” 5=”Sources”. Keep track of your cell names in the table below. This table is now the navigation bar for your site.

8. Select the text in cell 1 (“Home”). Click the Link button. A link window will open, with the link text already set as “Home”.

9. In link location, enter “home.html” (no caps). This file does not exist yet, but you will create it shortly. Enter the name of the link location (“home.html”) in the chart below, under “file name” for cell 1.

10. Make sure there is a checkmark next to “URL is relative to page location”, Then click OK to close the link window.

11. Repeat steps 8-10 for each of the cells in the navigation bar. Make sure to give each link a different link location. Each location should be the name of a file, ending with .html. Suggested names for your link locations: 2=intro.html 3=evidence.html 4=conclusion.html 5=sources.html

12. Save your page again. You now have a template page with a navigation bar that consists of 5 hyperlinks to 5 file locations within your site. Now you need to create these 5 pages.

13. Choose the save as command from the menu bar, and save your file with the name “home.html” (corresponding to the link location you chose for the first cell in your navigation bar.)

14. Create a second table underneath the first table, this time to hold your content. Make sure it has at least 3 rows and 3 columns. (You can always add more rows later by ctrl-clicking or right-clicking on the table, and choosing Table Insert…insert rows.)

15. Go to the bottom right cell of your table, and type “next >>”.

16. Select the text “next >>”, and click on the Link button. Under link location, enter the name of the file that will contain the second part of your site (“evidence.html”.)

17. Make sure there is a checkmark next to “URL is relative to page location”, Then click OK to close the link window,

18. Choose the save as command again. This time save your file as “intro.html”.

19. Go to the bottom right cell of your table, select the text “next >>”, and click on the Link button. Under link location, enter the name of the file that will contain the third part of your site (“conclusion.html”.)

20. Make sure there is a checkmark next to “URL is relative to page location”, Then click OK to close the link window,

21. Choose the save as command again. Save your file as “evidence.html”.

22. Go to the bottom right cell of your table, select the text “next >>”, and click on the Link button. Under link location, enter the name of the file that will contain the last part of your site (“sources.html”.)

23. Make sure there is a checkmark next to “URL is relative to page location”, Then click OK to close the link window,

24. Choose the save as command again. Save your file as “conclusion.html”.

25. Go to the bottom right cell of your table, select the text “next >>”, and delete it.

26. Choose the save as command again. Save your file as “sources.html”.

27. You should now have 5 files to hold your content: home.html, intro.html, evidence.html, conclusion.html, and sources.html. You also have a sixth file, yournametemplate.html, which you can use to create additional pages (which you will then need to link into your navigation structure).

28. You can now insert text and images into each of the 5 files. The files will be linked by their common navigation bar, which will allow people to move between each page of your site. Readers will also be able to move between the content pages of the site by clicking on the “next” buttons.

	Link name	File name
Cell 1 (“Home”)
Cell 2 (“Introduction”)
Cell 3 (“Evidence”)
Cell 4 (“Conclusion”)
Cell 5 (“Sources”)

H) Adding another layer to your site’s structure.

This allows you to break the evidence section of your site into several shorter pages.

1. Open your template page (“yournametemplate.html”).

2. Create a second table, this time to hold your content. Make sure it has at least 3 rows and 3 columns.

3. Go to the bottom right cell of your table, and type the text “next >>”.

4. Select the text “next >>”, and click on the Link button. Under link location, enter “evidence2.html”.

5. Make sure there is a checkmark next to “URL is relative to page location”, then click OK to close the link window.

6. Save the file as “evidence1.html”.

7. Go back to the bottom right cell, and select text “next >>” again. Click the Link button again. Under link location, type “evidence3.html”. (You will be replacing the text “evidence2.hmtl”)

8. Make sure there is a checkmark next to “URL is relative to page location”, then click OK to close the link window,

9. Save the file as “evidence2.html”.

10. Go back to the bottom right cell, and select the text “next >>” again. Click the Link button again. Under link location, type “conclusion.html”. (You will be replacing the text “evidence2.hmtl”)

11. Save the file as “evidence3.html”.

12. Open the main evidence page, “evidence.html”.

13. Enter a title for the first part of your evidence (the material that will appear in “evidence1.html”). Select this title, click on the Link button, and enter “evidence1.html” under link location.

14. Make sure there is a checkmark next to “URL is relative to page location”, then click OK to close the link window.

15. Repeat steps 12-13 for the other two evidence sections.

16. Go to the bottom of your page, and select the text “next >>”. Click the Link button. Under link location, type “evidence1.html” (replacing “conclusion.html”).

17. Save the file and close.

Advanced graphics tips:

You may find it a bit limiting to work with graphics as they appear on the Internet. If you want to resize the images you find, or create your own graphics, here are some tips:

Screen captures can be a great way of illustrating your discussion of a web page. A screen capture is like a snapshot of whatever is on your desktop, or of a window within your desktop. You can take a snapshot of a web page, and then use arrows or circles to draw attention to pieces of the page. Here’s how:

To take a screen shot in Windows:

· The PrintScrn button copies the entire screen to the clipboard; you can then “paste” into Word or Composer

· Alt-PrintScrn captures just the active window (e.g. the browser window) to the clipboard.

To take a screen shot on a Mac:

· Hold down the Shift and Cmd (apple) buttons, and press the “3” key. You’ll hear a camera noise.

· The desktop will be saved as “picture 1” on your desktop or on the root folder of your hard drive.

If you want to create or edit your own graphics, you’ll need some sort of image editing software. Many computers come with free, simple, image editors. If you have a Windows machine you may have some version of “Paint”. If you have a Mac, try using the Drawing or Painting components of AppleWorks. You can also use Powerpoint for very basic tasks (like creating headlines that you want to save as images, or resizing images); Powerpoint will let you save your file as a GIF or JPEG (see below).

If you don’t have any of these programs installed on your computer, you can download free or trial “image editing” software programs from web sites like www.tucows.com or www.cnet.com/downloads/. For Windows, try PaintStudio Lite. For Macs, try BME. (But note I haven’t personally tried either one – they just sound promising). It’s beyond the scope of this class to teach you how to use these programs, but you may be able to learn them quite quickly if you experiment and refer to the included help files.

When you are ready to save your image, you need to save it in a web-friendly format. The two most common formats are JPEGs (files with a “.jpg” extension) or GIFs (files with a “.gif” extension). You have to choose the format from the “save as” window of your image editor; you can’t just attach the extension. Use GIFs for simple, cartoony, or blocky images; use JPEGs for more complex or photographic images. For example, you should save screen shots as JPEGs.

You can use your image editing program to create headlines in non-standard fonts. If you want to use a font other than Times, Verdana, or Arial on your web page, your best bet is to create your text in an image editor, and save it as .gif file. Then insert the text image into your web page, just the way you’d insert any other image.

Web site architecture