ltde

survey

register

resources

managing and maintaining sites

Goals: Web sites tend to have a life of their own. Maintaining a tidy site can be a daunting task. Dreamweaver makes easy work of many site management tasks. In this session, we will cover the process of moving and renaming folders and files, checking for broken links, cleaning up orphaned files, editing Fireworks-created navigation, and uploading changes to the web server.

1. Site Management Overview
2. Dreamweaver Site Management Tools
3. Transferring Files
4. Synchronizing Files
5. Checking Links Sitewide
6. Cloaking Files & Folders
7. Updating Fireworks Content
8. HTML Cleanup
9. Exercise

site management overview

Before introducing the site management features of Dreamweaver, let's review the tools already covered to manage a site.

PNG - Fireworks saves graphics as a .png file format. This is an editable document that includes all formatting and scripting of buttons and graphics. Dreamweaver interfaces with Fireworks to make updating of graphics easy by linking to the .png file and exporting changes directly back into the Dreamweaver site.

Templates - Dreamweaver .dwt templates are the structural framework for a site. Pages are spawned from the template, which include editable and non-editable areas. Any changes in the non-editable areas of a template are cascaded to any page based on that template.

CSS -- The .css file created within Dreamweaver controls all the formatting and placement of content. Font, font color, font size, indention, link colors, and background colors are all defined and managed in the .css file.

Library Objects - Dreamweaver .lbi library objects are used to control and manage reoccurring content across multiple pages. Any changes made to the .lbi file will be cascaded to any page that includes a reference to an .lbi.

dreamweaver site management tools

When working on a site, Dreamweaver requires a site definition to be created. In this site definition, a local folder setting is required. The local folder setting is the feature that allows Dreamweaver the ability to manage all aspects of the site. Using these settings, Dreamweaver creates a site cache that keeps track of all files, folders and links to files within a site. This allows for the ability to create, change and move files and folders with changes being made automatically -- avoiding the need to manually change links.

Another aspect to the site definition is the link to remote servers. Dreamweaver can connect to the remote site to upload and download files to and from the local computer. It can also help keep track of which files are being edited at any time -- avoiding the chance of two users working on the same file at the same time.

expand / collapse

Dreamweaver provides a site list to the right of the screen when the site list is collapsed. This makes it easy to use the Point to File feature to create links to files. The Expanded view makes it easy to move files between the local drive and the server.

1. Choose Site | Site Files.
2. Click on the Expand/Collapse button.
      
   
   Expand/Collapse Site Files
         
3. The window should look something like this, although the folders may be empty at this point.
         
   
   Site Manager

defining a site

1. Site settings must be defined prior to working in a site. This tells Dreamweaver where it might expect to look for files.
2. Choose Site | New Site.
3. Click on the Advanced tab. Highlight with the mouse the Local Info category.
4. Enter the following information:
         
   Site Name: Enter a site name. It can be named anything (i.e. MySite.) The site name remains local and does not appear in any way to users of the site.
   Local Root Folder: Choose a folder where the files will reside while they are being edited locally. It can be anywhere on the local computer (but from that point on the local site should mirror that of the server). In this particular case please select the SSC_Site folder.
   HTTP Address: This can remain blank.
   Cache: Enable cache should be checked.
         
   
   Site Definition -- Local Info
        
