Build a page layout from scratch with HTML5 & CSS3 in Dreamweaver CC 2016. This step by step video series will guide you through process and demonstrate some handy HTML/CSS techniques and how to navigate the Dreamweaver environment. By then end of it you’ll have completed a layout that can be re-purposed for almost any situation.

NOTE:

  • Some basic HTML/CSS knowledge is necessary to get the most out of this tutorial.
  • Some starter files are provided to get things going. Pick them up at this link: https://goo.gl/yloL5J
  • Access to Photoshop will be helpful at some point or a graphics application that allows for cropping of images.

Part 1 of 7

Part 2 of 7

In part 2 we’ll cover how to add google fonts to your page for awesome typography options. We’ll also deal with basic layout and structure of the document as we work towards more advanced page elements.

Part 3 of 7

Part 3 of the series will put the focus on the navigation bar. Using the existing unordered list, we’ll format the CSS so that it takes on the attributes of a navigation bar that matches the mockup.

Part 4 of 7

In this video, we’ll extract graphic elements and images from the mockup using photoshop’s slicing tool. We’ll use the web export function to optimize the images for quality and size and save them for our web page in the right place. We’ll then add them to the page and apply CSS styling so that they fit properly in the layout.

Part 5 of 7

In this part of the series, we’ll focus on formatting the content area by styling the text and images and creating a block of code that’s like a ┬átemplate that can be re-used whenever new content needs to be added.

Part 6 of 7

This part covers how to format content and create reusable content areas. It also looks at the ‘Clear fix’ which is used to make page content behave better when floating elements are used.

Part 7 of 7

This last part addresses the logo, general fine tuning and cosmetic enhancements to make the document look good. Congrats for making it through this, you now have a great looking web page which you can re-use for other projects with some minor tweaks!