{"id":326,"date":"2011-06-17T14:48:31","date_gmt":"2011-06-17T13:48:31","guid":{"rendered":"http:\/\/sburke.eu\/blog\/?p=326"},"modified":"2022-07-25T23:27:40","modified_gmt":"2022-07-25T22:27:40","slug":"build-websites-with-dreamweaver-templates","status":"publish","type":"post","link":"http:\/\/sburke.eu\/blog\/2011\/06\/build-websites-with-dreamweaver-templates\/","title":{"rendered":"Build &#038; Manage Websites with Dreamweaver Templates"},"content":{"rendered":"<p><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/dwt-file-Dreamweaver-Template.png\"><img loading=\"lazy\" class=\"alignright size-full wp-image-328\" title=\"dwt-file-Dreamweaver-Template\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/dwt-file-Dreamweaver-Template.png\" alt=\"\" width=\"128\" height=\"128\" \/><\/a>How\u00a0do you\u00a0handle common elements of a webpage across a number of pages? (e.g. Navigation, Header, Footer areas etc)\u00a0How do you update the header or footer area of every webpage in a website?<\/p>\n<ul>\n<li>PHP Includes<\/li>\n<li>SSI Includes<\/li>\n<li>Manually with Copy and Paste<\/li>\n<li>Use Dreamweavers Template Functionality<\/li>\n<\/ul>\n<p><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/wappalyzer-discover-website-technology.jpg\"><img loading=\"lazy\" class=\"alignright size-full wp-image-330\" title=\"wappalyzer-discover-website-technology\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/wappalyzer-discover-website-technology.jpg\" alt=\"\" width=\"269\" height=\"52\" srcset=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/wappalyzer-discover-website-technology.jpg 384w, http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/wappalyzer-discover-website-technology-300x57.jpg 300w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/><\/a>I&#8217;ve been paying more attention to <a href=\"http:\/\/wappalyzer.com\" target=\"_blank\" rel=\"noopener\">wappalyzer <\/a>(plugin to firefox) which detects CMS, frameworks and other web technologies, and have found that quite a few websites use Dreamweavers Templates to manage their websites.<\/p>\n<h4>PHP Includes<\/h4>\n<p><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/php.gif\"><img loading=\"lazy\" class=\"alignright size-full wp-image-333\" title=\"php\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/php.gif\" alt=\"\" width=\"120\" height=\"67\" \/><\/a>I am a big fan of using PHP Includes to manage websites where there were common elements, such as a Header, Navigation and Footer. There are advantages and disadvantages. The main disadvantage in developing a website for someone is that they would have to be familiar with PHP Includes, and be able to edit the separate files in a text editor (or a Live View option). While a lot of websites use CMSs such as wordpress to manage their websites, people do not realise that these systems need to be regularly updated and maintained.<\/p>\n<pre>&lt;?php\r\n \/\/Require Custom Functions to Print Aspects of the Pages.\r\n require(\"config\/functions.php\");\r\n \/\/Print Top Nav. Send in the Name of Page for Title.\r\n print_top('Title of Page','Meta Description','Meta keywords');\r\n?&gt;\r\n&lt;!-- Begin Main Content Here --&gt;\r\n&lt;h1&gt;Home Page&lt;\/h1&gt;\r\n&lt;p&gt;Main Content Here..&lt;\/p&gt;\r\n&lt;!-- End Main Content Here --&gt;\r\n&lt;?php\r\n print_footer();\r\n?&gt;<\/pre>\n<p>There are a lot of advantages in having a static website which can be easily edited, managed and updated. Large websites use enterprise level\u00a0web publishing software (RedDot) which can output static html files.<br \/>\nUsing Dreamweavers Template functionality, you can achieve the same.<\/p>\n<h3>How to recognise a Website built with a Dreamweaver Template<\/h3>\n<p>Looking at the html source of a webpage will reveal the dreamweaver template codes.<\/p>\n<div id=\"attachment_426\" style=\"width: 950px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/example-dreamweaver-template-in-use.gif\"><img aria-describedby=\"caption-attachment-426\" loading=\"lazy\" class=\"size-full wp-image-426\" title=\"example-dreamweaver-template-in-use\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/example-dreamweaver-template-in-use.gif\" alt=\"\" width=\"940\" height=\"44\" srcset=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/example-dreamweaver-template-in-use.gif 940w, http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/example-dreamweaver-template-in-use-300x14.gif 300w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/a><p id=\"caption-attachment-426\" class=\"wp-caption-text\">html source of a webpage using a Dreamweaver Template<\/p><\/div>\n<p style=\"text-align: center;\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/example-dreamweaver-template-in-use.gif\"><\/a><\/p>\n<pre><span style=\"color: #008000;\">&lt;!-- InstanceBegin template=\"\/Templates\/2011.dwt\" codeOutsideHTMLIsLocked=\"false\" --&gt;<\/span>\r\n<span style=\"color: #008000;\">....<\/span>\r\n<span style=\"color: #008000;\">&lt;!-- InstanceBeginEditable name=\"head\" --&gt;<\/span>\r\n<span style=\"color: #008000;\">....<\/span>\r\n<span style=\"color: #008000;\">&lt;!-- InstanceEndEditable --&gt;<\/span><\/pre>\n<h3>Manual Setup\u00a0of a Dreamweaver Template<\/h3>\n<p>As I prefer doing coding in a text editor, below is the before and after\u00a0code required to create a dreamweaver template.<\/p>\n<pre>1. Create and develop your index.html as normal. (<a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step1-index.html\" target=\"_blank\" rel=\"noopener\">view file<\/a>)<\/pre>\n<pre>2. Make a copy of index.html and rename it to mytemplate.dwt\r\nEdit the DWT file and add in the following around the\r\nchangeable head elements:\r\n<span style=\"color: #008000;\">&lt;!-- TemplateBeginEditable name=\"head\" --&gt;\r\n&lt;!-- TemplateEndEditable --&gt;\r\n<\/span>\r\nand add the following around the changeable main content:\r\n<span style=\"color: #008000;\">&lt;!-- TemplateBeginEditable name=\"maincontent\" --&gt;\r\n&lt;!-- TemplateEndEditable --&gt;\r\n<\/span>(<a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step2-mytemplate.dwt\" target=\"_blank\" rel=\"noopener\">view file<\/a>)<\/pre>\n<pre>3. Edit the index.html file to look like:\r\n<span style=\"color: #008000;\">&lt;!-- InstanceBegin template=\"mytemplate.dwt\" codeOutsideHTMLIsLocked=\"false\" --&gt;\r\n&lt;!-- TemplateBeginEditable name=\"head\" --&gt;\r\n          &lt;meta name=\"Keywords\" content=\"websites, design \" \/&gt;\r\n          &lt;meta name=\"Description\" content=\"Example home page\" \/&gt;\r\n          &lt;title&gt;Stephen's Home Website&lt;\/title&gt;\r\n&lt;!-- TemplateEndEditable --&gt;\r\n&lt;!-- TemplateBeginEditable name=\"maincontent\" --&gt;\r\n          &lt;h1&gt;Welcome to the Home Page&lt;\/h1&gt;\r\n          &lt;p&gt;This is a paragraph of text on the main home page&lt;\/p&gt;\r\n&lt;!-- TemplateEndEditable --&gt;\r\n<\/span><span style=\"color: #c0c0c0;\"><span style=\"color: #008000;\">&lt;!-- InstanceEnd --&gt;\r\n<\/span><span style=\"color: #333333;\">(<a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step3-index.html\" target=\"_blank\" rel=\"noopener\">view file<\/a>)<\/span><\/span><\/pre>\n<pre><span style=\"color: #c0c0c0;\"><span style=\"color: #333333;\">4. <\/span><\/span>In Dreamweaver, with the above index.html open,\r\nModify (drop-down menu) -&gt; Templates -&gt; Update Current Page\r\nThis will update the index.html and show all of the code.\r\nThe code in the header, navigation and footer will be gray, and you can't edit it.\r\nYou can however edit the title and meta head sections and main content area.\r\n(<a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step4-index.html\" target=\"_blank\" rel=\"noopener\">view file<\/a>)<\/pre>\n<h3>Manual Setup Workflow<\/h3>\n<div id=\"attachment_349\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step1.gif\"><img aria-describedby=\"caption-attachment-349\" loading=\"lazy\" class=\"size-thumbnail wp-image-349 \" title=\"step1\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step1-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-349\" class=\"wp-caption-text\">Step 1<\/p><\/div>\n<div id=\"attachment_350\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step2.gif\"><img aria-describedby=\"caption-attachment-350\" loading=\"lazy\" class=\"size-thumbnail wp-image-350 \" title=\"step2\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step2-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-350\" class=\"wp-caption-text\">Step 2<\/p><\/div>\n<div id=\"attachment_351\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step3.gif\"><img aria-describedby=\"caption-attachment-351\" loading=\"lazy\" class=\"size-thumbnail wp-image-351  \" title=\"step3\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step3-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-351\" class=\"wp-caption-text\">Step 3<\/p><\/div>\n<div id=\"attachment_352\" style=\"width: 160px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step4.gif\"><img aria-describedby=\"caption-attachment-352\" loading=\"lazy\" class=\"size-thumbnail wp-image-352 \" title=\"step4\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/step4-150x150.gif\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-352\" class=\"wp-caption-text\">Step 4<\/p><\/div>\n<h3>Setup of Dreamweaver Template (GUI Method)<\/h3>\n<p>The previous method outlined the exact Dreamweaver Template codes, which you can insert manually. It&#8217;s not the most ideal method, as Dreamweaver has tools for creating and setting up templates, and it doesn&#8217;t add that much extra bloat.<\/p>\n<p>A &#8220;site&#8221; must be setup in Dreamweaver to allow you to create and update templates easily.<\/p>\n<p>As there are a few steps involved, a video has been created showing the key elements.<\/p>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"640\" height=\"505\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/DKwfhAAqpnA?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1\" \/><param name=\"allowfullscreen\" value=\"true\" \/><embed type=\"application\/x-shockwave-flash\" width=\"640\" height=\"505\" src=\"http:\/\/www.youtube.com\/v\/DKwfhAAqpnA?fs=1&amp;hl=en_US&amp;rel=0&amp;hd=1\" allowfullscreen=\"true\" allowscriptaccess=\"always\"><\/embed><\/object><\/p>\n<h3>Advanced Components of Dreamweaver Templates<\/h3>\n<p>If you have &#8220;Sub Navigation&#8221; menus, you can do a conditional include on pages which require a specific &#8220;sub navigation&#8221; or other element.<\/p>\n<h4>Optional Region<\/h4>\n<p>Example: There are a number of &#8220;product&#8221; webpages, and you want to show a common Sub Navigation on these pages.<\/p>\n<pre>\/\/Open the mytemplate.dwt file in Dreamweaver.\r\n\/\/Go to the area (outside of a editable region) and add the following.\r\n\/\/(Use floats and css to position)\r\n\u00a0<span style=\"color: #008000;\">&lt;!-- TemplateBeginIf cond=\"productsnav\" --&gt;<\/span>\r\n\u00a0\u00a0\u00a0 \u00a0&lt;ol&gt;\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0&lt;li&gt;Product 1&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;Product 2&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li&gt;Product 3&lt;\/li&gt;\r\n\u00a0&lt;\/ol&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0<span style=\"color: #008000;\">&lt;!-- TemplateEndIf --&gt;<\/span>\r\n\/\/In the main head area, add the line:\r\n<span style=\"color: #008000;\">&lt;!-- TemplateParam name=\"productsnav\" type=\"boolean\" value=\"false\" --&gt;\r\n<\/span>\/\/Choose to update all pages. By default it is \"false\" so no sub nav\r\n\/\/will be inserted into any pages.\r\n\/\/Open the html page you want the subnav on.\r\n\/\/In the head config line, change to:\r\n<span style=\"color: #008000;\">&lt;!-- TemplateParam name=\"productsnav\" type=\"boolean\" value=\"<strong>true<\/strong>\" --&gt;<\/span>\r\n\/\/Update the current page (Modify &gt; Templates &gt; Update Current Page<\/pre>\n<div id=\"attachment_441\" style=\"width: 280px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/dreamweaver-template-optional-area.gif\"><img aria-describedby=\"caption-attachment-441\" loading=\"lazy\" class=\"size-medium wp-image-441\" title=\"dreamweaver-template-optional-area\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/dreamweaver-template-optional-area-300x261.gif\" alt=\"\" width=\"270\" height=\"261\" \/><\/a><p id=\"caption-attachment-441\" class=\"wp-caption-text\">Optional Area for SubNav in the DWT<\/p><\/div>\n<div id=\"attachment_442\" style=\"width: 290px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/products-webpage-with-optional-sub-nav.gif\"><img aria-describedby=\"caption-attachment-442\" loading=\"lazy\" class=\"size-medium wp-image-442\" title=\"products-webpage-with-optional-sub-nav\" src=\"http:\/\/sburke.eu\/blog\/wp-content\/uploads\/2011\/06\/products-webpage-with-optional-sub-nav-300x239.gif\" alt=\"\" width=\"280\" height=\"239\" \/><\/a><p id=\"caption-attachment-442\" class=\"wp-caption-text\">Products Page with Optional Nav Element<\/p><\/div>\n<p>&nbsp;<\/p>\n<h3>Making Changes to the Template and updating all Webpages<\/h3>\n<p>Of course the real benefit of using Dreamweaver Templates is when it comes to making changes. A dreamweaver site should be setup\/defined as this will make things much easier (The above video goes through this.).<\/p>\n<ol>\n<li>Open the mytemplate.dwt file.<\/li>\n<li>Modify (drop-down menu) &gt; Templates &gt; Update Pages&#8230;<\/li>\n<\/ol>\n<h3>Other Resources<\/h3>\n<p>There are actually a ton of resources available on Dreamweaver Templates. The above does not cover all capabilities of DW&#8217;s templates. Check out <a href=\"http:\/\/www.youtube.com\/watch?v=4wrlPNsf63U\" target=\"_blank\" rel=\"noopener\">other tutorials<\/a> on dreamweaver templates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How\u00a0do you\u00a0handle common elements of a webpage across a number of pages? (e.g. Navigation, Header, Footer areas etc)\u00a0How do you update the header or footer area of every webpage in a website? PHP Includes SSI Includes Manually with Copy and &hellip; <a href=\"http:\/\/sburke.eu\/blog\/2011\/06\/build-websites-with-dreamweaver-templates\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[16,18,51,50,19],"_links":{"self":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/326"}],"collection":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":122,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"predecessor-version":[{"id":690,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/posts\/326\/revisions\/690"}],"wp:attachment":[{"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sburke.eu\/blog\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}