Course Content
Lesson 1: Dreamweaver CC Jumpstart
- What is Dreamweaver?
- Design and layout tools
- Site management and File Transfer Protocol
- Coding environment and text editor
- Mobile design and development features
- Who uses Dreamweaver?
- Dreamweaver’s workspace features
- Live View and Live Code
- CSS Inspection and the Enable/Disable Feature
- Related files
- Code Navigator
- Photoshop smart objects
- Support for Content Management Systems
- HTML5, CSS3, and PHP code hinting
- HTML and CSS Starter Pages
- Subversion
- Business Catalyst integration
- How websites work
- A simple flow chart
- Domain names and IP addresses
- Servers and web hosts
- The role of web browsers
- An introduction to HTML
- Tag structure and attributes
- The structure of an HTML document
- Placing images in HTML
- Colors in HTML
- Case sensitivity and whitespace rules
- Element hierarchy
- HTML5
- Explorations in code
- A look at the Welcome Screen
- Creating, opening, and saving documents
- Creating new documents
Lesson 2: Setting Up a New Site
- Creating a new site
- Advanced site-creation options
- Adding pages
- Saving a page to your site
- Defining page properties
- Work views
- A deeper look into the Files panel
- Viewing local files
- Selecting and editing files
Lesson 3: Adding Text and Images
- Typography and images on the Web
- Adding text
- An introduction to styles
- Previewing pages in a web browser
- Understanding hyperlinks
- Creating hyperlinks
- Relative versus absolute hyperlinks
- Linking to an e-mail address
- Creating lists
- Using the Text Insert panel
- Inserting images
- Image resolution
- Image formats
- Creating a simple gallery page
- Linking images
- Editing images
- Adjusting brightness and contrast
- Optimizing images
- Updating images
Lesson 4: Styling Your Pages with CSS
- What are Cascading Style Sheets?
- CSS replaces inefficient HTML styling
- The benefits of CSS styling
- How do you create CSS rules in Dreamweaver?
- Understanding Style Sheets
- Understanding why they’re called Cascading
- Creating and modifying styles
- Creating a class style with the CSS Designer panel
- Creating and modifying styles
- Advanced text formatting with CSS
- Fine-tuning page appearance with contextual and pseudo-class selectors
- Div tags and CSS IDs
- Internal versus external style sheets
- Attaching an external style sheet to your page
- Modifying attached style sheets
- Creating a new css file (external style sheet)
Lesson 5: Creating Page Layouts with CSS
- The CSS Box model
- The basics of CSS margins, padding, and borders
- Reviewing the element
- Reviewing the ID selector
- Creating a centered container for your page
- Absolute versus relative positioning
- Creating a header using a relative positioned div
- Positioning content with absolute-positioned divs
- Adding an introduction section to your page
- Adding images to your layout
- Photoshop integration
- Adding Main and Sidebar content areas
- Adding additional content and styles
- Setting margins and borders
- Overriding default margins in CSS
- Adding borders to elements
- Future proofing your layout
- The pros and cons of Absolutely Positioned CSS layouts
Lesson 6: Advanced Page Layout
- Layout with absolute-position divs versus layout with floats
- Creating a floated image
- Creating columns with HTML and CSS
- Creating the structure with divs and HTML5 semantic elements
- Setting the width and floating the columns
- Using the property
- Creating a list-based navigation bar
- Changing column layout and size
- Creating the appearance of equal height columns
- Applying finishing touches
- Creating more sophisticated layouts
- Dreamweaver Fluid Grid Layout
Lesson 7: CSS3 Transitions and Styles
- Understanding the role of CSS3
- Adding a CSS Transition
- Modifying a CSS Transition
- Adding CSS Transitions to a navigation menu
- Adding a CSS Gradient
- Applying a CSS Gradient to the page background
- Creating rounded borders
Lesson 8: Using Web Fonts
- The basics of web fonts
- Web Fonts in Dreamweaver CC
- Using Adobe Edge Web Fonts
- Creating a custom font stack using web fonts
- Styling your content with Adobe Edge Web Fonts
- Adding local web fonts with
- Styling your heading with a local web font
Lesson 9: Working with Tables
- Using tables in web design
- Importing table data
- Selecting table elements
- Modifying table size
- Modifying table structure
- Creating a table
- Formatting and styling tables in HTML
- Formatting and styling tables with CSS
- Advanced CSS styling of tables
- Controlling cell alignment, padding, and borders with CSS
- Creating alternate row styling with CSS
- Reusing CSS for other tables
- Data sorting tables
Lesson 10: Fine-Tuning Your Workflow
- Customizing panels and panel groups
- Using the Favorites tab on the Insert bar
- Resizing the document window
- Using guides
- Using grids
- The tag selector
- Tiling documents
Lesson 11: Adding Video, Audio and Interactivity
- Making web content interesting
- Adding video
- HTML5 video
- Flash video
- QuickTime and Windows Media
- Inserting Flash animations
- Inserting Edge Animate animations
- Inserting sound with the HTML5 audio element
Lesson 12: Maximizing Site Design
- Creating modular page elements
- Introducing snippets
- The Snippets panel
- Creating new snippets
- Introducing library items
- Modifying and updating library items
- Introducing templates
- Creating a new template
- Working with editable regions
- Creating new pages from templates
- Modifying templates
- Repeating regions
- Putting repeating regions into action
- Detach from Template command
Lesson 13: Working with Code-editing Features
- Working with code
- Accessing code with the Quick Tag editor
- Using HTML5 Code-hinting
- Working in the Code view
- Modifying the Code view workspace
- The Coding toolbar
- Collapsing and expanding tags and code blocks
- Validating your code
- Highlighting and correcting invalid code
- Running a report
- Formatting code
- Indenting
Lesson 14: Building HTML5 Web Forms
- The basics of HTML5 forms
- How forms work
- Building a contact form
- Inserting the tag
- Setting form properties
- Adding form elements
- Adding text fields
- Adding a new HTML5 text field
- Adding check boxes
- Adding radio buttons
- Adding radio groups
- Adding lists and menus
- Adding a Text Area
- Adding a File Upload field
- Creating Submit and Reset buttons
- Styling forms with CSS
- Attaching external styles
- Setting a background color
- Styling form elements
- Form processing and validation
- HTML5 validation
- The Validate Form behavior
- A look at the Behaviors panel
- Setting an event or trigger
- Validating form fields
- Changing a form field’s behavior order
- Verifying field contents
Lesson 15: Adding Interactivity with the jQuery UI Library
- Introducing the jQuery UI Widgets
- The jQuery UI Library
- A look at the project
- The jQuery Tabbed panel
- Styling jQuery UI Widgets with CSS
- The jQuery UI Accordion panel
- Create a single collapsible panel
Lesson 16: Responsive Design and Layout for Mobile Devices
- The rise of the mobile web
- Dreamweaver tools for mobile layout
- Mobile website features in Dreamweaver
- Previewing your web page using window sizes
- Media Queries defined
- Creating media queries
- Creating a layout optimized for mobile
- Creating styles for navigation and a single-column layout
- The basics of Fluid Grid Layout
- Creating your mobile layout
- Creating a tablet layout
- Creating a three-column fluid layout for the desktop
- Styling elements in your fluid grid layout
Lesson 17: Managing your Website: Reports, Optimization, and Maintenance
- Working with the Files panel
- Creating a remote connection
- Viewing files on a remote web server
- Transferring files to and from a remote server with Get and Put
- Using Check In/Check Out and Design Notes
- Check In and Check Out
- Checking files in and out
- Using Design Notes
- Sharing Design Notes
- Displaying Design Notes in the Files panel
- Testing site integrity
- Checking links sitewide
- Generating site reports
- Understanding report results
- Addressing a listed item
- Optimizing pages for launch
- Search engine visibility and Search Engine Optimization
- Titling your documents with the tag
- Adding meta keywords and descriptions
- Launching your site
- Site launch checklist
- Uploading your site
- Getting help
- Suggested next steps
- Website design resources
Lesson 18: Dreamweaver CC New Features
- What’s new in Dreamweaver CC?
- CSS Designer panel
- CSS3 transitions and styles
- jQuery UI widgets
- Additional New Features in Dreamweaver CC
- Adobe Edge Web Fonts
- Faster HTML5 elements insertion
- Streamlined HTML5 audio and video
- Edge Animate composition support
- Additional features