Learn Dreamweaver CS3 Tutorial

This site provides you with a foundation for working with Adobe Dreamweaver. Follow along with the tutorial, download the lesson files, and view the videos. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver training classes.

Excerpt from Dynamic Learning - Dreamweaver CS3

Defining page properties

Now that you’ve created a page in Dreamweaver, you’ll use the Page Properties dialog box to specify its layout and formatting properties. You use this dialog box to define page properties for each new page you create, and to modify the settings for pages you’ve already created.

Dreamweaver uses CSS by default to define settings in the Appearance, Links, and Headings categories of the Page Properties dialog box. You’ll start by changing the default page-formatting preferences to HTML formatting.

To specify the layout and formatting properties of your page:

1 Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS) to open the Preferences dialog box.

2 In the General category (selected by default), under Editing options, click the checkbox next to Use CSS instead of HTML tags to deactivate this feature, then press OK.

3 You use the Page Properties dialog box to set page titles, background colors and images, text and link colors, and other basic properties of every web page. To access the Page Properties dialog box, choose Modify > Page Properties, or use the keyboard shortcut Ctrl+J (Windows) or Command+J (Mac OS). The Page Properties dialog box appears, with the Appearance category selected by default.

4 The Background image field allows you to set a background image for your page. Dreamweaver mimics a browser’s behavior by repeating, or tiling, the background image to fill the window. To choose a background image, click the Browse button next to the Background image text field. The Select Image Source dialog box appears.

5 Navigate to the museum_files folder within dw02lessons and select background.gif for your page background, then press OK.

6 Click the Apply button to see the image as the background of your page.

You can also type the path to your background image into the Background image text field.

7 You use the Background option to choose a background color for your page. If you’ve also chosen a background image, the color will appear while the image downloads, at which time the image covers the color. If there are transparent areas in the background image, the background color will show through. To choose a background color, click on the color swatch next to the Background text field; the Swatches panel appears. You can choose your background color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, then press Apply to see the results.

If you click the Apply button, you won’t see the background color in your page, as it’s covered by the background image you specified earlier.

You can also choose the background color by typing the hexadecimal notation for your desired color into the Background field. Type the hex code d7d7d7 in the Background text field, then press Enter (Windows) or Return (Mac OS) to specify a light gray as the background color.

8 The text option allows you to set a default color in which to render type. To set a text color, click on the color swatch next to Text; the Swatches panel appears. You can choose your default text color by clicking on the appropriate swatch from the Swatches panel. Try this by clicking on any color swatch, then press Apply to apply your desired default text color.

As with the background color, you can type the hexadecimal notation for your desired color into the text field. Type the hex code 666666 in the text field to specify a dark gray as the default text color.

You’ll see the effects of this change later in this lesson, when you add text to your page using the Files panel.

9 You can specify the color of linked text in the Appearance category of the Page Properties dialog box. For more information on creating hyperlinks, see Lesson 3, “Adding Text and Images.” Set the colors for your different link types in the following fields:

Links: Type 843432 for the default color applied to linked text.

Visited links: Type 666666 for the color applied to linked text after a user has clicked on it.

Active links: Type CC6500 for the color applied when the user clicks on linked text.

You can also type the hexadecimal notations for your desired link colors into the respective fields.

10 By default, Dreamweaver places your text and images in close proximity to the top and left edges of the page. To build in some extra room between your page edges and the content on them, use the Margin settings in the Page Properties dialog box. In the Left margin field, type 25 to place your content 25 pixels from the left edge of the page. In the Top margin field, type 25 to place your content 25 pixels from the top edge of the page.

Use the Margin width and Margin height fields to set page margins for viewing in Netscape browsers. For best results, duplicate the settings you entered in the Left and Top margin fields, respectively.

11 Click on the Title/Encoding category to the left of the Page Properties dialog box to expose more settings:

