We’ve discussed the benefits of switching over to an include based template for standard pages here at ACC so I wanted to go into detail about how to do so with the least amount of disruption to users (and yourself). This occurs in two main sections.
A Dreamweaver (DW) website that utilizes the templating function in essence “locks” the website template around the content, making that part of the code un-editable. If a person wanted to make a change to a locked portion of a webpage, they would have to “detach” the page from the template thus rendering the page an outsider and negating the whole point of having a templatized website.
Here at ACC, if a person was using the standard web template, the only point of using it would be to maintain the side menu of the page. Utilizing a php include we have taken care of that in the include template but in a DW template website one must pull down every page , update the menu in the .dwt.php template file, save it, update all the pages (including ones that have been detached), and then re-upload the pages. Well we are going to use that function one last time in preparation to move to the include template. Here we go…
Part 1 – Wrangle the menu
- Download all of the pages in your website to your local machine, including your template file.
- Create a new file that replicates the side menu of your DW template. This is my example from the “About ACC” website.
<li><a href=”http://www.austincc.edu/about/index.php”>About ACC Home</a>
<li><a href=”http://www.austincc.edu/about/president.php”>President’s Welcome</a></li>
<li><a href=”http://www.austincc.edu/about/smart.php”>Who We Are</a></li>
<li><a href=”http://www.austincc.edu/about/success.php”>Student Success</a></li>
<li><a href=”http://www.austincc.edu/about/masterplan.php”>Master Plan</a></li>
<li><a href=”http://www.austincc.edu/annexation/”>Annexation Information</a></li>
<li><a href=”http://www.austincc.edu/about/history.php”>History and Traditions</a></li>
<li><a href=”http://www.austincc.edu/about/glance.php”>Fast Facts</a></li>
- Save this file as “menu.php” to the top level of your website (not within any folders for now). There should only be this unordered list in the file.
- Open your DW template file. This usually resides within a “Templates” folder and has “.dwt.php” within the extension.
- Find the menu area of the template and remove everything in-between the editable areas of the template named SiteNav. This should be a set of list item links <li> , </li>.
- Remove the <ul> and </ul> tags just before <!– TemplateBeginEditable name=”SiteNav” –> and after <!– TemplateEndEditable –>. (These will be replaced by the ones in your menu.php file.)
- Insert the following code where the <li> tags used to be, just above the editable region of your template:<?php include(“http://www.austincc.edu/yourwebsite/menu.php”); ?>(where it says your website, put your website name there.)
- Save the File. DW should ask you if you want to update all files based on this template and provide you with a list of files. DW will also have the option to update the entire site or files that use template.dwt.php. I have had success with the “Files that use.” option but both should work.
- At this point you can re-upload all of your pages to your website. Menu control is now handled by editing the menu.php file, and only the menu.php file . Take a look at a page from your website and you can see our include statement goes and grabs the menu and inserts it into the page. Make sure any pages that were detached from the template have the php include code inserted as well.Dreamweaver “Code View”
Website “View Source” once uploaded
Part 2 – Converting Pages
Now that we have taken menu maintenance out of the hands of the DW template, we can start converting pages over to the php include based template. The advantageous part about our situation is that we can convert pages at any pace we feel, and no one will be the wiser. If you are using the table based ACC DW web template, look and feel will remain the same, but the code underneath will be updated (and continue to be so).
- Start by downloading the new ACC php include based web template. You can grab it here. Open the zip file, you will notice it contains index.php and menu.php.
- Open index.php within DW and switch to “Code View”.
- Open a page from your website you wish to convert.
- Begin copying and pasting the appropriate content from the old page to index.php. Title, Sitename, Pagename, and Sitecontent areas should all be easy to identify. The template contains comments within it help you along. You can also refer to the How To Use ACC’s Web Templates section here if something seems amiss. I strongly recommend doing this in “Code View” as DW loves to put random tags around the include statements.
- Edit the menu include. This should look exactly like the include statement we used in step 6 of section 1. You can see where it goes in line 21 in the graphic above for reference.
- Once you have all of your content copied over to index.php, close the old DW page. In DW, go to File > Save As… and select the page you previously had open. DW will ask you if you want to replace the page. Select Replace.
If Dreamweaver asks you to “Update Links” when saving your file, select “No”.
- Upload your file and check it that it functions correctly on your website. At this point feel free to “View Source” to check out the new code that is being pulled in by the includes around your content. Notice that the page uses the same menu.php file as pages that aren’t converted yet.
- Repeat steps 2-7 for each page in your website. Remember that since we are including the menu we set up in Part 1, its okay to be in a transitional state until the whole site is completed.
- Enjoy all the benefits of your updated website.
Please ask any questions in the comments or email me at email@example.com and I’ll do my best to answer them.
Tags: DreamweaverBack to Top