Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS

This is Part 2 of a two-part tutorial series that demonstrates how to take a finished web page design, prepare it for export in Adobe Fireworks CS5, and then modify the HTML and CSS code in Adobe Dreamweaver CS5.

Part 1 covers exporting the design from Adobe Fireworks CS5.

In this part of the tutorial, you'll modify the exported CSS and HTML files in Dreamweaver to complete the design of the website.

If you completed the steps in Part 1, all of the files you exported from Fireworks were saved into a project folder. Before creating a new site in Dreamweaver, make sure that folder is located where you want it for example, in a folder with all of your other Dreamweaver sites . Alternatively, you can unzip the cheltenham_exported_css.zip sample file, which contains the three pages exported as CSS, HTML, and images ready to be modified in Dreamweaver.

To begin modifying the HTML and CSS in Dreamweaver, follow these steps:

1. Start Dreamweaver and choose Site > New Site. Alternatively, you can click Dreamweaver Site in the center column of the Welcome screen see Figure 1 .

2. Give the site a name for example, type Cheltenham Academics and for the Local Site Folder specify the project folder with the exported files from Fireworks see Figure 2 .

After Dreamweaver creates the new site, you'll see the site name and all of the HTML and CSS files appear in the Files panel.

3. Open the index.html file and switch to Code and Design view so that you can see both the code and the design at the same time.

Remember that in Dreamweaver, Design view is a design environment for visual layout and editing, so it will not look exactly like the design as rendered in a browser. If you switch to Live view, however, you can see how a browser will display the page. Live view is powered by the WebKit browser engine. You can also choose File > Preview In Browser or press F12 to preview the page in your default browser. It's a good idea to preview your web pages in other browsers or use the Adobe BrowserLab to test pages in other browsers and on other platforms to ensure that they render correctly.

Take a moment and explore the exported code for index.html. All of the text is editable HTML. Bitmaps that were sliced in Fireworks appear as foreground and background images. You will also see that the object tags you applied in Fireworks are used to:

• Create specific HTML tags for example, the page header is wrapped in an <h1> tag
• Define the <div> structure to control the layout of the page for example, body_container , left_column , center_column , and right_column
• Define IDs for example, #center_column for <div> elements to ensure their content is properly positioned and styled
• Define class styles for text for example, .pullquote for styling the home page quotation

You will also see two vividly colored rectangles as placeholders for the navigation bar and the footer background image. Notice that the text links in the right column content modules and the footer appear only as plain text. They are not yet links, because in Part 1, you did not use separate text objects for each and designate them as links. If Part 1 had included a step that replaced the text with a Link component symbol or applied an <a> tag in the Property inspector, Fireworks would have exported links instead of plain text. You can, however, easily add the links from within Dreamweaver as well.

There are a few edits that must be made to finish this page:

• Add the footer background image
• Remove the duplicate banner text in the content modules
• Add links to text in the content modules and footer
• Replace the navigation bar placeholder with a Spry Menu Bar

Adding the Footer Background

Adding the footer background is simple, since you already exported the background image in Part 1. When Dreamweaver opens an HTML file, it also opens all of the associated files. Near the top-left corner of the Dreamweaver window you will see a tab for index.html, and below that are two files: Source Code the HTML file and index.css the CSS file .

1. Click index.css to view the CSS code.
2. Scroll down almost to the bottom of the CSS file and look for #footer .

In the style settings for the footer you will see:

This is the vivid background color fill you applied to make it noticeable.

3. Replace that line in the CSS file with the following:

This will change the background from a vivid fill color to the footer background image you exported and saved in the images folder.

4. Save your changes and press F5 to refresh Design view. The footer will show the background image instead of the vivid fill color.

Removing duplicate banner text

Next, you'll remove the redundant text over the banners in the content modules in the right column see Figure 3 . You can simply delete the text from the HTML, but this may adversely affect search engine optimization SEO since you are deleting meaningful text. Alternatively, you can hide the text by moving it off the page. This preserves the text for SEO, but requires a little more editing.

Follow these steps to use the first approach and simply delete the text:

1. In the source code for index.html, find the <div> named right_column .
2. In that <div> , find the following lines and delete them:

3. Several lines below that, delete the following lines:

4. You may also now delete the .vol_module_label and .sched_module_label classes from the CSS file, because you are no longer using them.

