Technology For All - Dreamweaver Designing Tutorial

If your question is not addressed by these categories, please submit your question using Request Form.

Dreamweaver Designing Tutorial

Tutorial overviewDefine a local site

To get started working with Dreamweaver, you need to create a local site. This site defines the structure of the pages you are creating. A site is a storage location for all the documents and files belonging to a web site. A local site requires a name and a local root folder, which tells Dreamweaver where you plan to store all of the site's files. You should create a local site for each web site you work on.

For this tutorial, you'll specify the Olivebranch_site folder as the local site folder.

To create a local site:

Open the Site Definition dialog box in Dreamweaver as follows:
On the Macintosh, choose Site > New Site.
In Windows, choose File > New Site.
- 3In the Site Definition dialog box, make sure that Local Info is selected in the Category list.
- Name your site My_Tutorial by typing in the Site Name field.
The name of your local site is essentially a nickname that leads directly to the folder that you've defined as your local site.
Click the file folder to the right of the Local Root Folder field and navigate to the Olivebranch_site folder, then click Select.
Note: The complete path to the Olivebranch_site folder will vary, depending on where you have Dreamweaver 2.0 installed.
Click OK, then click Create when asked if you'd like to create a cache file for the site.

Caching the files in the Olivebranch_site folder creates a record of existing files so Dreamweaver can quickly update links when you move, rename, or delete a file.

The Site window now displays a list of all the folders and files that the local site My_Tutorial contains. The list also acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would in the file finder or explorer on your own computer.

Close the Document window for index.htm, but leave the Site window open.

Edit the Olivebranch home page

Now that you have a structure set up for the Olivebranch site you're creating, open the incomplete version of the home page. You will be creating links and choosing a background color, a background image, and a title for the page so that it resembles the completed Olivebranch home page.

To open the partially completed Olivebranch home page in Dreamweaver:

From the Site window, double-click DW2_index.htm.
Close the Site window.

Define the background color and image

If you use both an image and a background color, the color appears while the image downloads, creating a more attractive background for users as they wait for the image to download. If the background image has transparent pixels, the background color will show through.

To define a background color for the page:1

Choose Modify > Page Properties to open the Page Properties dialog box.
Change the default background color by typing #FFFFCC in the Background field.

In this case, you know the exact background color you want. You can also choose a color from the palette or use the eyedropper to choose a color from an object on the page.

Click Apply to apply the background color.

As soon as you click Apply in the Page Properties dialog box, the page updates in the Document window.

Next, specify a background image for the page.

To define a background image for the page:

Click Browse (Windows) or Choose (Macintosh) next to the Background Image field.
Select home_bg.jpg in the Assets folder of the Olivebranch_site folder.
Click Apply to add the background image to the page.4 Leave the Page Properties dialog box open for now. With the background color and image in place, the home page you're working on should now look like this:

Define the title of the page

The title of an HTML page helps users keep track of what they're viewing as they browse; it also identifies the page in history and bookmark lists. If you don't title a page, it will appear in the browser window and bookmark and history lists as Untitled Document.

To define the title of a page:

In the Title field of the Page Properties dialog box, type Olivebranch Gourmet Foods to name the home page, then click OK.
The title bar updates to reflect the name you give the file.
Choose File > Save to save the changes you've made.

Create a site map

A site map provides a high-level visual representation of the structure of a local site. You can also use the site map to add new files to the site, to add, remove, and change links, and to create a BMP or PICT image of the site that you can export to and print from an image editing application.

The home page for a site always appears at the top of a site map; below the home page you can see which files the home page links to. If the folder you define as the site root contains a file called index.htm, Dreamweaver will automatically use it as the home page at the base of the site map; because your My_Tutorial site's home page is actually called DW2_index.htm, you'll redefine the home page while you customize the appearance of the site map.

To create a site map:

In the Site window, press and hold the Site Map icon in the upper left corner and choose Map and Files from the pop-up menu.

The Site window now appears with two views of your local site: on the left is a site map tree representing the structure of the completed Olivebranch site (with index.htm as the home page), and on the right is the file list you used previously.

Now redefine the home page for the site to use the tutorial version of the home page instead of the completed version.

To redefine the home page and customize the site map's appearance:

