BasicCSSFlowTutorial

Basic CSS Flow Tutorial with Box model using Dreamweaver CS3CS4
tutorial modified from Sullivan and Rewis Mastering CSS with Dreamweaver CS3 2008.

1. Start Dreamweaver CS3CS4 and open the page called start.html – it should look the
page below it has only several paragraphs of text and some headers. If you don’t have
this page create something that looks similar.

2. If you would like to see how we are going to format this page using CSS open the
finished_template.html page and then close it. First we will add an image placeholder in
front of the fist paragraph. Place your cursor under Main Content, in front of Lorem ipsum
text and select from the top of Dreamweaver Insert>Image Objects>Image placeholder
and in the pop up box type the information as shown below and click OK.

1

The gray box will appear in front of the paragraph – by default images are inline elements
and appears at the baseline of the first line of text as shown below

3. Next we will create a simple CSS class rule that floats the image so text wraps around it.
Click on the + symbol at the bottom of the CSS dreamweaver window.

click on the + to create a new CSS rule

2

4. In the pop up box, make sure the Selector type is set to class and in the input box below
type in .fltlft - don’t forget the period before the name, the text is an abbreviation for
.floatleft – you could type .floatleft, but dreamweaver uses the former abbreviation in its
CSS templates so I am going to use it as well so you are familiar with what it does. Then
click on the OK.

5. When the CSS rule definition box opens Select from the left category – Box and set the
values for Float to left, Margin uncheck same for all and type in the Right Margin text
box 8 px – to leave 8 px of padding on the right side of the image so the text does not
abut directly (i.e. leaving a bit of white space next to the image) and click OK.

6. The CSS class can be applied to any elements on the page – to apply it the image
placeholder (you could have a real image here as well) – click on the image placeholder

3

and in the bottom properties box select the class drop down menu and click on the class
.fltlft and the text will not wrap around the image.

Select Class - .fltlft to have text wrap around the image placeholder

Note that the H2 Level also wraps around the image placeholder. Sometimes this is the effect you
want, other times we may want the H2 level to clear the bottom of the image placeholder. You
could do this by placing your cursor in front of the H2 level heading and hitting your Enter Key
several times or we can apply a Clearing Element using CSS.

7. In Dreamweaver place your cursor in front of H2 Level heading and switch to code mode
– add the tag

<br class=”clearfloat”> - the break tag adds non breaking space, but we will define a new class
called .clearfloat that will force the text below the bottom of the placeholder.

8. Click on the plus symbol in the CSS panel to create a new CSS class rule, set the
Selector Type to class and in the selector name type .clearfloat the click OK.

4

In the CSS rule box above, select Box, set Height 0 px, Clear to both and the Margin set to 0
Px. By using clear: both instead of clear left, the same class can be used for both right or left
floated elements - then click OK. The H2 Level header should move below the image
placeholder as shown below.

5

Inserting a DIV tag

9. Next we will break the page up into “blocks” by inserting elements and paragraphs inside
<div> tags which we will then resize and position on the page. Select the h1 text Header
on the page and also click on the <h1> tag in the bottom toolbar to be sure we have
selected both the <h1> and </h1> tags.

10. Select the insert toolbar from the Common category - click on the Insert Tag button as
shown below.

Insert Tag button is 6th button from the left and just in front of the tree icon (image) button

In the insert Div Tag pop up box below – make sure Insert –Wrap around selection is
selected and in the ID textbox type in header – this will create a unique id element and place
div tags around the Header text – which you will see as dotted lines. These lines delineate a
“box” which we can manipulate by modifying the #header id element. Click OK.

6

11. Next we will create 3 more id elements to surround the Main content, sidebar content and
the footer. Switch to code mode and select the first <h1> tag in front of Main content to
the last </p> tag before </h3> tag. The reason for using code mode is that Dreamweaver
often does leaves beginning or ending tags if you simply chose the text in Design mode
for some strange reason. Click on the insert div tag option again and as before makes
sure Insert is set to Wrap around selection, and in the id field type mainContent.
Repeat these steps and select <h2>Sidebar …. Text to ending </p> tag and click Insert
Div, set id name to sidebar1, and then lastly select the <p>Footer</p> code and insert a
new div tag set the id to footer. When you are done you should see 4 boxes of dotted
lines around each of the main sections of the page as shown below.

Dotted lines delineate each of the sections now broken up into divs with unique id names.

If you did not have any content before you started you could have also created a series of
divs called: header, maincontent, sidebar, footer – then put text and pictures inside.

7

At this point the page is not really formatted, so we are going to modify the properties of the
divs to size and position them on the page.

12. Click on the + in the CSS panel and in the pop up box Selector type select ID and in the
selector name box type #sidebar1 - the # symbol in front symbolizes this is an ID
element which is unique, there can only be one.

13. In the CSS Rule definition box Select Positioning, type Placement 80 px top, Left 10
px, Type absolute, Width 200 px (see below), then select Category>Background and
set the background color to #CCC - Click OK.

Your page will look the screen shot below:

The side bar floats overtop of the main content – the values for the top are in relation to body

8

14, Once again click on the + symbol at the bottom of the CSS box to create a new Id rule,
Selector Type > ID then Selector name type in #mainContent OK. In the Category field
select Box – in the margin, uncheck Same for all and in the Left text field type 225 pixels
>OK. Your Main Content box moves to the right as shown below.

