Dreamweaver Fundamentals
This course teaches beginners, step-by-step, how to create, build and maintain professional looking websites. The course is hands-on with lots of real world projects. No prior experience of Dreamweaver is required.
Detailed Course Outline
Detailed Course Outline Hide outline
Customizing Your Workspace
- Touring the workspace
- Switching and splitting views
- Design view
- Code view
- Split view
- Live view
- Live Code
- Inspect mode
- Working with panels
- Minimizing
- Selecting a workspace layout
- Working with Extract
- Adjusting toolbars
- Personalizing preferences
- Creating custom keyboard shortcuts
- Using the Property inspector
- Using the HTML tab
- Using the CSS tab
- Image properties
- Table properties
- Related files interface
- Using tag selectors
- Using the CSS Designer
- Element Quick View
- Element View
HTML Basics
- What is HTML?
- Writing your own HTML code
- Understanding HTML syntax
- Inserting HTML code
- Formatting text with HTML
- Applying inline formatting
- Adding structure
- Writing HTML in Dreamweaver
- Frequently used HTML 4 tags
- Introducing HTML5
- What’s new in HTML5
- HTML5 tags
- Semantic web design
CSS Basics
- What is CSS?
- HTML vs. CSS formatting
- HTML defaults
- Browser antics
- CSS box model
- Previewing the completed file
- Formatting text
- Cascade theory
- Inheritance theory
- Descendant theory
- Specificity theory
- Code Navigator
- CSS Designer
- Multiples, classes, and ids
- Applying formatting to multiple elements
- CSS shorthand
- Creating class attributes
- Creating id attributes
- Formatting objects
- Width
- Borders and backgrounds
- Positioning
- Height
- Margins and padding
- Normalization
- Final touches
- CSS3 overview
Web Design Basics
- Developing a new website
- What is the purpose of the website?
- Who is the audience?
- How do they get here?
- Working with thumbnails and wireframes
- Creating thumbnails
- Creating a page design
- Creating wireframes
Creating a Page Layout
- Using the Welcome Screen
- Previewing your completed file
- Working with predefined layouts
- Working with the CSS Designer
- Working with type
- Using Edge Web Fonts
- Building font stacks with web fonts
- Specifying font size
- Creating a CSS background
- Adding a background image
- Adding other background effects
- Creating custom CSS styling
- Modifying existing content
- Adding new items to a navigation menu
- Styling a navigational menu
- Building semantic content
- Positioning elements with Element Quick View
- Inserting placeholder text
- Inserting HTML entities
- Validating HTML code
Designing for Mobile Devices
- Responsive design
- Media type property
- Media queries
- Media query syntax
- Previewing your completed file
- Working with media queries
- Identifying media queries
- Targeting media queries
- Targeting selectors
- Troubleshooting styles across media queries
- Using Element Quick View
- Adding rules to a media query
- Edge Inspect
Working with Templates
- Previewing completed files
- Moving embedded CSS to an external file
- Creating a template from an existing layout
- Inserting editable regions
- Inserting metadata
- Producing child pages
- Creating a new page
- Adding content to child pages
- Updating a template
Working with Text, Lists, and Tables
- Previewing the completed file
- Creating and styling text
- Importing text
- Creating semantic structures
- Creating headings
- Adding other HTML structures
- Creating lists
- Creating indented text
- Making it responsive
- Creating and styling tables
- Creating tables from scratch
- Copying and pasting tables
- Styling tables with CSS
- Styling table cells
- Controlling table display
- Inserting tables from other sources
- Adjusting vertical alignment
- Adding and formatting caption elements
- Making tables responsive
- Spell checking web pages
- Finding and replacing text
Working with Images
- Web image basics
- Vector graphics
- Raster graphics
- Raster image file formats
- Previewing the completed file
- Inserting an image
- Adjusting image positions with CSS classes
- Working with the Insert panel
- Using the Insert menu
- Inserting non-web file types
- Copying and pasting images from Photoshop
- Adapting images to smaller screens
- Inserting images by drag and drop
- Making images responsive
- Optimizing images with the Property inspector
Working with Navigation
- Hyperlink basics
- Internal and external hyperlinks
- Relative vs. absolute hyperlinks
- Previewing the completed file
- Creating internal hyperlinks
- Creating relative links in Design view
- Creating a home link
- Updating links in child pages
- Creating an external link
- Creating an absolute link in Live view
- Setting up email links
- Creating an image-based link
- Creating image-based links using Element View
- Creating text links using Element View
- Targeting page elements
- Creating internal targeted links
- Creating a link destination using an id
- Creating a destination link in Element View
- Targeting id-based link destinations
- Checking your page
Adding Interactivity
- Learning about Dreamweaver behaviors
- Previewing the completed file
- Working with Dreamweaver behaviors
- Applying a behavior
- Applying a Swap Image Restore behavior
- Removing applied behaviors
- Adding behaviors to hyperlinks
- Making it responsive
- Working with jQuery Accordion widgets
- Inserting a jQuery Accordion widget
- Customizing a jQuery Accordion
- Editing dynamic jQuery styling
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
- Choosing HTML5 video options
Publishing to the Web
- Defining a remote site
- Setting up a remote FTP site
- Establishing a remote site on a local or network web server
- Cloaking folders and files
- Wrapping things up
- Putting your site online
- Synchronizing local and remote sites
"Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class."