Open the Site Definition dialog box as follows:
In Windows, choose View > Layout from the Site window menu bar.
On the Macintosh, choose Site > Site Map View > Layout.
Select Site Map Layout in the Category list of the Site Definition dialog box.
Specify the site's new home page by clicking the file folder next to the Home Page field and navigating to DW2_index.htm in the Olivebranch_site folder of the Tutorial folder.
Set Number of Columns to 3.
Click OK to close the Site Definition dialog box and return to the Site window. The Site Map updates to reflect the change, with the tutorial version of the home page now at the hub of the site map.

Right now, the tutorial version of the home page contains only one link. You'll be adding more links to the tutorial home page in a moment.6 Leave the Site window open for now, so you can see how the site map updates as you add links to the home page.

Create links

Images in the left column of the home page guide visitors through the Olivebranch site. The top image, labelled about, already links to the appropriate page on the site. You'll add links to two other graphics, events and catalog, so that they link to other pages on the site as well. (You won't be working with the gift basket image.)

First, add a link from the events graphic to the Events page using the Property inspector.

To create a link using the Property inspector:
Click the title bar of the Document window that contains DW2_index.htm to make it active, or select the file name from the Window menu.
Click the events image to select it in the Document window.

Note: Don't double-click the image, or Dreamweaver will prompt you to choose another file to replace the image with.

Choose Window > Properties to open the Property inspector if it isn't already open.
The Property inspector displays information about the selected image.
In the Property inspector, click the file folder next to the empty Link field.
In the Select HTML File dialog box, browse to the Olivebranch_site folder, choose DW2_events_main.htm, and click Select.

The file you are linking to appears in the Link field of the Property inspector.

Now you'll add a link to the catalog graphic using the Property inspector and the Site window.

To create a link using the Property inspector and the Site window:
Click the title bar of the Site window to make it active, or choose Window > Site Files.
Resize your Document window, if necessary, so that you can position the Left side of the Document window and the Site Window side by side.
Click the catalog image to select it in the Document window.
In the Property inspector, drag the point-to-file icon (located next to the Link field) to the Site window and point to the file DW2_cat_main_index.htm.

The full path to the file appears in the Link field in the Property inspector for the catalog image. As soon as you release the mouse button, the site map updates to reflect the link you just added. A plus sign (Windows) or expander arrow (Macintosh) next to any item in the site map indicates there are more items associated with that item. Click the plus sign or expander arrow to expand the tree to display the associated items; click the minus sign (-) or expander arrow to collapse the site map view.

Close the Property inspector, but leave the Site window open for now.
Choose File > Save to save all the changes you've made to the home page.
Choose File > Close to close the page.
Create a complex page layout

As with the Olivebranch home page, the About Us page has a related tutorial file that has already been started for you. You'll finish filling in the About Us tutorial page, matching the layout of the completed version.You'll begin by opening the completed version of the About Us page in a browser so you can refer to it while working.

To preview the completed About Us page in a browser:

Choose File > Open and select about_main.htm in the Olivebranch_site folder within the Tutorial folder.
Do not edit this page, since it belongs to the completed site.
Choose File > Preview in Browser and select a 4.0 browser.
Leave the browser window open in the background to refer to later.
In Dreamweaver, choose File > Close to close the Document window containing the completed About Us page.
Now, open the partially completed About Us tutorial file for editing in Dreamweaver.

To open the partially completed About Us file in Dreamweaver:

In the Dreamweaver Site window, double-click the file DW2_about_main.htm.

Convert a table to layers

Tables are very useful for creating complex page layouts, and they are supported in both 3.0 and 4.0 browsers. Layers are even more useful for creating complex page layouts, since you can easily reposition page elements that have been placed in layers by dragging them into place. Layers are not supported in 3.0 browsers, however.

With Dreamweaver you can take advantage of the best features of tables and layers by quickly switching back and forth between them until the page design meets your requirements. The resulting page, in table format, will look the same in both 3.0 and 4.0 browsers.

The About Us page has been started using a table for formatting. Begin by converting the existing table cells to layers.

To convert existing table cells to layers:

Choose Modify > Layout > Reposition Content Using Layers.
In the dialog box that appears, deselect the Show Grid and Snap To Grid options, but leave the other options selected.

