Challenges with Dreamweaver Templates
Those of us familiar with Dreamweaver .DWT template files know their tremendous advantages, and their limitations. One of the difficulties with .DWT templates is that once you’ve setup a website using .DWTs, it can be difficult to pick out a single page based on a CSS ID tag. People often use an ID attached to a <body> tag in order to be able to select and manipulate an individual page for a particular purpose; but with .DWT”s, you can’t make different ID’s on the body tag.
The Solution is an Editable Header and <head> Tag.
While your <body> tag is likely consumed by the template, it’s very likely that your <head> tag has editable regions. If you are adding any kind of meta tags, you will have an editable <head> tag. So in order to take advantage of the <head> tag, simply add a <style> tag to the <head> area of the page in question, and you can then manipulate the CSS to your needs.
Let’s Look at An Example.
For example, let’s say you have an image with the ID “myImage” you want to display on every page on the website except for the “contact” page. Go ahead and add the image to the .DWT so that the image code propagates to all of your pages. Now in order to remove the image from the contact page, simply open up the contact page and add the following code within the header tag:
[sourcecode language=’html’]
[/sourcecode]
How this method solves the problem
What will happen is that the page will render and read the site’s main .css file. The browser will then read the above style code that you put in the <head> tag, which will override the site’s global stylesheet. In this manner, the image with the myImage tag will now be hidden on the contact page.
Summary
In order to apply CSS code to individual pages using Dreamweaver and .DWT templates, simply add a <style> tag with your overriding CSS code to the <head> tag of the page in question.
