Intermediate Dreamweaver

Basic HTML | Site management | Assets | Library of Page Elements| Find and Replace | Templates | Style Sheets | Forms | Imagemaps | Mouseovers | Flash buttons & text | Frames | Tables: Formatting & Sorting | Preview Browsers | Font Lists | Colors | Automating Tasks | Pasting in a Script

Site management

Why do I need to use Site Management?

A number of features, such as Templates and Styles, will not be as effective unless you have your site organized locally as well as on the web.

The Site window lets you see and manage all the files from that window. You can set up Site Maps as well..

When should I set up Site Management?

As soon as you start work on a new site, set up a separate directory for it and a site for it.

How to do it:

  • From the Site menu, choose Manage Sites
  • From the Manage sites dialog, click New, then Site:

  • Type in a name for your site (this should be something you will remember; you will need it to refer to the site). Click Next.

  • Choose "No, I do not want to use a server technology" and click Next.

  • Choose 'Edit local copies on my machine'
  • Use the yellow Browse folder icon to select the folder you will store your web page files in.
  • Click Next.

For 'How do you connect to your remote server?' choose FTP.

  • For FTP host, enter ws2.cc.lehigh.edu
  • For Host directory, enter webspace
  • For Login, enter the userid for the account you are uploading to
  • Click the check box next to Use Secure FTP (SFTP)

Click Next.

Click No, then click Next

  • Click on Done
  • In the Manage Site Window, click "Done".

The Files window will now display any files you have in the local directory.

Sitemaps

You can view the contents of the site as a map. To do this, you have to define the home page (main or entry page of the site), so once you've created the main page, go back into Manage sites, choose the site, click Edit:

Click on the Advanced Tab at the top:

and click on Site Map Layout.

Site Definition: Site Map Layout

Use the folder icon to select the file that is going to be the home page. You can also select how wide you want the site map to be and whether it should display file names or page titles. Then click OK.

In the Files window, click on dropdown that says "Local View"

he sitemap icon and choose "Map View" to see the site files displayed as a map:
Site Map

When you choose "Display dependent files" you can also see what graphics are in a particular page, and check out what links and graphics the subsidiary pages have on them.

If you click on the plus sign next to a file in the map, you will see all the links and images it has:

If you would like to see both the Map View and the Local Files at the same time, you can click on the Expand button on the Files toolbar:

This will expand the Files panel to the whole window:

 

Using the Scope icon

Creating Links using the Map and Local Views

If you aren't using templates on your pages, you can use the scope to create a link at the bottom of one page to the top of another page.

To do this, click on the page where the link should be inserted in the Map view. The Scope icon will appear next to it. Click on the Scope icon and drag to the file you want to link to.

A link will be added at the bottom of the page-- the text of the link will be the filename of the file being linked to.

Creating Links and adding Images using the Local View and the Document Window

To link to a particular file in your local view, enter and select the text, then click on the scope icon next to Link in the properties window.

Then drag the line to the file in the Files- Local View window that you want to link to, or to the anchor in the Document Window you want to link to.

You can also drag an image from the Files-Local View into the document you are working on.

Check links sitewide

Dreamweaver can check the links on your site to be sure they don't try to point to non-existent pages in the directory. (It won't check links to other servers, though.) To do this, from the Site menu, choose Check Links Sitewide.

The Link Checker Results will come up below the Properties panel:

On the left, under Files, you will see the names of the files that contain 'broken' links; on the right, you will see the filename that the broken link points to.

If you change the Show drop down to External Links, you will see the list of external links used in the site, and which files point to those links.

If you change the Show dropdown to Orphaned Files, you will see a list of files (including graphics files) that are not linked from/used on any of the pages in the site. To view one of these files, double-click on it.

Rename Files

Dreamweaver makes it easy to change the name of a file and have the links to that file throughout the site updated. To change a filename, right-click on the file in the files window and choose Edit, then Rename, or press the F2 key.

Type in the new name, then click outside the name box to have it take effect.

If any page has links to the page under its old name, you will see an Update Files dialog box:

Click Update to have the links updated to the changed name.

 

Changing a link sitewide

You can change a link throughout the site by doing a find and replace over the entire site, or you can use the Change Links function in the Site window.

From the Site menu, choose Change Links Sitewide. In the dialog box that comes up
fill in the URL of the old link (or use the folder icon to select the old file), then enter the URL of the link (or select the new file) to change it to, and click OK. The Update Files dialog will come up

Click Update.

Moving and Deleting files in the Files Window-- Another Cool Feature

Because the Site Cache keeps track of links between files, if you move a file from one folder to another, or rename it, in the Site window, Dreamweaver will bring up a window asking if you want to update the links to that file from other files:

If you click 'Update' the other files will be updated so that their links point to the file at its new location/new name.

If you are deleting files in the Site window (click on the filename and press Delete), Dreamweaver will warn you if you are about to delete a file that other files link to:

Clicking Yes will go ahead and delete the file; No will stop the deletion.

February 15, 2005