Dreamweaver Fundamentals: An Introduction to Dreamweaver CC

This course is for people new to web design and development and want to use Dreamweaver CC to build intuitive, attractive and accessible websites.

• Practical working knowledge of Mac OS X or Windows skills.
• Students should have a working knowledge of HTML, CSS, or JavaScript. To learn these visit FMC's Web Programming classes.

 

Lesson 1: Customizing Your Workspace

• Touring the workspace
• Switching and splitting views
• Working with panels
• Selecting a workspace layout
• Adjusting toolbars
• Personalizing preferences
• Creating custom keyboard shortcuts
• Using the Property inspector
• Using the CSS Designer
• Explore, experiment, learn

Lesson 2: HTML Basics

• What is HTML?
• Where did HTML begin?
• Writing your own HTML code
• Frequently used HTML 4 codes
• Introducing HTML5

Lesson 3: CSS Basics

• What is CSS?
• HTML vs. CSS formatting
• HTML defaults
• CSS box model
• Multiples, classes, and IDs, oh my!
• Formatting text
• Formatting objects
• CSS3 overview and support

Lesson 4: Creating a Page Layout

• Web design basics
• Working with thumbnails and wireframes
• Defining a Dreamweaver site
• Using the Welcome screen
• Previewing your completed file
• Modifying an existing CSS layout
• Adding a background image to the header
• Inserting new components
• Inserting a navigation component
• Changing element alignment
• Modifying the page width and background color
• Modifying existing content and formatting
• Inserting an image placeholder
• Inserting placeholder text
• Modifying the footer
• Validating webpages

Lesson 5: Working with Cascading Style Sheets

• Previewing the completed file
• Working with the CSS Designer
• Working with type
• Working with background graphics
• Working with classes, IDs, and descendant selectors
• Creating an interactive menu
• Creating faux columns
• Moving rules to an external style sheet
• Creating style sheets for other media

Lesson 6: Working with Templates

• Previewing completed files
• Creating a template from an existing layout
• Inserting editable regions
• Producing child pages
• Updating a template
• Using library items
• Using server-side includes

Lesson 7: Working with Text, Lists, and Tables

• Previewing the completed file
• Creating and styling text
• Creating and styling tables
• Spell checking webpages
• Finding and replacing text

Lesson 8: Working with Images

• Reviewing web image basics
• Previewing the completed file
• Inserting an image
• Adjusting image positions with CSS classes
• Working with the Insert panel
• Using Adobe Bridge to insert images
• Inserting non-web file types
• Working with Photoshop Smart Objects
• Copying and pasting images from Photoshop and Fireworks
• Inserting images by drag and drop
• Optimizing images with the Property inspector

Lesson 9: Working with Navigation

• Hyperlink basics
• Previewing the completed file
• Creating internal hyperlinks
• Creating an image-based link
• Creating an external link
• Setting up email links
• Targeting page elements
• Checking your page

Lesson 10: Adding Interactivity

• Learning about Dreamweaver behaviors
• Previewing the completed file
• Working with Dreamweaver behaviors
• Working with jQuery Accordion widgets

Lesson 11: Working with Web Animation and Video

• Understanding web animation and video
• Previewing the completed file
• Adding web animation to a page
• Adding web video to a page

Lesson 12: Working with Forms

• Previewing the completed file
• Learning about forms
• Adding a form to a page
• Inserting text form elements
• Inserting checkboxes
• Creating radio buttons
• Incorporating text areas
• Working with lists
• Adding a Submit button
• Specifying a form action
• Emailing form data
• Styling forms
• More form information

Lesson 13: Publishing to the Web

• Defining a remote site
• Cloaking folders and files
• Wrapping things up
• Putting your site online
• Synchronizing local and remote sites

Lesson 14: Designing for Mobile Devices

• Previewing your completed file
• Designing for mobile devices
• Creating a media query for smart phones
• Adding rules to a media query
• Adapting CSS navigation to mobile environments
• Styling the main content
• Testing a media query
• Responsive design
• Creating style sheets for tablets
• Edge Inspect
• More information

Lesson 15: Working with Code (Optional)

• Code tools overview
• Selecting code
• Collapsing code
• Expanding code
• Adding new code
• Identifying CSS styling
• Working with Live Code
• Using Inspect mode
• Working in related files
• Accessing Split Code view
• Commenting your code