Dreamweaver

Duration:30Hour


Description:

Dreamweaver CC Jumpstart

  • Starting up.
  • What is Dreamweaver?
  • Design and layout tools
  • Site management and File Transfer Protocol
  • Coding environment and text editor.
  • Who uses Dreamweaver? .
  • Dreamweaver’s workspace features
  • Live View and Live Code
  • CSS Inspection and the Enable/Disable Feature
  • Related files
  • Code Navigator

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
  • 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 .

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 Property Inspector

Creating Page Layouts with CSS

  • The CSS Box model
  • The basics of CSS margins, padding, and borders
  • Reviewing the <div> element
  • Reviewing the ID selector
  • Creating a centered container for your page.
  •  Making layouts cross-browser compatible
  • Absolute versus relative positioning
  • Positioning content with AP Divs
  • Creating a header section with the Draw AP Div
  • 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

Advanced Page Layout

  • Layout with AP divs versus layout with floats
  • Creating a floated image
  • Creating columns with HTML and CSS
  • Creating the HTML Structure with div elements
  • Setting the width and floating the columns
  • Using the clear property
  • Creating a list-based navigation bar
  • Changing column layout and size
  • Creating the appearance of equal height columns.
  • Browser compatibility

Adding Flash, Video, and Sound Content

  • Making web content interesting
  • Inserting Flash movies
  • Adding video
  • Flash Video
  • QuickTime video and Windows Media
  • Inserting sound
  • Review

Maximizing Site Design

  • Creating modular page elements
  • Introducing snippets
  • The Snippets panel
  • Creating new snippets
  • Introducing library items
  • Modifying and updating library items
  • Introducing templatesCreating 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.

Working with Code-editing Features

  • Working with code
  • Accessing code with the Quick Tag editor
  • Inserting tags with the Tag Chooser
  • Inserting and editing comments
  • 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.

Building Web Forms

  • The basics of HTML forms
  • How forms work
  • Building a contact form
  • Inserting the <form> tag
  • Setting form properties
  • Adding form elements
  • Adding text fields
  • Adding checkboxes
  • Adding radio buttons
  • Adding radio groups
  • Adding lists and menus
  • Adding a text area
  • Adding a File Upload field
  • Form processing and validation
  • Adding form validation
  • A look at the Behaviors panel
  • Setting an event or trigger
  • Validating form fields
  • Changing a form field’s behavior order
  • Verifying field contents.

Adding Interactivity with the Spry Framework

  • Introducing the Spry Widgets
  • The Spry framework for AJAX
  • What is AJAX?
  •  A look at the project
  • The Spry Menu bar
  • Customizing Spry Widgets with CSS
  • The Spry Tabbed panel
  • The Spry Accordion panel
  • The Spry Collapsible pane
  • Working with Spry Data Widgets
  • What is XML?
  •  Creating a Spry XML data set
  • Adding a Spry Data Widget: The Spry Repeat List
  • Styling and fine-tuning data widgets.

Mobile Design and Layout

  • Dreamweaver tools for mobile layout
  • Mobile website features in Dreamweaver
  • Viewing your webpage with the Muliscreen feature
  • Media Queries defined
  • Creating a Layout optimized for mobile
  • Creating styles for navigation and single-column layout
  • The basics of Fluid Grid Layout
  • Creating your mobile layout
  • Creating a tablet layout
  • Styling elements in your fluid grid layout

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

Photoshop for web.


Prerequisites:

  • HTML5 & CSS3 & JavaScript

Upcomming Courses:

  • PHP & MySQL