Dreamweaver Tutorial

This is really a great article for beginners who want to learn Adobe Dreamweaver. It shows you how to create templates of webpages nad then use them again. Well we all know that reuse is good for everyone and benefits all.

With an example for giving the demo this tutorial shows how to create a file based upon the template that you have created and edit the text and images in it. With clear and easy instructions this article explains you the complete procedure very very thoroughly so that you don’t make mistakes.

Templates are a unique feature within Dreamweaver allowing a web designer to create a single design and then use that design on several different pages. When that base design is changed the pages based upon that design also change. That created template will begin with any design or any page within our site. Here I have got a company page which is a page that I have already built out but I am going to need to build multiple pages for each of my navigation entries and they are all going to share the same base design. So we will begin after I have completed the creation or design process for the page, initial page. We will begin by going to our File menu and choosing as save as template.

Here I am able to give this page a name. Since this is our company page, we will call this company and hit save. Now I am going to be asked the links to all of the images and CS files so I will now do that. And now you will notice that in my file panel that I have company.dwt. This dwt file is a Dreamweaver template file.

Now from here I can begin the process of deciding what elements of the page are going to be unique and which elements are going to be changed by the individual pages that they are going to be based upon. That makes sense. So I am going to do this by doing what we call an editable region. Now obviously something like the text here is going to be something that I ant to change. So I am going to select all of this paragraph here and say that this is going to be an editable region. I will do that by going to my template section of my insert panel and choosing to create an editable region. I will be able to give this a name.

I will call this text content and click ok. When we base pages on this template, we are going to be able to modify this area of the text. Of course, we may or may not want an image so we are going to define this image what we call as an optional region. So as we create pages based upon the template I can choose whether or not I want the image to occur. We will call this page image. How’s that for an original name? And we are gonna choose to show this by default. Now under our advanced tab we can even add additional parameters or even turn on and off other options or regions of the page based upon whether or not we have chosen to show this particular element. Clicking ok. Finally if we are gonna change the element or the image itself we want to give page a new image so we can also choose without knowing anything about placing images on the page we can choose to modify this particular attribute of the image tag.

So I will choose the attribute to be editable an I am going say the src or the actual location of the image is what we want to make editable. I can choose to give this a label. So if someone doesn’t realize what this is I will call this image location. I will say what type this is. I will say url because we ar going to be pointing to some text or pointing to an element and exactly what that default is. Now when I have done all of this I will click ok. And now we will see that the image itself has disappeared because now it is simply a place holder for whatever image we decide upon. With this then will look over to the left hand side of my page where I will notice that I have some navigation. Now these are links that will go to different sections of that site under the history subsection. However, what if I want to add an additional one. I don’t want any other formatting. Therefore, this entire entry in the data list and what I am going to make this is what I call a repeating region.

This is going to allow me to add on additional elements without disturbing formatting elements. We will call this menu entry and click ok. Finally I want to be able to change this text so I am going to choose the text itself which is the entire link there and make that editable just as we did before. We will call this menu link and click ok. At this point we have created a template that has individual content areas for editing as well as the ability to turn on and off areas of the page or add additional elements to the page without disturbing the formatting.

Tags: dreamweaver download, how to use dreamweaver, dreamweaver mx, adobe dreamweaver cs3, adobe dreamweaver, free macromedia dreamweaver tutorial

Tags

Dreamweaver Tutorials