1 Introduction to Dreamweaver

T-1

T U T O R I A L 1 Introduction toDreamweaverCS3

Adobe Dreamweaver CS3 is a Web authoring application that

enables you to design, develop, and maintain Web sites. Dreamweaver offers some

handy productivity features, including the ability to edit the HTML and the Web page

document side by side, the ability to access reference material, automatic generation of

JavaScript for commonly used interactivity, easy generation of Flash text and Flash but-

tons, and publishing using built-in FTP.

Dreamweaver can be used to organize Web page files and can automatically change

links when you rename or move files within your Dreamweaver site. Dreamweaver also

can check your pages for Section 508 and WAI accessibility compliance. Although it is

beyond the scope of these tutorials, Dreamweaver supports the advanced Web devel-

oper with point-and-click generation of server-side processing using ColdFusion,

ASP.NET, ASP, and PHP Web applications. A Web site created with Dreamweaver can

be published to any Web server.

In Tutorial 1, you will become familiar with the Dreamweaver graphical user interface

and create your first Dreamweaver site.

T-1T-1

T1.1

Tutorial 1 Introduction to Dreamweaver CS3T-2

The Dreamweaver Workspace

The Dreamweaver workspace as it initially displays is shown in Figure T1.1. It shows apage that provides links to recent documents, options for creating new documents,design samples, and links to tours and tutorials to help you become comfortable usingDreamweaver.

Figure T1.1 The Dreamweaver workspace

The Dreamweaver workspace features components designed to improve productivity,including the menu across the top of the window, an Insert bar below the File menu,dockable panel groups on the right-hand side, and the property inspector in the lowerportion of the window. This section will examine some commonly used components.On the opening page, locate the Create New column and click HTML to begin a newpage and launch the Document window. Your display should look similar to the oneshown in Figure T1.2.

The Document Window

You edit Web pages in the Document window. Figure T1.2 shows the Document win-dow that is part of the Dreamweaver workspace. The Document window can show theCode View and the Design View simultaneously, which allows you to move back andforth between coding and designing quite easily.

T1.1 The Dreamweaver Workspace T-3

Figure T1.2 The document window

As you view Figure T1.3, notice that the top half of the Document window displays theCode View. The code created by Dreamweaver when it is first installed is HTML, notXHTML. One of the advantages of Dreamweaver is the ease of customization. You willlearn to configure Dreamweaver to create XHTML later in this tutorial. The lower halfof the Document window displays the Design View, which is a WYSIWYG (what yousee is what you get) editor.

Figure T1.3 The document window in split view


Notice the Code, Split, and Design buttons in the top bar (document toolbar) of thedocument window. Click the Split button and the split view displays, as shown inFigure T1.3.

The bottom panel of the Document window shown in Figure T1.4 contains the tagselector, window size, and document size/download information. The tag selector (onthe left) displays the HTML tags associated with a selected element. Figure T1.4 showsthat a <body> tag has been selected.

Figure T1.4 The bottom panel of the Document window

The Select tool arrow icon is the default cursor, which allows you to select elements onthe page. The Hand tool allows you to scroll or move a page that is larger than the cur-rent Document window. The Zoom tool magnifying glass icon allows you to zoom andenlarge the page in the Document window. The Set Magnification drop-down list pro-vides a way to change the size of the page displayed in the Document window. Thedefault is 100% normal page size.

The window size pop-up menu displays the measurement of the Document window inpixels. It includes a drop-down arrow that can be used to change the size of the docu-ment window quickly. See Figure T1.5 for a detailed view. This feature is helpful whendesigning for various screen resolutions.

Figure T1.5 Configuring the window size

The document size/download indicator, on the far right, displays the current size of thedocument and the download time of 28.8 Kbps. Figure T1.4 shows that the documentfile size is 1K and that it will take 1 second to download.

The Document Toolbar

The Document toolbar, shown in Figure T1.6, is located above the Document windowin the Dreamweaver workspace. It contains buttons and pop-up menus that provide dif-ferent views of the Document window (such as Design View and Code View), a textbox to configure the page title, and some operations, such as previewing in a browser.

Figure T1.6 The Document toolbar


