Dreamweaver Templates | How to Create and Use Them ...



Dreamweaver Library Items | How to Create and Use Them | Juliet Davis

_________________________________________________________________________________

JavaScript WARNING: Library items and Templates can be problematic with JavaScript (such as the ones used for rollovers, pop-up menus, etc.), so if you plan to have JavaScripts in your template itself, make sure that the file called 'mm_menu.js' is on the server along with the rest of your files. This is a JavaScript file generated by Fireworks/Dreamweaver.

Why Use a Library Item?

When you are using an element repeatedly in a web site (example: a top bar or side bar), it is vital that you create a system in which changes can be made to that item once—and all of the pages that feature it are updated automatically. Otherwise, if you have 2000 web pages with the same element, you would have a lot of work on your hands. One way of updating easily is by using a CSS sheet that affects the 2000 pages and then updating the CSS sheet only. Another way is to create a library item in dreamweaver so that when that item is updated, it changes in all of the pages in which it appears. This can be a quick and easy solution for a small web site. For large web sites, CSS is necessary.

_________________________________________________________________________________

STEP ONE: Create your library items.

1) Open topbar.html and set your button links (if any).

2) Select the entire table (not just a slice).

3) Open your Assets window (WINDOW>ASSETS) and open the library (on the left side of the window, click the library icon).

4) Click the “New Library Item” button at the bottom of the window. You will see your new item appear in the library.

5) Repeat these steps for your side bar, or for each graphic or navigation bar that will repeat. Dreamweaver creates a folder called “Library” in your root directory and creates these items as .lbr files.

STEP TWO: Create your first HTML page with your library items.

1) Create a new HTML page (FILE>NEW>Basic Page>HTML).

2) Save the page as index.html.

2) Create a table that will hold your library items and accommodate a content area.

3) Drag each library item over from your library palette to a table cell.

4) Tweak as needed. If you see any spaces, select the unruly area and go to your Properties Inspector to set cell spacing and padding to “0”, and border to “0”.

STEP THREE: Create your pages.

Create your home page content. Create more pages by using FILE>SAVE AS. You can even create a template if you want to, to use for your other pages (see “Dreamweaver Templates”).

STEP FOUR: Want to make changes?

Make changes to any library items in the .lbr files

Dreamweaver Templates | How to Create and Use Them | Juliet Davis

_________________________________________________________________________________

JavaScript WARNING: Library items and Templates can be problematic with JavaScript (such as the ones used for rollovers, pop-up menus, etc.), so if you plan to have JavaScripts in your template itself, make sure that the file called 'mm_menu.js' is on the server along with the rest of your files. This is a JavaScript file generated by Fireworks/Dreamweaver.

Why use a template?

Imagine that you have created a beautiful web site for your client and they want an office assistant to be able to update content in the pages. Creating a template identifies “editable regions” and places everything else off-limits so that pages cannot be damaged. Also, people who want to create new pages can easily use the template and merely add content to those regions. Templates can contain CSS, tables, library items, snippets, etc.

_________________________________________________________________________________

STEP ONE: Create an HTML page.

Create the HTML page exactly the way you want your template to be (with unchanging elements only, such as navigation bars—leave all other areas blank). See “Slices with Tables and CSS” to see how to slice your interface comp, bring elements into Dreamweaver, assign button links, and assemble a web page.

STEP TWO: Create your “regions”.

You will create “Repeating Regions” (those that will repeat on many web pages) and “Editable Regions” (those that will change, such as content areas).

1) On the “Insert” bar, open the “Templates” tab.

2) Create “Repeating Regions”. To do that, make sure your template is open and select an area that will not change (such as a nav bar). In the “Templates” menu, click the “Repeating Regions” button. Repeat this step for all repeating regions.

3) Create “Editable Regions”. To do that, make sure your template is open and select an area (or place your cursor in a cell) that will change (for example, the content area). In the “Templates” menu, click the “Editable Regions” button.

STEP THREE: Save your HTML page as a template.

Save the HTML page as a template (.dwt file) by going to SAVE>SAVE AS TEMPLATE. Call it “template” (the extension is created for you). Dreamweaver creates a folder in your root director called “Templates”, and your .dwt file will be inside.

STEP FOUR: Apply your template to new pages.

1) Open a new page HTML page and save it.

2) Go to your Assets window and click on the “template” button. When you see the icon for your template pop up, drag it over to your new page.

STEP FIVE: Want to change your template or library items?

Make changes to your template in the .dwt file. Make changes to any library items in the .lbr files. A dialogue box will pop up allowing you to apply your changes to all pages affected.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download