To use the SEO-friendly approach, follow these steps to hide the banner text:

1. Open index.css.
2. Scroll to the bottom of the file, and add the following:

This will move the text 4000 pixels to the left, far off the edge of the browser. The text won't be seen, but it will still be available to be indexed by search engines.

3. In index.html, find the <div> named right_column .
4. Find the following <div> elements: <div class="vol_module_label"> and <div class="sched_module_label">.
5. Add hide to each of the classes as follows: <div class="vol_module_label hide"> and <div class="sched_module_label hide"> .

This tells browsers to apply the negative left margin defined by the .hide class, which will preserve the layout of the content modules yet still hide the text out of view.

6. Save your changes and press F5 to refresh the view. The overlapping text in the banners will be fixed (see Figure 4).

Adding links

The links on the page that were exported as plain text need to be converted to hyperlinks and then styled to match the visual design:

1. Make sure that you are not in Live view, but you are in Code and Design view.
2. Select the text "Learn more about becoming a tutor" in the top content module. (You may also select it in Code view.)
3. Choose Insert > Hyperlink.
4. In the Hyperlink dialog box, the Text setting will be prepopulated with the selected text for the link; do not change it.
5. For the link, type # for now; normally you would enter the actual destination page or URL here.
6. Leave the Target empty.
7. For the title, type a descriptive title, such as Volunteer to be a tutor!. This will help with accessibility and SEO.
8. Click OK.
9. Repeat these steps for the link in the other content module and for all three of the sponsoring organization names in the footer.
10. You can also add an email link to the email address in the footer by highlighting the email address text and selecting Email Link from the Insert panel or choosing Insert > Email Link.

Since the index.css file includes no styling information for links, when you refresh Design view all of the links will become blue–the default style for links in most browsers (see Figure 5). Fortunately, you defined the link styles using the HTML component symbols on the volunteer page in Fireworks, so rather than manually adding all of the link styles to index.css you can copy the styles from the volunteer.css file and modify them as needed.

1. Open the volunteer.html file for the project from the Files panel in Dreamweaver. The volunteer.css file will automatically open, too.
2. In volunteer.css, locate the #link styles:

3. Copy this code from volunteer.css, and paste it into the index.css file immediately after this:

(This should be somewhere around line 94 in the index.css file.)

4. After pasting the code copied from volunteer.css into index.css, edit the code to match the following: 

In the edited code, you'll notice that the font family, positioning, margin, and padding information has been removed. Only the color, weight, and decoration information has been retained. The positioning, margin, and padding information are already specified for all of the text on the index.html page, so only the visual style information is needed for text links.

You'll also see that #Link was changed to just a (for example, #Link:link is now a:link ). This enables you to apply the styles directly to the <a> tag rather than creating a CSS ID for each link on the site. If you look at the code in the volunteer.css file, you will see that there are style definitions for each individual link on the page ( #Link , #Link2 , #Link3 , and so on). However, all of these link styles are the same (and differ only in the margin values, which are used for positioning each link), so using multiple CSS IDs is redundant and unnecessary. It is more efficient to define link styles for the <a> tag or to create a style class for links, so you can define the link styles once and use them for all text links.

5. After editing the link style CSS code, save the index.css file and refresh Design view.

All of the links on the page will change from default blue to the colors defined by the new additions to the CSS file. Also, since you only retained the portions of the CSS that pertain to visual appearance, the layout of the page has not been affected (see Figure 6).

Inserting a Spry Menu Bar

The final step on the main page is to insert the Spry Menu Bar for the site navigation. In the original Fireworks file you turned off the visibility of the navigation and created a placeholder <div> to reserve room for the Spry Menu Bar. Follow these steps to insert it:

1. View the source code for index.html and look for the following <div> :

2. Place the cursor between the opening and closing <div> tags and choose Insert > Spry > Spry Menu Bar.
3. Select a horizontal layout and click OK.

Dreamweaver will insert a block of code within the <div> that you'll need to edit to specify the correct navigation structure for the site and to reflect the visual design. With the Spry Menu Bar selected, the Property inspector makes it easy to define the navigation links. For this website, the navigation structure has two levels (see Table 1).

Table 1. The Spry Menu Bar structure for the Cheltenham Academics website.

The left column of labels in the Property inspector corresponds to the primary navigation, the middle column is the secondary navigation (nested below the selected primary navigation item), and the right column is the tertiary navigation (nested below the selected secondary navigation), but the third column will remain blank for this site.

