Dreamweaver CS4 Tutorial - 18 - Fixed vs Liquid Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

all right in the past few tutorials have
been showing you how to define your
styles and how to change the look of
your page using CSS in this tutorial I'm
going to run you through the process
that Dreamweaver has built in that
allows you to create a new HTML file
with fixed or liquid CSS layouts without
any coding at all it's just as easy is
opening up Dreamweaver saying file new
and then to the left you'll see you have
HTML and then you have all of these
layouts right here if you down at the
bottom we have three column fixed and
three column liquid with header and
footer I'm going to start out with the
three column fix header and footer I'm
going to click create as you can see
inside of the code right here it already
has created a div tags for us it's
already created some sample content it's
created a header most creative footer
this looks like the the one that I was
making before except it's colored a
little different and there's a little
bit more stock or a little bit more
content so I'm going to run this in the
browser it's going to ask me to save and
I'm going to save this as fixed width at
HTML and pull this up in Firefox as you
can see is exactly what it looks like
inside dreamweaver i'm going to show you
just to prove that it's a fixed width
layout when you minimize this it doesn't
get any smaller it stays the same
I just that easy to create a fixed with
basic layout template with Dreamweaver
now I'm going to do the same thing
except instead of choosing fixed I'm
going to choose liquid so I'm going to
file new three column liquid header and
footer and when you open it up it it
looks exactly the same you can't really
tell much of a difference between these
two except it's a little bit narrower
because this one is fixed and this one
is liquid but the big difference between
these two pages is is in the CSS you can
see here we have percent signs for our
widths and padding instead of in the
fixed width we have an actual pixel
width see 780 pixels for the width
inside the fix the width for the main is
twenty-three percent in twenty two
percent so it's definitely definitely
different so I'm going to save this so
we can check it out in the browser and I
can show you the difference between the
fixed and liquid layouts save this is
liquid layout we go check this out
inside Firefox
and I'm going to you see how see how
that shrinks like that
it really is that easy to create a basic
template where you can go inside and
edit your content but whatever you want
inside of it in the next tutorial I'm
going to show you how to do that with
HTML inside of Dreamweaver i'm going to
show you the features that dreamweaver
has that allows you to make your HTML
editing easier and so thanks for
watching this tutorial and make sure and
check out the following tutorials