Dreamweaver Tips

Also see:
Dreamweaver desktop explained

Here are a few general tips. To find more detailed instructions, go the 'Help' menu and select "Using Dreamweaver" or just hit F1

General:

The properties bar is dynamic - it changes according to what is selected in the document. It gives you options to deal from everything from text to photos to tables to table cells according to the location of the cursor or what has been selected.

SAVE your document - and when you type in the name ---- include the .html --- the Dreamweaver default only gives you .htm.

Remember that EVERY SINGLE first page of any website is saved as index.html !

Even if you have SAVED your document - that doesn't mean it has been TITLED. The title is the name that appears on the blue bar when someone comes to your page. If you do not change it, it will say your website is an "Untitled Document." To change this - go to Page Properties under the Modify menu.

To get a single return - use the soft return. Hold down the shift key - while you press the 'return.'

To see what your web site looks like, press F12 to see what it looks like in the browser. This does not mean that it is now on the web! You can not make changes inside the browser - go back to the Dreamweaver document to make changes.

Links:

Select the element - photo or text - then go to the properties bar and type in the address you want to link to. Always use the entire address: http://www.columbia.edu

To create an e-mail address, use the 'mailto:' prefix as in mailto:smp18@columbia.edu

Tables:

We use tables for control over the graphic elements within the page. To keep the outside border static, insert a table with one column, one row with a specific PIXEL width - such as 400 pixels. And remember - columns go across, rows go down

Now inside that table, you can create a number of tables to house your elements in order.

When you chose PIXEL- the width is definative.

When you chose PERCENT - the width is relative - it will adjust to whatever cell it is placed inside.

Table tips:

When you want text to wrap around an image - place the image in a table (with pixel width that is the size of the photo) then select the table, and align it to the left or the right!

Tables stretched WIDE: If you find that your tables do not stay within the width you have selected, it may be because the images or other elements you have placed inside one cell are larger than the outside border. Tables are elastic - they will stretch out to house the elements placed inside them. Try reducing the size of your image in Photoshop.

Tables stretched LONG: There are several reasons that your tables may have stretched out. Dreamweaver will place whatever element that you insert into a table cell - right in the center. So if you have space on top, then you will have the same amount of space on the bottom.

To clear this - try deleting any carriage returns on the bottom of the page. Also try selecting the table and take out the height measurement within the properties bar. Do not put 0, just leave it blank.

Borders:

When you create a table, the default gives you a border width of 1 pixel. It can change this through the properties bar - either make it fatter by adding pixels or change it to 0 to make it disappear.

To select a table, pass your cursor over the edge of the table. It should change into two slash marks - when it does, click and the table is selected.

   
   
The above table has a default of 1 pixel.

Cells:

To add a little space between your table and the inner elements - try selecting the table and increase the amount of CELL PAD or CELL SPACE.

     
     
     

 

Cellspace increases the amount of space between the cells. The above table has a cellspace of 12 pixels.

Cellpad increase the space between the start of the cell and the elements inside

Photographs:

Photographs are INSERTED.

The web only recognizes two kinds of images --- .jpeg and .gif.

.jpeg is used for photographs and complicated images such as this photo of Mark.

.gif is used for simple images --- all lettering -- such as this giant P.

Do not try stretching photos or text images- all changes to images and photos need to be made in Photoshop.

Text:

You IMPORT text - from the file menu.

All text should be saved as an .html document before your import it.

When you import it, Dreamweaver automatically generates a new document with the text on a grey background. A "Clean Up HTML" box will appear. You have to cancel it, before you can cut and paste the text.

Colors:

You can change text colors and backgrounds using the properties bar. You can change the color of an entire table, or by cell by selecting the area and using the properties bar. To change the color of the entire page - and change the colors of visited and unvisited link - go to 'Page Properties' under the 'Modify' menu.

All colors have a code - which appears at the bottom of the color picker box within the properties bar. Make a note of the code if you have to match it with images in Photoshop or on other parts of your website. Instead of picking the color, you can just type in the code.