Switched Keys

This week I started updating a website for a local non-profit organization. The most important part of the project was studying the site and understanding how it is built. As I studied this site I learned a little about why it can be difficult for an amateur to maintain their own websites or for an outsider to come in and work on an existing site. First is the organization or lack of organization and second is the massive amount of code and files and in particular unnecessary code and files. Keeping a website's style cohesive makes it more attractive but it should also be easier to maintain.

In this site some of the links on the main page had been changed to refer to updated or moved files but the same links on inside pages were not updated and gave you the 404. The main problem in this case was when the page file was put in a folder the document relative links didn't work. The Javascript menu references were also an issue on those moved pages for the same reason.

Another problem I found was that some of the files were present in both the root folder and a folder for that section. Many of these files were identical. Which file you linked to depended on what page you were on. They would seem to work but instead of linking to the file you intended it brought up one of the duplicates from which other links didn't work. This setup just creates confusion and when dealing with someone else's system you need some clarity. I'm actually one that prefers sections and a logical hierarchy but it order to simplify the mess I worked with the files in the root directory with a plan to create sections when I had everything defined.

The graphics were created by a Fireworks function with an image for each section of the menu. I've used these before in Imageready and they can be nifty if you don't take all of the shortcuts. However there were multiple versions of the full image. They were also named with numbers based on which section it was.

The plan With Dreamweaver in hand my first priority is to repair and organize the site files. Once that is done I can do some creative work.

Tread softly. Because this was an active site I started the redesign by creating all new files. The names were not an issue since all of the old files used the htm extension instead of html. Everything would work for the old site until I renamed the home page. Of course I also made a backup copy of the old site.

If you want to simplify the current site you can do that by downloading the site and moving things around. Dreamweaver will help you keep most document or root relative links working. That's not part of my plan. I have the time to do a complete rewrite and that would just take more time. New wine new wineskin.

Establish order. Following the adage a place for everything and everything in its place I defined the structure I was going to use. Very simply all images go in the images folder and all html files go in the root folder for now that is. For a simple site like this the css file could stay in the root folder but since it was already in a separate css folder I defined it that way. Should the site grow and require more css styles they have a neat place to go. Files that are downloaded from the site alse need a separate folder so I used Documents although there are other commonly used names.

Create templates. Second thing I did was create a Dreamweaver template. With Dreamweaver templates can be used to define the appearance of a page. When a page is created from the template it can be set up to be automatically updated when the template changes. This will solve the problem of keeping the menu links up to date.

Simplify and name the images. Use a simpler set of graphics. Instead of using the numbered image files I copied then to names that reflect what the graphic was. If it was the word "About" that was used to go to a page about the organization I named it about.jpg about.gif or about.png.

Name the css properties. If you mark some text and start formatting it Dreamweaver names those styles numerically as style1 style2 etc. For a simple page this can work but for a larger more complex site these styles make for a massive amount of code you would have to sort through to understand the pages. For those who don't reference css styles explicitly the problem is not visible. For the designer that is creating a standard style for the pages css styles are very useful. Having a folder full of the automatically generated css styles can be confusing. You might unknowingly update a style at one location that affects another location. Name those styles and you will know what it is used for when you want to format another section the same way. This also helps maintaining cohesion on a site.

Creating pages. All of the above is done only on the template. There is only one thing that's left to do on the template create the links. I don't do that yet because I haven't created the files that I will be linking to. At this stage I will create the pages based on the template and add the content for each page. I can simply copy and paste from the old page or any new content that has been added checking all of the style references.

Create the links. Now back to the template. Reset all links and references to use document relative links. There are advantages and disadvantages to this but using Dreamweaver the disadvantages will be taken care of. Don't forget to check the javascript menus. When you save the template Dreamweaver should ask if you want to update the pages. Just say Yes.

Clean up and upload. This is something that should be done in a full session. It sounds simple and usually is but if something goes wrong or there are other issues to deal with you need to have time to restore the previously saved copy of the site. The clean up has two aspects. One is clean out the Dreamweaver site folder of any files that you don't want to be uploaded. Second as a part of the upload or after you do the initial check delete any files on the server that don't need to be there. This will create less confusion for the next web guy.

Check your work. Clear your cache then view the site and try the links on multiple pages. Closely watch all graphics including the mouseover graphics. Ask someone else to check. This may be where you show off your work depending on your confidence level.

Once the site is functional you can use Dreamweaver to move the files where you want them. Dreamweaver can update all of the document relative links. So if I want a separate folder for all files related to donors I could create a Donors folder and move them there. Dreamweaver will then update the links.

In the future if you want to create a new page create it based on the template then change the template to link to it and allow Dreamweaver to update all of the other pages. Do a synchronized upload and check it in a browser. Simple.