In this video we'll cover the steps for using fixed and fluid layouts.

Let's start by opening Dreamweaver.

Next, we'll open th eManage Sites dialog to import our site file.

Select Teenspace.ste, and click Open.

Now that the site file has been imported, click Done.

In the Files panel at the bottom-right, expand the Teenspace site, and then expand the Module 4 folder.

Now we need to create two new files. Right-click the Module 4 folder and add one new file named index.html, and another new file named styles.css.

Double-click the new index.html to open it in Dreamweaver.

Change this page's title using the top Title field, and then attach the styles.css file you created.

Let's switch to code view now, and begin adding the <div> tags we'll use to test fixed and fluid layouts.

Click in the tag and add a couple line breaks to create some space for coding.

Write a header

, and create a rule for it using the CSS Styles panel.

In the New CSS Rule dialog, choose the Compund selector type.

Your new header ID should appear automatically in the Selector Name field. Click OK.

Starting with the Box category, configure this <div>'s size and shape.

Now, use the Type category to configure the text properties of this

.

Lastly, select a background color.

Add another line break.

Now, as we've done in previous labs, add a new div that will serve as the website's "navbar".

Place your cursor within the new <div> tag, and type out some text that will serve as the buttons or links to navigate the site.

It's time to create a new CSS rule for your navbar.

As with the header <div>, choose the Compound Selector Type. Your navbar ID will appear under Selector Name, and you can click OK to cofigure the rule.

Configure the text properties for this rule using the Type category.

And move on to the Block category to set the text alignment.

Click OK to finish configuring this rule.

Now let's add a few more line breaks to create room to write a few colimns into this page's design.

Begin writing three more <div>'s, with the IDs column1, column2, and column3.

Click into the column1 <div>, and begin creating a new CSS rule for it.

This time set the selector type to ID. You'll then have to select column1 for the Selector Name.

Start with the Box category to configure this rule for column1.

Set the Width to 250 pixels, the Height to 400, Float and Clear settings to Left. Then select a background color from the Background category.

Click OK.

Next, you will repeat the process and most of the same rule settings for column2.

For column2, instead fo setting the Clear field to Left, deselect the Same for all checkbox in the Margin section, and set the left field to 10 pixels.

Finish this rule by selecting a unqiue background color for it.

For column3, you'll repeat the process once more.

As with the column2 rule, you'll set the Width, Height, and Float values, and include the ten pixel left margin.

For column3's background color, use the same one as you did with column1. In this case, we selected the color #69F, a medium blue.

Click OK to finish the column3 rule.

From here, save your files and preview the page.

The page is now visible in a browser window. Expand and contract the browser window to review the behavior of your page with the settings you configured for each rule.

Right now, the page is using a fixed layout. Any elements that are too wide for the browser window are being forced downward.

This fixed layout behavior can sometimes disrupt the intended flow of your design and content.

Let's close the browser window for now...

...and switch to Design view...

Let's close the browser window, and switch this website to a fluid layout.

Under View > Window Size, we'll view this page using the 480x800 Smart Phone view.

As you can see, users must scroll a lot to see the whole site.

Switch back to Code view and we'll change the columns to employ a fluid layout.

Place your cursor in the column1 <div> and edit the CSS rule by right-clicking it in the CSS Styles panel.

with the column1 rule open, change its Width value to 32, and its metric dropdown to percent. When the page is run in the browser, this will mean that column1 will always be 32 percent of the width of the browser display area.

Click OK to finish this change for column1.

Now, revisit the column2 rule to make similar changes.

Make the same Width adjustment to 32%...

And this time for column2, change the Left margin to 2%.

Repeat the column2 rule edits for column3.

Let's preview the newly edited page in the browser once again.

As with before, expand and contract the browser window horizontally to see how the page behaves.

Notice that the columns expand and contract propportionally to the browser window's width.

At this point, save your work.

You have successfully used both fixed and fluid layouts for one of your HTML pages.