Dreamweaver CS4 Tutorial – Fixed VS Liquid
Hi all, I think you have now enough idea about how to define your styles and change the look of your page making use of CSS in last Dreamweaver tutorial.. In this tutorial, you will learn the process, which Dreamweaver has built in to create a new HTML file with fixed VS liquid CSS layout.
Hi, in past two tutorials I have been showing you how to define your styles and how to change the look of your page using CSS. In this tutorial, I am going to run you through the process that Dreamweaver has built in, that allows you to create a new HTML file with fixed VS liquid CSS layout without any coding at all.
This is easy is opening up Dreamweaver, saying file new and then to left to see you have HTML and then you have all the layouts right here. Down to the bottom we have, 3 column fixed and 3 column liquid with header and footer. I am going to start off with the 3 column fixed with header and footer that we create. You can see inside of the code right here, they have already created the div tags for us.
It’s already created some simple content, it’s created a header, it’s created the footer. It looks like the one that I was making before except its color is different and its little bit more styled, or a little bit more content. So, I am gonna run this in a browser, it’s gonna ask me save and I am gonna save this as a fixed width at HTML. It goes up in a firefox, as you can see it exactly what it looks like inside Dreamweaver. And I am gonna save this preview, it’s a fixed width layout where you minimize this, it doesn’t care any small. It stays the same. It’s that easy to create a fixed width, basic layout to play with Dreamweaver. Now I am gonna do the same thing, except in to choosing fixed, I am gonna choose liquid.
So, I am gonna file new, 3 column liquid with header and footer. When you open it up, it looks exactly the same. Amm here really tell you the difference between the two except it is little bit narrower, because this is one is fixed and this one is liquid. But the big difference between this two pages is in CSS, you can see here we have percent signs for our widths having instead of in a fixed width we have an actual pixel width, see seven hundred eighty pixel for the width inside the fixed. The width for the main is twenty-three percent and twenty-two percent. So, it’s definitely, definitely different, so I am gonna save this.
So you check it out in the browser and I can show you the difference between the fixed and liquid layouts. Save this, liquid layouts, here we go. Check this out, this is our firefox and I am going to, see how, see how shrinks like that. Really, it that easy to create a basic template where you can go inside and add your content or whatever you want inside of it. In the next tutorial I am gonna show you how to do that with HTML inside a Dreamweaver, I am gonna 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.
Tags: dreamweaver cs3 and tutorial, adobe dreamweaver cs3 tutorial, navodila dreamweaver, dreamweaver, actinic extension for dreamweaver 8, free online dreamweaver tutorial
on April 19th, 2010 at 9:07 am
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 19th, 2010 at 12:28 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 19th, 2010 at 2:12 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 19th, 2010 at 3:07 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 19th, 2010 at 3:32 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 19th, 2010 at 7:29 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial Mainstream Takes Vitavegamin liquid diet | lebanonfunnies.comiPad Has Two Liquid Submersion Indicators – iPad Forumscaptianjkig weblog » Blog Archive » Benefits of Liquid VitaminsThe Debate about Liquid Cooled Data Centers « Electronics CoolingLiquid Nicotine Harmfull Effects? | Feel The Taste of Electronic …Nihrida's blog: Illamasqua – Liquid Metal PaletteLiquid Silk Lets Tiny Electrodes 'Melt' Onto Bumpy Brain Tissue …Apple Sued Because of Liquid Sensors | NetbookBoards.comMacDailyNewsA Liquid Diet to Lose Weight | District 7 View the Contact Powered by Type [...]
on April 20th, 2010 at 1:27 am
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 20th, 2010 at 6:05 am
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 20th, 2010 at 11:11 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 24th, 2010 at 1:04 am
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on April 28th, 2010 at 4:07 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on May 9th, 2010 at 12:17 pm
[...] This post was mentioned on Twitter by Tom Brat. Tom Brat said: New blog entry: Dreamweaver CS4 Tutorial – Fixed VS Liquid http://www.dreamweavertutorial.net/?p=345 #fb [...]
on May 10th, 2010 at 12:11 pm
[...] Dreamweaver CS4 Tutorial – Fixed VS Liquid | Dreamweaver Tutorial [...]
on May 18th, 2010 at 4:52 am
Do you recognize that it’s the best time to get the home loans, which would make you dreams real.
on September 25th, 2010 at 12:25 am
Beautiful theme. I am just starting out learning about Blogengine so seeing themes and info like this is very helpful.
on August 30th, 2011 at 5:15 am
This is a really excellent read for me. Must agree that you are one of the best bloggers I ever saw. Thanks for posting this useful article
on September 7th, 2011 at 10:03 pm
This is a very good article! You did a very good job!
on September 7th, 2011 at 10:04 pm
Thank you for posting such a nice article
on September 7th, 2011 at 10:06 pm
Very well, I like this very much.
on September 7th, 2011 at 10:08 pm
thank you for your good posting!