Dreamweaver – Setting up a Site and Page LayoutsWeb Design

Section 7-2

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives

The Student will: Create a site definition

Establish local folder Add pages to the site Using the file panel to organize files

Create page layout using different methods Freestyle Dreamweaver templates Tables

Setting Up a New Site

In Dreamweaver the term site refers to the local and remote storage where the files that make up a site are stored.

To use all Dreamweaver’s features you always start by defining a site

Creating a Site Over the next few lessons we will be

using videos... It’s an easier way to demonstrate the

features of Dreamweaver Pay attention to videos!

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-02-defining-sites/

Dreamweaver Sites Summary

Using a site in Dreamweaver allows you to manage all the files and the links between them.

Sites also allow you to link your working copies to the “official” web site and upload your files We will not be doing that in this class.

Page Layout Options

There are a number of ways to layout a page in Dreamweaver. We will cover 3 of them:

1. Freestyle – Do the page layout as you build your page. Difficult for complex layouts!

2. Dreamweaver templates

3. By using a table

“Freestyle”

Freestyle is what you have been doing in your index.htm file Use <div> to separate the content and use

CSS commands (float: left, etc) to position the content on the page.

Complicated CSS code!

Using Built in Templates

Dreamweaver has a number of built in templates to rapidly layout the page. http://tv.adobe.com/watch/learn-dreamweave

r-cs4/getting-started-03-rapidly-building-layouts/

Creates the CSS code for you Once created you can alter the CSS code to

change the appearance to what you want

Using a Table to Define the Layout

Tables help you divide the space on your page. Tables give you the option of making your

page a fixed size or making it fit to the user's window the best it can.

Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

Example To create a web page with a layout like

this:

Example Create a table with 3 row and 3 columns

that takes up 100% of the screen

Example Highlight the first row of cells by placing

your cursor in either far left or far right cell and dragging to the other side.

Click on the merge cells button in properties panel

Do the same with the bottom row

Example

Highlight and merge the middle and right cells in the middle row. This section will be used for your main content, and the leftover cell will be used for links.

Example Now you can adjust the table by clicking

and dragging on the handles to make the table look more like a familiar webpage

From here you can insert additional tables into any of the cells you want. This will let you place your text and images exactly where you want them within each section.

Summary - Layouts There are different ways to create a page

layout in Dreamweaver Choose the 1 that works the best for your

application

Rest of Today

Download the instructions for Homework 8-2.

Complete the assignment and show me the result.

You have 2 days to complete this assignment. All questions and answers must be

added to your tools.html file.

tools.html

Freestyle

Table

Dreamweaver