4. For each menu option in Table 1, use the plus (+) and minus (-) buttons to add and remove navigation links as necessary, type the navigation link labels in the Text text box, and type the destination page URL for the navigation item in the Link text box.

Complete instructions for customizing the visual presentation of the Spry Menu Bar are beyond the scope of this article. However, you can click Customize This Widget in the Property inspector to access help on how to change the appearance of the menu bar. Additionally, there are many excellent resources for using the Spry framework on the Spry home page.

The home page (index.html) is nearly complete, but the volunteer and calendar pages need a few changes before they reflect the visual design. You'll need to apply the same techniques you used on the main page to add the footer background image, hide (or delete) the content module banner text, add text links and their styles, and add a Spry Menu Bar to the volunteer and calendar pages.

With those changes done, there are just a few more updates left to make.

Updating the bullet list on the volunteer page

On the volunteer page in the left column under the header "Your Responsibilities as a Volunteer Tutor" there is a list of qualifications. If you look at the code of the volunteer.html page, you will see that this bullet list is not a real unordered list defined with the <ul> tag, but rather it is three rows of text preceded by the • character and separated by line breaks (that is, <br /> ).

Follow these steps to convert this to a true unordered list and style the Qualifications label as bold:

1. In the Property inspector, click HTML on the left.
2. Select "Qualifications:" and apply the bold style in the Property inspector.
3. Add a closing paragraph tag after it in Code view.

Note: When you edit text styles in Dreamweaver, you can either add style information to the HTML file or to the CSS file. Select the HTML option in the Property inspector when you want to add text style information to the HTML file and only to the selected text. Select the CSS option when you want to add text style information to the CSS class or ID of the currently selected text object, but be aware that modifying a class in the CSS file may change the appearance of text elsewhere on the page or site if that text shares the same CSS class.

4. Delete the <br /> tags and • characters.
5. Wrap each of the three text rows in an <li> tag and wrap all three in a <ul> tag.

The edited code should look like this:

This bullet list was exported from Fireworks as a simulated unordered list using the • character because Part 1 did not include a step to replace the list items with a List Item component symbol on the page in the original design file. Had List Item symbols been used, the HTML code and CSS styles for an unordered list would have been exported, and you would have edited the CSS to define the bullet type. By default, Fireworks exports unordered lists with no bullets.

The volunteer page should now look more like the original design (see Figure 7).

Updating the topics on the calendar page

The calendar page content in the left column has three topics: Student Tutoring, Monthly Tutor Logs, and Advisory Board Meetings. These topics appear as subheaders followed by indented text in the visual design, but Fireworks has exported left-aligned plain text. These three sections would be best displayed by using a definition list with <dl> , <dt> , and <dd> elements.

Follow these steps to update the HTML:

1. Open calendar.html.
2. Locate the code below for the three topics:

3. Replace this code with the following definition list:

4. After making those changes, refresh Design view and confirm that there are now three subheaders with indented descriptions.

Now you're ready to apply styles this definition list to make it look more like the visual design.

5. Open calendar.css and add the following at the end of the file:

Note: The sequence of tag styles, classes, and IDs in the CSS file is important because it determines how the style rules are applied when conflicts or multiple styles for the same objects exist. For more information on how to sequences styles in a CSS file see the resources listed at the end of this tutorial.

These definition list styles will make the subheader (the definition term) bold and add some additional space after each block of text (the definition description.)

1. Refresh Design view and verify that the page now looks more like the original design (see Figure 8).

Updating the content modules on the calendar page

The calendar page also has two content modules for the tutoring schedules at the two schools. In the original design, the days and times are bold with larger text and the email address is a link. Since Fireworks exports text styled only like the first character of the text object, you'll need to modify the text styles in the modules, add some CSS style information, and add an email link:

1. View the code for calendar.css and locate the .Txt_Monday class.
2. Change the font size to 120% and delete font-weight: bold; to make the text look like standard content text.
3. Return to the HTML source code and locate the day and time text for the Cedarbrook school in the calendar.html file.
4. Place your cursor in the <p> tag for that text.
5. Right-click and select CSS Styles > New (or choose Format > CSS Styles > New) to create a new CSS style class, which will be added to the calendar.css file.

