Some other Dreamweaver resources;

Editing and updating an existing site

You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there. (Dreamweaver automatically duplicates as much of the remote site's structure as is necessary to place the downloaded file in the right part of the site hierarchy.) When editing only one part of a site, you should generally choose to download dependent files.

Dependent Files

"Link"; specifies the file or URL to be displayed when the user clicks the hotspot. If you use a file, enter a path that is relative to your document. (File names that begin with file:// are not relative).

Get / Put

When uploading files, It is best to choose Include Dependent Files? so that all assets used on the page are uploaded

Check in / check out

• Checking in a file makes the file available to other team members to check out and edit. The local version becomes read-only to prevent you from making changes to the file while someone else has it checked out.
• Checking out a file is the equivalent of declaring "I'm working on this file now—don't touch it!" When a file is checked out, Dreamweaver displays a check mark next to the file's icon in the Site window. A green check mark indicates that the file was checked out by you, and a red check mark indicates that the file was checked out by another team member. The name of the person who checked out the file is also displayed in the Site window.

If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files.

In the Width field, specify the width of the table as a number of pixels or as a percentage of the browser window.

Frames

• Frames are spatially defined areas in an HTML page that "hold" an individual HTML document. (for example, in a Web page, frames commonly define a navigation area and a content area).
• What a user sees as a single Web page with two frames is actually three separate files: two files containing the content that appears inside the frames and the frameset file. When you split a Dreamweaver document into frames, you create separate HTML documents for each new frame, plus an additional one to hold the frameset information.

Frameset is an HTML page that defines the structure of a set of frames within a document. A frameset HTML page isn't displayed in a browser; it simply stores information about how the frames on a page will display including;

Tables

Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design (for both alphanumeric content and graphics).

Text - usually refers to columns of words or numbers

Graphics- can be split up into smaller elements to allow for progressive downloands and to enable multiple navigation spots (similar in function to "hotspots" mapped ontop of a layer), as well roll-over image swaps. For example see the image at www.ivid.com which is divided into a table 2 columns wide and 7 rows (various heights) deep to create up to 21 link possibilites. Actually in this case the designers chose to use a center column of width = 0, so the names of the right side column actually refer to "c3" column 3. Currently many of the cells are left blank, allowing easy expansion as the company adds more links.

Note; This table at the example site (Ivid.com) was automatically created with Macromedia Fireworks 3.0

this particular image was cut out of the whole picture using Photoshop

...........................................

<----...this is a 'cell' out of the overall image, named and saved as a .seperate graphic image with its own link and "roll over behavior". The table feature can take care of putting all these graphical pieces of the puzzle together each time the page is loaded.

Tables <--> Layers

Tables provide vertical and horizontal structure to a page. Using tables allows you to;

• add content to a single cell (or row or column), or make modifications easily
• add, delete, split, and merge rows and columns
• modify table, row, or cell properties to add color and or change alignment
• copy and paste cells.

Converting a layer to a table basically divides a single layer into a number of side-by side ones.(many cells).

Converting a table back into a layer essentiallly combines all the rows and columns of a table into a single "one cell" table

Helpful tips;

• layers are are newer technology. For 3.0 and earlier browsers you must use tables only.
• Dreamweaver adds and removes rows from the bottom of the table, and it adds and removes columns to the right.
• Dreamweaver does not warn you if you are deleting rows and columns that contain data.

Adding a background image to a table, table column, or table cell You can add a background image to an entire table, to a table column, or to an individual table cell. (If you are designing only for Netscape Navigator you can add a background image to a table row as well.)

To add a background image to a table, table column, or table cell:

• 1 In the Document window, select the table element to which you want to add a background image.
• 2 In the Property inspector's BG field, select the folder icon, then navigate to the image you want to use as the background image.

You can also display more than one background image;

• a background image underlying the entire table,
• background image to a column (doesn't work with rows in IE) . The column background image displays over the table background image.
• a background image to a table cell it appears on top (ie over the table and column background images).

Backgrounds

The infamous "Transparent GIF"

Dreamweaver's Convert Layers to Table feature not only converts layers with content to table cells but also converts white space to table cells in order to maintain the original positioning of the content in layers. Although the cells with white space appear empty, they are not. They contain a transparent image created by Dreamweaver. This transparent image is named transparent.gif. The transparent.gif is a 1x1 pixel transparent image that is scaled in Dreamweaver to fit the cell. If the cell is 50 X 1 pixels, the 1x1 transparent.gif is scaled to 50 x 1 pixels. If the transparent GIF is not uploaded with the page, a broken image icon appears in its place. Broken image icons are not transparent, so the end result is that the broken image icon looks like a line in some cells..

Note: Dreamweaver uses a file called transparent.gif, however, this same situation can arise with tables imported from Fireworks. Fireworks uses a file named shim.gif.

When selecting the "Use Transparent GIFs" when converting to tables, 1x1 transparent gifs are inserted in an extra row and column on the bottom and right, respectively.

Layers

• Layer Properties (http://www.macromedia.com/support/dreamweaver/how/show/workspace/layers2.html)
• Background
  • Color; Bg Color Specifies a background color for the layers. Leave this option blank to specify a transparent background, though it is often a good ideas to use a light background during the development procress, so you can see what is really going on.
  • Image
  • ...
  • Vis Determines the initial display condition of the layers. Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents. Choose from the following options: Default does not specify a visibility property, but most browsers interpret this as Inherit. Inherit uses the visibility property of the layer's parent. Visible displays the layer contents, regardless of the parent's value. Hidden displays the layer contents as transparent, regardless of the parent's value. Note that hidden layers created with LAYER and ILAYER still take up the same space as if they were visible.
  • To change layer visibility:
    • An open eye means the layer is visible.
    • A closed eye means the layer is invisible.
    • If there is no eye icon, the layer inherits visibility from its parent. (When layers are not nested, the parent is the document body, which is always visible.)
  • Z Index

   

look ma' no underline!!!!

Removing underlining for individual links

The tag style="text-decoration:none" removes underlining for any link to which it is applied. To remove link underlining for individual links on your page:

1. Open in Dreamweaver the document that contains the link from which you want to remove link underlying.
2. Select the link.
3. Choose Window > HTML Source to open the HTML source window.
4. Add the style tag after the a href tag for the selected link

Example: Example: :href="<a info.html" style="text-decoration:none>

The link appears on your Web page without an underline, but all the other links on the page are still underlined.

Another DW riddle; An image is not necessariy a layer, but a layer may contain an image ;)

the image below must stay on the left hand edge of the screen, and its vertical position is tied into the underlying text on the main page.

If the image were put in a layer, you position it anywhere you liked (llike a sticky note)

The deadly Slash "/"

ahead of the Src file name (Source) means the browser willl look for the image in the root firctory (where i t very rarely is!)

Learning Flash at http://hotwired.lycos.com/webmonkey/multimedia/shockwave_flash/index.html

How to Create a Perfect Screenshot

how to create a screenshot of any web page or capture any screen event..

1. Open the web page in the web browser.
2. On Windows, press the Print Screen or Prnt Scrn key

on your keyboard, found at the upper right of the keyboard. This key will capture the entire screen. If your monitor resolution is set to 640x480, that's the size of the screen capture. If your monitor resolution is set to 600x800, that will be the size of the screen capture, etc. To capture only the active window, press Alt + Print Screen. On the Mac, press Command + Shift + 3.

1. 2. Next, open up your paint program -

you can use virtually any paint program, including Photoshop, Paint Shop Pro, Corel PhotoPaint, or even Microsoft's Paint, usually installed on Windows in the Start/Programs/Accessories/Paint.

3. In the paint program, select File/New, then Edit/Paste.

cropped or scaled.

opposite direction. Troubleshooting Screen Captures The trouble with screen captures comes when you need to scale them for print or the web. Because your screen resolution is so small, any resizing usually obliterates the type within the screen capture. To minimize the changes to your screen capture, try these tips: If you scale (resize)

resize proportionately.

Problems occur when you rescale more in one direction than another, ending up with something like a wacky hall-of-mirrors effect. If you need to print the screen capture, try changing the dots per inch size rather than resizing the image. For instance, if your screen capture is 640x480 at 72 dpi, and you need it to fit on a letter sized page, change the dpi to 100 or 150 instead of reducing the pixel size. Resizing a screenshot to display on a web page? Since you'll need to reduce the actual pixel size it's just going to get fuzzy. You can minimize this problem by showing only part of a large screen capture as shown below: How do they get such nice looking text on screen captures in magazine ads? Simple, they fake it. In your paint program, erase the text, but leave the rest of the web page layout. Open the screen capture in a drawing program like Adobe Illustrator, or Corel Draw, or Quark, or Pagemaker, etc. Then recreate the text in your drawing or page layout program.

(see http://www.humorlinks.com/links/Photos_and_Images/ for example)

Microsoft Camcorder Play movies, and create your own,

with Microsoft Camcorder. This utility uses screen-capture technology to create movies. With it, you can record sounds and actions you perform on your computer to create your movie. Its Authoring toolbar make it easy to create your own soundtracks, slide shows, demos, tutorials, and more. With a click of the Record button, you can record a movie on any computer running Microsoft Windows 95, 98 or NT! When you're ready to record a movie, you can specify the settings you want, such as the keys you want to press to stop recording a movie, the quality of the sound you record, and whether you want Camcorder to appear in front of other open programs on the screen. After you create a movie file, you can save it in AVI (Audio Video Interleaved) format or as a stand-alone (.exe) file. Camcorder stand-alone movie files are compressed, so they're easy to distribute at 40% of the original size. And, since the Camcorder movie player is embedded in the .exe file, the movie can be played on any computer running Windows 9x, or Windows NT 3.51 or later, even when Camcorder is unavailable.