The Tutorial Step By Step:

1- Create Your Website Template: Start by creating your website layout in Photoshop. Design the layout in the way that you want your web pages to look like when it is ready.

2- Slice your layout: The second step is to use the slice tool to cut your final Photoshop website template into pieces such as the header, columns, content areas and the footer.
The slice tool is the tool that looks like a mini knife in your tool bar.

Fig-2

You use the slice tool to draw a rectangle around each section that you want to separate from other sections in the layout of your website. In our case here we have the header, left column, content area and footer. Also, you need to slice each link you might have in your layout. You will end with something like this:

Fig-3

3- Enter Link Slices Data: While keeping the slice selected, you need now to put the urls into your links. You can put the links later when we get to Dreamweaver, but since we are here, why not learn how to do it.
Right click a slice that is a link slice and click slice properties:

Fig-4

A new window will open where you can enter the link properties, enter the appropriate values:

Fig-5

Do the same thing for all your link slices.


4- Create HTML from your Photoshop website template: when all your slices are ready and you are happy with the template design, from the Photoshop menu bar, click on File, Save for Web & Devices and in the new window that shows, click the save button at the bottom.
The trick here is to make sure that the html and images is selected in the "Save as type" menu.

Fig-6

Tip: It is a good idea here to give your file name a name that relates to the content of your website. This will help a little for your search engine optimization because Photoshop will name the images using the name you enter here for file name.


If you browse to the directory where you placed your saved files, you should now find an html file and an images folder. This means you completed the Photoshop work. Close Photoshop and open Dreamweaver.


5- Open Template from Dreamweaver: Click File -> Open and browse to the html file that you saved in step 4.


6- If you did not input the links when you created your 'link' slices, now is a good time. Click on any link slice and point them to their respective links.


7- Template Regions: If you right click any image on your template file, you will see the "Template" menu. The template's sub-menu has various options for creating your template's regions. You will see that you can create (or edit): editable regions, optional regions or repeating regions. Each one has its own job in the template.

Fig-7

a- Editable Template Regions: those are probably the most important regions of your template. From their name, you can deduce that the editable regions of your templates are going to be the parts that are editable on your web page. They are usually the parts that differ from a page to page in your website.
Any region that is outside these regions cannot be edited when creating a web page using your template. Any part of your pages that you want to stay consistent across your website should be outside these editable regions.
In our Photoshop example, the most obvious editable region is the "content area". We want to have every page of our website to have its own content, so we make the "content area" an editable region.
Right click the "content area" (which was sliced in Photoshop), go to the "Template" menu and click on the "New Editable Region" submenu (see fig-8). Give it a name (ex: content_area).
You can now convert any slice that you think is should be editable on web pages. For our example, I will make the links in the left column both editable regions so I can change them on different pages.

b- Repeating Template Regions: Of course, those are the regions that are standard and consistent all over the website. A good example of these regions would be your header, footer and maybe your right or left columns. A good tip is to remember that you can include an editable region within a repeating region.
Again, go through each link, image or text that you want consistent on your website and make them "Repeating Regions". This should also include border images and the images that make the final website layout.
In our example, we have the header and footer images, links and border images that were created when we sliced our Photoshop design. Right click each and every one of them, go to the "Template" menu and click the "New Repeating Region" and give it a name.


c- Optional Regions: Optional regions define place holders on the template that you can decide to show or hide when using the template to make your web pages. In my example, I do not have any regions that I want to set as optional regions. This is your home work J have fun.


After you have created all the regions that you need, save the template and you should end with something like this:

Fig-8

8- Create the Dreamweaver Template: Very easy, having your html open in Dreamweaver, Click File -> Save as. When the 'Save As' window opens, make sure to choose 'Template Files (*.dwt)' for your 'Save as type'.

Fig-9

9- Using Your Dreamweaver Template: Click File -> New and choose "Page From Template". Select the template that you have created for your project and click create!
You will notice that you can only edit the regions that you made "editable regions". Create your first page by editing any editable region that you need for this page.
In this example I changed the main content area and put text instead. Save as html and preview... You got your first page.
Following the same procedure, do the same thing to create another page. I will create a second page. You can keep doing this for all the pages that you created links for when you sliced your design in Photoshop.


10- Editing Your Dreamweaver Template: This is the fun part and the most important reason behind having a website template in the first place. Make a change in one place and the changes appear on all pages at once.


Open your template file. Make any changes you want, such as making an image or changing the copyright notice to the current year.
From the "Modify" menu, choose "Template" and then "Apply Template to Page". Select the pages that you want the modifications to take effect on, click the update button and check your web pages in your browser.


I hope this tutorial helps you get the idea of creating templates using Dreamweaver. If you have any questions or comments, feel free to submit them below and I will respond to them as soon as I can.


Good luck with your website designs.


Feel free to use the information included in this tutorial for both personal and commercial website designs. However the tutorial itself is a copyright of zeronese.net and it is illegal to copy and/or redistribute it in whole or in part without a written notice from zeronese.net.