The Document toolbar shown in Figure T1.6 contains a variety of buttons and icons.You can place the mouse pointer over a button for a description of its purpose.

The three buttons on the left (Code view, Split screen view, and Design view) controlthe view shown in the Document window.

� The Code View button () is the shortcut key) changes the display in theDocument window to all code.

� The Split Screen View button displays both Code View and Design View in theDocument window.

� The Design View button changes the display in the Document window to theDesign View.

� The Title text box provides a convenient spot to modify the document title.

� The File Management button displays the file management popup menu.

� The Preview/Debug button allows you to configure and select the browsers inwhich you will test your Web pages. ' is the shortcut key to preview a Webpage in a browser when you use Dreamweaver.

� The Refresh Design View button updates the Design View with modificationstyped in Code View and new versions of image files.

� The View Options button configures features including word wrap, line numbers,and rulers in the document window.

� The Visual Aids button configures visual aids such as outlines and borders to helpyou design your Web pages.

� The Validate Markup button will immediately test your code for correct syntax.

� The Check Page button checks your page for browser compatibility and accessibility.


The Menu Bar

The menu bar, shown in Figure T1.7, controls functions such as saving files, copying,inserting images, modifying tables, formatting text, selecting commands, configuring thesite, and displaying various windows. Dreamweaver Help is also accessed from themenu bar and contains searchable help files. This area also includes a What’s New pre-sentation and tutorials to get you started with the application.

FAQDoes Dreamweaver have documentation for HTML, CSS, and JavaScript?

Yes, Dreamweaver is bundled with a number of online reference manuals. SelectWindow→Reference from the menu bar to display the Reference tab of the Resultspanel. The online references are context-sensitive and searchable. A partial screen-shot of the O’Reilly HTML Reference panel is shown in Figure T1.8. What handymaterial to have at your fingertips!

Figure T1.8 The online reference can be found within the Results panel in the lowerportion of the Dreamweaver workspace

Figure T1.7 The menu bar

The Insert Bar

The Insert bar, shown in Figure T1.9, with the Common tab selected, contains buttonsfor inserting components such as links, images, tables, and forms into a document. Forexample, you can insert a table by clicking the Table button in the Insert bar. We willexamine the Insert bar in detail later in this tutorial. If the Insert bar is not currentlydisplayed, select Window→Insert from the menu bar.

This concludes our brief tour of the Document window and its related areas. Next, wediscuss another important panel—the Property inspector.


The Property Inspector

