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

Size: px

Start display at page:

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

Dwight Goodman
5 years ago
Views:

1 Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations Types of Graphics Backgrounds and Text Planning the Navigation The DreamWeaver Screen Workspaces The Insert Panel The Document Window The Document Toolbar The Properties Inspector The Status Bar The DOM panel The Panel Group Creating a Site Creating a Root Folder Entering the Site Settings Adding a Page to the Site Page Titles Creating a Styles Page User Interface DreamWeaver Assignment Guided Computer Tutorials, 2017 C-1

2 Chapter 2: Entering Text and Graphics Setting up the Home Page Entering the Text Spell Checking the Text Formatting the Text The Main Heading Saving the Heading Styles The Body Text Saving the Body Text Style Applying the Body Text Style Inserting an Image Selecting the Image Creating an Images Folder Adjusting the Size of an Image Adding a Background Adding a Background Colour Using an Image as a Background Adding a Horizontal Rule Viewing the Page in a Browser Live View Device Views The Code Navigator Icon DreamWeaver Assignment C-2 Guided Computer Tutorials, 2017

3 Contents Chapter 3: Using Tables Creating a New Page Entering the Heading 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 European Tours Text Formatting the Text Creating the Table Text CSS Styles Entering the Rest of the Table Text Adjusting the Text in the Table Adding a Page Background Adding a Table Background Further Table Adjustments DreamWeaver Assignment 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 Turning off the Table Border Providing Links in the Packages Page DreamWeaver Assignment Guided Computer Tutorials 2017 C-3

4 Chapter 5: Links Within a Page and Hotspots Links Within a Page Loading the Prepared Page Setting the ID Links Setting the Links Testing the 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 Chapter 6: Site Assets and Library Items The Assets Panel Using the Assets Panel Loading the Prepared Page Looking at the Colour 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 C-4 Guided Computer Tutorials, 2017

5 Contents Chapter 7: Using Templates Creating a Blank Document 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 Guided Computer Tutorials 2017 C-5

6 Chapter 8: Creating Forms Starting the Page Inserting the Form Tag Entering the Text of the Form Adding the Sub-Heading Entering a Message Adding Horizontal Rules Entering the Customer Details Inserting the Table Entering the Sub-headings Inserting Text Fields Inserting a Pop-Up Menu Field Previewing the Form Entering the Travel Packages Inserting the Table Entering the Sub-Headings Inserting the Destination Fields Entering the From Fields The Inserting the Duration Fields The Reply Section Inserting the Table Entering the Text Inserting Check Box Fields The Submit and Reset Buttons Naming the Form Adding the Orders Page to the Template DreamWeaver Assignment C-6 Guided Computer Tutorials, 2017

7 Contents Chapter 9: Rollover Images Creating the Office Files Adjusting the Template Adjusting the Index Page Creating the Sydney Page Creating the London Page Creating the Cape Town Page Inserting the Rollover Buttons The New York Button Inserting the Sydney Button Inserting the London Button Inserting the Cape Town Button Updating the Template Previewing the Rollover buttons DreamWeaver Assignment Chapter 10: Cascading Style Sheets Internal Custom Styles Starting a Blank Page Creating the Main Heading Style Applying the Style to Text Creating the Paragraph Text Style Looking at the Code The CSS Designer Panel Looking at the Styles External CSS Styles Loading the Sample Page Creating a CSS Style Sheet Creating the Styles 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 Looking at the Template Styles Opening the Template Looking at the Styles.css File DreamWeaver Assignment Guided Computer Tutorials 2017 C-7

8 Chapter 11: Uploading Web Files Cloaking Cloaking the Images 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 C-8 Guided Computer Tutorials, 2017

9 Contents Module 2 Contents Chapter 12: Sample CSS Page Layouts Opening the Sample Page Selecting the Page Layout Looking at the Page Layout Looking at the CSS File Looking at the Page Code Adaptive and Responsive Web Sites DreamWeaver Assignment Chapter 13: Laying out a CSS Based Page Starting a New Site Saving the Pages 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 The Content Style DreamWeaver Assignment Guided Computer Tutorials 2017 C-9

10 Chapter 14: Adding Content to CSS Pages Inserting the Company Logo Opening the Page Inserting the Image 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 Chapter 15: Formatting CSS Pages Setting Tag Styles The Body Tag Changing Some Text Creating the H1 Style Defining Class CSS 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 Tag 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 The CSS Designer Panel Width DreamWeaver Assignment C-10 Guided Computer Tutorials, 2017

11 Contents Chapter 16: Centring Web Pages With a Background Creating a Container DIV Tag Opening the Page Inserting the DIV tag Moving the Closing DIV Tag Centring the Web Page Adding a Coloured Background Setting the Container Region to White Setting the Body Colour DreamWeaver Assignment Chapter 17: Responsive Web Layouts Creating the Files The Mobile Screen Settings Setting the Screen Width Looking at the CSS Code The Tablet Screen Settings Setting the Screen Width Looking at the CSS Code The Desktop Screen Settings Setting the Screen Width Looking at the CSS Code Creating the Page Layout The Banner Style For the Mobile Screen The Navigation Style For the Mobile Screen The Content Style For Mobile Screen Looking at the CSS File Adding Styles to the Other Media Queries The Tablet Styles The Desktop Styles Setting Global Styles DreamWeaver Assignment Guided Computer Tutorials 2017 C-11

12 Chapter 18: Adding Content to Responsive Layouts The Banner Content Entering the Text Formatting the Mobile Banner Style Formatting the Tablet Banner Style Formatting the Desktop Banner Style Creating the Navigation Bar Setting the Links Setting Global Link Formats Formatting the Mobile Navigation Style Formatting the Tablet Navigation Style Formatting the Desktop Navigation Style Adding Content to the Content Region Looking at the CSS Styles Hiding Content Hiding a Secondary Navigation Bar Hiding an Image Extension Activities DreamWeaver Assignment Chapter 19: Using Behaviours The Behaviours Panel Popup Messages Setting up a Page Popup Dialogue Boxes Deleting a Behaviour Displaying an Enlarged Image Creating a New Page Adding the Behaviour Validating Forms Creating the Orders Page Setting the Validation Behaviour Setting Required Fields Setting an Field Validating Numbers Effect Behaviours DreamWeaver Assignment C-12 Guided Computer Tutorials, 2017

13 Contents Chapter 20: 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 Chapter 21: Inserting Media Creating a Page Inserting Smart Photoshop Objects Inserting the Object Adjusting the Image Editing Images Inserting Videos HTML5 Videos YouTube Videos DreamWeaver Assignment Guided Computer Tutorials 2017 C-13

14 Chapter 22: Code Snippets Preset Snippets Opening the Snippets Panel Inserting Prepared Snippets Creating Your Own Snippets Entering the Snippet Content Saving the Snippet Using the Snippet Adding Images to Snippets DreamWeaver Assignment Chapter 23: Useful Tools Screen Displays Portrait Orientation Custom Page Displays Deleting Page Sizes CSS Transitions Creating a CSS Style on the Image Applying a CSS Transition Looking at the Code Editing CSS Transitions Tabbed Panels Inserting the Tabbed Panel The London Tab The Paris Tab Previewing the Page Adjusting the Tabbed Panels Starter Templates DreamWeaver Project 2 Stewarts Real Estate...P2-2 C-14 Guided Computer Tutorials, 2017

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

Learning Adobe DreamWeaver CS4. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CS4. Chapter 2: Entering Text and Graphics 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