The Snap to Grid option forces layers to snap to the closest grid location when you create or modify them. Although this does help you align layers, in this case it would prevent you from moving the layers as freely on the page as you'll need to.

Click OK to close the dialog box and convert the table cells to layers.

Table cells become layers, and the Layer palette appears to help you track all the layers on the current page.

Add a tracing image to guide your layout

You can use a JPG, GIF, or PNG tracing image as a guide to create a web page that you first design in a graphics application. A tracing image acts as a background guide as you lay out a page in the Document window. You will use the tracing image to position layers in the About Us document so that the page design matches the tracing image underneath it.

To load a tracing image:

Choose View > Tracing Image > Load.
Select about_us_comp.gif in the Assets folder, then click Select.
In the Page Properties dialog box, use the Image Transparency slider to set the opacity for the tracing image to 50%.

Setting the transparency level to 50% causes the tracing image to appear faded in the Document window, making it easier for you to distinguish between the tracing image and editable elements on the page.

Click OK to add the tracing image and close the dialog box.

A tracing image appears in the workspace, and the existing layers appear on top of it, though not yet aligned with the tracing image. (If a tracing image doesn't appear, make sure there's a check next to Show when you choose View > Tracing Image > Show.)

When you load a tracing image, the document's background image and background color are not visible in the Document window but will appear when you view the page in a browser.

The tracing image itself is visible only when you are editing the page in the Document window and will never appear when the page is loaded into a browser.

Convert layers back to a table

Now that you've laid out the page exactly how you want it, convert the layers to a table so that the page will be displayed accurately in 3.0 as well as 4.0 browsers.

To convert all layers back to a single table:

Choose Modify > Layout > Convert Layers to Table.
Click OK to accept the default options in the Convert Layers to Table dialog box.

Dreamweaver cannot create a table from overlapping layers, which is why you used the Prevent Overlap option to constrain layer positioning when you created layers from the original table.

Preview the page in a browserNow preview the About Us page you just edited.

To preview the page in a browser:

Press F12 to see your document in your default web browser.

You do not have to save a document before you preview it. All browser-related functions work while previewing a document.

Compare the file you just worked on to the completed About Us page you opened in a browser earlier.
When you're done previewing the file, close both browser windows.
Return to Dreamweaver and choose File > Save to save the changes you made to the About Us page.
Choose File > Close to close the page.

Edit a table

The Olivebranch Events page lists concerts, demonstrations, and festivals sponsored by the Olivebranch farm. Olivebranch events are displayed in a table that describes the location, date, and nature of each event.

The tutorial file for the Events page contains a complete table of events. You'll edit this table by moving columns and sorting the information contained in its cells.

To open the tutorial Events page:

In the Site window, double-click the listing for DW2_events_main.htm.
If you don't see the Site window, choose Window > Site Files to open it or make it active.

The table on the page looks like this:

Leave the Site window open, but move it into the background.

Format the table

Move the Where column from the right side of the table to the left to make it the first column in the table.

To move columns inside a table:

Click the Where cell at the top of the column, then drag the mouse pointer to the last cell in the column to select the entire column.