As you work with Dreamweaver, you may find that the Property inspector (see FigureT1.10) is most useful. If the Property inspector is not visible in your Dreamweaverworkspace, select Window→Properties from the menu bar. The Property inspector iscontext-sensitive and dynamic. Select an object, XHTML element, or string of text andits properties will be displayed in the Property inspector. You can modify them and seethe changes instantly in the document window. In the example shown in Figure T1.11,the text Hello World was highlighted and the Property inspector was used to chooseArial font, size large, italic, bold, and the color red (#FF0000).

Figure T1.9 The Insert bar

Review the Property inspector and notice the style area. As the font face, size, andother properties were selected, Dreamweaver automatically created an embedded stylesheet in the document and created a new style called style1 to contain the property set-tings. Dreamweaver allows Web developers to configure CSS using a point-and-clickmethod!

Figure T1.10 The Property inspector

Figure T1.11 The Document window Design View, tag selector, and Property inspector


Figure T1.12 shows the Code View containing the embedded style, style1. Later in thetutorial you will work through this process yourself and also configure a descriptivename for the styles you create.

Figure T1.12 The Code View showing the embedded CSS

Figure T1.13 Click the arrow to display additional properties in the Property inspector

Some elements, such as images, have a large number of properties. The most commonlyused properties are always displayed. There is a small trianglular button, shown inFigure T1.13, in the lower-right corner of the Property inspector; click this when youneed to access additional properties.

Explore the Insert Bar

If the Insert bar is not visible in your Dreamweaver workspace, select Window→Insertfrom the menu bar.

As shown in Figure T1.14, the Insert bar has buttons which can quickly add objectssuch as hyperlinks, images, and tables to your Web page. The tabs on the Insert bar display the categories of objects, including Common (shown in Figure T1.14), Layout,Forms, Data, Spry, Text, Favorites, and Developer Toolbox.


The category selected will determine which configuration buttons appear in the Insertbar.

To determine the function of a button, place the mouse over the button and wait for abrief description to appear. In Figure T1.14, the mouse was placed over a button with apicture. The description indicates that this is the Image button. The Image button isused to add an image to a Web page.

This tutorial will concentrate on the most commonly used features of the Insert bar.Common, shown in Figure T1.14, is used to work with a number of componentsincluding hyperlinks, e-mail links, named anchors, tables, layers, images, and media.You will work with many of these components in the tutorials. Text is used to configuretext and to insert special characters such as a copyright symbol © and a non-breakingspace into a Web page.

The Forms tab, shown in Figure T1.15, is used to create forms and form elements. Youwill use these and other panels as you complete the Dreamweaver tutorials.

Figure T1.14 The Insert bar is a tabbed interface with many options

Figure T1.15 The Forms tab on the Insert bar

The Panel Groups

The panel groups are located on the right side of the Dreamweaver workspace and pro-vide additional functions under a number of categories, including CSS, Tag Inspector,and Files. Your display may appear different from Figure T1.16. If so, use the Windowoption on the menu bar to display panels. For example, select Window→CSS to add theCSS panel to the panel groups area.


Figure T1.16 shows the panel groups in their closed position. Notice the expanderarrow at the left side of each panel. To expand a panel, click this arrow. The CSS, Files,and History panels have been expanded in Figure T1.23.

The CSS panel configures Cascading Style Sheets (CSS). In Figure T1.17, the Currentbutton on the CSS Styles tab was clicked to display the style1 rule created for the HelloWorld text.

Figure T1.16 The panel groups

Figure T1.17 The panel groups with CSS, Tag inspector, and Files panels expanded

You can use the Tag inspector panel to both view and modify HTML tag attributes.This is also where more advanced features such as Dreamweaver JavaScript behaviorsare configured.

T1.3 Defining the Dreamweaver Site T-11

The Files panel offers a Files tab, an Assets tab, and a Snippets tab. The Files tab isused to organize and work with Web site folders and files. The Assets tab is used tomanage components of a Web site visually, including images, multimedia files, colors,and scripts. The Snippets tab is used to add common code snippets to a Web page.

You have completed the whirlwind tour of the Dreamweaver workspace. This tour hastouched on some of the commonly used windows, inspectors, and palettes. The nextsection explores using the Files panel’s Files tab to set up a Dreamweaver Web site.

T1.2

T1.3

Creating a New Dreamweaver Site

While you can edit Web page files outside of a Dreamweaver site, it is strongly recom-mended that you work within a Dreamweaver Web site—referred to here simply as thesite.

Each time that Dreamweaver is launched it displays an empty untitled document in thedocument window. If you do not need this document, click the Close button ( ) at theupper-right corner of the document window. Since you will be creating a Dreamweaversite in this tutorial, close the untitled document now.

Defining the Dreamweaver Site

You are ready to define your first Dreamweaver site. Using the menu bar, select Site→Manage Sites as shown in Figure T1.18. This will display the Manage Sites dialog box,as shown in Figure T1.19. Expect your list of sites to look different.

Figure T1.18 Using the Manage Sites option on the menu bar

Figure T1.19 Your Manage Sites dialog box may have sites listed


Select New→Site to display the Site Definition dialog box, as shown in Figure T1.20.

The Site Definition dialog box, as shown in Figure T1.20, appears. If the Advanced tabis not already selected, click the Advanced tab. You will now configure properties ofyour Dreamweaver site.

Figure T1.20 The Site Definition dialog box

You will use the Site Definition dialog box to configure the name, location, and prefer-ences of your site. Configure the name of your site: type HelloWorld in the Site nametext box. Configure the location of your site: click the folder icon next to the Local rootfolder text box. Drill down through your hard drive and/or removable drives anddecide where you will add the new site. In the example, the new site folder will belocated in the My Documents folder. See Figure T1.21.

T1.3 Defining the Dreamweaver Site T-13

Click the Create New Folder icon as shown in Figure T1.21 to create a new folder foryour site. The dialog box shown in Figure T1.22 will display.

Figure T1.21 Once you have found the location for your new site folder, click the Create New Folder icon

Figure T1.22 Name your new folder

T1.4


Name the folder HelloWorld and click Open. Click Select. The Site Definition dialogbox redisplays with your new information. Continue with your configurations. Do notenter a Default images folder, do not enter an HTTP address, and leave the EnableCache box checked. The site cache keeps track of links and assets in your site so thatDreamweaver can update them quickly. Click OK and the Manage Sites dialog box dis-plays with your new site highlighted, as shown in Figure T1.23. Click Done.

Figure T1.23 HelloWorld is highlighted on the Manage Sites dialog box

Figure T1.24 The Files panel for HelloWorld

Adding a Page to a Dreamweaver Site

There are a number of ways to perform most tasks using Dreamweaver, includingadding a page to a site. In this part of the tutorial, we will use the Files panel to add aWeb page document to the Dreamweaver site that you just defined.

The icon on the top-right of the Files panel is called the View Options icon. See FigureT1.25. Click this icon to display the View Options menu, as shown in Figure T1.26.

The Files panel, as shown in Figure T1.24, displays. This panel provides a means to cre-ate, view, organize, and publish your site. It also provides quick access to the Windowsdesktop. The Files panel currently shows that your site has no pages. The next step is toadd a page to your site.

T1.4 Adding a Page to a Dreamweaver Site T-15

Using the menu shown in Figure T1.26, select File→New File.

Figure T1.25 Select the View Options menu

Figure T1.26 The View Options menu for the Files panel displays

Figure T1.27 The new file is added as untitled.html

Figure T1.28 The new file has been renamed index.html

The Files panel (see Figure T1.27) shows the new file as untitled.html.

Rename the file index.html, as shown in Figure T1.28.


Figure T1.29 The document window now contains index.html

Notice that the Code View shows XHTML coding syntax. If your Code View showsHTML4 syntax, it is easy to configure Dreamweaver to use XHTML instead. Use themenu bar and select File→Convert→XHTML, as shown in Figure T1.30.

Figure T1.30 Converting a document to XHTML

Note: A new file can also be created by using the menu bar. Select File→New to openthe New Document dialog box. Select Blank Page and click the Create button.

Double-click index.html to open it in the document window, as shown in Figure T1.29.Notice how the folder name and file name appear in the title bar of the Document window.

T1.4 Adding a Page to a Dreamweaver Site T-17

Now the Code View should contain XHTML, as shown in Figure T1.29.

Dreamweaver’s preferences can be changed to use XHTML always. Use the menu barand select Edit→Preferences to display the Preferences dialog box. Select the NewDocument category, as shown in Figure T1.31.

Figure T1.31 Select the New Document category under Preferences

Leave the default document type as HTML, verify that the Default Document Type(DTD) is set to XHTML 1.0 Transitional. Click OK. From this point on, Dreamweaverwill use XHTML 1.0 Transitional syntax for all new Web page documents.

Now that the code is set to XHTML, you are ready to use the Dreamweaver workspaceto edit the page. Let’s start by adding a title. A quick way to create or edit a page title isto type directly in the Title text box in the Document toolbar. Type Hello from (yourlast name here). Next, click anywhere in the white space of the Document window andyou should see the page title update in the text box and display in the title bar of theDocument window, as shown in Figure T1.32.

Figure T1.32 Use the Title text box in the Document toolbar to modify page titles


Place your cursor in the Design View section of the Document window, type HelloWorld from Dreamweaver and notice that the Code View updates automatically. If youpress the e key after your text, Dreamweaver will place paragraph tags around yourmessage and create a new empty paragraph below it. See Figure T1.33.

You have been working in the split screen view during this tutorial. The split screenview is one of the most powerful features of Dreamweaver—any change you make toeither view (Code or Design) is immediately applied to the other. XHTML coders likethis feature because it allows them to see the effect of a tag immediately.

Remember that you can change the view using the Code View button and Design Viewon the Document toolbar (Figure T1.6).

Most of the code should be familiar to you. The page begins and ends with <html>tags, and contains <head>, <title>, and <body> tags. Remember that Dreamweaverallows you to modify the code, even to change the syntax to XHTML. Let’s concentrateon what Dreamweaver generated for you. The page title you configured was convertedto XHTML code. Dreamweaver added a meta tag to identify the character set andencoding of the XHTML. As you create more complex Web pages with Dreamweaverin later tutorials, you will notice other tags added by Dreamweaver.

Feel free to modify the code if you need to. As you move your cursor in one view, it ismoved in the other. Experiment by adding an exclamation point after the Hello fromDreamweaver text. Notice that the exclamation point is displayed in both views. Deletethe exclamation point. You will have opportunities in later tutorials to work more withDreamweaver’s split screen feature.

Save the page by selecting File→Save. Test the page in a browser. Dreamweaver pro-vides two shortcuts for this task:

� Press the ' key.

� Click the Preview/Debug in Browser button in the Document toolbar (Figure T1.6).

Figure T1.33 Dreamweaver writes the code right before your eyes

T1.5 Exploring Page Properties T-19

T1.5

The Page Properties dialog box appears, as shown in Figure T1.35.

This is a convenient tool for applying properties such as title, background image, textand link colors, and margins to a Web page.

Let’s change the background color. If you have an exact hexadecimal color value, youcan type it directly in the text box. Many times you don’t have a value or you need tomatch the color of part of an image or another Web page. This is when the color paletteis convenient. Click the Background color drop-down box to display the color palette.When it first displays, the color palette shows an eyedropper tool that can be used tomatch color on another portion of the desktop. To use the eyedropper, move it to anarea that is not on the color palette and click—your color value is automatically enteredin the background text box.

Return to Dreamweaver and click the Design View button in the Document toolbar(Figure T1.6). In the next section you will explore the Page Properties dialog box andthe Property inspector while you modify your page.

Exploring Page Properties

To access the Page Properties dialog box, use the menu bar and select Modify→PageProperties. See Figure T1.34.

Figure T1.34 Selecting Page Properties

Figure T1.35 Page Properties dialog box


Choose a light tan (#CCCC99) or another pleasing light color. Click OK to close the PageProperties dialog box. Your page should look similar to the one shown in Figure T1.37.

The color palette is displayed in Figure T1.36. Another method used to choose a coloris to place the cursor over a color box in the color palette and click—your color value isautomatically entered in the background text box.

Figure T1.36 The color palette

Figure T1.37 The index.html page with a background color

T1.6

By now you should be familiar with the Page Properties dialog box. Another methodfor displaying the Page Properties dialog box is to right-click anywhere in the DesignView and select Page Properties from the pop-up menu. The next section continuesyour Dreamweaver tour as you explore the Property inspector.

Exploring the Property Inspector

Let’s begin by using the Property inspector (Figure T1.38) to modify the text on the page.

If the Property inspector is not currently displayed, select Window→Properties from themenu bar.

T1.6 Exploring the Property Inspector T-21

Figure T1.38 The Property inspector

Figure T1.39 Changes made in the Property inspector are immediately applied to the Design View

Using the Design View document window, select the text Hello World fromDreamweaver by highlighting it. Use the Property inspector to change the format fromParagraph to Heading 3 by using the drop-down list next to Format. Your page shouldlook similar to the one shown in Figure T1.39.

Now might be a good time to discuss the Undo feature of Dreamweaver. When youneed to back out of a change, use the menu bar and select Edit→Undo. Before you con-tinue formatting the text, let’s take a quick tour of the Property inspector.

As mentioned earlier, the Property inspector displays different properties depending onwhat object is selected. Figure T1.39 shows the Property Inspector panel when text isselected. The parts of the Property inspector are listed in Table T1.1.

Now that you are familiar with the Property inspector, set the font to Arial, Helvetica,sans-serif (note how Dreamweaver automatically provides backup fonts in case yourvisitor does not have the primary font installed). Do not set the size for your text. Clickthe Color Palette icon to set the text color to a dark blue. Center the text with the cen-ter alignment button. Next, remove the highlight from the text by clicking anywhereelse on the Document window. Your page should look similar to the sample shown inFigure T1.40.


Table T1.1 Property Inspector Components

Component Purpose

Format list box Configures the block level format; select None (browserdefault), Paragraph (puts text in a paragraph), Headings 1through 6, or Preformatted (places text between <pre> tags)

Font list box Configures a font for text display

Style list box Configures a style (CSS)

Size list box Configures the text size; select None (browser default) or anumeric text size

Displays the CSS panel

Text color palette Arrow is used to select a color visually, text box accepts typedin color value

Bold button Toggles text to bold and back to normal

Italics button Toggles text to italic and back to normal

Alignment buttons Aligns text to the left, center, or right

Unordered List button Creates a bulleted (unordered) list

Ordered List button Creates a numbered (ordered) list

Text Outdent and Text Indent buttons Increases or decreases the indentation of text

Hyperlink and Target text boxes Configures hyperlinks and targets; type directly in the link andtarget boxes, click the arrow to display a list of links (or targets)already used on the site, or display a file list by clicking on thefolder icon

Dreamweaver Help button Launches Dreamweaver Help

Quick Tag Editor Invokes the Quick Tag Editor (not used in this text)

Displays the Page Properties dialog box

Figure T1.40 Setting additional properties with the Property inspector

T1.6 Exploring the Property Inspector T-23

Click anywhere on the heading and examine the Property inspector. Your page shouldlook similar to the one shown in Figure T1.41. Notice the configuration of style1.

Figure T1.41 The Property inspector has configured a style

Dreamweaver has created a default style name (style1) for you. You will find it easier towork with CSS if the names of the style rules are descriptive. Rename the style1 toMainHead. Click in the Style list box to display a drop-down menu and select Rename,as shown in Figure T1.42.

Figure T1.42 Renaming the default style

The Rename Style dialog box will display. Enter the new style name (MainHead) asshown in Figure T1.43. Click OK.

The property inspector now shows MainHead as the name of the style for the headingon your page. See Figure T1.44. Notice also how the name of the style is displayed withthe characteristics of the style.

Figure T1.43 Use the Rename Style dialog box

Figure T1.44 The Property inspector with the named style


Click the Code View icon to examine the XHTML and CSS that Dreamweaver created.It should be similar to the one shown in Figure T1.45. Notice how the backgroundcolor for the page is also configured with CSS. Take a moment to examine it.

Figure T1.45 Code View of Hello World page

T1.8

T1.7

When you are ready, save your page (File→Save) and test it in a browser. (Did youremember the ' shortcut to preview your page?) This tutorial continues with anexample of closing your Web page document, exiting Dreamweaver, launchingDreamweaver, and accessing your Dreamweaver site.

Exiting Dreamweaver

To close a Web page document, use the menu bar and select File→Close or click theClose ( ) button at the upper-right corner of the Document window. To exitDreamweaver, use the menu bar and select File→Exit or click the Close ( ) button atthe upper-right corner of the Dreamweaver workspace. When you relaunchDreamweaver, the most recent site you worked on will display in the Files panel. If youhave not already done so, close the index.html file and exit Dreamweaver.

Opening a Defined Site

When you launch Dreamweaver it automatically displays the Files panel with thedefined site you most recently worked with. Since you just worked with the HelloWorldsite, it should display in the Files panel. Double-click the index.html file to open the

Summary T-25

page in the Document window. When you are finished, close the document and exitDreamweaver.

If you work with multiple sites you need to know how to select a particularDreamweaver site. As shown in Figure T1.46, use the Files panel, select the Site drop-down list to view the available sites, and select the site you need to work with.

Figure T1.46 Using the Files panel to select a site

Alternatively, you can use the menu bar, select Site→Manage Sites to display theManage Sites dialog box, as shown in Figure T1.47, then select the name of your site,and click Done.

Figure T1.47 Using the Site panel to select a site

SummaryBy now you should be familiar with creating a site, modifying a Web page, previewing aWeb page in a browser, and closing and reopening a site. A solid foundation in theseskills will help you with other features of Dreamweaver. Dreamweaver Tutorials 2 and3 introduce topics such as adding pages and images, using lists and tables, creatinghyperlinks, and adding Flash buttons.

You have completed Adobe Dreamweaver CS3 Tutorial 1!