5. Highlight the Remote Info category. Choose WebDAV from the Access: dropdown menu.
6. Enter the following information:
        
   URL: Enter the address of the server (i.e. https://mywebspace.wisc.edu/"netid"/).
   Login: Enter a username (NetID).
   Password: Enter password, if desired, or enter when prompted.
   Maintain synchronization information keeps files on the server and files locally synchronized.
   Automatically upload files to server on save: Used if files are to be moved to the server automatically upon being saved.
   Check In/Out: Enable File Check In and Check Out: Denotes files which are in use and who is editing the files.
   Check Out Files when Opening: should be checked to ensure the check out feature displays correctly.
   Check Out Name: User's name is entered here. This tells other users who has a file at any given time.
   Email Address: Enter an email address, to allow users the ability to email if a file is needed.
         
   
   Site Definition -- Remote Info
          
7. Click OK and then Create cache when prompted to do so.
   
8. Once site settings have been created, files can be moved back and forth between a local machine and the server. In the ideal world, files should always be obtained from the server and worked on locally. This helps to ensure that one user will not overwrite the changes of another.

transferring files

From left to right -- Connect to remote host, Refresh, Get File(s), Put File(s), Check Out File(s), Check In, Synchronize, Collapse/Expand

1. Connect to remote host - Used to make a connection to remove server.
2. Check In - Used to transfer files from the server.
3. Check Out - Used to move files to the local machine. Again, this is the feature of Dreamweaver that ensures that only one person at a time will be able to make changes to a file.
4. Include Dependent Files. When downloading or uploading files, this feature pulls down any supporting files, such as graphics, style sheets, templates and library objects. This does not mean that these items are checked out. In fact, they are read-only. However, these files may include graphics or other template files necessary to view the site. This can be time-consuming over a modem.

synchronizing files

When working in Dreamweaver on a everyday basis, use the Check In and Check Out features to work on files. Every so often, it is a good idea to download the entire site for maintenance. The synchronize feature works well for comparing what is on the local machine against what is on the server and bringing the newest files to the local computer. Once broken links have been corrected, files have been relocated, renamed or deleted, synchronization back to the server is recommended. If the site is simply checked in, the files that were moved, renamed or deleted would not be removed from the remote server. Synchronizing will delete what does not match with what is on the local drive.

synchronizing files down to the local computer

1. Select the root folder.
2. Click on the Synchronize button.
3. Choose Entire Site from the Synchronize box.
4. Choose Get newer files from remote in the Direction box.
5. Select Delete local files not on remote server.
6. Click Preview.

A list of files to be downloaded or deleted will be displayed. Files can be deselected to be excluded from this process. Dreamweaver automatically synchronizes files. If the files are already in sync, Dreamweaver will display a message that no synchronization is necessary.

synchronizing files up to the server

1. Select the root folder.
2. Click on the Synchronize button.
3. Choose Entire Site from the Synchronize box.
4. Choose Put newer files to remote in the Direction box.
5. Select Delete remote files not on local drive.
6. Click Preview.

A list of files to be uploaded or deleted will be displayed. Files can be deselected to be excluded from this process. Dreamweaver automatically synchronizes files. If the files are already in sync, Dreamweaver will display a message that no synchronization is necessary.

checking links sitewide

Dreamweaver has three reports that can be run against a file, a folder or the entire site. The three reports are:

• Broken Links
• External Links
• Orphaned Files

broken links

A broken links report is a list of links to pages not found within the site. If the site cannot find a reference to a local file, it will appear in this report. Broken links can be repaired in the report window. The tool will search the site for any other references to this broken link and fix them at the same.

external links

An external links report is a list of links to content outside the site that cannot be found. While it does not check whether these links are live, it does allow a method for updating these links in one place. If, for example, a URL to a site has been changed, the change can be made in the external links window and it will update any references to it.

orphaned files

An orphaned files report is a list of files which are not being used in the site. No files are either using them or pointing to them. If they are still live files, some sort of link to them should be made on the site so users can find them. If they are not used anymore, they can either delete them or moved to an archival folder. This keeps the site clean.

updating fireworks content

While performing an overhaul of a web site, images may need to be edited and/or navigational elements may need to be altered. Dreamweaver works seamlessly with Fireworks. When an image is selected, an Edit button appears in the Properties dialog box. This will launch Fireworks and ask for a .png source for the image to be designated. If a .png file cannot be located, the original graphic can be used. Changes can be made in Fireworks. Once done, clicking Done will save the changes, and update the files back in the Dreamweaver site.

With navigational elements, such as menus and buttons, made in Fireworks, changes can be made easily. The Fireworks-based table is selected using the tag selector. The Edit button launches Fireworks, and the entire navigational element is loaded into Fireworks -- making menu changes extremely easy.

For image files which aren't in the .png format, the default editor is Photoshop. To change the default editor to Fireworks:

1. Choose Edit | Preferences or Dreamweaver | Preferences on a Mac.
2. Select the File Types / Editors category.
3. Select the appropriate extensions, (PNG, GIF, JPG) and make sure Fireworks is the primary editor. If not, click the (+) button and locate the Fireworks application.

html clean-up

Quite often, documents will contain poor or invalid HTML source code. HTML code can be cleaned up using the Cleanup HTML feature.

1. Open any HTML file using Dreamweaver. File | Open.
2. Choose Commands | Cleanup HTML.
        
   
   Clean Up HTML
   
   
3. Select the html errors against which the file will be checked. If errors are found, Dreamweaver will correct them. There are several other Web validation programs, such as Weblint or HTML Tidy, which can be used to test html source code for mistakes. However, files will have to be in place on the server before Weblint can be used.
   

   
   Clean Up Summary

advance to exercise