MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER User Manual

macromedia™®Dreamweaver MX Tutorials

Chapter 2104 Save your document by doing one of the following:• Select File > Save.• Press Control+S (Windows) or Command+S (Macintosh).Modify the

Using Tables to Design a Page Layout Tutorial 11Merge and split cellsBy merging and splitting cells you can customize a table’s design to fit your lay

Chapter 2126 In the Property inspector, click the Split Cell button.The Split Cell dialog box appears.7 In the dialog box, set the following options:•

Using Tables to Design a Page Layout Tutorial 131 In the document, click in any cell of the table, then in the tag selector located at the bottom left

Chapter 214Set a relative width table in Standard viewA percentage-based table stretches and shrinks based on the width of a browser window. (For exam

Using Tables to Design a Page Layout Tutorial 153 In the dialog box that appears, set the following options:In the Rows text box, type 2.In the Column

Chapter 216Draw a layout cell1 In the Insert bar, click the Layout tab, then click the Layout view button to switch from Standard view.The Getting Sta

Using Tables to Design a Page Layout Tutorial 177 Draw another cell to create a text area above the navigation buttons. Add multiple layout cellsNext

Chapter 2182 In the Document window, position the pointer below the last cell you drew; then drag to draw alayout cell. Continue to hold the Control k

Using Tables to Design a Page Layout Tutorial 191 Click the border of a layout cell to select it.Handles appear around a selected layout cell.2 Do one

2TrademarksAfterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorwar

Chapter 220Add color to a tableYou can add color to any part of a table. You’ll start by adding a background color to the entire table, then apply a d

Using Tables to Design a Page Layout Tutorial 215 Add a background color to the other cells in your table, if you’d like. 6 Save your document.Set a r

Chapter 2221 In the document, in the column header click the table column you want to make autostretch. 2 In the pop-up menu that appears, choose Make

23CHAPTER 3Image Alignment and Image Maps TutorialWorking with images in Macromedia Dreamweaver MX is quite easy. You can use various Dreamweaver visu

Chapter 324Set image alignmentAn image, like text, appears in the normal flow of HTML in a page and can appear as a paragraph by itself, or as part of

Image Alignment and Image Maps Tutorial 25In the Document window, click the first image (next to the table cell that contains the text Alignment).The

Chapter 326Set image spacingAs you see, when you place an image in a paragraph, text appears right next to the edge of the image. In the next step you

Image Alignment and Image Maps Tutorial 27View the completed fileTake a look at the completed file to see what you’ll create. The completed image map

Chapter 3283 Open the Property inspector if it isn’t already open, and click the expander arrow in the lower right area of the Property inspector to s

Image Alignment and Image Maps Tutorial 29Note: You should always set alternate text for images in your documents, including image maps, this provides

3CONTENTSCHAPTER 1Dreamweaver MX Tutorials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5What you will learn. .

Chapter 330Take the next stepsIn this tutorial you worked with several aspects of images. You learned how to use the Property inspector to set image a

31CHAPTER 4Working with Dreamweaver DesignFiles TutorialMacromedia Dreamweaver MX comes with an extensive set of professionally designed assets—page l

Chapter 432Before You BeginIf you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingSt

Working with Dreamweaver Design Files Tutorial 33• In the Code panel, click the expander arrow if you need to, then choose Snippets.The Snippets panel

Chapter 4345 In the Snippets panel, click the Insert button located at the bottom of the Snippets panel to insert it in the document.The snippet appea

Working with Dreamweaver Design Files Tutorial 35Add a content code snippetNext you’ll add a table in which to add content. You’ll insert the snippet

Chapter 436Add a footer code snippetNow you’ll add the final snippet, a snippet for footer content.1 Press Enter or Return to move the insertion point

Working with Dreamweaver Design Files Tutorial 376 Repeat step 5, applying the same color to the cells containing the text “Dolor” and “Amit.”7 Click

Chapter 4384 Do one of the following to save the selection as a code snippet:• Right-click (Windows) or control-click (Macintosh) the selected table,

39CHAPTER 5Designing with Cascading StyleSheets TutorialYou can use Cascading Style Sheets (CSS) in Macromedia Dreamweaver MX to apply style elements

Contents4Take the next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38CHAPTER 5Desig

Chapter 540Before you beginIf you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingSt

Designing with Cascading Style Sheets Tutorial 41Open the CSS Styles panelYou use the CSS Styles panel to create, view, apply or edit style attributes

Chapter 5423 In Define In, select This Document Only.For now we’ll apply the style to this document, later you’ll see how to export the style so you c

Designing with Cascading Style Sheets Tutorial 43Set a page background colorNext, you’ll use the Background category in the CSS Styles panel to set ba

Chapter 5444 In the CSS Styles panel, select Edit Styles.The new style appears in the list along with a description of the style attributes.Set a styl

Designing with Cascading Style Sheets Tutorial 456 Set the following Type attributes for the link:In Decoration, select Overline.In Color, in the text

Chapter 546Take the next stepsIn this tutorial, you learned how to create basic CSS styles. You also learned how to export styles you applied in a doc

47CHAPTER 6Building a Master-Detail Page Set TutorialA Master-Detail Page set is a web application which presents information extracted from a databas

Chapter 648Before you beginIf you completed the chapter, “Developing a Web Application in Dreamweaver MX,” in the Getting Started with Dreamweaver MX

Building a Master-Detail Page Set Tutorial 49• Press F8.The Site panel opens.2 In the Sites pop-up menu, select the GlobalCar site you defined. 3 In t

5CHAPTER 1Dreamweaver MX TutorialsThe Dreamweaver MX tutorials are step-by-step lessons, designed to teach you the fundamentals of Dreamweaver MX. We

Chapter 650Create a database recordsetNow you’ll create a recordset to display data that is stored in a database. A recordset is a subset of informati

Building a Master-Detail Page Set Tutorial 513 In the Data Source pop-up menu (ColdFusion) or the Connection pop-up menu (other server page types), se

Chapter 6526 Click Test to test the recordset.The database records that match your recordset request are displayed in the Test SQL Statement window. 7

Building a Master-Detail Page Set Tutorial 53Insert a Master-Detail Page Set application objectDreamweaver includes several application objects that h

Chapter 6546 Remove all the fields in the Master Page Fields list except LOCATION_NAME, CITY, and STATE_COUNTRY.7 In the Link To Detail From pop-up me

Building a Master-Detail Page Set Tutorial 55View your pagesNext, you’ll save the pages, then view them to see how the application you developed works

Chapter 656Take the next stepsIn this tutorial you learned how to create a master-detail page set in Dreamweaver. For detailed information about topic

57CHAPTER 7Building an Insert Record Page TutorialThis tutorial walks you through the steps of building an form which inserts information into a datab

Chapter 758Create an insert pageThe page you’ll create lets the site administrator insert new rental car location information in the Global Car Rental

Building an Insert Record Page Tutorial 593 In the Site panel, double-click the insertLocation document to open it.The document opens in the Document

Chapter 16“Working with Dreamweaver Design Files Tutorial” on page 31, takes approximately 20 - 30 minutes to complete, and focuses on these tasks:• “

Chapter 7604 With the text field still selected, in the Property inspector, enter state_country in the Name text box and enter 30 in the Char Width te

Building an Insert Record Page Tutorial 6110 Add a submit button for the form by doing one of the following:• In the Insert bar’s Forms category, clic

Chapter 762Define the List/Menu form fieldNow you’ll update the list/menu field adding information which will let a user select the text name for a re

Building an Insert Record Page Tutorial 63Define an Insert Record server behaviorYou’ll use a server behavior to create the necessary server scripts f

Chapter 7643 In the Insert Into Table pop-up menu, choose LOCATIONS.The Columns list updates with information about how the form fields relate to the

Building an Insert Record Page Tutorial 65Test your pageNext, you’ll copy the completed page to your server, then open it in a browser and insert some

Chapter 766

7CHAPTER 2Using Tables to Design a Page LayoutTutorialIf you are familiar with HTML coding, you already know that text or any other content you add in

Chapter 28Before You BeginIf you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingSta

Using Tables to Design a Page Layout Tutorial 9• In the Insert bar’s Common category, click the Table icon. The Insert Table dialog box appears.2 In t