Learning Adobe DreamWeaver CS4. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CS4. Chapter 2: Entering Text and Graphics

Size: px

Start display at page:

Download "Learning Adobe DreamWeaver CS4. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CS4. Chapter 2: Entering Text and Graphics"

Gilbert Stokes
6 years ago
Views:

1 Module 1 Contents Chapter 1: Introduction to DreamWeaver CS4 Design Considerations Types of Graphics Backgrounds and Text Planning the Navigation The DreamWeaver Screen The Screen Views The Insert Panel The Document Window The Document Toolbar The Properties Inspector The Status Bar The Panel Group Creating a Site Creating a Root Folder Entering the Site Settings Adding a Page to the Site Page Titles DreamWeaver Assignment Chapter 2: Entering Text and Graphics Setting up the Home Page Entering the Text Spell Checking the Text Formatting the Text The Main Heading The Body Text Inserting an Image Selecting the Image Creating an Images Folder Adjusting the Size of an Image Guided Computer Tutorials, 2009 C-1

2 Wrapping Text Around Images Adding a Background Adding a Background Colour Using an Image as a Background Adding a Horizontal Rule Viewing the Page in a Browser Live Preview DreamWeaver Assignment Chapter 3: Using Tables Creating a Packages Page Formatting the Text Adding a Horizontal Rule Inserting the Table Adjusting the Table Naming and Centring the Table Adjusting the Row Height Using Rulers and Grids Adjusting the Column Width Inserting Graphics into the Table Inserting an Image About Europe Inserting an Image About the USA Inserting an Image About South America Inserting Text into the Table Entering the Prices Adjusting the Text in the Table Adding a Page Background Adding a Table Background Further Table Adjustments DreamWeaver Assignment C-2 Guided Computer Tutorials, 2009

3 Contents Chapter 4: Creating Links Linking Text Creating the Link Table Formatting the Table Creating the Hyperlinks Testing the Links Adjusting the Hyperlink Text Colour Linking Images Inserting the Images Linking the Images Providing Links in the Packages Page DreamWeaver Assignment Chapter 5: Anchor Points and Hotspots Links Within a Page Loading the Prepared Page Setting the Anchor Points Setting the Anchor Links Testing the Anchor Links Updating the Button Links Hotspots Loading the Map Files Setting the Hotspot Links Testing the Links Updating the Button Links Adding the Buttons to the Tours Page DreamWeaver Assignment Guided Computer Tutorials 2009 C-3

4 Chapter 6: Site Assets and Library Items The Assets Panel Using the Assets Panel Loading the Prepared Page Applying Assets Adding a Background Image Inserting the World Image Using Library Items Creating an Update Message Using the Library Item Editing the Library Item Creating a Navigation Library Item Placing the Links Table in the Library Items Inserting the Library Item in Other Pages Adding the Links Table to the Airlines Page Updating the Navigation Bar Looking at the Library Items DreamWeaver Assignment Chapter 7: Absolute Position Elements Creating the Specials Page Creating a Title Element Creating Some Image Tags The First Image Tag The Second Image Tag The Third Image Tag Moving AP Element Tags Placing a Table in an AP Element Tag Adding a Background to the Page Adjusting the AP Element Stacking Order Converting AP Elements to Tables DreamWeaver Assignment C-4 Guided Computer Tutorials, 2009

5 Contents Chapter 8: Using Templates Creating the Template Creating the Table Merging Cells Saving the Page as a Template Completing the Template Adding a Logo Adding Navigation Buttons Adjusting the Cell Heights Setting Editable Regions in the Template Using the Template Applying the Template Inserting the Content Adding Links Creating the Packages Page Creating the Airlines Page Linking the Buttons Checking the Template Pages Advantages of Templates Setting the Background Adjusting the Content Region DreamWeaver Assignment Chapter 9: Creating Forms Starting the Page Inserting the Form Tag Entering the Text of the Form Adding the Sub-Heading Entering a Message Adding a Horizontal Rule Entering the Customer Details Inserting the Table Entering the Sub-headings Inserting Text Fields Inserting a Pop-Up Menu Field Shading the Sub-Heading Previewing the Form Guided Computer Tutorials 2009 C-5

6 Entering the Travel Packages Inserting the Table Entering the Sub-Headings Inserting the Destination Fields Entering the From Fields The Inserting the Duration Fields Splitting Cells Adjusting the Field Headings The Reply Section Inserting the Table Inserting Check Box Fields The Submit and Reset Buttons Formatting the Replay Heading Naming the Form Adding the Orders Page to the Template DreamWeaver Assignment Chapter 10: Navigation Bars Setting the Navigation Bar Files Adjusting the Template Adjusting the Index Page Creating the Sydney Page Creating the London Page Creating the Cape Town Page Inserting the Navigation Bar Inserting the New York Buttons Setting the Navigation Bar Direction Inserting the Sydney Buttons Inserting the London Buttons Inserting the Cape Town Buttons Updating the Template Adjusting the Navigation Bar Editing Navigation Bar Elements DreamWeaver Assignment C-6 Guided Computer Tutorials, 2009