6. In the New CSS Rule dialog box, type times for the selector name (see Figure 9).
7. Select calendar.css for where your rule will be defined and click OK.
8. In the CSS Rule Definition dialog box, set the Font-size to 16 px, the Font-weight to bold, and the Line-height to 24 px (see Figure 10).
9. Click OK.

10. Save the new style class and return to the calendar.html file.
11. With the cursor still in the <p> tag, select the times CSS style class from the Class selector in the Property inspector.
12. Refresh Design view to see the modified text styles applied; the days and times are larger and bold, and the remaining text looks like standard text.

Since the text in the two content modules share the same styles, you can simplify the CSS exported by Fireworks and use the same CSS class for the text in both. Remember that Fireworks exports CSS styles for each separate text object in the original design files, so in the calendar.css file you will see classes for Txt_Monday and Txt_Monday2 with duplicate style attributes.

13. Back in calendar.html, locate <div class="Txt_Monday2"> and delete the 2 so that it becomes <div class="Txt_Monday"> . You may now delete the Txt_Monday2 class from the CSS file since it is no longer in use.
14. Select the <p> tag for the day and time text in the Cheltenham school module and select the times class in the Property inspector.
15. Refresh the view to see the changes to the text styles. Both modules should have the same text styles.
16. To add the email links to the email addresses, select the email address text and insert an email link from the Insert panel or choose Insert > Email Link.

The links will take on the default HTML link styles (see Figure 11), so you'll need to add the link styles you defined for the index.html page in index.css to the calendar.css file.

Adding the calendar to the calendar page

As a last step on the calendar page, you need to replace the embedded calendar image with the actual calendar code:

1. Open calendar.html file, select the calendar image in Design view, and then delete the image.
2. Since this was a foreground image, there will now be an empty section in the code between two <div class= " clearFloat " > tags.
3. With the cursor positioned where the map image used to be (between the two <div> tags), insert the embedding code for the Google calendar:

Note: If you have your own Google calendar, you can get the embed code for it by going to your calendar settings, selecting the calendar you want to share, and getting the code from the Embed This Calendar option on the calendar details settings page.

You'll need to make one edit to the code to position the calendar properly. The deleted image had a 10 px left margin so that it would properly align with the content modules above it. To add that left margin to the embedded calendar, you could create another style in the CSS, or you could modify the inline style Google inserted in the <iframe> tag for the calendar. Since this is the only instance of the calendar on the website, a small edit to the inline style for the <iframe> will work.

4. In the <iframe> code that you just inserted, add the left margin value so that the inline style becomes:

5. Save the calendar.html and calendar.css files and view your page with Live view or preview it in a browser.

The definition list, the bold day and time text, the email links, and the embedded calendar should all be in place, and the page should look much more like the original design (see Figure 12).

You can save a great deal of time using the Fireworks CSS export feature on prepared design files to quickly create web pages that are easy to modify in Dreamweaver. However, having separate HTML and CSS files for each page is not efficient. Most websites have many pages, and these pages usually share similar page structures (or layouts) and have shared CSS styles and assets. The underlying page structures are independent of the content and can be easily seen by looking at the <div> structure. For example, the home page has three columns in the main content area, and the volunteer page has two columns in the main content area. It is likely that there are other pages in the site where the content is well suited for display in two or three columns, so these page layouts could be reused again and again only with different content for each page.

Dreamweaver makes it easy to reuse page layouts with templates. You can use the original design file in Fireworks to set up the pages to become templates in Dreamweaver simply by defining the <div> structure with rectangles and hiding or deleting any text or images that will not be on every instance of that page template.

If you open the Cheltenham_templates.fw.jpg sample file in Fireworks you'll find two template pages (two column and three column layouts) based on the original designs. All of the text and images in the main content area have been deleted, and there are rectangles in the div layer that define the different regions of the page. Notice that the navigation bar and footer have placeholder rectangles, because you still need to modify the exported files in Dreamweaver to add the footer background image and the Spry Menu Bar before you turn them into templates.

The third page has a single large content area with two temporary rectangles subdividing it. The temporary rectangles contain the sitewide text styles, the PDF icon, and the background image for a generic content module (see Figure 13). The text objects, which use HTML component symbols and normal text objects, define the key CSS text styles that are used throughout the site on many pages, and the content module is the same size as the modules that appear on the home page and calendar page. You can export the generic content module using the three-slice technique, and turn the code for the module into a Dreamweaver library item. Library items are snippets of code that are reused multiple times throughout a site. They save time and effort because they can be inserted into a page from the Library, and when you edit a library item, Dreamweaver will automatically update all of the instances through the entire site.

