Cape May County ETTC Beginning Dreamweaver Part 3

Dreamweaver workshops | Main Links

Creating anchors and linking to them

1.      Make sure you have the Gallery page open.  Position the cursor between the first animal picture and the text associated with the picture.

2.      Open the Insert Menu and choose Invisible tags then choose Named Anchor (CTRL+ALT+A).  Name the Anchor after the animal.

3.      Position the cursor between the second animal picture and the text associated with the picture. Open the Insert Menu and choose Invisible tags then choose Named Anchor (CTRL+ALT+A).  Name the Anchor after the animal.

4.      Insert an anchor for the last two pictures.

5.      Scroll down to the table with the small animal pictures.  Click on the first small picture to select it.

6.      Click in the Link box (in the Property Inspector palette).  You can type a # symbol and the name of the anchor for the animal.

7.      You can also use the point and drag method.  After clicking in the link box, point to the Point button next to the link button.  Drag the symbol to the anchor for that animal. 

8.      If you do not see the anchor, drag the symbol to the vertical scroll bar just beneath the scroll bar up button (do not let go of the mouse button).  The screen should start to move up.  When you can see the anchor, drag over to the anchor and let go of the mouse button.

Creating Basic Rollover Effects

A rollover image is an image that changes when the mouse moves over it. Dreamweaver has a wizard that makes it simple to create a rollover image.  Before you insert your rollover onto the page, you must first create the original image as well as the mouseover image. Use your graphics program of choice and create two images at the same size.

1.      Open the file called rollover.htm (in the rollover folder). 

2.      Create a table with 1 row and 4 columns.  Make the width 50%, the border 0 and the alignment should be centered.

3.      Minimize Dreamweaver and open the program called ImageBlender.  Open the file called birdsmall2.jpg.

4.      Click on the Modify toolbar button and click Image size.  Note how big the image is and close the image.

5.      Start a new image and make it the same size.  Choose Background color for the background.

6.      Click on the Paint toolbar button and click the capital A button (text button).  In the box that appears type Bird.

7.      Click Ok and move your mouse to the center of the box.  Click the mouse button once and the word bird should appear.  Save the file as birdrollover.jpg.

8.      Minimize ImageBlender and switch back to Dreamweaver.

9.      Click the Insert Menu and point to the Interactive Images option.  Select Rollover Image.

10.  The image name identifies the rollover image, type the word tiger in the Image name field box.

11.  Click in the Original Image box and click the browse button.  Open the file labeled birdsmall2.jpg file. 

12.  Click in the Rollover Image box.  Click the Browse button and choose the birdrollover.jpg file.

Leave the URL box empty for now.

About the Site window  (from the Dreamweaver tutorial)

Use the Site window for standard file maintenance operations, such as creating new HTML documents, moving files, creating folders, and deleting items; for site navigation layout with the site map; and for transferring files between your local and remote sites. By default, the remote site (or site map) appears in the left pane, and the local site appears in the right pane. You can change this setting in the Site FTP preferences.

Viewing the site structure

Use the site map to view a local site as a visual map of linked icons, to add new files to a site, or to add, modify, or remove links. The Site Map view is ideal for storyboarding or laying out a site structure. You can quickly set up the entire structure of the site and then create a printed image of the site map.

Note: The Site Map view applies to local sites only. If you want to create a map of a remote site, copy the contents of the remote site to your local disk.

1.      Open the Window menu and click on Site Map to open the Site window.

2.      In the Site window, click the Site Map button.

The site's home page is the starting point of the map. If Dreamweaver can't determine which page in the current site is the home page, the Site Definition dialog box opens to the Site Map Layout panel, prompting you to select the correct page.

The site map shows HTML files and other page content as icons. Links are displayed in the order in which they are encountered in the HTML source code.

By default, the site map displays the site structure two levels deep, starting from the current home page. Click the plus (+) and minus (-) signs (Windows) or the expander arrow (Macintosh) next to a page to show or hide pages linked below the second level.

By default, hidden files and dependent files are not displayed in the site map. Hidden files are HTML files marked as hidden. Dependent files are non-HTML page content such as images, templates, Shockwave files, or Flash files.

To change e-mail, FTP, null, or script links site wide:

1.      Open the site map.

2.      Choose Site > Change Link Sitewide.

3.      In the Change Link Sitewide dialog box, enter the following information:

In the Change All Links To field, type the full name of the link you are changing.

In the Into Links To field, type the full name of the link you want to replace the link with.

4.      Click OK.

For example, to update all the e-mail links that point to your old address, you might type mailto:juser@isp.com in the Change All Links To box, and type mailto:juser-interface@isp.com in the Into Links To box.

Files can be moved throughout the site in two different ways.

1. Drag and Drop - Click on the file and drag it over a folder. When that folder is highlighted, release the mouse button.
2. Cut and Paste - Select a File, hit CTRL (Command) X, or go to the Edit Menu and select 'Cut'. Find the folder you would like to move the file, select it and either hit CTRL (Command) V or go to the Edit Menu and select 'paste.'
3. Files can also be copied by using the Copy and Paste feature. Select a file, hit CTRL (Command) C or go to the Edit Menu and select 'Copy'. Find the folder you would like to move the file and then hit CTRL (Command) V.
4. Files can also be copied within the same folder by Copying and Pasting. Dreamweaver will add 'Copy of' to the beginning of the file name. This can be useful when you wish to use the same look and feel as another file. Simply copy the file, rename it, then modify it.
5. When a file is moved, Dreamweaver will check its site cache for links to that file. If there are links to that file, you will be shown a list of pages linking to it. You can easily change the links by pressing the Update button. This is the largest advantage of moving files within Dreamweaver.
6. To delete a file or folder, simply select it and either use the Context Menu and select 'Delete' or hit the delete key on your keyboard. Dreamweaver will then check the site cache to see if there are any other files within the site pointing to the file you are planning to delete. If there are, you will be informed that links will be broken by continuing. You will be given the option to continue with the delete or cancel. If you do not get a warning dialog box, you may safely delete the file.

Removing a site from your list of sites

If you no longer wish to work with a site in Dreamweaver, you can remove the site from your list of sites. The files in the site are not removed.

Note: When you remove a site from the list, all setup information about the site is lost permanently.

To remove a site from your site list:

Check the following sites for more Dreamweaver Site Management tips

www.lll.uiuc.edu/outreach/workshops/dw2/manage.html - very good tutorial with illustrations

www.trainingtools.com/online/dreamweaver3/index.htm - lots of good information, click on the Site Management Link on the right side

thanks to for the graphics