CSS-based website navigation
Learn how to extract design information and assets from Photoshop compositions directly into your Dreamweaver projects. (Try it, 10 min)
Learn how it works
Dreamweaver CC tutorials from novice to expert
Get started, get the essentials, get inspired.
Get started
New to Dreamweaver CC? Start here.
1. Overview — Take a one-minute tour.
2. Essentials for beginners — Short tutorials to get you going.
3. Ready to use it? — This hands-on project is the best way to learn.
More step-by-step projects
Learn essentials
Choose a tutorial to start learning.
Understand web design
Set up your project
Structure web pages
Lay out web pages
Style text content
Add images and links
Create tables and forms
Test your website
Publish your site
Practice project: Create your first website
-
Project overview and site setup -
Add and format text content -
Add structural elements and links -
Change the font and create basic styles -
Adjust space around elements and make images responsive -
Style links and the navigation menu -
Complete the second page and style the site for tablet and desktop -
Publish your website
Design responsive websites
Key techniques
Choose a tutorial to start learning.
Web pages from PSD
CSS samples
Web extensions
-
Use Adobe Stock with Creative Cloud Libraries -
What are Creative Cloud Libraries? -
Creative Cloud Libraries in Dreamweaver -
Creative Cloud Market -
Introduction to Javascript -
Create a portfolio gallery -
CSS-based website navigation -
Use animations from Animate CC in Dreamweaver or Adobe Muse -
Create a tabbed interface -
Add HTML5 video in Dreamweaver -
How to use Edge Animate content in your site built with Dreamweaver -
Use jQuery UI widgets in Dreamweaver -
Use jQuery effects in Dreamweaver -
Work with jQuery UI widgets to create a page -
Use Adobe Add-Ons to find plug-ins and extensions -
How to author HTML, CSS, jQuery, and PHP 5.4
Edge Inspect
New features
Choose a tutorial to start learning.
February 2016
November 2015
June 2015
October 2014
-
MAX Day 1 keynote: Creativity on the Cutting Edge -
MAX Day 2 keynote: Community Inspires Creativity -
Extract overview -
Get web design info from PSDs -
From PSD to HTML & CSS -
Build from starter templates -
How to design, edit, and preview web pages with new Live View features -
Personalize your code editor -
New features summary
June 2014
-
Navigate your HTML -
How to visualize and visually modify your HTML structure -
How to design, edit, and preview web pages with new Live View features -
How to style a web page with CSS Designer -
How to author HTML, CSS, jQuery, and PHP 5.4 -
How to use Edge Animate content in your site built with Dreamweaver -
Add an animated banner -
Connect to a remote server -
New features summary
Did you find what you were looking for?
Tell us what you think
