Adobe dreamweaver

Adobe Dreamweaver Essentials

Duration: 24 hours

Teaching Methodolody: Hands on

OVERVIEW

Dreamweaver CC is a development tool for creating, publishing, and managing websites and mobile content. In this course, students will learn how to:

  • Write and correct HTML codes
  • Use CSS styles
  • Create page layouts and framework
  • Design for mobile devices
  • Work with text, lists, tables, and images
  • Work with navigation and add interactivity
  • Put sites online

AUDIENCE

Anyone who is interested in designing websites.

PREREQUISITES

Adobe Photoshop is a must. A good knowledge with Adobe Illustrator is a plus.

dreamweaver 01
dreamweaver 02
dreamweaver 03
dreamweaver 04

COURSE CONTENTS

00 - GETTING STARTED

  • Prerequisites
  • Installing the program
  • On first launch
  • Choosing the program color scheme
  • Setting up the workspace
  • Defining a Dreamweaver site

01 - CUSTOMIZING YOUR WORKSPACE

  • Touring the workspace
  • Using the Start Screen
  • Exploring New Feature guides
  • Working with toolbars
  • Switching and splitting views
  • Selecting a workspace layout
  • Working with panels
  • Personalizing Dreamweaver
  • Working with Extract
  • Creating custom keyboard shortcuts
  • Using the Property Inspector
  • Using the Related file interface
  • Using tag selectors
  • Using the CSS Designer
  • Using the Visual Media Query interface
  • Using the DOM Viewer
  • Using the heads-up displays
  • Exploring, experimenting, and learning

02 - HTML BASICS

  • What is HTML?
  • Where dos HTML begin?
  • Frequently used HTML elements
  • What's new in HTML 5

03 - CSS BASICS

  • What is CSS?
  • HTML vs. CSS formatting
  • HTML defaults
  • CSS box model
  • Applying CSS styling
  • Multiple, classes, and ids

04 - WEB DESIGN BASICS

  • Developing a new website
  • Scenario
  • Working with thumbnails and wireframes

05 - CREATING A PAGE LAYOUT

  • Evaluating page design options
  • Working with predfined layouts

06 - WORKING WITH A WEB FRAMEWORK

  • Creating a navigating menu
  • Creating header content
  • Building semantic content
  • Managing Bootstrap component width
  • Inserting HTML entities
  • Creating global type styles

07 - DESIGNING FOR MOBILE DEVICES

  • Responsive design
  • Adapting the site to different screen sizes
  • Working with media queries
  • More information on media queries

08 - WORKING WITH TEMPLATES

  • Creating a template from an existing layout
  • Inserting editable regions
  • Inserting metadata
  • Producing child pages

09 - WORKING WITH TEXT, LISTS, AND TABLES

  • Previewing the completed file
  • Creating and styling text
  • Creating lists
  • Creating and styling tables
  • Spell-checking webpages
  • Finding and replacing text
  • Self-paced exercise

10 - WORKING WITH IMAGES

  • Web image basics
  • Previewing the completed file
  • Inserting an image
  • Adjusting image positions with CSS classes
  • Working with the Insert panel
  • Using the Insert menu
  • Inserting nonweb file types
  • Working with Photoshop Smart Objects
  • Inserting images by drag and drop
  • Optimizing images with the Property Inspector

11 - Working with Navigation

  • Hyperlink basics
  • Previewing the completed file
  • Creating an external link
  • Setting up email links
  • Creating an image-based link
  • Targeting page elements
  • Checking your page
  • Adding destination links to the same page

12 - ADDING INTERACTIVITY

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

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

14 - WORKING WITH CODE

  • Creating HTML code
  • Working with multicolor support
  • Commenting your code
  • Working with CSS prepocessors
  • Selecing code
  • Collapsing code
  • Expanding code
  • Previewing assets in Code view