• Type Museum Home in the Title text field. This sets the title that appears in the title bar of most browser windows. It’s also the default title used when a user bookmarks your page.
• Leave the Document Type (DTD) set to XHTML 1.0 Transitional. This makes your HTML document XHTML-compliant.
• Choose Unicode 4.0 (UTF-8) from the Encoding drop-down menu. This specifies the encoding used for characters in your document.
• Make sure the Unicode Normalization Form is set to None and that Include Unicode Signature (BOM) is unchecked. Both settings are unnecessary for this lesson.

The Reload button simply converts the existing document to the encoding you’ve chosen. It’s not necessary to click this button now.

12 Click on the Tracing Image category in the left part of the Page Properties dialog box. A tracing image is a JPEG, GIF, or PNG image that you create in a separate graphics application, such as Adobe Photoshop or Fireworks. It is placed in the background of your page for you to use as a guide to recreate a desired page design.

13 Press the Browse button next to the Tracing image field. You can also type the path to your image directly into this text field.

14 In the Select Image Source dialog box, navigate to your dw02lessons folder, and inside the museum_files folder, select the file named tracing.gif, then press OK (Windows) or Choose (Mac OS).

15 Set the transparency of the tracing image to 50% by sliding the Transparency slider to the left.

16 Press Apply to see the results.

17 When activated, the tracing image replaces any background image and/or color you’ve added to your page, but only in your Document window. Tracing images are never visible when you view your page in a browser. Highlight the path in the Tracing image text field and press the Delete key.

18 Press the Apply button to remove the tracing image and redisplay your background image.

19 Press OK to close the Page Properties dialog box.

20 Choose File > Save. Now that you’ve finished setting up your page properties, you’ll examine your page in Dreamweaver’s three different work view modes.

Work views

In this book’s lessons, you’ll do most of your work in the Design view, as you’re taking advantage of Dreamweaver’s visual page layout features. You can, however, easily access the HTML code being written as you work in the Design view, and use it to edit your pages via Dreamweaver’s other work views. You’ll switch views, using the Document toolbar.

1 In the Document toolbar, note that the Design View button () is activated by default. This means you’re currently working with a fully editable, visual representation of your page, similar to what the viewer would see in a browser.

2 Click on the Code View button () to switch to the Code view. Your page is now displayed in a hand-coding environment used for writing and editing HTML and other types of code, including JavaScript, PHP, and ColdFusion.

3 Click on the Split View button () to split your Document window between the Code and Design views. This view is a great learning tool, as it displays and highlights the HTML code generated when you make a change visually in Design mode, and vice versa.

4 Switch back to the Design view to continue this lesson.

A look at the Files panel

One of the benefits of working with local files stored in one centralized folder on your hard drive is that they are easy to manage. Dreamweaver provides the Files panel to help you manage files locally and transfer them to and from a remote server. The Files panel maintains a parallel structure between local and remote sites, copying and removing files when needed to ensure synchronicity between the two.

The default workspace in Dreamweaver displays the Files panel in the panel grouping to the right of your Document window.

When you chose to use the museum_site folder as your local root folder earlier in this lesson, Dreamweaver set up a connection to those local files via the Files panel. You should be able to see the entire contents of this folder in the Files panel now.

Viewing local files

You can view local files and folders within the Files panel, whether they’re associated with a Dreamweaver site or not.

1 Click on the drop-down menu in the upper-left part of the Files panel, and choose Desktop to view the current contents of your Desktop folder.

2 Choose Local Disk (C:) from this menu to access the contents of your hard drive.

3 Choose CD Drive (D:) from this menu to view the contents of an inserted CD.

4 Choose museum_site to return to your local root folder view.

Selecting and editing files

You can select, open, and/or drag HTML pages, graphics, text, and other files listed in the Files panel to your Document window for placement.

1 If it’s not already open, double-click on the index.html file, located in the Files panel. The page opens for editing.

2 Click and drag the space.jpg image file from the Files panel to the index.html Document window. (If an Image Tag Accessibility Attributes window appears, press OK to close it.) The image is added to the open page.

If you have Fireworks installed on your computer, you can double-click on the space.jpg image file to open it in Fireworks for editing and/or optimizing.

3 Double-click on the exhibit_3.txt file in the Files panel to open it directly in Dreamweaver.

