Problem with Design View in DW5

Question

I've recently inherited responsibility for my group's website (despite the fact that I'm kind of a noob at all this) and am dealing with an interesting challenge that I hope someone can help me with.
It seems that our pages are based on a number of templates that for some reason were not saved along with the rest of the site. Short term this is not a huge issue, as the pages have the source code from the templates embedded in them, but this code is not editable and I can't figure out a way to override the fact that I'm "locked out" from making any changes (at least from within Dreamweaver). Up to now I've just been editing the pages individually in Komodo, which is tedious but not horrible, given that our site isn't that big, but it's clearly no way to do business in the long term.
So I'm trying to re-engineer some templates that I can work with. What I did was use Komodo to strip away all of the template-related language from one of the site pages, and re-imported the code back into Dreamweaver, in the hope that I can then save that as a new template. I'm close, but not quite there. My problem is that DW's Design View isn't rendering the page properly, even though it displays fine in Live View and in browsers. Maybe this isn't a huge deal, but it's really bugging me because: 1) I do rely on Design View, since I'm not an experienced programmer; and 2) I'm kind of anal retentive.
To see what I'm talking about, here is the page I used as the foundation for creating a new template:
http://iodp.ldeo.columbia.edu/TOOLS_LABS/TRIPLE/aps.html
... and here is my new "template" (although I haven't saved it yet as a DW template):
http://iodp.ldeo.columbia.edu/TOOLS_LABS/TRIPLE/test3.html
The second page displays correctly in Live View, Safari and Firefox, but not in DW's Design View, where it looks like this, at least on my computer:
As you can see, there's an odd "break" between the banner image and the menus on the left, and the body of the page, which should appear to the right of the menus on the left, is instead underneath them. I'm at a loss as to why the same code displays properly for the first page, but not the second.
I guess my questions are as follows:
1) Does anyone else get the same messed up display in DW's design view if they import the second page into DW?
2) And if so, can you pinpoint where the problem is?
I hope I've explained this clearly and would really be grateful for help. Thanks!

Answer 1

Validate your code and fix errors.  #1 problem is the lack of a valid Document Type Declaration (DTD) on line 1 of HTML code.
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
To add a DTD in DW:
Go to Modify > Page Properties > Title/Encoding.
Select document type from drop list.  I recommend HTML 4.0 Transitional.
Hit Apply & OK. 
Repeat Steps 1 - 3 on remaining site pages.
I'm not a huge fan of DW Templates (.dwt).  I don't know how big your site is but it might be simpler to disconnect from Templates, giving you freedom to edit anything you wish.  Then use Server-Side Includes (SSIs) for common site wide elements such as menus, headers & footers.
The great thing about SSIs is that you only need to edit one file, save it and upload to server.   Site pages are automatically updated by the server. With Templates, you have to upload every child page each time you change your template.  Even on small sites, this is tedious.
Server-Side Includes
http://www.smartwebby.com/web_site_design/server_side_includes.asp
More on Server-Side Includes
http://forums.adobe.com/message/2112460#2112460
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/