Contents Users Notes Software Requirements...xi The DW Support Files...xi Copying the DW Support Files...xi Windows Systems...xi Macintosh Systems...xi Using the Activities in Schools... xii The Chapter Format... xii Assignments and Projects... xii The Insert Bar... xii Chapter 1: Introduction to DreamWeaver MX 2004 Design Considerations... 1-1 Types of Graphics... 1-2 Backgrounds and Text... 1-2 Planning the Navigation... 1-2 The DreamWeaver Screen... 1-3 The Insert Bar... 1-3 The Document Window... 1-4 The Document Toolbar... 1-5 The Properties Inspector... 1-7 The Status Bar... 1-8 The Panel Group... 1-9 Creating a Site... 1-10 Creating a Root Folder... 1-10 Entering the Site Settings...1-11 Adding a Page to the Site... 1-13 Saving the Page... 1-14 Page Titles... 1-15 DreamWeaver Assignment 1... 1-17
Chapter 2: Entering Text and Graphics Creating a Home Page... 2-1 Entering the Text... 2-2 Formatting the Text... 2-2 Inserting an Image... 2-4 Adjusting the Size of an Image... 2-7 Wrapping Text Around Images... 2-8 Adding a Background... 2-10 Using a Colour Background... 2-10 Using an Image as a Background...2-11 Changing the Text Colour... 2-12 Adding a Horizontal Rule... 2-13 Viewing the Page in a Browser... 2-14 DreamWeaver Assignment 2... 2-15 Chapter 3: Using Tables Creating a Packages Page... 3-1 Formatting the Text... 3-2 Adding a Horizontal Rule... 3-3 Inserting a Table... 3-3 Adjusting the Table... 3-5 Adjusting the Row Height... 3-6 Using Rulers and Grids... 3-7 Adjusting the Column Width... 3-8 Inserting Graphics into the Table... 3-9 Inserting an Image About Europe... 3-9 Inserting an Image About the USA...3-11 Inserting an Image About South America...3-11 Centring the Images... 3-12 Inserting Text into the Table... 3-13 Adjusting the Text in the Table... 3-16 Adding a Background... 3-18 Further Table Adjustments... 3-20 DreamWeaver Assignment 3... 3-22 C-2
Contents Chapter 4: Creating Links Linking Text... 4-1 Creating the Link Table... 4-1 Formatting the Table... 4-3 Creating the Hyperlinks... 4-3 Testing the Links... 4-5 Adjusting the Hyperlink Text Colour... 4-6 Linking Images... 4-7 Inserting the Images... 4-7 Linking the Images... 4-8 Providing Links in the Packages Page... 4-10 Links Within a Page...4-11 Loading the Prepared Page...4-11 Setting the Anchor Points... 4-12 Setting the Anchor Links... 4-13 Testing the Anchor Links... 4-16 Updating the Button Links... 4-17 Image Maps... 4-19 Loading the Map Files... 4-19 Setting the Hotspot Links... 4-20 Testing the Links... 4-22 Updating the Button Links... 4-23 Looking at the Site... 4-24 DreamWeaver Assignment 4... 4-26 Chapter 5: Creating Forms Starting the Form... 5-1 Creating a Blank Page... 5-1 Inserting the Form Tag... 5-1 Entering the Text of the Form... 5-2 Adding the Sub-Heading... 5-2 Entering a Message... 5-3 Entering the Customer Details... 5-5 Inserting the Table... 5-5 Entering the Sub-headings... 5-6 Inserting the Fields... 5-7 Inserting a Pop-Up Menu... 5-9 Previewing the Form...5-11 C-3
Entering the Travel Packages... 5-12 Inserting the Table... 5-12 Entering the Sub-Headings... 5-12 Inserting the Fields... 5-13 Splitting Cells... 5-17 The Reply Section... 5-19 Inserting the Table... 5-19 Entering the Items... 5-19 The Submit and Reset Buttons... 5-21 Naming the Form... 5-23 Adding Buttons to the Orders Page... 5-24 DreamWeaver Assignment 5... 5-26 Chapter 6: Site Assets and Library Items The Assets Panel... 6-1 Using the Assets Panel... 6-2 Loading the Prepared Page... 6-2 Applying Assets... 6-2 Adding a Background Image... 6-3 Using Library Items... 6-5 Creating an Update Message... 6-5 Using the Library Item... 6-8 Editing the Library Item... 6-8 Creating a Navigation Library Item... 6-10 Placing the Links Table in the Library Items... 6-10 Inserting the Library Item in Other Pages...6-11 Adding the Links Table to the Airlines Page... 6-12 Updating the Navigation Bar... 6-13 Looking at the Library Items... 6-14 DreamWeaver Assignment 6... 6-15 Chapter 7: Using Frames Inserting Frames on a Page... 7-2 Deleting Frames... 7-3 Using Preset Frames... 7-3 C-4
Contents Saving the Frameset and the frames... 7-4 Saving the Frameset... 7-4 Saving Individual Frames... 7-6 Setting Frame Properties... 7-8 Naming Frames... 7-8 Completing the Banner Frame... 7-9 Completing the Contents Frame...7-11 Placing a Page into the Main Frame... 7-13 Adjusting the Frames... 7-14 Linking Pages... 7-15 Previewing the Site... 7-17 DreamWeaver Assignment 7... 7-19 Chapter 8: Enhancing Web Pages Setting a Navigation Bar... 8-1 Inserting the Navigation Bar... 8-1 Inserting the Home Buttons... 8-2 Setting the Navigation Bar Direction... 8-3 Inserting the Packages Buttons... 8-3 Inserting the Travel Tips Buttons... 8-4 Inserting the Tours Buttons... 8-5 Inserting the Orders Buttons... 8-5 Completing the Navigation Bar... 8-5 Editing Navigation Bar Elements... 8-7 Flash Text and Flash Buttons... 8-8 Flash Text... 8-8 Inserting Flash Text... 8-9 Changing the Background... 8-10 Flash Buttons...8-11 Removing the Current Buttons...8-11 Inserting the Home Button... 8-12 Inserting the Packages Button... 8-13 Inserting the Other Buttons... 8-14 Playing the Flash Buttons... 8-14 Using Flash Text as a Button... 8-15 DreamWeaver Assignment 8... 8-17 DreamWeaver Project 1 C-5
Chapter 9: Using Layers Creating the Specials Page... 9-1 Creating a Title Layer... 9-1 Creating Some Image Layers... 9-3 The First Image Layer... 9-3 The Second Image Layer... 9-4 The Third Image Layer... 9-5 Moving Layers... 9-6 Placing a Table in a Layer... 9-7 Adding a Background to the Page... 9-10 Adjusting Layers... 9-10 Adding the Page to the etravel Site... 9-12 Converting Layers to Tables... 9-13 DreamWeaver Assignment 9... 9-16 Chapter 10: Using Templates and Layout Tools Saving a New Index Page... 10-1 Creating a Template... 10-1 Laying out the Page... 10-2 Saving the Page as a Template... 10-4 Adding a Logo... 10-4 Setting the Background... 10-5 Adding Navigation Buttons... 10-6 Adjusting Layout Cells... 10-7 Setting Editable Regions in the Template... 10-8 Using the Template... 10-9 Applying the Template... 10-9 Inserting the Index Page Content... 10-10 Adding e-mail Links...10-11 Creating the Packages Page... 10-13 Creating the Orders Page... 10-15 Linking the Buttons... 10-16 Checking the Template Pages... 10-18 Advantages of Templates... 10-18 DreamWeaver Assignment 10... 10-20 C-6
Contents Chapter 11: Using Styles Cascading Style Sheets...11-1 Internal Custom Styles...11-1 Creating a New Style...11-2 Applying the Style...11-3 Creating a Body Style...11-4 Editing Styles...11-5 External Custom Styles...11-6 Loading the Sample Page...11-6 Creating the Body Text Style...11-6 Applying the Body Text Style...11-7 The Sub-Head Style...11-8 The Main Head Style...11-9 Using the Styles...11-10 Adjusting the Body Text Style...11-11 Using the Styles in Other Pages...11-11 Placing Styles in Templates...11-13 Adding Styles to the Template...11-13 Adding the Table Heading Style...11-13 Applying the Style...11-14 Adding the Links...11-16 Using the Properties Inspector to Edit Styles...11-18 DreamWeaver Assignment 11...11-19 Chapter 12: Using Behaviours The Behaviours Panel... 12-1 Setting Rollover Images... 12-2 Popup Messages... 12-3 A Popup Dialogue Box... 12-3 Setting Status Bar Messages... 12-5 Deleting a Behaviour... 12-6 Adding Help Messages... 12-6 Creating a New Page... 12-6 Setting the Layer... 12-7 Adding a Behaviour... 12-8 Making the Layer Invisible... 12-9 Previewing the Page... 12-10 C-7
Validating Forms...12-11 Opening the Orders Page...12-11 Setting Required Fields... 12-12 Setting an e-mail Field... 12-13 Validating Numbers... 12-14 Editing a Behaviour... 12-15 Providing Pop-Up Menus... 12-16 Opening the Prepared Page... 12-16 Setting the Links... 12-17 Setting the Pop-up Behaviour... 12-17 Setting the Menu Contents... 12-18 Setting the Menu Appearance... 12-18 Setting the Advanced Menu Options... 12-19 Setting the Menu Position... 12-19 Saving the Page as a Template... 12-20 DreamWeaver Assignment 12... 12-22 Chapter 13: Editing and Importing Tools Editing Images... 13-1 Cropping an Image... 13-1 The Reshape Tool... 13-2 Brightness and Contrast... 13-3 The Sharpen Tool... 13-4 Importing Microsoft Word Documents... 13-5 Opening the Prepared Word Document... 13-5 Copying the Microsoft Word Text... 13-5 Pasting the Text into DreamWeaver... 13-6 Moving the Image... 13-7 Adding a Word Table to the Page... 13-7 Copying the Table... 13-7 Pasting the Table into DreamWeaver... 13-8 Adjusting the Table... 13-9 DreamWeaver Assignment 13...13-11 C-8
Contents Chapter 14: Creating Commands Creating a Table Command... 14-1 Inserting the Table... 14-1 Formatting the Table... 14-2 Saving the Table Command... 14-3 Using the Table Command... 14-4 Formatting Image Sizes... 14-5 Setting the Image Size... 14-5 Creating the Image Size Command... 14-6 Applying the Command... 14-6 Managing Commands... 14-7 DreamWeaver Assignment 14... 14-8 Chapter 15: Working With Code Using HTML Code... 15-1 Copying HTML Code... 15-3 Setting Tags directly on Text... 15-4 Using Snippets... 15-5 Preset Snippets... 15-5 Creating Your Own Snippets... 15-6 Using the Snippet... 15-7 Adding Images to Snippets... 15-8 DreamWeaver Assignment 15... 15-10 Chapter 16: Checking and Uploading Web Files Browser Checks... 16-1 Selecting the Browsers... 16-1 Running the Browser Check... 16-2 Other Reports... 16-3 The Link Checker... 16-4 Cloaking... 16-5 Cloaking the Frames Folder... 16-5 Cloaking File Types... 16-7 C-9
Uploading Files... 16-7 Adjusting the Site Settings... 16-7 Uploading the Site Files... 16-9 Changing Some Files...16-11 Synchronising Files... 16-12 DreamWeaver Assignment 16... 16-13 DreamWeaver Project 2 C-10