4 Choose Edit > Select All to select all of the text in this file.

5 Choose Edit > Copy to copy the text to the clipboard.

6 Click on the index.html tab of the Document window to return to the index page. Click on your page to the right of the image to place an insertion cursor.

7 Choose Edit > Paste. The text is added to the open page, beneath the image.

Files panel options

The Files panel also offers additional controls for displaying and transferring files. Many of these controls are located in a toolbar at the top of the panel.

1 Click on the Connect to remote host button () to connect to your remote site at any time. If you haven’t specified a remote server yet, the Site Definition wizard will open and prompt you to do so. Close this window to continue.

2 Click on the Refresh button () to refresh Dreamweaver’s connection to your local root folder and any remote directories. You should use this button periodically to make sure Dreamweaver recognizes added files.

3 Click on the Get File(s) button () to copy selected files from your remote server to the local root folder. Because you haven’t defined a remote server, Dreamweaver prompts you to do so now. Press No to continue.

4 Click on the Put File(s) button () to copy selected files from your local root folder to the remote server. Because you haven’t defined a remote server, Dreamweaver prompts you to do so now. Press No to continue.

5 Click on the Check Out File(s) button () to transfer a copy of the file from the remote server to your local root folder, and mark the file as checked out on the server. This option is available only if you’ve enabled the Check In and Check Out option in the Site Definition dialog box.

6 Click on the Check In button () to transfer a copy of the file from your local root folder to the remote server, and make the file available to others for editing. This option too is available only if you’ve enabled the Check In and Check Out option in the Site Definition dialog box.

7 Click on the Synchronize button () to synchronize files between your local and remote sites.

Changing the Files panel view

When working with a Dreamweaver site, you can reconfigure the Files panel by changing what appears in it (i.e., local or remote sites) or by expanding and collapsing the panel itself.

Site views

With the Files panel collapsed (the default), you use the Site View drop-down menu to change what’s visible in the panel.

1 Choose Local View to display only the contents of your local root folder.

2 Choose Remote View to display only the contents of the remote server.

3 Choose Testing Server to display the content of a local server used for trying out pages prior to upload.

4 Choose Map View to display a hierarchical flowchart view of your site.

Expanding and collapsing

The Files panel is collapsed and docked within the panel group by default. You can expand the Files panel to give you a better view of local and remote sites. When the Files panel is expanded, the contents of the local root folder are on one side, and either the remote or the testing server is on the other.

1 With the Files panel collapsed, click on the Expand to show local and remote sites button () to enlarge and reconfigure the panel.

If you expand the Files panel while it’s docked (as it is by default), you won’t be able to work in the Document window, as the Files panel fills that space. Collapse the Files panel to restore access to the Document window.

2 The toolbar at the top of the expanded Files panel mimics the toolbar when the panel is collapsed, with a slightly different configuration. The view buttons in the center of the toolbar allow you to switch the view displayed on the left side of the panel. By default, the Site Files button () is pushed, which lists the contents of the remote site on the left side of the panel. Press the Testing Server button () to switch this view to a list of files on the testing server, if you’ve defined one.

3 Press the Site Map button () to display a larger, hierarchical flowchart view of your site on the left side of the panel.

4 All the other buttons in this toolbar represent the same control options available when the Files panel is collapsed. With the Files panel expanded, click on the Collapse button
() to reduce the panel to its default state.

Now that you’ve learned the basics of creating sites, setting page properties, and managing site files, you’ll use these skills in Lesson 3, “Adding Text and Images.”

Because you’ll be using CSS in other lessons in the book, you’ll want to reset Dreamweaver to use the default CSS settings which you disabled earlier in this lesson. Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS) to open the Preferences dialog box. Under the Editing options section of the General category, make sure that the Use CSS instead of HTML tags checkbox is checked, then press OK.

Previous | 1 2

Order the Dynamic Learning: Dreamweaver CS3 book, authored by AGI Dreamweaver Training Instructors. These are the instructors that teach AGI's Dreamweaver Training Classes.