7 Contents Chapter 11: Checking and Uploading Web Files Browser Checks Other Reports The Link Checker Cloaking Cloaking the Library Folder Cloaking File Types Uploading Files Adjusting the Site Settings Uploading the Site Files Changing Some Files Synchronising Files DreamWeaver Assignment 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

8 Module 2 Contents Chapter 12: Cascading Style Sheets Cascading Style Sheets Internal Custom Styles Starting a Blank Page Creating the Main Heading Style Creating the Body Text Style Looking at the Code The CSS Styles Panel Editing Styles Looking at the Styles External CSS Styles Loading the Sample Page Creating a CSS Style Sheet Creating a Second Style Applying the Styles Adding a New Style Adjusting the Styles Saving the CSS File Looking at the Travel Tips Code Attaching Styles to Other Pages Placing Styles in Templates Opening the Template Attaching the Styles.css File to the Template Opening a New Page DreamWeaver Assignment C-8 Guided Computer Tutorials, 2009

9 Contents Chapter 13: Laying out a CSS Based Page Starting a New Site Saving the Pages Attaching the CSS File to the Index Page Setting the DIV Tags Looking at the Code Inserting the Banner DIV Tag The Navigation DIV Tag The Columns DIV Tag Inserting the Nav2 Nested DIV Tag Inserting the Content Nested DIV Tag Setting the Nav2 and Content Styles The Nav2 Style Setting the Content Style DreamWeaver Assignment Chapter 14: Adding Content to CSS Pages Inserting the Company Logo Opening the Page Inserting the Image Checking the Image Dimensions Inserting the Navigation Content Inserting the Home Button Inserting the Packages Button Inserting the Other Buttons Inserting the Nav2 Content Entering the Text Adding Some Dummy Links Inserting the Content Text Copying the Text Pasting the Text DreamWeaver Assignment Guided Computer Tutorials 2009 C-9

10 Chapter 15: Formatting CSS Pages Setting Tag Styles The Body Tag Changing Some Text Creating the H1 Style Defining Class Styles Defining ID CSS Styles The Banner DIV Tag The Navigation DIV Tag The Columns DIV Tag Formatting Link Text Editing Styles The Nav2 Region The Link Text The Content Style Changing a Style Property Saving the Page as a Template Saving as a Template Setting the Editable Region Using the Template Editing the Template Understanding the CSS files DreamWeaver Assignment Chapter 16: Using Behaviours The Behaviours Panel Popup Messages Setting up a Page Popup Dialogue Boxes Status Bar Messages Deleting a Behaviour Displaying an Enlarged Image Creating a New Page Adding the Behaviour C-10 Guided Computer Tutorials, 2009

11 Contents Validating Forms Creating the Orders Page Setting the Validation Behaviour Setting Required Fields Setting an Field Validating Numbers Effect Behaviours Browser Versions DreamWeaver Assignment Chapter 17: Editing and Importing Tools Starting the Page Editing Images Cropping an Image The Resample Tool Brightness and Contrast The Sharpen Tool Importing Microsoft Word Documents Opening the Prepared Word Document Copying the Microsoft Word Text Pasting the Text into DreamWeaver Moving the Image Adding a Word Table to the Page Copying the Table Pasting the Table into DreamWeaver Adjusting the Table DreamWeaver Assignment Guided Computer Tutorials 2009 C-11

12 Chapter 18: Inserting Media Creating a Page Inserting Smart Photoshop Objects Inserting the Object Adjusting the Image Editing Images Flash Animations Inserting the Animation Playing the Animation Resizing the Animation Flash Video Importing the Video Setting the Skin The Final Settings Previewing the Video DreamWeaver Assignment Chapter 19: Creating Menus and Tabbed Panels Popup Menus Saving the Prepared Pages Adjusting the Template Inserting the Popup Menu Adjusting the Menu Buttons Adjusting the Popup Menu Adjusting the Third Tier Menu Saving the Template Previewing the Page Formatting the Menu Tabbed Panels Inserting the Tabbed Panel The London Tab The Paris Tab Previewing the Page Adjusting the Tabbed Panels DreamWeaver Assignment C-12 Guided Computer Tutorials, 2009

13 Contents Chapter 20: Commands and Snippets Creating Commands Creating a Table Command Inserting the Table Formatting the Table Saving the Table Command Using the Table Command Clearing the History Panel Formatting Image Sizes Setting the Image Size Creating the Image Size Command Applying the Command Managing Commands Using Snippets Preset Snippets Creating Your Own Snippets Using the Snippet Adding Images to Snippets DreamWeaver Assignment 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

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC

Learning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...