The only problem is that if the main content is shorter then the Sidebar content the footer will
float up next to the side bar. See below.

9

Text in the footer stays next to the “float” Sidebar1 Content, unless the float is cleared – like
we did earlier with the image placeholder. The easiest way to fix this is to go into code, place
the tag <br class=”clearfloat” /> as before – see code below.

<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
</div>

The footer div moves to the bottom and will now clear the bottom of the main Content area, but if
the sidebar stretches downward it will still go over top of the footer. To fix this problem we will

10

change the order of the content so the sidebar content comes before the Main content and then
float the box left.

14. In the CSS box select the #sidebar1 and click on the trash can to remove it.

The side content box will appear below the Main Content box. Click the #mainContent id element
and click on the trash can as well – your page will revert to the unformatted version - again.

15. We are going to move the sidebar1 Content in front of the Main content. Place your
cursor in the Sidebar1 box and at the bottom click on <div#sidebar1> Edit>Cut. Place
your cursor at the end of the Header and and click on the right arrow key to move the
cursor in front of the <div#mainContent> tag and select Edit >Paste.

11

If your page does not look like that above make sure your code looks like:

<div id="header">
<h1>Header </h1>
</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a
dividing line instead, place a border on the left side of the #mainContent div if it will always
contain more content …... </p>
</div>
<div id="mainContent">
<h1>Main Content </h1>

12

16. We will create a new CSS rule for the #sidebar1. Select the + symbol in the CSS box to
create a new Rule, Selector type ID, Selector name #sidebar1 > OK in the Category box
select “box” >width = 200 px, Float left, then select Background > Background-color
#CCC > OK

Your Sidebar1 Content box will float to the left over top of the MainContent. Next we will position
the Maincontent box to the right of the sidebar1 content.

Main Content appears to the right of the Sidebar1 Content and wraps around the bottom of it.

13

17. To create a two column look, we will re-create the ID #mainContent and position it to the
right of the Sidebar1 content. Click on the + in the CSS box, Selector Type ID, Selector
Name #mainContent > OK in the Category select Box and deselect same for all in the
Margin field and set Left Margin to 225 px – click apply to see the change then OK.

The problem is that once again if you add space or text into the Sidebar1 content box, the footer
wraps around the side. To fix this add <br class=”clearfloat”> before the footer div tag.

</div>
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
</div>

14

At this point your template layout is elastic – the mainContent area will stretch to fit whatever size
th view pulls their browser window open to. Often we want to restrict the browser window to fit
within 800 or 1024 pixels so they look good on the majority of computer screens and we want to
float the design in the centre of the browser window.

Centering a CSS Layout

18. Click anywhere in the page, then click the <body> tag selector at the bottom of the
document window. This will select everything on the page. Click on the insert bar and
select insert Div in the popup box select ID and type container

Click on the New CSS Rule button > then OK in the New CSS Rule Box category Select
Background category – set the Background color to #FFF - i.e. white, Select the Box category
and set the width = 780px. Deslect “Same for all” under Margin field and select auto in the Right
and Left margin categories click OK and OK.

15

19. Change background color on the page outside the container, Select Modify>Page
Properties>Set background color #666

16

Your basic CSS template is taking shape. Of course you could have simply selected one of the
CSS templates that comes with Dreamweaver and I suggest you do once you understand how
the CSS templates are created.

Also you will notice that Dreameaver uses compound CSS selectors in their templates e.g.

In the example above

.twoColFixLt #container the class function preceeds the Id element – they do this so that if you
decide to use more then one template in your web site you won’t run into problems with your
CSS. If you don’t intend to use more then one template you can simply remove the preceeding
class names e.g. .twoColFixLt to simply the CSS coding.

Up to this point we have only been concerned with creating a box model template – now you
would begin to format the text, add navigational links and images to your template.

17

Place your cursor in the Header – delete the text, then select insert image and place the
kayak.jpg file or other header grahic inside. If you use the kayak.jpg file you will need to shrink the
containter to 760px in width use the properties box below the CSS panel. Add a real image,
change the padding –left on the side bar to give the text room to breath, perhaps add navigational
links.

As such the template looks very boxy – in order to add some curves to the design you will need to
create rounded corners in photoshop or other image editor and then insert then place them into
the footer and bottom of Sidebar.

For example:

Create a rounded corner file – then select the div you want it to be used for and insert as a
background.

18

Finished Product with rollover links and rounded corners – this still looks very basic – to improve
you could add some buttons in the left side menu – try doing it using CSS!

Simple CSS Box Design

To Add CSS buttons into the sidebar try adding the code below – change the colors to change
the appearance of the buttons.

#sidebar1 a {
display: block;
padding: 6px;
text-decoration: none;
width: 12em;
margin: 2px;
color: #060;
}

19

#sidebar1 a:link, a:visited { background: #Efb57c;
border: 2px outset #efb57c;
}
#sidebar1 a:hover { background: #daa670;
border: 2px outset #efb57c;
color: black;
}
#sidebar1 a:active { background: #bb8e60;
border: 2px outset #bb8e60;
}

Question: How do you bring the buttons closer together? Backspace and remove the <p> tags.

20

BasicCSSFlowTutorial

Recommended

More Related Content

What's hot (7)

Similar to BasicCSSFlowTutorial (20)

More from tutorialsruby (20)

Recently uploaded (20)

BasicCSSFlowTutorial