Cascading Style Sheets
Libraries and Templates


 

Dreamweaver Libraries, Dreamweaver Templates, and Color Schemes

 

Your friends are at the beach, but youre at home, building the same menu bar for the hundredth time. The site youre working on has lots of pages, but most of them are an awful lot alike. Isnt there some way that Dreamweaver can help you out?

Yup.

Dreamweaver has a couple of different time saving features that will leave you in high spirits.

 

The Library

If theres an item that you use a lot, like an image or a group of items like a nav bar or a banner, you can put those items in the Library. The Library is a convenient holding place for items that you repeatedly use. If you need it again, drag it out of the Library and place it on the screen. Use it as many times as you wish! The best part is if you change the item in the Library, all the placed items change too!

 

Putting Items in the Library

  1. Open the Library. Click WINDOW-> LIBRARY

The Assets window opens. The assets help you to easily keep track of things in your site. The Library is kept in the assets window.

 

  1. Select the item or group of items you wish to place into the Library.
  2. Drag the items into the white Library window.
  3. Name the item.

 

When you add items to the Library, Dreamweaver will create a Library Folder in your Site Files View. Dont delete it! The Library Folder doesnt need to be uploaded when you place your site on the web, but its a pretty good idea. Back-ups are always nice

 

Placing Items From the Library in your Web Pages

  1. Select the item in the Library
  2. Drag it onto the screen

 

Editing Library Items

Library items cannot be edited on the screen. You can only change them in the Library, but take care, if you change the Library item, Dreamweaver will want to update all of the placed library items in your website.

 

To Edit a Library Item:

  1. Double click the desired item in the Library. It will open in a new view.
  2. Change whatever you feel like. You can add things or take items away, too.
  3. Close the editing window. Save Changes.
  4. Dreamweaver will ask you if youd like to update the pages with that Library item. Click "Yes"

  1. Click "Done"

 

Using A Library Item From Another Site

You can use Library items from other sites, but you have to do it manually.

  1. If your current site doesnt have a "Library" folder, youll have to make one.
    1. In the Site Files view (F5) Right-click (ctrl-click, Mac) on the Local Folder side of the site files view. Choose "New Folder"

 

    1. Name the folder "Library". Notice the capital "L"

  1. Close Dreamweaver.
  2. Navigate through windows to find the Library item you wish to copy.
  3. Copy the Library item from one sites Library folder to the others.

 

Templates

Even if your site has fifty pages, it will probably be built from only two or three unique pages. Youll have a unique homepage, and a couple of different templates. Youll use the templates to automatically build the other pages.

Templates are kind of like full-page versions of Library items, except that you can set changeable areas. Like Library items, if the original template is changed, all the documents created with the template will change. The web design course web site has over 700 full pages. We've use three templates.

 

To Create a Template

1.      Design the page that youd like to use over and over again.

2.      Click FILE-> SAVE AS TEMPLATE
Youll be prompted to name the template.

 

 

Marking Regions as "editable"

Later youre going to be using the templates you create in Dreamweaver to build pages. When you create a page from a template everything in the template in not changeable, unless you stipulate otherwise. This is great if youre handing off work to little lackey web designers and you dont want them to mess up your award winning design. Its not so good when youre trying to add a new paragraph of text. Luckily, you can mark an item as editable, meaning you can change it or add to it.

You can only mark text or images as editable. Tables, layers and other design elements are, sadly, not editable, but you can place text inside them and mark that as editable.

 

To mark an item as editable:

1.      Select the item.

2.      Click MODIFY-> TEMPLATES-> NEW EDITABLE REGION

The item surround itself with a blue line, signifying that it is an editable region. Remember, you must mark as editable everything that you might want to change.

To set up a template for text, image, or table insertion, simply type something like "insert text here" and mark it as editable.

 

Building Pages from Templates

  1. Click FILE-> NEW FROM TEMPLATE
  2. Choose the template. Notice that you can choose templates from other sites. How nice.

  1. Change editable regions and save as you normally would.

 

Editing a Template

If you change a Template, Dreamweaver will give you the opportunity to automatically update any pages created with the template. Youll save days of work.

 

To edit a template:

  1. Open the Template Palette. Click: WINDOW-> TEMPLATES. Double Click the Template you wish to change.
    ...or you can double click the template in the Site Files View (F8)



  1. Change the Template and save it. Dreamweaver will ask you if you want to update any files youve made with the template. You most probably do.

 

The Assets Window

The Assets window also helps you keep track of other elements in your site. Instead of searching through your file structure, you can find items much more easily by using the assets window.

You can open the assets window by opening the Library, or by clicking:

WINDOW-> ASSETS

The following graphic illustrates the different assets available for you to use:

 

Favorites

If you plan on using something often, you can declare it a "favorite". You can then easily find reuse the favorite object from the favorites folder.

 

To make an object a favorite:

  1. Right Click / Control Click the desired item in the assets panel
  2. Choose Add to Favorites

 

To access your favorites, click the Favorites Radio Button at the top of the assets window.

Insert an item by selecting it and clicking the Insert button on the Assets Panel, in the lower left corner.

 

Recording Commands

You can record your actions and replay them later. If youve got a hundred pages and every one needs the same thing done to it. You have to open a page, highlight all the text, change the font, save the page, and close the page. You can record multiple actions and then replay them all with one click. The only catch is that mouse activities cant be recorder, only buttons and menus.

To Record Commands

  1. Click COMMANDS-> START RECORDING
    Youll notice that the Cursor has a little tape next to it letting you know youre recording.
  2. Key in your actions
  3. To stop, click COMMANDS-> STOP RECORDING

 

To Play Commands

  1. Click COMMANDS-> PLAY COMMAND

 

Color Schemes

Color schemes are design tips you can use if youre having a hard time deciding what color to make you background and text. Color Schemes automatically set properties in the Page Properties Window.

Take care when youre using them. Just because theyre in Dreamweaver doesnt mean they all look good

 

To set a color scheme:

  1. Click COMMANDS-> SET COLOR SCHEME

| Back to Courseware