0. Basic Set-up

• Create a folder on the desktop (use your name if you like).
  
• 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 from the links across the top.
• 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 1 row, 1 collumn, 650 pixels (not percent), 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 cells 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 to 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 1 row, 2 collumns, 650 pixels (not percent), and border 0.
• Click OK.

• Once you have the table, put the cursor in the table cell on the left and click the table icon on the toolbar again.
• Select the cells 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 twice for some space.
• Type in names for various pages in your site and hit enter after each one (you might start with Exercise 1, Exercise 2, Exercise 3, etc. for writing we will do later) and hit enter after each one.
• Highlight the text and make it a bulleted list by clicking the bullet 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.
• Click OK.

4. Insert content into main table.

• Select the table icon from the toolbar.
• Click the table tab.
• Type in 15 for padding (this will create some space around your text).
• Enter down to create some space and line up the cursor with your bulleted text to the left.
• Type in a short description (just freewrite to get some material in the space).

• Enter down to the bottom.
• Select the image icon from the toolbar.
• If your image and html file are in the same folder, just type in the file name (gmulogo.gif for example).
• Type in GMU logo in the alternate text.
• Select the appearance tab.
• Under align text to image select "wrap to the left."
• Select the link tab.
• Type in the gmu url: http://www.gmu.edu
• Deselect show border around linked image.
• 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. Continue experimenting.

• 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.
• Change font colors:
  • Highlight text.
  • Select format, and then text color.
  • Select desired color.
  • 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.
• Also check out the resources page for more Composer tutorial links.

7. Repeat this process to create other pages.

• As we do exercises in class you will often need to create new pages and link them from your main index page (it doesn't matter if you use striaght html, Composer, Dreamweaver, etc.).
• Once you create a new page, go back to the original index page.
  • Download it to the desktop you are working on.
  • In Composer select file in the top left, then open file.
  • Select the index file in your folder.
  • Click open.
• Highlight the Exercise in the bulleted list in the left table.
• Click the link icon and make the text a link to the new page.
• Put exercise1.html (or whatever you decide to name the file) in the destination box.
• Make sure that you also make a link from the new page back to the home/index page.