Module 1 Contents Chapter 1: Introduction to DreamWeaver CS4 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 Screen Views... 1-4 The Insert Panel... 1-5 The Document Window... 1-7 The Document Toolbar... 1-7 The Properties Inspector... 1-9 The Status Bar... 1-11 The Panel Group... 1-13 Creating a Site... 1-16 Creating a Root Folder... 1-16 Entering the Site Settings... 1-16 Adding a Page to the Site... 1-20 Page Titles... 1-21 DreamWeaver Assignment 1... 1-22 Chapter 2: Entering Text and Graphics Setting up the Home Page... 2-1 Entering the Text... 2-2 Spell Checking the Text... 2-3 Formatting the Text... 2-4 The Main Heading... 2-4 The Body Text... 2-7 Inserting an Image... 2-9 Selecting the Image... 2-9 Creating an Images Folder... 2-10 Adjusting the Size of an Image... 2-13 Guided Computer Tutorials, 2009 C-1
Wrapping Text Around Images... 2-15 Adding a Background... 2-17 Adding a Background Colour...2-17 Using an Image as a Background... 2-18 Adding a Horizontal Rule... 2-20 Viewing the Page in a Browser... 2-20 Live Preview... 2-21 DreamWeaver Assignment 2... 2-23 Chapter 3: Using Tables Creating a Packages Page... 3-1 Formatting the Text... 3-2 Adding a Horizontal Rule... 3-4 Inserting the Table... 3-5 Adjusting the Table... 3-7 Naming and Centring the Table... 3-7 Adjusting the Row Height... 3-8 Using Rulers and Grids... 3-9 Adjusting the Column Width... 3-11 Inserting Graphics into the Table... 3-12 Inserting an Image About Europe... 3-12 Inserting an Image About the USA... 3-14 Inserting an Image About South America... 3-15 Inserting Text into the Table... 3-16 Entering the Prices... 3-21 Adjusting the Text in the Table... 3-22 Adding a Page Background... 3-24 Adding a Table Background... 3-25 Further Table Adjustments... 3-26 DreamWeaver Assignment 3... 3-28 C-2 Guided Computer Tutorials, 2009
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-10 Providing Links in the Packages Page... 4-11 DreamWeaver Assignment 4... 4-13 Chapter 5: Anchor Points and Hotspots Links Within a Page... 5-1 Loading the Prepared Page... 5-1 Setting the Anchor Points... 5-2 Setting the Anchor Links... 5-4 Testing the Anchor Links... 5-5 Updating the Button Links... 5-6 Hotspots... 5-9 Loading the Map Files... 5-9 Setting the Hotspot Links... 5-10 Testing the Links... 5-13 Updating the Button Links... 5-14 Adding the Buttons to the Tours Page... 5-15 DreamWeaver Assignment 5... 5-16 Guided Computer Tutorials 2009 C-3
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-3 Adding a Background Image... 6-5 Inserting the World Image... 6-6 Using Library Items... 6-8 Creating an Update Message... 6-8 Using the Library Item... 6-11 Editing the Library Item... 6-12 Creating a Navigation Library Item... 6-14 Placing the Links Table in the Library Items... 6-14 Inserting the Library Item in Other Pages... 6-16 Adding the Links Table to the Airlines Page... 6-18 Updating the Navigation Bar... 6-19 Looking at the Library Items... 6-21 DreamWeaver Assignment 6... 6-22 Chapter 7: Absolute Position Elements Creating the Specials Page... 7-1 Creating a Title Element... 7-1 Creating Some Image Tags... 7-6 The First Image Tag... 7-6 The Second Image Tag... 7-8 The Third Image Tag... 7-9 Moving AP Element Tags... 7-10 Placing a Table in an AP Element Tag... 7-11 Adding a Background to the Page... 7-15 Adjusting the AP Element Stacking Order... 7-16 Converting AP Elements to Tables... 7-18 DreamWeaver Assignment 7... 7-21 C-4 Guided Computer Tutorials, 2009
Contents Chapter 8: Using Templates Creating the Template... 8-1 Creating the Table... 8-2 Merging Cells... 8-2 Saving the Page as a Template... 8-4 Completing the Template... 8-5 Adding a Logo... 8-5 Adding Navigation Buttons... 8-7 Adjusting the Cell Heights... 8-8 Setting Editable Regions in the Template... 8-9 Using the Template... 8-11 Applying the Template... 8-11 Inserting the Content... 8-12 Adding E-Mail Links... 8-13 Creating the Packages Page... 8-15 Creating the Airlines Page... 8-16 Linking the Buttons... 8-18 Checking the Template Pages... 8-20 Advantages of Templates... 8-20 Setting the Background... 8-20 Adjusting the Content Region... 8-21 DreamWeaver Assignment 8... 8-23 Chapter 9: Creating Forms Starting the Page... 9-1 Inserting the Form Tag... 9-2 Entering the Text of the Form... 9-2 Adding the Sub-Heading... 9-2 Entering a Message... 9-4 Adding a Horizontal Rule... 9-6 Entering the Customer Details... 9-6 Inserting the Table... 9-6 Entering the Sub-headings... 9-7 Inserting Text Fields... 9-10 Inserting a Pop-Up Menu Field... 9-13 Shading the Sub-Heading... 9-15 Previewing the Form... 9-16 Guided Computer Tutorials 2009 C-5
Entering the Travel Packages... 9-17 Inserting the Table... 9-17 Entering the Sub-Headings... 9-18 Inserting the Destination Fields... 9-19 Entering the From Fields... 9-20 The Inserting the Duration Fields... 9-21 Splitting Cells... 9-23 Adjusting the Field Headings... 9-24 The Reply Section... 9-25 Inserting the Table... 9-25 Inserting Check Box Fields... 9-26 The Submit and Reset Buttons... 9-29 Formatting the Replay Heading... 9-30 Naming the Form... 9-32 Adding the Orders Page to the Template... 9-33 DreamWeaver Assignment 9... 9-35 Chapter 10: Navigation Bars Setting the Navigation Bar Files... 10-1 Adjusting the Template... 10-1 Adjusting the Index Page... 10-2 Creating the Sydney Page... 10-4 Creating the London Page... 10-5 Creating the Cape Town Page... 10-6 Inserting the Navigation Bar... 10-7 Inserting the New York Buttons... 10-8 Setting the Navigation Bar Direction...10-10 Inserting the Sydney Buttons...10-11 Inserting the London Buttons...10-12 Inserting the Cape Town Buttons...10-13 Updating the Template...10-13 Adjusting the Navigation Bar... 10-14 Editing Navigation Bar Elements... 10-15 DreamWeaver Assignment 10... 10-17 C-6 Guided Computer Tutorials, 2009
Contents Chapter 11: Checking and Uploading Web Files Browser Checks... 11-1 Other Reports... 11-3 The Link Checker... 11-5 Cloaking... 11-6 Cloaking the Library Folder... 11-6 Cloaking File Types... 11-7 Uploading Files... 11-8 Adjusting the Site Settings... 11-8 Uploading the Site Files...11-11 Changing Some Files...11-13 Synchronising Files...11-14 DreamWeaver Assignment 11... 11-16 DreamWeaver Project 1 Harrison Autos...P1-2 About Harrison Autos...P1-2 Small Cars...P1-2 Family Cars...P1-3 Sports Cars...P1-3 Test Drive Booking Form...P1-3 Guided Computer Tutorials 2009 C-7
Module 2 Contents Chapter 12: Cascading Style Sheets Cascading Style Sheets... 12-1 Internal Custom Styles... 12-1 Starting a Blank Page... 12-1 Creating the Main Heading Style... 12-2 Creating the Body Text Style... 12-4 Looking at the Code... 12-5 The CSS Styles Panel... 12-6 Editing Styles... 12-7 Looking at the Styles... 12-8 External CSS Styles... 12-8 Loading the Sample Page... 12-8 Creating a CSS Style Sheet... 12-9 Creating a Second Style...12-11 Applying the Styles...12-12 Adding a New Style...12-13 Adjusting the Styles...12-15 Saving the CSS File...12-16 Looking at the Travel Tips Code...12-16 Attaching Styles to Other Pages...12-17 Placing Styles in Templates... 12-18 Opening the Template...12-19 Attaching the Styles.css File to the Template...12-19 Opening a New Page...12-20 DreamWeaver Assignment 12... 12-21 C-8 Guided Computer Tutorials, 2009
Contents Chapter 13: Laying out a CSS Based Page Starting a New Site... 13-1 Saving the Pages... 13-4 Attaching the CSS File to the Index Page... 13-5 Setting the DIV Tags... 13-6 Looking at the Code... 13-7 Inserting the Banner DIV Tag... 13-7 The Navigation DIV Tag... 13-9 The Columns DIV Tag...13-10 Inserting the Nav2 Nested DIV Tag...13-11 Inserting the Content Nested DIV Tag...13-12 Setting the Nav2 and Content Styles... 13-13 The Nav2 Style...13-13 Setting the Content Style...13-16 DreamWeaver Assignment 13... 13-18 Chapter 14: Adding Content to CSS Pages Inserting the Company Logo... 14-1 Opening the Page... 14-1 Inserting the Image... 14-1 Checking the Image Dimensions... 14-4 Inserting the Navigation Content... 14-5 Inserting the Home Button... 14-5 Inserting the Packages Button... 14-6 Inserting the Other Buttons... 14-7 Inserting the Nav2 Content... 14-9 Entering the Text... 14-9 Adding Some Dummy Links...14-10 Inserting the Content Text... 14-11 Copying the Text...14-11 Pasting the Text...14-11 DreamWeaver Assignment 14... 14-14 Guided Computer Tutorials 2009 C-9
Chapter 15: Formatting CSS Pages Setting Tag Styles... 15-1 The Body Tag... 15-1 Changing Some Text... 15-3 Creating the H1 Style... 15-4 Defining Class Styles... 15-5 Defining ID CSS Styles... 15-6 The Banner DIV Tag... 15-7 The Navigation DIV Tag... 15-8 The Columns DIV Tag... 15-9 Formatting Link Text...15-10 Editing Styles... 15-13 The Nav2 Region...15-13 The Link Text...15-14 The Content Style...15-15 Changing a Style Property...15-15 Saving the Page as a Template... 15-16 Saving as a Template...15-16 Setting the Editable Region...15-18 Using the Template...15-19 Editing the Template... 15-21 Understanding the CSS files... 15-22 DreamWeaver Assignment 15... 15-24 Chapter 16: Using Behaviours The Behaviours Panel... 16-1 Popup Messages... 16-2 Setting up a Page... 16-2 Popup Dialogue Boxes... 16-4 Status Bar Messages... 16-5 Deleting a Behaviour... 16-8 Displaying an Enlarged Image... 16-8 Creating a New Page... 16-8 Adding the Behaviour... 16-9 C-10 Guided Computer Tutorials, 2009
Contents Validating Forms... 16-11 Creating the Orders Page...16-11 Setting the Validation Behaviour...16-13 Setting Required Fields...16-13 Setting an email Field...16-15 Validating Numbers...16-17 Effect Behaviours... 16-19 Browser Versions... 16-21 DreamWeaver Assignment 16... 16-23 Chapter 17: Editing and Importing Tools Starting the Page... 17-1 Editing Images... 17-2 Cropping an Image... 17-3 The Resample Tool... 17-4 Brightness and Contrast... 17-5 The Sharpen Tool... 17-6 Importing Microsoft Word Documents... 17-6 Opening the Prepared Word Document... 17-7 Copying the Microsoft Word Text... 17-7 Pasting the Text into DreamWeaver... 17-7 Moving the Image... 17-9 Adding a Word Table to the Page... 17-9 Copying the Table... 17-9 Pasting the Table into DreamWeaver...17-10 Adjusting the Table...17-11 DreamWeaver Assignment 17... 17-12 Guided Computer Tutorials 2009 C-11
Chapter 18: Inserting Media Creating a Page... 18-1 Inserting Smart Photoshop Objects... 18-2 Inserting the Object... 18-2 Adjusting the Image... 18-4 Editing Images... 18-7 Flash Animations... 18-9 Inserting the Animation... 18-9 Playing the Animation...18-10 Resizing the Animation...18-11 Flash Video... 18-12 Importing the Video...18-12 Setting the Skin...18-13 The Final Settings...18-14 Previewing the Video...18-14 DreamWeaver Assignment 18... 18-16 Chapter 19: Creating Menus and Tabbed Panels Popup Menus... 19-1 Saving the Prepared Pages... 19-1 Adjusting the Template... 19-2 Inserting the Popup Menu... 19-3 Adjusting the Menu Buttons... 19-3 Adjusting the Popup Menu... 19-5 Adjusting the Third Tier Menu... 19-6 Saving the Template... 19-6 Previewing the Page... 19-7 Formatting the Menu... 19-8 Tabbed Panels... 19-10 Inserting the Tabbed Panel...19-10 The London Tab...19-10 The Paris Tab...19-12 Previewing the Page...19-13 Adjusting the Tabbed Panels...19-14 DreamWeaver Assignment 19... 19-15 C-12 Guided Computer Tutorials, 2009
Contents Chapter 20: Commands and Snippets Creating Commands... 20-1 Creating a Table Command... 20-1 Inserting the Table... 20-1 Formatting the Table... 20-2 Saving the Table Command... 20-4 Using the Table Command... 20-5 Clearing the History Panel... 20-7 Formatting Image Sizes... 20-7 Setting the Image Size... 20-7 Creating the Image Size Command... 20-8 Applying the Command... 20-9 Managing Commands... 20-10 Using Snippets... 20-10 Preset Snippets...20-10 Creating Your Own Snippets...20-12 Using the Snippet...20-15 Adding Images to Snippets...20-15 DreamWeaver Assignment 20... 20-18 DreamWeaver Project 2 Stewarts Real Estate...P2-2 About Stewarts Real Estate...P2-2 Current Property List...P2-3 New Releases...P2-3 Inspection Form...P2-4 Guided Computer Tutorials 2009 C-13