Cynthia Beth Rubin

Authoring a Web Site with Dreamweaver or Netscape Composer

Dreamweaver, Adobe Go Live, and Netscape all generate standard HTML.

Although each program has its own strengths and weaknesses, you can move from one to the other, or change elements by hand.

Instructions below for Dreamweaver and Netscape Composer can be applied to other authoring tools, with only slight differences

1. Organize everything that will be on the site into a single folder.
You may have folders within this folder.

• Create Two folders:
  
  • Working versions (or discarded versions)
    
  • Web Upload
    
    
• Working Versions includes original Photoshop files, and the original individual frames of any animations. It also includes original text documents, which are still in Word, Appleworks. etc.
  
  
• Web Upload must include every image that you are using, properly saved as a .gif or .jpeg. It must also include flash files.
  
  
• If your text was saved as .html, it can go in the "upload folder", but otherwise should stay in the working versions folder. Later you can cut and paste text directly into your web page.
  
  
• Work on the HARD DRIVE, not on your ZIP disk. Make sure that you ZIP is not in the drive when are working.
  
  

2. Open up a new Document in Dreamweaver or Netscape Composer

• Click on the Launcher to Open Dreamweaver or Netscape.
  (or go to Applications on Hard Drive)
  You may have to use "Find" to locate the Application.
  
  
• An Untitled Document will appear.
  
  
• If you are using DREAMWEAVER you must define your Site
  Go to SITE in the top menu
  Go down to DEFINE SITES
  Add your site to the list
  do not put down the http:// address -- you will not be uploading directly from Dreamweaver
  
  
• SAVE the page in the Web Upload Folder.
  Go to FILE and down to SAVE
  Be sure to leave the .html in the name, and to make the name SHORT without spaces (such as short.html)

3. Choose the Basic Colors for the Page

• DREAMWEAVER:
  Go to Modify in menu
  Go down to Page Properties
  
  
• NETSCAPE COMPOSER:
  Go to Window in menu
  Go Down to Show Inspector
  
• Click on the little box next to background, text, etc. A color dialogue box will appear.
  
• Use the HTML Color Picker to choose colors (this will show automatically in Dreamweaver)
  
• Be sure to stick to Web safe colors (web safe colors have repeated numbers and/or letters, such as 0033FF, or 993300.

• You may insert a Background image. Be sure that it is in the Web Upload Folder, and that it stays there!
  

4. Type in Text

• Go to the area where you want text, and simply type
  
• Text can be copied from Simple Text or Word Processing Software.
  
• Highlight the text, and choose the font category. You should not designate a font that is uncommon, as it must be in the viewer's system or it will not load, and the viewer will see the page with a default font.

• Highlight the text, and choose the size. Go as small as you can - pages fill up fast and people do not like to scroll through big type! The type you are reading now is "1", the yellow type above is "2".

• Highlight the text, and choose the alignment. It can only be left, right or center. BUT you can use tables, and make the table left, right or center, and then put the text into one side or the other of the table.

5. Insert Images and Animations

• Go to the area where you want to insert an image, and click.
  
• Go to Insert in menu
  Go down (and over) to Image
  Look for your image in the browse dialogue box. It should be in your Upload Folder, or the software will write an incorrect path and the Web Page will not work.
  
• Do not attempt to resize the image in the Web Software.
  Return to Abobe Photoshop, ImageReady, Painter, or whatever image processing software you are using.
  
  
• Remember the smaller the image, the faster the page will load. Use the 80% rule to force yourself to reduce the image.
  • make the image the size that you think is best
  • look at in the web page
  • when it looks right, return to your image processing software (Photoshop, etc.) and reduce the image by 80%
    
  Insert the image again - otherwise the browser will "stretch" it to fit the original dimensions.
  

• Highlight the image, and choose the alignment. It can only be left, right or center. BUT you can use tables, and make the table left, right or center, and then put the image into one side or the other of the table.

6. Create Tables to control Placement

• Go to Insert in menu
  Go down (and over) to Table
  
  
• Choose the number of Rows and Columns that you want. Remember, some of these can be BLANK, but you can use them to control spacing!
  
  
• Begin by choosing size in percentage (90% is good if it is to fill most of the page)
  
  
• Make the Border 0 unless you want a border (if it is not 0 you will have a border)
  
  
• If you are inserting text, you will need cell padding (5 is a good start). Otherwise, put in 0..
  
  
• A table, like an image, can be placed Left, Center, or Right.
  
  
• Drag your Images into the Boxes of the Table.
  
  
  • You can make each Box of the table correspond in size to the pixel dimensions of your image, or you can work with percentages, or you can simply allow it to default.
    BE CAREFUL THAT THE PARTS DO NOT ADD UP TO MORE THAN THE WHOLE (70% + 50% = 120%)
    
    
• Composer Does not allow you to intuitively change Tables, as you can in Dreamweaver and Adobe Go-Live. In Dreamweaver and Adobe Go-Live, drag on the outlines of the table to change the sizes.

7. Create Links

Links refresh the Screen with another page from your site.

• To do this, you need to make at least one other page. (you can also link to anything on the Internet.)
  
• Click on a visual element (image) or highlight a word if you have inserted text.
  
  • Go to Link in Properties Menu
    
  • Click on the little Folder, and look for the link
• The Dialog box with the pages in your folder will automatically appear.
  Simply Click on the one you want as your link.
  
• This will ONLY work properly if you have defined your site!

Links to pages from other sites on the Internet.

• Click on a visual element (image) or highlight a word if you have inserted text.
  
  
  • Go to Link in Properties Menu
    
  • Type the address of where you want to the link to go in this box.
    
    
• The address must be be COMPLETE and PERFECT (with the http:// included).
  
  
  • Easiest way to do this is to have the page open in your browser, then copy and paste the address In the little blank window.
    
    
  • Watch out for blank spaces before or after the address - these make the address incorrect if Dreamweaver puts them in, Ths is a time when checking the code is a good idea - highlight the area and then go to "Code Inspector" or "HTML Source". Take out any extra characters.
    
    
• To the right of this window, it says "target". Scroll down to _blank. This opens the new link in a new window - which is what you want if you want to keep your own site open at the same time,
  (this option only becomes available affter you have put an address in)