You can also select a column by resting the mouse pointer exactly on the top border of the column, without clicking, until a selection arrow appears; then click once to select the entire column. (If you place the mouse pointer on the table border instead, you'll select the entire table.)

Choose Edit > Cut.
Click inside the When cell. (Don't select the cell.)
Choose Edit > Paste.

The Where column is now the first column in the table.

Sort the table

Next, sort cells in the table alphabetically, by location.

To sort table cells:

Click anywhere inside the table and choose Commands > Sort Table.
In the Sort Table dialog box, specify the following options:

Sort By: Column 1

Order: Alphabetically Ascending

Then By: Column 2

Order: Numerically Ascending

The first sort (Sort By) sorts the table alphabetically, according to the contents in the first column. The second sort (Then By) sorts the table numerically, by the contents of the second column.

Click OK to sort the table.

Now you'll format the table by centering the contents of cells in the When column.

To center the contents of table cells:

Click the first cell underneath the When table heading and drag to the bottom of the table to select all cells under the When column.
Choose Modify > Selection Properties to open the Property inspector.
If you don't see a Horz menu in the Property inspector, click the expander arrow in the lower right corner to display a complete list of properties.
Choose Center from the Horz menu.
The contents of all cells in the When column

Format text using custom styles

A style is a group of formatting attributes that controls the appearance of a block or range of text. A style sheet includes all of the styles for a document.

Create a custom style to format the table headings on the Events page.

To create a custom style:

Choose Window > Styles to open the Style palette.
Click Style Sheet to open the Edit Style Sheet dialog box.
Click New in the Edit Style Sheet dialog box.
Make sure that the Type selection is Make Custom Style (class).
Type .tablehead to name the new style and click OK.
With Type selected in the list on the left of the Style Definition dialog box, choose the following formatting settings for the new style:

Font: Arial, Helvetica, sans-serif

Size: 18 points

Style: normal

Click OK to close the Style Definition dialog box.
Click Done to close the Edit Style Sheet dialog box, which now shows the .tablehead style.

Now, you'll use the Style palette to apply the .tablehead style to the table headings on the Events page.

To apply a custom style:

In the Document window, select all three table heading cells by pressing the Control key (Windows) or the Command key (Macintosh) and single-clicking in each cell.
Click .tablehead in the Style palette.

The cells display the new style in the document.

Close the Style palette.
Save the changes you made to the Events page by choosing File > Save.
Choose File > Close to close the page

Apply a template

You can use templates to create documents for your site that have a common structure and appearance. Templates are useful if you want to make sure that all of the pages in a site share certain characteristics.

Once you apply a single template to a group of pages, you can edit information on all those pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text describing the item for sale) remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template.

The Olivebranch Catalog page links to several product pages that describe individual products that the company offers for sale. Because each of the product pages uses an identical layout and format, they were created using a single template.

In this section, you'll modify an existing template to modify the product pages it has already been applied to. Then you'll apply a different template to those product pages to reformat them without altering their unique contents.

View the product pagesBegin by viewing the completed catalog pages in a browser.

To open the completed Olivebranch Catalog page:

Choose File > Open and select cat_main_index.htm.
Choose File > Preview in Browser to open the page in a browser window.
Click the links for wines, cheeses, mustards, and oils to see sample product pages.

Notice that all product pages share the same navigation bar at the top of the page. In addition to containing links to product pages, the navigation bar includes a link to the main Catalog page and (in the graphics at the far right of the bar) a link back to the Olivebranch home page.

Close the browser when you're done previewing the main Catalog page and the product pages it links to.
Return to Dreamweaver and choose File > Close to close the completed Catalog page.
Now open the partially complete catalog pages in a browser.

To open the tutorial version of the Catalog page:

Move the Site window to the foreground by choosing Window > Site Files.
Find DW2_cat_main_index.htm in the list and double-click it to open it in the Document window.
Press F12 to preview the tutorial Catalog page in a browser.
Click the links for wines, cheeses, mustards, and oils to see the product pages you'll be working with.

As with the completed site, each of the product pages uses the same template, so they look very similar. In this case, however, each page is missing both the link to the main catalog page and the graphic at the top right that links to the Olivebranch home page.

After you've explored the links to the product pages, close the browser window.
Return to Dreamweaver and choose File > Close to close the main Catalog page.

Edit the template

Now you'll modify the template for the product pages to fix the broken navigation bar. Once you've fixed the navigation bar in the template, you'll reapply the template to the product pages so that the navigation bar is updated for all of the pages that use the template.

To open the template file in the Document window:

In the Site window, double-click DW2_cat_product.dwt in the Templates folder of the Olivebranch_site folder.

Each template contains both locked and editable regions. Locked regions can be edited only inside the template itself; they appear in a highlight color on all pages the template is applied to. Editable regions are placeholders for the content that is unique to each page the template is applied to. In a template, the editable regions are highlighted.

In this template, the navigation bar is in a locked region, while the areas for product photos and text are editable for each product page.

Now, edit the template file. First, add a link to the catalog graphic.

To add a link from the catalog graphic to the main Catalog page:

Single-click the catalog graphic.
Choose Window > Properties to open the Property inspector.
In the Property inspector, click the file folder next to the Link field and select the file DW2_cat_main_index.htm from the Olivebranch_site folder.
Leave the Property inspector open.

Next, add a graphic in the upper right corner of the page and link it to the Olivebranch home page.

To add a graphic that links to the Olivebranch home page:

Click inside the empty cell to the right of the catalog image.
Choose Insert > Image and select cat_nav_photos.jpg in the Assets folder.
The graphic appears in the cell.
Make sure the graphic you just added to the cell is still selected. (If not, single-click to select it.)
In the Property inspector, click the file folder next to the Link field and select the file DW2_index.htm from the Olivebranch_site folder.
Close the Property inspector.

Now that you've edited the template, reapply it to the product pages.

To reapply the template to product pages in the catalog:

Choose File > Save to save your changes.
When you are asked if you want to update all documents in your local site that use this template, click Yes.

An Update Pages dialog box appears to display the status of pages in the site as the template is being reapplied.

After all files on the site have been updated, close the Update Pages dialog box.

Because the main Catalog page contains links to each of the product pages in the site, you can use it to quickly preview all the product pages you reapplied the template to. Open the main Catalog page in a browser, then click the links to the product pages.

To see updated product pages:

Double-click DW2_cat_main_index.htm in the Site window to reopen it in the Document window.
Press F12 to preview this page in your primary browser, or chose File > Preview in Browser to select a different browser.
Click the links for wines, cheeses, mustards, and oils to go to each of the product pages.
On each product page, click the catalog and Olivebranch home page links you added to the navigation bar to see how the changes you made in the template have been applied to the pages.
Close the browser when you're finished testing the links in the navigation bar on the product pages.
Return to Dreamweaver and choose File > Close.

Apply a different template to a page

You can apply a new template to a page even if the page already uses a template. Page content remains unchanged as long as the new template contains the same editable region names as the template previously attached to the document.

This technique is useful when you want to change the appearance of a group of pages without altering the unique content of those pages. For example, a catalog may have summer and winter versions. You can create an entirely new design without editing the content by using a different template to change the background images and colors of the page, or by rearranging the positions of the editable regions.

Here you'll apply a winter template to a product page to update its appearance for a new season.

To apply a new template to an existing page:

In the Site window, double-click DW2_cat_wines.flc.htm to open the product page for wines in the Document window.

Sections of the page that are highlighted in a different color identify locked regions that can be edited only in the template used for this page.

(If you don't see any color difference between regions on the page, choose Edit > Preferences, select Highlighting from the Category list, and select the Show option next to Locked Regions. If you still don't see the the highlight color, choose View > Invisible Elements.)

Choose Window > Templates to open the Template palette.

The Template palette contains a list of all template (dwt) files in the local site, located in the Templates folder of the Olivebranch_site folder.

In the Template palette, click cat_product_winter.dwt to highlight it in the list.
Resize the Template palette to preview the winter template inside the palette.

The winter template has a different design than the template that is currently applied to the product pages, but because it contains the same editable regions as the current template, you can apply it to the page without breaking anything.

Click Apply to Page to apply the winter template to the product page for wines.
Close the Template palette.
Press F12 to preview the new product page for wines in a browser window.
When you're finished previewing, close the browser window and return to Dreamweaver.
If you want, you can choose File > Save to save the changes you just made to the wines page; links in the site will work regardless of which template you applied to the page.
Choose File > Close to close the page.

Creating new HTML documentsYou can create new, blank HTML documents in Dreamweaver or base a new document on a template. You can also open an existing HTML document, regardless of how it was created.

Usually, you create HTML documents for a specific web site.

To open existing HTML files:

Choose File > Open.

To create a blank HTML document:

Choose File > New.

If you open the HTML inspector (choose Window > HTML), you'll see that it's not really a blank document—it contains HTML, HEAD, and BODY tags to get you started. As you type in the Document window or insert objects such as tables and images, you can leave the HTML inspector open and watch as the HTML source code is created.

Note: When you save a new file, do not use high ASCII characters (for example, é, ç, ¥) in the file name if you intend to put the file on a remote server. Many servers will encode these characters on upload and cause any links to the file to break.To create a new document based on a template:

Choose File > New From Template.

A dialog box appears, listing the templates available for the current site.

When you use a template, some parts of the document are locked so that they can't be changed. This ensures consistency when you use a template for multiple documents in a site.

Select a template and click Select.

To modify the editable parts of the template, select the placeholder content and type to replace it. The noneditable parts of the template are identified by a highlight color.

Reference: This information was taken from the book Dreamweaver help menu