Accessibility

Table of Contents

  1. Introduction
  2. Examine the design comp
  3. Create and save a new page
  4. Insert DIV tags
  5. Create a new style sheet
  6. Attach the new style sheet
  7. Apply rules to create the layout (Part 1)
  8. Apply rules to create the layout (Part 2)

Creating your first website – Part 2: Creating the page layout

Examine the design comp

Typically, you don't begin building a website by opening Dreamweaver and laying out pages. The first steps to creating a website begin on a piece of paper or in a graphics-editing application such as Adobe Fireworks or Adobe Photoshop. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website to show it to the client and make sure that the initial ideas for the site meet with their client's approval.

A comp consists of any number of page elements that the client has requested for a website. For example, the client might say, "I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips." Based on that discussion, the designer begins planning the layout of the site and creates sketches of sample pages that fulfill the client's requirements.

This tutorial provides you with the completed and approved comp for Check Magazine, a fictional publication that is in need of a website. As the web designer, your job is to transform the comp into a working web page (most likely with the help of other graphic designers). Figure 1 shows a comp of the Check Magazine home page layout.

Figure 1. A comp of the Check Magazine home page layout

You'll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. Note also that the text is lorem ipsum text (Latin placeholder text) and that the headings in the bottom columns are not final (two of them are identical). Even though the page content remains undecided, you can still use Dreamweaver to lay out this design.

You can also open the original comp file if you want to see it on the computer screen. You can find the comp, check_comp.gif, in the images folder of the check_magazine folder that you copied to your hard drive in Part 1 of this tutorial series, Setting up your site and project files. You might even want to print the comp so that you can have it in front of you as you build your page.

Page 2 of 8
Previous Page
Next Page