1.
Using Dreamweaver to edit/update an existing website<br />Jeff McNear<br />plasterdog.com<br />jeff@plasterdog.com<br />@plasterdog<br />847/849-7060<br />

2.
All example images used in the following slides are from Dreamweaver CS3, however the procedures used will work in any version from MX to CS5.5<br />

3.
Any modern site will have an external style sheet that governs placement and spacing of elements, the attributes of text, and color scheme.<br />While there are some rudimentary controls offered in the Dreamweaver “properties panel” they should be avoided as they often insert conflicting and incorrect styling rules.<br />If styling is to be edited that should be done in the style-sheet. Not only will your site function more reliably, your visitors will appreciate your presenting your content in a consistent manner<br />

4.
If the site has been well planned there will be a straight forward and rational folder structure where files are kept.<br />It is also important to maintain the organization structure, since a logical hierarchy will make for a much easier editing process.<br />When editing a HTML page, it is often useful to keep a copy of the original. A very simple way to segregate active pages from archival/default version of pages is to preface the inactive pages with the letter “Z” …. Then these files will appear last in the series.<br />

5.
In order to bring up a “page” for editing :<br /><ul><li>Go to the file manager

6.
Select the desired file

7.
Double click on it

8.
It will then be available for editing</li></li></ul><li>While it may be tempting to view your files in the design<br />configuration, always use the split view – that way you can see the code and verify that you’re working in the right area and avoid inserting incorrect or redundant code<br />

9.
In split screen you can select where you want to edit the code in design view, but especially for text it is best to then make the changes in code view.<br />This way you can be sure that the text is tagged properly, and is going to be in the correct place<br />

10.
The most straight-forward way to insert an image is to:<br /><ul><li>Find your insertion point in the code

11.
Select “insert” from the top menu

12.
Specify image

13.
Navigate to an image in your site’s file structure

14.
And insert it</li></ul>Note: Your image should already be properly sized and optimized. <br />THE SINGLE MOST COMMON REASONS FOR A POORLY PERFORMING SITE IS THE USE OF IMPROPERLY PREPARED IMAGES !!!<br />

15.
In the case of links, it may be easier to select the text in design view, and then populate the link destination in the property manager : For links within the file structure, clicking on the file icon to the right of the link field will show you the following popup<br />

16.
Via the popup you can navigate to the appropriate file, click “OK” and the link will be inserted for you.<br />For external links, you can use this same popup, but you will need to manually insert the FULL<br />URL of the destination (include the leading http://) rather than selecting a file.<br />Best practice is to go back to the properties manager and target an external link to “_blank”<br />If you do this, then the external link will open in a new tab (and your visitor will not loose track of your site)<br />

17.
In order to publish from your computer, Dreamweaver needs to have a “ftp” connection with your webhost<br /><ul><li>Site

18.
Manage Sites

19.
Edit

20.
Remote Info</li></ul>Insert the following:<br /><ul><li>ftp address

21.
ftp name

22.
ftp password</li></li></ul><li>Once the information has been entered, you can connect to the host<br />Select a file from the file manager, and “put” the file to the “live” site by clicking on the up arrow<br />IMPORTANT NOTE:<br />Many browsers will have trouble with file names that have spaces or special characters in them.<br />When naming files, avoid the use of spaces between words or any “special character” with the exception of the hyphen or underscore.<br />

23.
By default Dreaweaver will ask whether you want to “put” dependent files as well (this means images, style sheets, etc. related to the selected file).<br />In general you will want to accept this option and let Dreamweaver proceed.<br />You will see a progress display while the files are published<br />