View Single Post
  #14 (permalink)  
Old 10-10-2008, 10:24 PM
1centwiz 1centwiz is offline
WebProWorld New Member
 
Join Date: Sep 2004
Location: www.1centwiz.com
Posts: 17
1centwiz RepRank 0
Lightbulb Re: Problems with columns using CSS

Saw your post and totally get the chills when you said that "others will be editing the site".

Using a DWT template (CMS) works by putting in fields that can be changed and there by keeping your formatting in tack.

I use Microsoft Web Expression, I know it's not Dreamweaver, but it works for me... and they offer the option to create a DWT (Dynamic Web Template) from an existing page.

Once the DWT is created, open your template and save as, then you have the option to add fields:

<head>
<!-- #BeginEditable "doctitle" -->(with this you can add separate titles with meta tags for each of your different pages)
<title>Sample Site</title>
<meta content=" " name="description"/>
<meta content="" name="keywords"/>
<!-- #EndEditable -->

(all of the rest of the content for your header is always the same for all pages)

<meta content="en-us" name="language"/>
<meta content="index,follow" name="robots"/>
<meta content="http://www.SampleSite.com" name="URL"/>
<meta content="www.SampleSite.com- 2005-8" name="copyright"/>
<meta content="www.SampleSite.com" name="author"/>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type"/>
<link rel="stylesheet" type="text/css" href="scripts/_style.css"/>
</head>
<body>
<div id="container"><a name="Back"></a>
<div id="header">
<div class="headerbox">
<h1></h1>
<h2></h2>
<h3></h3>
</div><!---end headerbox--->
<div id="menu">Button links or what ever
you use for your menu goes here
</div><!---end menu--->
</div><!---end header--->
<div id="content">

<!-- #BeginEditable "main" -->
Only this area below is allowed to be changed by others. You can choose to place the BeginEditable after what ever coding you want, like after the <p> keeping the Main <h4> unchanged. As it is now, the users would need to be able to understand that the <h4> or what ever number you have chosen per the CSS, is the Title of the information they are posting below in the <p> section.

<h4><b>(main)</b></h4>
<p></p>

<!-- #EndEditable -->
Nothing after this can be changed by other users since they do not have access to the DWT file. You can hide it in a folder of it's own so that they won't even be tempted if you like. You can also start this tag before the </p> to make sure that the format will always close properly.
<br/><!---needed for IE so that it won't wrap on you---></div><!---end main area--->
<div class="rule"></div><!---used for line instead of <hr> per style sheet--->
<div id="footer">
<p></p>
<p ></p>
<p></p>
<div class="menu">Put your bottom
nav grouping here</div>
</div><!---end footer--->
<div class="rule"></div>
</div><!---end container--->
</body>
</html>

Using this method, shows the user that by shading the un-changable areas, and leaves the editable areas white, or un-shaded.

Using the editing program you specified would only allow the user to change what is un-shaded. If they try to change the shaded areas, it will automatically revert to the DWT and not save changes made to the shaded areas. Cool huh?

I hope this helps. I am sure that you can figure out where your tags fit into this format, you may have named your div's differently or have more or less depending on your site layout.

Also, here's a great resource that has helped me understand CSS: learn web standards :: hands on css tutorial

Good luck and hope this helps!
Cheers,
Tamra
__________________
Big Sky Gal, Small town pricing. Love to be of help if I can. No site too small, no site to big.
Reply With Quote