Learn your way! Get started

Dreamweaver CS6, Part 4: Float, Nav Bar and CSS3

with expert John Wiley & Sons

Watch trailer

Course at a glance

Release date 4/1/2015
Level Beginner
Runtime 1h 22m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams N/A

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Dreamweaver CC is packed with the tools you need to create dynamic and interactive sites online. In this eight part learning series, you can learn the ins and outs of maximizing Dreamweaver CC – from navigating the interface to working with HTML, CSS, jQuery, and more. Get to know HTML and how it can be used to set up your own customized website. Add text and images, create page layouts, work with web fonts and tables, and fine tune your workflow for maximum efficiency Gain expert knowledge on site design, including designing for mobile devices and utilizing the jQuery UI library Incorporate multimedia like video, audio, interactive content, HTML forms, and other tools into your web development projects.


This course assumes some familiarity with Adobe Dreamweaver CS6. This course is part of an eight part learning series; Dreamweaver CS6: Intro, Sites and Properties; Dreamweaver CS6: Format, Images and Styles; Dreamweaver CS6: Container and AP Divs; Dreamweaver CS6: Float, Nav Bar and CSS3; Dreamweaver CS6: Tables, Cells and Workflow; Dreamweaver CS6: Flash A/V, Library and Code; Dreamweaver CS6: Web Forms and Spry Framework; and Dreamweaver CS6: Mobile, Grid & Managing. Please be sure to view the courses in order if you are new to the material.

Meet the expert

Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.

Course outline

Float, Nav Bar and CSS3

Working with Float Property (23:01)
  • Introduction (00:10)
  • The Float Property (03:28)
  • Float Experiments (04:58)
  • Floated Columns (01:52)
  • Creating the Elements (04:25)
  • Floating the Elements (03:19)
  • Adding Content & Clear Footer (04:37)
  • Summary (00:10)
Navigation Bar & Layout Tuning (27:06)
  • Introduction (00:10)
  • List-based Navigation Bar (04:42)
  • Cleaning up the Links (04:09)
  • Style the Hyperlink Colors (02:26)
  • Fine Tuning Float Layout (03:44)
  • Text Position and Padding (04:04)
  • Creating Equal Columns (03:47)
  • Magic Column Extension (03:51)
  • Summary (00:10)
Using CSS3 Transitions (18:07)
  • Introduction (00:10)
  • Caniuse a CSS Transition (03:17)
  • Creating a CSS Transition (03:57)
  • Modifying a CSS Transition (03:57)
  • CSS3 Transitions & Nav Menu (01:39)
  • Adding Transitions to Nav Menu (04:55)
  • Summary (00:10)
Using CSS3 Web Fonts (13:52)
  • Introduction (00:10)
  • Standard Web Fonts (04:02)
  • Adding Web Fonts (04:11)
  • Styling Text with CSS3 Fonts (02:47)
  • Test Your Web Fonts (02:30)
  • Summary (00:10)