How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver

Change your website from a liquid layout to a fixed layout or vice versa


How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver

by Christopher Heng, thesitewizard.com

A few visitors who use thesitewizard.com's Dreamweaver tutorials recently asked me how they can switch their website from a liquid layout template to a fixed layout one, without having to redo their website from scratch. This article attempts to show you how you can switch between any of the blank page layout templates in Dreamweaver, be it from a liquid layout to a fixed layout or vice versa, without losing any of your existing work.

Preliminaries

For those who are confused by the thick technical lingo used in the above paragraph, please note the following:

This Article in a Nutshell

The trick to a smooth transition from your old template to a new one is to give your new template the exact same Editable Regions, Optional Regions, Repeating Regions, etc, that you used in the old. That is, your new template, containing the new layout, should have the same number of template objects with identical names as your old template. (Note: don't worry if you don't know what an Optional Region or a Repeating Region is. Most people only use Editable Regions in their templates.)

For example, if your old template only had 2 editable regions, named "Page Content" and "Copyright Year", then your new template should also have 2 editable regions with the same names, "Page Content" and "Copyright Year".

Procedure for Changing to a Different Layout Template

  1. Important: Back up your local website files

    Make a copy of your local website files in a separate location (eg, on a USB external drive or some other folder). This is important. If something goes wrong here (and a lot of things can go wrong), you can at least delete all your current files, and restore the files that you backed up. When backing up, copy everything: folders, template files, images, CSS and HTML files, etc. Preserve the existing structure of the folders and files. That is, don't unceremoniously dump all your files into a single folder in your backup drive. If your images used to be in an "images" folder, make sure they are also in an "images" folder in your backup location. And so on.

    In addition, be careful how you back up your files. Make sure you are really backing up the files, and not just creating a shortcut to your existing files or moving your files from one location to another.

    Windows users can do the following. Go to your website folder in Windows Explorer. That is, click the Start menu, followed by the "Computer" item in the menu that appears. (If you use Windows XP, click "My Computer" instead of "Computer".) A window will open. This is called a Windows Explorer window. Navigate to the directory directly above your local website folder.

    Where is My Local Website Folder?

    For those who don't know where your local website folder is, start up Dreamweaver. Click the "Site" menu in Dreamweaver, followed by the "Manage Sites..." menu item, click the name of your site in the list box once, then click the "Edit" button. The location of your website is given in the "Local Site Folder" field. You can hit the ESC key on your keyboard to get out of the 2 dialog boxes after that. Then quit Dreamweaver.

    Do not open your local website folder. That is, if your local website folder is "c:\Users\christopherheng\Documents\thesitewizard\", go to "c:\Users\christopherheng\Documents\" (one directory up). You should be able to see the folder icon for your local website folder ("thesitewizard" in my case) in your window.

    Right click that folder. That is, move your mouse cursor directly over the folder and click your right mouse button. A menu will appear. Click the "Copy" item in that menu.

    Now, using the same Explorer window (or a new one if you wish), navigate to the drive where you're going to keep your backup. Right click a blank spot in that window. In the menu that appears, click the "Paste" item. If you have a lot of files, Windows Explorer may take some time to copy over all the files.

    Important: do not drag and drop your folder. Use the method I suggested above. If you drag and drop, you may end up either moving all the files to its new location (and deleting the original) or you may accidentally create a shortcut instead of a real copy. (Drag and drop behaviour varies according to where your backup location is, as well as the version of Windows that you're using.) In addition, don't do anything silly like putting your backup in the very same folder as your original files.

  2. Note down all your editable regions and other template objects (if any)

    Start Dreamweaver and open your existing template file. That is, doubleclick the "Templates" folder in the FILES panel in Dreamweaver. This should expand the folder, showing you the template files that you have created for your site. Doubleclick the template file you want to change. If you have previously created your site using one of my Dreamweaver tutorials, your template file is probably called "index.dwt".

    Write down (for example, on a piece of paper) all the editable regions you have on your page. Make sure you keep the same spelling, capitalisation ("capitalization" in US English) and spacing that you used. For example, if you have an editable region called "Page Content", make sure you jot down "Page Content" and not "pagecontent". If you have an editable region labelled "Copyright Year", but you previously put 2 spaces between "Copyright" and "Year", make sure you indicate that there are 2 spaces between those two words somewhere so that you can duplicate the exact same (problematic) name in your new template. If you have used other types of template objects, like Optional Regions and Repeating Regions, you should also note down the type of template objects you used for each of those names as well.

  3. Load and Design the New Template

    Now click the "File | New..." menu. For those not familiar with my convention, this means to click "File" on the menu bar, then when a drop down menu appears, click the "New..." item in that menu. The "New Document" dialog box should appear.

  4. Click the "Blank Page" line in the leftmost column. Make sure that "HTML" is selected in the "Page Type" column. Select the layout you want to change to in the "Layout" column. Click the drop down menu for "Layout CSS" (on the lower right side of dialog box) and select "Create New File". (If you feel like you're experiencing deja vu, it's because we're mostly repeating the steps given in the first chapter of my Dreamweaver tutorials.) Click the "Create" button.

  5. The "Save Style Sheet As" dialog box will appear. Either accept the default name or enter a different name. Do not use the name of an existing file (such as your old CSS file). Click the "Save" button.

  6. You'll now be presented with a new page containing the new layout. Click "File | Save as Template...". A dialog box entitled "Save As Template" will appear. Replace the name in the "Save as" field with "temporary" or "temp", then click the "Save" button. Note that you can actually give the file any name you like, but don't give it the same name as your existing template file. Using a name like "temporary" or "temp" will allow you to quickly recognise this file in the future so that you can delete it when you're through with it.

  7. Now redesign this template with whatever design you want your new layout to have. For example, you should insert your logo, update the side menu, remove the extraneous placeholder text that Dreamweaver inserted, etc. Finally, don't forget to recreate all the template objects (such as the editable regions) that your previous template had. As mentioned before, the names of all the editable regions (etc) have to match those in your old template exactly.

    At this point, some of you are probably crying out in frustration that you have to redo the template. Think of it this way. Since you're using Dreamweaver's template system, you only have to redo the template itself. Dreamweaver will take care of updating all your individual web pages for you. Without the template system, you will have to manually redo every single page of your website.

    [Note: I know that there are (arguably) faster ways of doing this. However, those ways require a certain amount of HTML and CSS expertise. The method I mention here is doable by everyone.]

  8. When you've finished your customisations ("customizations" in American English), click "File | Save All". (Notice that I said "Save All" and not "Save".) You may get a message from Dreamweaver about placing one or more editable regions inside a block tag. Click the "OK" button.

  9. Copy the New Layout to Your Original Template

    Now click "View | Code". Dreamweaver will switch to the "Code" mode, showing the HTML code (and interspersed proprietary Dreamweaver template code) for your new template.

  10. Click "Edit | Select All" to select everything on the page.

  11. Click "Edit | Copy" from the menu.

  12. Click "File | Close" to close the new template. (Yes, close it. You don't need it any more.)

  13. Dreamweaver should return you to your old template since we didn't close that earlier. If you're faced with a blank Dreamweaver window, it probably means that you've already closed the old template. If so, just doubleclick it again from the FILES panel to reopen it.

    Click "View | Code" to display the HTML code.

  14. Click "Edit | Select All" to select everything on the page.

  15. Click "Edit | Paste". Notice carefully that I said to click "Paste" this time, not "Copy".

  16. Click "View | Design" to return Dreamweaver to the Design mode. You should see the new layout.

  17. Updating All Your Website Files with the New Layout

    Click "File | Save". You may get the usual warning from Dreamweaver about placing an editable region inside a block tag. As usual, just click the "OK" button.

  18. A dialog box entitled "Update Template Files" will appear. There will be a list of all the files on your website affected by this change. Click the "Update" button to allow Dreamweaver to automatically modify all your web pages to the new design.

  19. If you have preserved the exact number and names of the editable regions (and any other template objects that you may have had on your page), the updating should go smoothly, as though you have merely made a minor change in your template. When Dreamweaver completes its updates, it will display a dialog box entitled "Update Pages". Click the "Show log" checkbox (if it's not already checked). The dialog box will be expanded to give you a list of files that it successfully updated, as well as any file it could not update. You should always scrutinise this log to see if the update proceeded successfully for all your files.

  20. Click the "Close" button to dismiss the dialog box.

  21. Check Your Web Pages and Publish Them

    All your website files linked to that template should now contain their original content but in a new layout. I recommend that you open every page on your site in Dreamweaver (eg, doubleclick each one in turn from the FILES panel) to verify this before using "Site | Synchronize Sitewide..." to publish your site.

  22. Deleting the Temporary Template (Optional)

    Optional step: once you're sure that everything is working properly, you can delete the "temporary.dwt" or "temp.dwt" (depending on what you named it earlier) file in the "Templates" folder of your local website files. Do not delete the new CSS file that you created: it's being used by your new template and web pages. Let me say that again: do NOT delete the new CSS file. (In fact, it's probably safer not to delete any CSS file at all, in case you delete something that is still in use.) To delete the temporary template, quit Dreamweaver and do it from Windows Explorer (or, if you use a Mac, from whatever interface Mac OS X provides for deleting files). If you don't know how to delete files, or you're afraid you'll remove the wrong thing, don't delete anything.

Conclusion

As you can see, the process of changing your website from a liquid layout to a fixed layout or vice versa is fairly painless, since the web editor takes care of updating all your pages for you.

This article can be found at http://www.thesitewizard.com/dreamweaver/change-liquid-fixed-layout-templates.shtml

Copyright © 2010-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.