Dreamweaver is one of the premiere html editing programs available today. In addition to generating html, it also creates some JavaScript and even some Flash text and buttons without leaving the program. Dreamweaver also has an exceptional file management system and an ftp utility to manage both your local and remote web sites.
Let's explore the use of Dreamweaver's Template and Library capabilities. These are tools used to expedite the creation of Web pages and also for updating those pages more easily whenever changes are needed in the future.
In the process of learning about templates and library items
we will also be creating a set of rollover buttons. Rollover
buttons change when you roll your mouse pointer over them.
Dreamweaver generates both html and JavaScript to accomplish
them. A set of buttons used for getting around a web site
is usually called a navigation bar.
Dreamweaver template files are used to generate new files that look like the template. The files that are created can be modified to the extent permitted by settings specified within the template file. Dreamweaver templates are a lot like the templates you may have already used in programs such as Microsoft Word or Excel and the procedure for creating them is about the same.
Typical uses of templates in Word are letterheads, memos, and envelopes. In Dreamweaver, templates are used to rapidly turn out pages that are identical in most ways, but have differences in one or more specific areas. This can include pages used to display information such as individual items for sale or the biographies of each member of a company's management team.
These types of pages would probably be expected to look almost the same except for a photo of the item for sale (or of the manager in the case of the latter) and the text related to it.
TopNote: The following section ("The General Proocedure") describes in a general way how a procedure is accomplished. It is not intended to be step by step instructions. The steps for you to follow to complete this exercise will begin in the section: Get Dreamweaver, Set Your Resolution, Get the Files and Folders. It ought to be obvious when you get there what steps to take.
The process for creating a template is straightforward. First, you create a file with the objects, formatting, and layout that you want to use as the basis for future files. Then, you select from the File menu: Save as Template...
An important difference between Dreamweaver and Word templates is that with Dreamweaver you need to designate certain areas as being changeable (editable) and others as not editable (which is the default).
This prevents you from inadvertently modifying those parts of a file derived from a template that you may not want changed, such as navigation buttons, background color, logo, a company email link, etc. It's an important concept to grasp because, unless you designate otherwise, no part of a file made from a Dreamweaver template can be changed.
After creating the template, whenever you want to create a new file that uses the template file as its starting point, begin by using File -> New -> and then in the New Document dialog box that opens, select the Templates tab ...then select the template you want to base your new page on.
A new file would open that would be identical to the template, however you would not be able to modify anything but those sections previously designated as editable regions. Changes made to the derivative file would not affect the original template file of course. To modify the template itself it is necessary to modify the original template file.
We will be making a template as a part of this exercise.
We
will also save as a library item a group of four rollover
buttons (a navigation bar) that we will create. Library items
in Dreamweaver are parts of a page that you save as a separate special file. You can then use the library item on many different pages.
The difference between a library item and a template is that a template provides a complete html file and a library item is a part of a file. Library items can be things such as buttons, tables, banners, or a group of text links such as the ones you often find at the bottom of a web page.
Dreamweaver saves templates as .dwt files and library items as .lbi files. As soon as you create one or the other, a folder is automatically created by Dreamweaver to contain it named (not too surprisingly) Templates or Library respectively. You will find these folders in what Dreamweaver asks you to define as your site's local root folder, which we will discuss in a minute.
Templates and library items are similar in that when you change the original template or library item file, every instance (each use) that has been derived from it can be updated simultaneously, with your approval. This simplifies making global modifications of your site's files.
For example, if you change the address of a link in a navigation bar in your library, then all pages using that same library item will be updated as well. Note that in the case of many if not most scenarios, any files that have been affected will be changed only on your computer (in your "local site") and not on the server, which is where copies of the files that you work on are usually made available for the world to access. Those files will need to be updated as well. Dreamweaver provides various means for doing that.
First
of all, if you haven't downloaded Dreamweaver version 8, please
do so: Macromedia
Dreamweaver 30 day trial download
Make note that Dreamweaver recommends that you set your monitor resolution to be at least 1024 x 768. Otherwise, you may not be able to see all of the parts of the interface. Those of you with 17 inch monitors may have your monitor set to 800 x 600. To check or change your resolution, using Windows:
You can download a zip file that contains all the files you need for this exercise from this link. Save the file to your computer and then double click on it to extract the files:
To save the files from either an email attachment or from the browser link (above):
Windows users:
Mac users:
Note that when you first try to open the basic.html file in Dreamweaver, you may get a message that asks you if you want to "Make Writable" the file. Agree to this. In other cases, if you have any problems when you try to save the file, it may be due to permissions.
To alleviate this problem if it occurs:
Windows users:
- Find the file in My Computer.
- Right click on the file's icon.
- Select Properties from the bottom of the menu.
- In the dialog box that opens, in the General tab section, uncheck the Read Only check box.
Mac Users:
- Find the file in Finder.
- Select it.
- Press the Command-i keys on your keyboard (this provides "information")
- At the bottom of the Info box that appears, set the Ownership & Permissions so that you can Read & Write.
We will be defining a local root folder in a moment. First, an explanation about this. One of the most important things to do when using Dreamweaver is to create a folder on your computer and then designate that folder as the local site.
A local site is nothing more than a folder that you create on your computer that will be used to contain all of the files associated with one web site. This includes your local copy of files that ultimately get put on the remote server for the world to see.
You can keep any files at all in it, such as related MS Word documents, not just HTML, GIF and JPEG files. For example, you can store original image files, text files from your clients, production checklists, etc., in it. Ultimately you will also use it for uploading to the remote server the files that you want to make available to the Web.
Creating a local site allows Dreamweaver to track file movement. It can then update any affected links in the code for you automatically whenever you move a file or change a link on any page in your site. Dreamweaver can update all affected links. Otherwise you would need to manually go to each file and change the links in it, which can be a huge undertaking fraught with the risk of forgetting to change some affected code.
In order to accomplish this, Dreamweaver generates a cache of information about the files and folders in the site and the relationships between them (links, paths, etc.).
Launch Dreamweaver. First you will define the site.
Dreamweaver makes it easy for you to see your html file in a browser. Even though Dreamweaver does a fairly good job of displaying what your pages will look like in a browser, you can never be really certain how your file will appear until you open it in an actual browser.
This can be particularly true with web pages that use what are called Cascading Style Sheets as well as JavaScript. Consequently, it is a good idea to make a habit of routinely seeing what your page actually looks like in one or more different types of browsers. That way you can be confident that your work displays the way you intended it to. You should check your page in a browser almost as often as you save your file, which ought to be done frequently in the event of a crash.
Let's make sure that you are set up in Dreamweaver for previewing your work in a browser easily. Note that this may already be properly set up in your copy of Dreamweaver, therefore don't be surprised if these settings have already been established:
The Preview in Browser options allow you to preview your web pages in a wide variety of browsers, which is always a good idea. In order to do this you need to first have those browsers on your computer.
You can usually find downloads of older browser versions at the Microsoft, Netscape, and other web sites, but you may need to dig deeply because some publishers are not in the habit of encouraging the use of their older browsers, although they usually provide them for web developers (like you!). Don't forget that the truly professional developers will also test on Macs and even UNIX/LINUX platforms using different operating system versions and browsers.
Now, using Dreamweaver's File menu, open the file basic.html. (If you are asked, agree to make the file Writable, or see the Permissions section above.)
Press F12 on your keyboard.
This file ought to now open in your browser.
Click on the image of the banner at the top of the page. You will be able to tell if the image is selected:
The Properties panel is what you will probably find to be the most useful part of Dreamweaver. The Properties panel changes depending on where the insertion point is or what is selected at the time.
Make note that there is a little white triangle in the lower right corner of it. You may not see it if your monitor is still set to less than 1024x768 (see notes mentioned previously).
Click on the white triangle a couple of times. It allows you to expand or collapse additional options that may be available in the Properties panel. I recommend that you leave the Properties panel open to the largest size.
With the image selected, the Properties panel will offer options related to it. You will notice an empty Link box. Fill this in with the URL of a site you like. You need to include the transfer protocol (http://) at the beginning of the web address. For example, you might enter this:
http://www.google.com/
After you type in the URL, press on the Enter key. Be forewarned that the page may all of a sudden shift to the left. That's OK. Use your scrollbars to return to viewing the left side of the page once again.
Directly underneath the Link box is a Target box. Targets are for controlling where the file specified by the link will open. Probably the most useful one is _blank. It's an odd name, particularly with the required preceding underscore. It causes the link to open a new browser window and to have the linked page open in that new window. Select Target: _blank
Now click on F12 on your keyboard. This should open the page in your browser. If you move your pointer over the banner, the pointer will turn into a pointing hand icon, indicating the presence of a link.
Click on it. The link ought to open in a new window. When done, return to Dreamweaver.
Next, we will be creating rollover buttons and putting them in the small table in the vertical column on the left side of the page. We will not create links for these rollovers now, however the rollover effect will work. Links could be added later.
Then we will save the table containing the rollover buttons in Dreamweaver's Library. We do this because if we wanted to create any new pages for this site, many of them may be able to employ the navigation bar we will save in our Library. We would not need to recreate it for every page. Instead, we can literally just drag a copy of it out of the Library and put it on the page where we need it.
Furthermore, if we wanted to change anything about all of the uses of one library item, all we would need to do is to change the original library item's file. Then all derivative uses of it would change as well (our permission would be asked for first).
For example, when the time came to apply links to the buttons we are about to make, we would only need to apply the links to the buttons in the library item. Then all instances where the library item is used could be automatically updated to include the new links or any other changes that are made, all at the click of a button.
However, this would only modify the files in your local site, that is, on your computer. The files on the remote server would still need to be updated.
What Dreamweaver needs to create a rollover image is actually two alternating images: the Original (normal) image and the Over image, which is the one that appears when you move your pointer on top of the button. Note that the Original image is sometimes called the Up image. As one might expect, the two images that are used need to be the same size.
Dreamweaver creates JavaScript code to make the rollovers work. We will now fill the four cells with rollovers, inserting one rollover per cell, using the instructions that follow. The sequence of the rollover buttons will be, top to bottom:
Next, we will select the part of the page that we want to convert into a library item namely, the navigation bar of rollover buttons that you just created including the table they are in. We will pretend that we will need to use it on multiple pages at our web site.
How do we select the navigation bar? It currently has two containers: a table (with the four cells) which is inside of what Dreamweaver calls a layer.
Layers define a specific location on a page, tables do not. Therefore, we want to select the table in the event that we may want the navigation bar in slightly different positions on different pages. If we save the layer code as a part of our library item and then used an instance of that library item, we would find that we couldn't move it once we put it on the page.
Dreamweaver will automatically create a new folder in the site root folder called Library and will put this library item in it using the extension: .lbi (library item).
In the section after this you will convert the file so that it replaces Dreamweaver's layers with tables. This can be a good thing to do because some of the much older browsers (those older than version 4) cannot understand Dreamweaver's layers because they use the <DIV> tag.
The file currently has three layers. The layers have been useful assembling the parts of the page because they simplified the positioning of items thus expediting the creation of a nice composition.
Converting layers to tables is very easy with Dreamweaver. You can also convert tables back to layers if you want to use them again later to make readjustments to the page composition. The conversion process usually results in a faithful representation of the original page that was made with layers, but it doesn't always.
There is another potential problem, and that is if any of your layers are overlapping, even a tiny bit, then Dreamweaver will not permit the transition. The Overlapping Layers Detected dialog box may open, sometimes listing the offending layers. Or you may get the error message "This file cannot be made compatible with version 3 browsers because it contains layers that are partially off screen".
If you get error messages such as those just mentioned, then you will need to follow these steps, but there is no need to do so unless you have such error messages. If you get such an error message, you will need to move the offending layer(s) so that they don't overlap or are not partially off screen:
Next, on to the "conversion ceremonies"!
You've done it (I hope...)! The layers will no longer be there: a table has replaced them and the page ought to look similar to the way it looked before, or else very close to it. Press F12 on your keyboard to preview the page. All the rollovers should continue to work.
One final step is needed. By default, html will always include a border around a page. Layers preclude this by using absolute positioning which permits the specification of a location at precise coordinates in a browser window. But your page probably has margins now when displayed in the browser.
To prevent the margins using html, you will need to set the html body tag margin attributes and there are two pairs of them, one for Internet Explorer and one for Netscape. Please do the following:
Next, we will make our page into a template so that we can easily create new pages based on it without having to totally assemble them. Our page is intended to be for displaying dinner specials. There may be many of these special dishes that you would want to have web pages available for. Using a template will make this much easier.
Dreamweaver will save the template as a file with the file extension .dwt (DreamWeaver Template). Dreamweaver will also automatically create a new folder named Templates (that is, if one had not yet existed, and in your case it probably didn't) in your site's root folder and put your new template file in it.
The upper left corner of the template file (as it appears if the file is not maximized):
Unless you specify areas of a Dreamweaver template to be editable, you will not be allowed to modify the files made from a template at all, with the exception of changing the page's html title (the text that appears in the title bar).
Therefore, you need to specify the parts of the pages derived from the template that you want people to be able to change. These need to be identified as Editable Regions.
In our template there are two areas that we would want to be able to modify in files derived from this template. Each is a table cell. The two cells are in the middle of the page, colored orange and very dark brown, and they have labels typed inside of them. To make them each editable, follow these steps for each of the two cells:
Let's make a new file from the template just to make sure it works:
Congratulations. That's it. I hope you enjoyed making rollovers, a library item and a template. This is what a final page from the template might look like if an image of food had been added:
Only after you have finished this exercise, those of you who know some html may want to now investigate the code that Dreamweaver generated. You can do this using the keyboard combination of Ctrl + ` (that second character's key is in the upper left corner of your keyboard, under the Esc key). Pressing on this keyboard combination will toggle you from Code view to Design view and back again. If you select an object in Design view, then the code for it will be highlighted in the Code view. Try changing some of the code if you know how, and see what happens. Have fun.
Copyright © 2004 Dan Vaughan and its licensors. All rights reserved.
