Dreamweaver is packed with features to make you more productive and to save you tons of time and energy. Dreamweaver makes it easy to create different assets for your websites, style them and even implement advanced features. One of the best features of Dreamweaver is the ability to create your own page templates so that you can code parts of your site only once, and focus on creating the specific new content for each page. Another advantage of using pages templates in Dreamweaver is that when you change a part of your page template, you can make the changes site wide instantly. This means that you don’t have to open each individual page and make the same changes over and over again. If you combine our Dreamweaver Menus with page templates you can create a consistent site wide header navigation.
Step 1: Lay out Your Site
For the most part, creating a page template is fairly easy in Dreamweaver. To start out, you will want to design your site like you normally would. Create your header, which may include your main source of navigation, such as CSS drop down menus. You can create yours from scratch, or you could use CssMenuMaker’s Dreamweaver Menu Extension, which allows you to create a CSS Dropdown menu from scratch, using a series of menus and options inside of Dreamweaver.
Step 2: Decide What will be the same on all pages
Create your content section, where most of your information and articles will go, your sidebar (If you have one) and your footer. You can make your content area blank, but you don't have to. The best way to approach creating a page template is to think about what will change and what will stay the same across your site. Your header will most likely stay the same, as well as your navigation. Depending on your site structure and your layout, your sidebar might change or stay the same. If your sidebar is full of set links that you will use over and over again, add those links to your template page. The footer will most likely stay the same as well. The content of the site though, found in the main section in the middle, will most likely change from page to page, including text, images, links, videos, and anything else you can think of. When creating your page template, you will want to leave this blank. Below is an example of what you would leave alone in your page template.
The content area is where we will add our editable region, where we can place our dynamic content for each page. Once you have determined the layout for your page and added the content that will stay the same across every page, you can now create a page template. Simply go to File> Save as Template.
Step 3: Saving Your Template
A dialog box will come up, asking where to save the template, and what to call it. It will list all of the templates available, so if you are creating multiple page templates, you can do so without accidentally saving over an existing one. You can name the template and give it a description so that you know what the template is for, which is helpful if you have multiple templates for the same site. Dreamweaver is really helpful in the aspect that when you create your first page template, it automatically creates a folder in your site’s root directory called Templates, and places your template within that folder. This keeps all of your files nice and organized.
Step 4: Create Editable Regions
We need to add our editable regions now before we get started. The amazing thing about Dreamweaver templates is that if the layout for formatting is going to be similar, then you can highlight the area that you will be changing, and choose Insert> Template Objects> Make Editable Region. This will keep the content in the template, but it will be a completely editable region. The code below shows how Dreamweaver defines an editable region. It simply uses a commenting system, so that you know where the editable region begins and ends. The area selected is the jQuery slider portion of our content.
<!-- TemplateBeginEditable name="Slider area" --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <h1> Tons of Options Available</h1> <img src="../images/photos/cosmicgrunge.jpg" class="marquee_panel_photo" alt="3" width="960" height="300" /> <div class="marquee_panel_caption"> <p>You have the choice of simply purchasing the component that is right for your needs, or you can become a member of Creative Beacon, and have access to them all!</p> <p><a href="#">Learn More</a></p> </div> </div> <div class="slide"> <h1> Easy to Customize </h1> <img src="../images/photos/retro.jpg" class="marquee_panel_photo" alt="3" width="960" height="300" /> <div class="marquee_panel_caption"> <p>Made out of simple html, CSS and jQuery, this slider can hold plenty of featured content</p> <p><a href="#">Buy now!</a></p> </div> </div> <div class="slide"> <h1> Custom Designed for You </h1> <img src="../images/photos/bokeh.jpg" class="marquee_panel_photo" alt="3" width="960" height="300" /> <div class="marquee_panel_caption"> <p>Each slider is designed for a different purpose, look, and feel in mind. Browse our selection and find the one that is right for you!</p> <p><a href="#">See More</a></p> </div> </div> </div> </div> <!-- TemplateEndEditable -->
In the example, I made the area containing the image slider and the captions editable, so when I create a new page using the template, the slider and all of the info will be there, but I can edit the text and images, making changes. Items such as the logo or the footer that will stay the same will remain that way, and if we change our logo within our template, we can update it site-wide instantly.
Step 5: Using Your Template
To use your newly created template, simply go to File> New> Page From Template. Dreamweaver will ask you which page template that you would like to use, so simply click on the template that you just made. Dreamweaver even shows you a preview of what the template looks like, so when you have made more than one for a site, you can choose the right one. The new page will come up, looking just like the original layout that we created. Simply click the text in the editable region and make your changes. Save and name your page.
Step 6: Link Up Your Pages
In our example, I created the site and the template without linking any of the pagers together. This isn’t a problem because once we have all of our pages made, we can go back to our original template and add all of the links, link up all of our pages, and update the changes across the entire site instantly. The practicality behind this is that a site is always changing, and to go back and add menu items and links to each individual page is a waste of time when you can do it on your template page once, and you are done.