Follow these steps to familiarize yourself with the file and create a library item:

1. Open Cheltenham_templates.fw.jpg in Fireworks and export all of the pages in the file into the project folder.
2. Open the two column and three column HTML files in Dreamweaver and explore the HTML code. Notice that the <div> structure for the basic pages is already present.
3. Type sample text into each of the column <div> elements to see how they define the page layout.

These files require some modification before they can be saved as Dreamweaver templates. Specifically, you'll need to do the following:

• Add and style the Spry Menu Bar for the navigation.
• Add the background image for the footer.
• Add the links in the footer.
• Create a single, consolidated CSS file for the entire site and link it to the HTML file.
• Add editable objects in the main content area.

Detailed instructions for creating templates in Dreamweaver are beyond the scope of this article. For more information on creating templates see the Dreamweaver Developer Center.

4. Open the styles and objects HTML file in Dreamweaver.

The text objects, generic content module, and PDF icon were all exported with this page. If you look back at that HTML code for the volunteer page, you will see that Fireworks exported a separate image for each instance of the PDF icon. Multiple instances are unnecessary. Instead, you can include one version of the icon on a styles and objects page (such as this one) and reuse the image as many times as needed throughout the site.

Before you convert the content module into a library item for the site, you need to make a few modifications to the HTML and CSS first.

This is a generic content module, and it has no header text in the banner at the top of the module. To have the HTML text appear over the banner you'll need to edit the CSS.

5. Open the CSS file for the content module and locate the following code:

6. Replace it with the following:

These changes to the CSS add padding, font, and alignment information so that the banner text appears in the correct location.

7. Open the HTML code and locate the  <div> named content_module_top.
8. Type Banner title appears here inside the <div>.
9. Refresh Design view, and the placeholder text for the module title will appear over the banner.

Note: Previously you hid or deleted the text that Fireworks exported for the banner header, because the text had been flattened into the image. This is a third alternative to handling text for the banner header.

10. Select all of the code for the module:

11. Open the Assets panel, select the Library, and click the New Library Item button at the bottom (see Figure 14).

Dreamweaver will warn you that the library item may not look the same when it is inserted into a web page, because the style information is not copied with it. This is normal, because the style information for the module will be in the consolidated CSS file used for the entire site.

12. Click OK, and the library item will be created.
13. Give it a name; for example, type Content Module in the Assets panel.
14. View the HTML code. Notice that the content module code is now wrapped in HTML comments identifying it as an instance of a library item.
15. To insert a library item in a web page, simply drag the item from the Assets panel to the place in the code or on the page where you want the item to appear. 

To learn more see Managing Assets and Libraries in the Dreamweaver documentation.

To finish preparing the styles and objects page and create a generic page template you'll need to complete the steps outlined here:

1. Delete the temporary column <div> elements with the dashed borders, all of the sample text, the content module, and PDF icon from within the content <div>.
2. Add a generic editable region to the content <div>.
3. Add a Spry Menu Bar for navigation.
4. Finish the footer by adding the background image and text links.
5. Save the page as a template.

This generic template has no column structure in the content area, so it can be used as the basis for pages that have special or unique content and layout by adding new <div> elements where needed. The entire Cheltenham Academics website can be based on just these three templates: two column, three column, and generic.

There are a few additional techniques that you can use to optimize the HTML and CSS generated by Fireworks and make it more efficient:

