Home / Articles / Adobe Dreamweaver / Creating a Page Layout with Adobe Dreamweaver CS6

Creating a Page Layout with Adobe Dreamweaver CS6

Article Description

In this lesson from Adobe Dreamweaver CS6 Classroom in a Book, you’ll learn the basics of webpage design, how to create design thumbnails and wireframes, insert and format new components into a predefined CSS layout, use Code Navigator to identify CSS formatting, and check for browser compatibility.

From the book

Adobe Dreamweaver CS6 Classroom in a Book

Adobe Dreamweaver CS6 Classroom in a Book

$43.99 (Save 20%)

Previewing your completed file

Previewing your completed file

To understand the layout you will work on in this lesson, preview the completed page in Dreamweaver.

  1. In Dreamweaver CS6, press Shift-Ctrl-F/Shift-Cmd-F to open the Files panel, and select DW-CS6 from the site list.
  2. In the Files panel, expand the Lesson04 folder.
  3. Double-click layout_finished.html to open it.
  4. This page represents the completed layout you will create in this lesson. It is based on the wireframe drawings made earlier in this lesson and uses one of the new HTML5 CSS layouts available in Dreamweaver. Take a few moments to familiarize yourself with the design and components on the page. Can you determine what makes this layout different from existing HTML 4-based designs? You will learn the differences as you work through this lesson.

  5. Choose File > Close.
6. Modifying an existing CSS layout | Next Section Previous Section