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.
For those who are confused by the thick technical lingo used in the above paragraph, please note the following:
If you don't already have a website, and are just browsing this article to see how difficult it is to get started, you should really start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide instead. The beginner's guide is a more appropriate place to start, since it doesn't assume prior knowledge on your part. It is written in plain English and is meant for the completely new webmaster-to-be.
The article that you're currently looking at (this page) is like the middle chapter of a book. If you start here, you'll get discouraged quickly, thinking that website-making is rocket science, since you won't have any of the basic information taught in the earlier chapters. But it really isn't difficult. (Not to mention the fact that the content of this chapter doesn't even affect most webmasters).
I'll assume that you have used one of my Dreamweaver tutorial series to create your website. That is, you've completed either the Dreamweaver CS5 Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial.
In practice, this means that you're not only using Dreamweaver's blank page layout templates, but that you're also using its website management features and template system to manage your site. (Dreamweaver's website management and template system allows a webmaster to create and manage multiple pages on a website the easy way, without having to manually update every page on a website every time you make a change to the design.) If you're not doing using both the above features, then this article is probably not relevant to you.
For those who are not sure what the difference between a fixed and liquid layout is, please read What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts? for a detailed explanation.
I have only tested the procedure below using Dreamweaver CS5. It should, theoretically, work with CS4 and CS3 too, since the method I use is a general one. However, since I no longer have those 2 earlier versions installed, I can't be sure of this. Sorry.
The same procedure below applies whether you're changing from a liquid to a fixed layout, or the reverse, from a fixed to a liquid layout, or, for that matter, if you're using an older version of Dreamweaver, to any of the other blank page HTML layouts available in Dreamweaver.
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".
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.
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.
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 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.
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.
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.
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.
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.
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.]
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.
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.
Click "Edit | Select All" to select everything on the page.
Click "Edit | Copy" from the menu.
Click "File | Close" to close the new template. (Yes, close it. You don't need it any more.)
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.
Click "Edit | Select All" to select everything on the page.
Click "Edit | Paste". Notice carefully that I said to click "Paste" this time, not "Copy".
Click "View | Design" to return Dreamweaver to the Design mode. You should see 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.
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.
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.
Click the "Close" button to dismiss the dialog box.
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.
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.
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.
Copyright © 2010 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/.
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.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)
It will appear on your page as:
How to Switch Between the Liquid and Fixed Layout Templates in Dreamweaver
Copyright © 2010 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
View the original article here
eBooks on the French Canals, Living Aboard Around the World, La Rochelle Guide Book
Niciun comentariu:
Trimiteți un comentariu