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%)

Defining a Dreamweaver site

Defining a Dreamweaver site

From this point forward, the lessons in this book function within a Dreamweaver site. You will create webpages from scratch and use existing files and resources that are stored on your hard drive, which combined make up what’s called your local site. When you are ready to upload your site to the Internet (see Lesson 16, “Publishing to the Web”), you publish your completed files to a web host server, which then becomes your remote site. The folder structures and files of the local and remote sites are usually mirrors of each other.

First, let’s set up your local site:

  1. Launch Adobe Dreamweaver CS6, if necessary.
  2. Choose Site > New Site. The Site Setup dialog box appears.
  3. If you’ve used any previous version of Dreamweaver, you will notice that the Site Setup dialog box has been slightly redesigned. Along with the options for creating a standard Dreamweaver site, the dialog offers the ability to create a site based on the services offered by Adobe Business Catalyst. Business Catalyst is an online, hosted application that allows you to build and manage rich, dynamic web-based businesses. To learn more about the capabilities of Business Catalyst, check out http://www.BusinessCatalyst.com.

    To create a standard website in Dreamweaver CS6, you need only name it and select the local site folder. Site names typically relate to a specific project or client and will appear in the Files panel. This name is intended for your own purposes, so there are no limitations to the name you can choose. It’s a good idea to use a name that clearly describes the purpose of the website.

  4. In the Site Name field, type DW-CS6.
  5. Next to the Local Site Folder field, click the folder () icon. When the Choose Root Folder dialog box opens, navigate to the DW-CIB folder containing the lesson files you copied from the Adobe Dreamweaver CS6 Classroom in a Book CD and click Select/Choose.
  6. You could click Save at this time and begin working on your new website, but we’ll add one more piece of handy information.

  7. Click the arrow () next to the Advanced Settings category to reveal the tabs listed there. Select the Local Info category.
  8. Although it’s not required, a good policy for site management is to store different file types in separate folders. For example, many websites provide individual folders for images, PDFs, video, and so on. Dreamweaver assists in this endeavor by including an option for a Default Images folder. Later, as you insert images from other places on your computer, Dreamweaver will use this setting to automatically move the images into the site structure.

  9. Next to the Default Images Folder field, click the folder () icon. When the dialog box opens, navigate to the DW-CS6/images folder containing the files you copied from the Adobe Dreamweaver CS6 Classroom in a Book CD and click Select/Choose.
  10. You’ve entered all the information required to begin your new site. In subsequent lessons, you’ll add more information to enable you to upload files to your remote site and test dynamic webpages.

  11. In the Site Setup dialog box, click Save.
  12. The site name DW-CS6 now appears in the site list pop-up menu in the Files panel.

Setting up a site is a crucial first step in beginning any project in Dreamweaver. Knowing where the site root folder is located helps Dreamweaver determine link pathways and enables many site-wide options, such as Find and Replace.

4. Using the Welcome screen | Next Section Previous Section