Composer 7.0 Tutorial

0. Basic Set-up

  • Create a folder on the desktop (use your name if you like).
  • Start a word doc, save it to the folder.
  • Surf the web for some links on any topic of interest, copy paste 4 or 5 urls into the word doc.
  • Download the new Mason logo to your folder.
    • put cursor over image
    • right click on mouse
    • select save as
    • select your folder on the desktop
    • click save

1. Start a web page in Composer.

  • Open Netscape.
  • Click Window
  • Select Composer.

2. Create a table to have a header across the top.

  • Put the cursor in the top left corner.
  • Select the table icon.
  • Put in one row, one collumn, 650 pixels, and border 0.
  • Click OK.

  • Once you have the table, put the cursor in the table and click the table icon on the toolbar again.
  • Select the cell tab.
  • Select a color by clicking on the box next to "background color" (a green might go with the Mason logo we'll put in later).
  • Under "content alignment" select middle and center.
  • Click OK.

  • Put the cursor back in the table.
  • Hit enter give some space.
  • Type in a title for your page (again, you can just use your name).
  • Hit enter again for some more space.
  • Highlight the text and hit the +a icon to increase the size of the text.

    • Click file from top left corner.
    • Select save.
    • A little dialogue box appears for the title (which goes across the very top of the page)
    • Enter the name you'd like (Jim's Web Portfolio, for example)
    • When the save as box appears, select your folder on the desktop.
    • Type index.html in the dialog box
    • Click OK.

3. Create a table with two cells for a links bar on the left and a main table on the right.

  • Put the cursor in the top left corner under the first table.
  • Select the table icon.
  • Put in one row, two collumns, 650 pixels, and border 0.
  • Click OK.

  • Once you have the table, put the cursor in the table cell of the left and click the table icon on the toolbar again.
  • Select the cell tab.
  • Select a color by clicking on the box next to "background color" (maybe yellow).
  • On width put in 150 pixels.
  • Click OK.

  • Put the cursor in the left table, hit enter once for some space.
  • Type in names for various pages in your site (might start with week 2, week 3, week 4, etc. for responses) and hit enter after each one.
  • Highlight the text and make it a bulleted list by clicking the icon in the toolbar.

  • Enter down to create some space.
  • Space bar over and line up the cursor with your bulleted text above.
  • Click the link icon in the top tool bar.
  • Type your name in the top line under text.
  • Type in mailto:your-email-address into the second line under location.

4. Insert content into main table.

  • Enter down to create some space and line up the cursor with your bulleted text to the left.
  • Space bar over about the same amount of space that you've entered down.
  • Type in a short course description (just freewrite to get some material in the space).
  • Space bar over the extra lines to line up with the first line.

  • Enter down to the bottom.
  • Space bar over about 3/4 the way to the right corner.
  • Select the image icon from the toolbar.
  • Browse for your folder on the desktop.
  • Select the gmu logo.
  • Type in GMU logo in the alternate text.
  • Click OK.

***WARNING: When you browse to select an image, Composer creates a path to that folder and image on the desktop. When you upload the page this link won't work because the file and image are no longer on the desktop. If your html file and image file are in the same folder (both on the desktop and on the web), all you need to do is type the filename of the image (gmulogo.jpg, for example) into the dialog box. See the HTML Tutorial for more explanations of links.

5. Once the page looks satisfactory, save it again.

  • Select file from top left corner.
  • Select save.

6. Repeat this process to create a second page.

  • Instead of entering a course description into the main table, create a bulleted list.
  • Add in the links you gathered earlier.
  • Create different link categories if necesssary (i.e., one for other syllabi, one for resources, etc.).
  • Select "main/home" from your bulleted list in the left table.
  • Click the link icon and make the text a link back to the index page.
  • Put index.html in the destination box.

  • Once this page is satisfactory, save it to your folder as links.html.
  • Go back to the main/home page.
    • In Composer select file in the top left, then open file.
    • Select the index file in your folder.
    • Click open.
  • Select "link" from your bulleted list in the left table.
  • Click the link icon and make the text a link back to the links page.

7. Continue experimenting.

  • Once you have two pages going and linked together, explore the program and try things out.
  • For example, you can set the default link colors:
    • Select format, and then page colors and background.
    • Select use custom colors.
    • Click on the color boxes to select various link colors.
    • Click OK.
  • Look over the Composer Tutorial for more possibilities.
  • The current Composer Tutorial is for version 4.7, but you should have enough sense of version 7 at this point that you can translate.
  • If you do something weird or that doesn't work, you can always select Edit, Undo.
  • If you have questions, flag me down.

<< Back to Syllabus