Dreamweaver CS4 Tutorial - 15 - Page Layout with CSS Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

hey and welcome to the first episode of
series of tutorials that will be
introducing pays layout using CSS and
div tags there are a few key concepts to
understand when you're dealing with page
layout we're going to go over all in all
we're going to go over three but in this
in this tutorial I'm going to introduce
you to two of the three the first one is
a fixed width layout and may yahoo com
and as you can see there's when i change
the size of the screen the width of the
main content which is also called a
rapper it stays the same and i'm going
to go to amazon as you can see whoops
when i change the size oh whoops when i
change the size here you can see
everything is going to stretch out there
in the middle and shrink according to
what you set it to you also notice that
it will only shrink to a certain size
and i'll show you how that's done in a
little bit well now that you understand
those key concepts let's go here and
create our first fixed width page we're
going to use Dreamweaver to insert some
div tags and the div tags are
essentially the building blocks of your
fixed or liquid layout so we're going to
start by inserting a rapper div and when
I say rapper dev I mean a div tag that
is going to wrap around all the other
div tags so we'll start by going to
insert and then lay out objects and then
div tag
and don't worry about the class right
now we're just going to insert a div tag
in it I don't like it says content for
this div tag goes here I'm going to go
ahead and delete that text and I'm going
to press return a few times and add some
space in there now I'm going to do the
exact same thing three more times I'm
going to go to layout objects div tag
say okay go to the end press ENTER and
make sure these div tags are inside of
the the rapper tag that we just made
there's the second one and here is the
third all right whoops I just
accidentally put it inside the div tag
so you make sure it's outside but still
inside the rapper layout objects div tag
now what we have here is a parent div
tag and you can see when it's selected
everything is outlined in blue and
inside it we have three other div tags
what we're going to do with this is use
CSS to style each individual div and
we're going to create a fixed layout
with these divs
now that we have creator divs that's all
the time I have for the beginning of
this tutorial and if you continue
watching the next tutorial we will show
you how to set up your width and we will
introduce some new concepts that have to
deal with page layout