Building The Site Template

Now that I know how I want the pages to be laid out, I create the rollovers in the Fireworks document, so that each link around the logo turns orange on 'mouseover' events. I export a html file to Dreamweaver.

The export process from Fireworks turns the whole page into a single image and slices the links that have now become rollover images, instead of rollover text as they were in Fireworks. The sliced images are laid out in an invisible table within the html.

A couple of problems arose here:
1) I didn't understand some things about how 'tables' and 'ap divisions' (similar to 'layers' in earlier versions of Dreamweaver) can work together in Dreamweaver CS3, this caused a bit of confusion as the images were separating and becoming jumbled when i tried to add any content.

2) The font I had chosen to display the content was not a standard font, and therefore was not going to display correctly on other peoples computers unless they have the same font installed.
I decided that I would use a standard sans-serif font within Dreamweaver.

3) The previews were displaying diffently in different browsers.

Here, I decided to follow some tutorials from:
http://www.vineyardesigns.com/resources/dreamweaver/

This gave me a better understanding of tables and ap divisions. It also helped me realise that it is important to plan how the images will be sliced before importing to Dreamweaver, it also introduced me to 'editable areas' in Dreamweaver (I'll come to this later).

After experimenting with the concepts learnt above, I came to the conclusion that my entire background should simply be left whole and inserted as the background image in a table with a single cell. Within this table i would create other transparent tables reflecting the intended positioning of the content.

I opened up Dreamweaver and defined a new site 'YodaMandala'. I then created a new Dreamweaver template file and saved as 'YM.dwt' in the root folder.

I created the table with background image, and inserted more tables into the first and positioned cells for my content. I then created 'editable regions' (insert/template objects/editable regions)
in the positions I wanted my content to appear.

The good thing about 'editable regions' is that only these areas can be edited within html files based on this template. This means that a designer can create the template in a way that allows a third party to edit the content without inadvertently ruining the design. I created a CSS style sheet defining styles for paragraph, h1, h2, and h3 tags, to further separate the design elements from content management.

I wanted my menu to be the same on every page so I chose to export just the small menu area from fireworks as a stand alone html file. I then imported this file into a cell at the correct position in the template. I can now assign the links within the template, which will be reflected in every html file based on this template.

Image showing tables and editable regions.












Image showing a preview of the template.