GRAF1039

Today

Dreamweaver

Example (please center your design)

Insurance Brokers Files

Download the files linked above

Open Dreamweaver, and define your local site location to the insurance_brokers folder

Create a new page (xhtml transitional) (layout = none)

Save it into your root folder as index.htm.

Set all the margins to 0 and the background to white by changing the body tag

Title the page Insurance Brokers.

Save the page as index.htm in your root folder

Page Layout and CSS

Insert a table 740 px wide with 6 rows and 1 column. - align it to the centre

Create a new style sheet, start with a new class called .mainTable

Save your css file in your root folder, name it style.css

.mainTable { border: thin solid #CCCCCC; margin-right: auto; margin-left: auto; }

Row 1: Place an image placeholder in the top row for the banner (740 x 275) - we'll replace this with the flash banner later

Row 2: Set the height to 20 px

Row 3: insert a table 1 row 5 col 100% wide. Set the col width: col 1 and 5 to 15, col 3 to 25

Here's what we have so far (scaled down in expanded tables mode)

Create a new class for the P tag (automatically applied to all paragraphs)

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}

Rollover Images

Open the business, auto, home png's in Fireworks

Create a slice the size of each doc, then click the center icon and choose simple rollover behaviour

Save the files, then Export as html/images

Left Column (with nav etc)

In column 2 (of the table highlighted red below) insert a table (200px) 5 rows 1 column

ROW 1: insert the first home image: Insert Firework Html

Repeat for the other three images - in rows 2 and 3

ROW 4: set the height to 5px, and remove the   in the code (this row is just used as a spacer)

ROW 5: add a table 5 rows 1 column and a cell padding of 4

This table will support this part of the page:

Add the content and create the appropriate styles

.orangeheader18 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FF9900;
}

.litegreyheader18 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #999999;
}

.greenheader12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #66CC33;
}

Main Column (welcome msg)

Insert a table 485 px 3 rows 1 column

ROW 1: insert a table 1 row 3 columns - add the content and manager.jpg

Create a style for the image

.imageborder {
border: thin solid #333333;
margin-right: 10px;
}

ROW 2: set the height to 20px, and create/apply the following style

.horzLine {
background-image: url(images/horzline.gif);
}

ROW 3: insert a table 1 row 3 columns - 485 px

Set the widths to 220 - 46 - 220 respectively.

Addtional

here's a screen shot of the rest of the layout (see styles below)

a.quickLink:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}

a.quickLink:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
text-decoration: none;
}

a.quickLink:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: underline;
}

.vertLine {
background-image: url(images/vertline.gif);
background-repeat: repeat-y;
}

Inserting Flash

Remove the placeholder

Insert the cursor in the cell

Go to insert > media > SWF - browse to the banner swf. Click OK

DW will ask if you want to add a script to help with browsers - say yes (this is an external file - always keep it in the root folder)

Homework (or remainder of class)

Finish your Insurance Broker Page