• Consolidate the multiple CSS files (index.css, volunteer.css, calendar.css) into a single CSS file (for example, cheltenham.css) and link to this file from every page in the website.
• Delete redundant styles from across the multiple CSS files. For example, paragraph text styles appear in each CSS file, but the style is the same across all pages, so only one paragraph style definition is necessary.
• Identify and consolidate repeated or duplicate styles from within a CSS file. For example, Fireworks exports styles for each individual entry in a list, but list items should all share the same style information for efficiency. The multiple <ul> and <li> styles generated by Fireworks should be consolidated.
• Assign <div> styles directly to the HTML elements. Fireworks wraps many objects in a <div> and applies the style to the CSS ID for the <div> . For example, a header tagged <h1> in the Fireworks Property inspector will be exported as <p> text object wrapped in a <div> that has the style properties assigned to the <div> . Many of the styles assigned to a <div> ID could instead be assigned to the actual HTML tag. For example, you could convert the <div> ID for a header into a style for the <h1> tag. Then any <h1> object in the website will get that style. You can use this approach for nearly all <hn> , <p> , <span> , <blockquote> , and <a> tags.
• Adjust padding and margins. Fireworks assigns margins to nearly all objects to control positioning, but it is often more efficient to control layout and positioning by assigning margins and padding to the layout, container, and column <div> elements. Then you can define the spacing and alignment of the content as styles applied to the HTML tags rather than as unique CSS IDs for each individual content item. For example, the layout <div> for the center column of the home page might have a padding values for the top and bottom (20 px) and left and right sides (10 px) so that the header text appears 20 px below the top of the module and is 20 px narrower than the <div> rather than assigning a top margin, left margin, and width to the header text itself.
• Use top and bottom padding on HTML tags to control vertical spacing. Vertical spacing between objects is more often controlled in the CSS by defining the top and bottom padding of the HTML tags rather than using margins on CSS IDs to position each individual object.
• Adjust the positioning of text objects. Fireworks determines the position of text objects by using the coordinates of the text object bounding box, but you'll often want the text placed based on the actual pixels of the text, not the bounding box. You will need to tweak the margins and padding to get the correct positioning on the final web page.
• Use your preferred method for controlling layout. Some developers prefer not to use the clearFloat approach to controlling layout. Fireworks uses this technique to ensure layout consistency across many browsers, but there are other techniques that may be used. Edit the CSS and HTML to use the technique you prefer.

There are also additional features in Dreamweaver than can make working with the numerous website files easier and more efficient. Websites are composed of many files, from HTML, CSS, and JavaScript code, to images and multimedia files. Keeping track of the files and dealing with the varied code syntaxes and standards can be difficult.

With the new CSS Inspect mode in Dreamweaver CS5, you can move your mouse around the page and see both the HTML and applied CSS styles highlighted in real time. This makes it much easier to identify the CSS styles that are producing the results you see on the web page so that you know what to edit to change its appearance. To activate CSS Inspect mode, switch to Code and Design view, activate both Live Code and Live View, and then click the Inspect button.

When you use many original design files in Fireworks or Photoshop to create the assets for a website, it can sometimes be challenging to remember which source file was used to create a particular image on a web page. You can use Dreamweaver to create an association between an image and the original file used to create it:

1. Create a folder named source files in the project folder, and place a copy of all of the original Fireworks design files in it.
2. If you use sitewide operations in Dreamweaver such as Get and Put, you can tell Dreamweaver to skip this folder so that your source files are not uploaded to the server. Right-click the folder name in the Files panel and choose Cloaking > Cloak.
3. Open the source files folder in the Files panel to show the source files.
4. Select the image in the HTML code or in Design view.
5. Click the Point To File button next to the Original text box in the Property inspector and drag to the source file name in the Files panel.

The source file name and location will appear in the Original field in the Property inspector.

When you need to edit an image or change an asset on a web page, select the image in the HTML code or in Design view, and then click the Fireworks icon next to Edit in the Property inspector (see Figure 15).

Fireworks will open the original source file. You can edit the image and save the updated image. When you close the file, Dreamweaver will update the page with the new image.

The combination of Adobe Fireworks CS5 and Adobe Dreamweaver CS5 makes it possible to quickly go from design to code. You export preliminary CSS and HTML from Fireworks and then modify and optimize the code in Dreamweaver. You can even create page templates and libraries to speed further development.

There are numerous other features in both Fireworks and Dreamweaver that you can use to improve your workflow. This tutorial has covered only some of the ways these tools can be used together.

For further reading, refer to the following resources (and don't forget the ones listed in Part 1):

• Dreamweaver Developer Center
• Learn to work with CSS
• Dreamweaver Spry Framework
• Creating and Managing Templates
• Managing Assets and Libraries
• Best practices with CSS in Dreamweaver
• CSS page layout basics

When to use templates, library items, and server-side includes: Designing for web publishing

• Taming the Web with Greg Rewis (Adobe TV Series)
• Save time with templates in Dreamweaver (Layers Magazine)
• Edit an AJAX Drop-down Menu in Dreamweaver (Layers Magazine)