Creatin' CSS Layouts In Dreamweaver, Part 1

[CS51000]

I looks like it would be great, but I can't hear or see even with my speakers ;( Or really see for that matter, as there is no HD

[elfalan]

Thanks for tutorial it was extremely helpful had some experience with coding a CSS based page, but no experience with Dreamweaver will apply this to rush job I need to get done. Wow this made things much easier Thanks

[GamesForLifes999]

Good tutorial but i hate that "background" music ..

[XxPouringRedRainxX]

You have a very un-friendly voice, it makes learning about CSS fun!

[ThefatdudeUK]

wayyyyyyyyyyyy to quiet!!

[liamdhardy]

Which version of Dreamweaver is this? Your insert bar is completely different from mine, I'm on CS4.

[philo021]

whats with the creepy xfiles ( i have a dungeon in my basement ) background music???? its really annoying

[Enigmalusion]

wow video is so quiet lol

[Gothtecdotcom]

Volume up to full... still cant here you!!!

[IKmatli2010]

dear which browser r u using plz tell me i like that browser

[sakuraness]

You have a very friendly voice, it makes learning about CSS fun!

[TenTonBooks]

@sakuraness: Thanks!

[biancax33]

when creating your divs could you just click and drag to whatever size you want or is it necessary to know exact dimensions?

[TenTonBooks]

@biancax33: It's a good idea to know what you want to build before creating anything. Personally, I work everything out on paper first. Whatever works for ya!

[pinfold750]

dear tenton thank you for this tutorial im 14 and i could understand it and has helped me make my site thank you so much!

[TheFernBrook]

I really like your videos but the resolution is dreadful. Is there anyway of fixing them?

[TenTonBooks]

@TheFernBrook Thanks for the comment. Yeah the resolution is brutal -- that's YouTube. Watch them in crisp high quality over on the Ten Ton site (tentonbooks . com)

[muffybeach]

These tutorial have been awesome. I'm learning web design at uni and my tutor was really lame, didn't learn a thing. But thanks to you guys i was able to build a kick arse website.

You guys rock!!

If you're ever in Australia i owe you a beer!

Cheers mate

[TenTonBooks]

@muffybeach Awesome comment, thanks! Glad to hear these tuts were helpful. There's lots more on tentonbooks . com too, so check 'em out! And, I'll definitely take up on that beer...never been Down Under, but for a free beer, I'll make the trip!

Cheers,

Geoff

[thejewel108]

Dear TenTon:-) Thank you so much for the CSS tutorials. I never thought that I would be able to layout a site using CSS instead of tables but thanks to you I just did it for the first time. It's really generous of you to put these fabulous tutorials up on youtube.

[TenTonBooks]

@Jewel: Thanks so much for the awesome comment! You're very welcome, it's my pleasure. Don't miss what's happening over on tentonbooks . com, too! ~Geoff

[lukestratton1]

Great tutorial but music is really annoying.

[TenTonBooks]

@Luke Thanks man! Yeah that's the consensus, hence why there's either no music or much better music in the newer vids. Cheers! Geoff

[ptysnz]

Really good tutor... thanks alot!

[TenTonBooks]

@ptysnz: You got it my man. Thanks!

[c2psy]

dreamweaver cs4?is it ok to use the dreamweaver 2004?

[prabhumast]

Dreamweaver CS4 has some built in CSS that u can use:)

[TenTonBooks]

@prabhumast Yes, it absolutely does -- the prebuilt templates that ship with DW are very, very good. Thanks for the comment!

Geoff

[easilydistracted86]

THANK YOU. I'm currently in school for my bachelor of visual communications, and recently took a Web Design course. My professor was an idiot. So we basically had to teach ourselves and spent the semester pulling our hair out trying to figure CSS out on our own .... and then I find this and you make everything so easy! Thank you! God bless YouTube!

[TenTonBooks]

@easilydistracted86 Thanks for the awesome comment, bro! Ya know, people tell me the same thing over and over..."our prof didn't know what he was doing and we had to teach ourselves" Honestly, that's one of the big reasons why I started Ten Ton...

Thanks again for the comment!

Cheers,

Geoff

[14icedtambourines]

i love you(r tuturial), man!

[TenTonBooks]

Thanks dude! More stuff soon! Cheers ~Geoff

[dibiguous]

Thanks Jeff. Very Crisp ans precise

[TenTonBooks]

Crisp and precise -- that's what it's about. Cheers bro! ~Geoff

[flipinfin]

nice tutorial. Though when i use api divs for a image link

it creates a purple link around the boarder even when i chage link colors. Any Suggestions to fix this issue?

[TenTonBooks]

Hmmm...I'd have to see it. Sounds like the border may be around an image tho? is that the case? ~Geoff

[welshdragon2008]

just looked at ur vid again. Can i ask u some points?

Wondering why dont u use a 'wrapper' Div? (is it becuase ur using AP Divs?)

You have not opened up ur body and created a CSS rule for it, why not?

(is that simply an option for the site creator)

If a AP Div tag Is the same as an Div tag (apart from the positioning) whats the point in having the two types of Divs, after all the position can be altered in the 'rule definition panel'?

just that im using the Div tags for my pages,

[TenTonBooks]

Some great questions, Welsh Dragon. DM me and we'll chat! ~Geoff

[welshdragon2008]

this is only useful if you use CS3

as i have CS4 this is useless.

[TenTonBooks]

@welshdragon2008 Please don't say my videos are "useless." This absolutely works in CS4. You need the Insert panel, Layout category. It's all the same stuff.

[welshdragon2008]

sorry! ur videos are not useless.

just useless to people like me that dont understand the differences between CS3 and CS4

good work.

[TheWebsonic]

Fantastic stuff Geoff. I'm just starting out and this has been the first tut that really made it easy to understand. Very clear and you go at just the right tempo.

Cheers mate.~Rob

[TenTonBooks]

Hey websonic -- I think I ran into you over on gomediazine! Great to hear you liked the tutorial -- and that's what it's all about: Making the complex easy...the dull fun. Sorta how the Duke Boys like to straighten curves and flatten hills. Oh never mind...Cheers! -Geoff

[TheWebsonic]

Ha Ha! Yeah this tut is where it all started for me a couple weeks back (at least where i started believin i could do this). So a kinda delayed thanks:). Cheers again ~Rob

[teenysquirrel]

Wow. Very clear tutorial. Coming from print graphic designing bkgd., your tut really made it easier for me to understand Dreamweaver. Thank you!!!! : )

[TenTonBooks]

Sweet, thanks squirrel! I have a print background as well...and there are some strong parallels here. Cheers! ~Geoff

[donbillhgates]

=) Tank's Good Job

[PCGAMER42]

i love the background sound, your great

[NEVERSLEEP990]

THank you very much . It's really clearly. Excellent tutorial for beginners.

[TenTonBooks]

Thanks! Great to hear you enjoyed! -Geoff

[floopy312]

very cool videotutorial... thank u for ur work

[TenTonBooks]

Thanks! Glad I could help! -Geoff

[okltsply]

Great job, I've spent about 3 full days trying to figure out Dreamweaver with only a basic understanding of html. I have watched a bunch of long videos on css and Dreamweaver, and was having a hard time. People that put up tuts. for noobs forget that a noob will be watching. You explain everything clearly and thoroughly, just letting you know this noob really appreciates you. Thanks for your time and effort.

[TenTonBooks]

Thanks oklitsply -- You nailed it: Noob tuts are watched by noobs! The biggest challenge most trainers have is remembering that we're not here to watch how awesome THEY are at such-and-such...but that WE are here to learn. Most teachers teach for themselves, not for the people in the room...Sorry for the rant, it's kind of a thing with me! Thanks for the great comments and glad you enjoyed! Cheers -Geoff

[evaslimmy]

is there a way to export the css content from dreamweaver as a code in myspace???PLease i need urgent help!!!!

[billdakelski]

Seems like it might be an interesting video, but I could only tolerate about one an a half minutes before the background mantra, made me want to pull my hair out, BY THE FREAKINGG.>.m.asd,fm adfl . . .. .. jlkll

ROOTS!!!!!!!!!!!!!!!!!!!!!!!!!­!!!!!!!

[lokes]

i seriously feel like how neo felt when he just learned kung fu going through these videos, it cleared up a lot thank you,

[mechavoom]

i just had to give this comment a thumbs up!

[TenTonBooks]

"I know kung fu!" Awesome bros! Lots more coming soon -Geoff

[melissaisawonder]

Great tut by a cute guy! <3 Something about a Canadian accent...

[TenTonBooks]

Thanks Melissa! :) Usually I'm given a hard time about the accent! -Geoff

[andyvancouver2000]

Great tutorial, but that annoying background music is driving me craze :( What's the deal about that?!

[kittybaby08]

excellent!

[w8fh33dkajlfe99faaa]

Thanks for the great video.

One problem I have found using divs is that when I increase the font size on a published site using divs for layout, the size of the divs do not change; only the font. This messes up the layout. Is there a simple setting that I'm missing?

[ThexRealxTruth]

cool bro.

thanks alot

[lazzyjo]

nice video

awesome

[cedarwater]

Oh my God, I've been struggling with this in class and getting handed references that did nothing but confuse me more. I found you on a whim and...well...I'm not sure man...but I think I might love you now. LOL THANK YOU!!!!!!!!!!!!!!!!!!!!!

[dannymonday]

Awsome Tutorial, Keep 'em coming!!

[franad]

excellent !!!! thank you very much

[JulianKaruk]

Finally I can watch a tutorial that gets into the actual creation of a website. I'm lovin' it.

[blightytater]

Hugely helpful and beautifully put together. Thank you.

[kiwibiwi]

volume seems way low on this - (im on a macbook so not the loudest speakers, lol) but great tutorial

[SriLankanAirlines]

I love you sir, thank you very much really really good job!

[dearkalem]

thanks

[josuesalomon20]

Awesome videos! Great Job! I've watched all of them already I hope you continue bringing more and more of these things specially dreamweaver and flash... THANKS A LOT!

[EstreetPhan]

This tutorial is just fantastic. It's easy to understand and the extra explanations on what certain steps do is helpful for beginners like myself.  This is one of the best, if not the best, layout tutorial I've come across thus far.

[christinamaruhn]

This is very helpful, thank you!

One question: Why not set the width to 100% instead of 990 px? Shouldn't that adapt the width to all browsers?

[kahoy]

nice nice nice nice nice

[nuclearG1]

OK this is starting to finally make sense. I hadn't watched part 3 before I posted my previous comment. This guy is a good teacher. I want to see more.

[nuclearG1]

This part is easy. The issue is that this only offers ABSOLUTE positioning and the site is shoved up into the left corner - no way to center in the browser window. Can these divs be placed inside of a centered table or a container div that is centered?

I find it strange that as easy as it is to design this way - there is no option to center a site - a most common way to portray sites in the browser. Why fuss with CSS positioning if simply placing AP divs could be done inside a centered table?

[danatarzan]

Clear, to the point, brilliant. Thanks - you are a great teacher.

[sd11208]

Awesome stuff.

[FLAKKO11]

can you use dreamweaver to make a myspace div over layout n code?

[infernalmage]

Yes.

Make "div" cause that'll be your background div to hide your myspace info and etc..., then make a div within that same div, on this div you'll add w/e you need for your myspace. That's it.

then copy all that's between the "body" after uploading your images on the web, and then paste in your about me section.

[humbemsishere]

Great tutrial dude!!!! the best!to add a rollover object from firewors to i have to paste the java code in the html code????

does anyone know?

[wefollowhim]

It is first time someone show CSS with DRAW AP DIV TOOL and explain it like U. It is excellent lesson. please have article that add button(Firework) on CSS page...thanks

[snacksizechloe]

These tutorials are fantastic! I have honestly been wanting to know how to centre a layout and have the bits I put on the page just stay exactly where I want them, for a couple of years now and for some reason this is the only tutorial that actually explains this simple task in a way that's easy to understand. Thanks a million!

[williammoore50]

Definitely a born trainer. Gets the point across with clarity and finesse. Other people who post tutorials on the web should use these as examples of how it should be done!!

[wielgi88]

why its so quiet?? i dont hear anything with vol max :/

[vivekrughani]

Best Tutorial Series, easy and flowing

[MKoutin]

Hi there!!! Your tutorials are very helpful I just have one question. Is there a way for this to auto resize in the browser? Because it looks like only predesigned layouts are capable of doing that. Thanks!

[sarasayshi]

Will you marry me? hehe I spent about 7 hours today trying to figure out why on earth I couldn't get my layout to center. You have saved me!

[RoyaleCafe]

Wow i love you vids make more!

[soniku88]

thank you soo much soo usfull great job dude

[KaBoomYV]

wow! good job...very useful

[Xylogeist]

your videos are quite remarkable, I would love to see more! :D

[NathanDHenry]

Thanks Mr. Blake.. Your awesome for doin this...

[DarkRage4]

thx man I created a awesome php site with this :) for some reason when i made a html site my images wouldn't appear so I made a php one and it worked :)

[mastershakecc]

oh man - life saver! I needed to know everything in these tutorials for my job last week, but dreamweaver class starts next week. Wonderful tutorials! Website is a great resource! Thanks so much!

[UNIVERSALRESOLUTION]

Awesome tutorials very cool thank you very much.

[aushi7]

it was great thx alot

[stepthe]

great tutorial! it just explain the basic of div's in detail. anyone who get started with dreamweaver should do this tutorial, it would help them make a great start using dreamweaver!

thanx a lot man!

[redmike1]

I just discovered Geoff Blake and loved this video and also an earlier one that I just watched.

His pacing is just right, not too fast which is sadly all too common and not too slow.

I must hear him play the banjo :-)

I learned a lot and will check out his other tutorials.

Thanks Geoff

[enash131]

hey geoff, nice job bro, absolute positioned divs' are one way, but you should make a floated div layout, for people who would like: liquid, and auto resizable layouts. :)

absolute positioning isn't always the best - but a love it dearly!!

[RatedRWHC]

great tutorial ;)

plus i love ur voice lol

[slennzer]

your a god. thank you! centering 'layers' has driven me up the wall dude. i have searched so many places for an answer and no luck. I'll be giving this tut a try later and see if your kidding me or what!

[TenTonBooks]

@slennzer: Ha! No kiddin' bro! Give 'er a whirl, I guarantee it'll work, or I'll buy ya lunch! Thanks for the kind words ~Geoff

[himler6]

Wow, what a great tut! you explain things so clearly and make it easy to understand.

Thanks a million

[TenTonBooks]

@himler6: Glad you liked it! Thanks for the kind words! ~Geoff

[lepaux]

Hey Geoff,

sorry to bother you again.. I was wondering how you use the same template for pages within the website that have different content sizes. For example I might have the homepage with just an introduction and then a page full of pictures that you would have to scroll down.. How can I do that without running over the footer? Many thanks in advance, cheers!

[TenTonBooks]

@lepaux: Ahhh...a bit tougher to do. The example I gave here was for a "fixed height" layout. You may want to do a bit of research on creating a "flexible height" layout. Hope this helps! ~Geoff

[gabriel84]

incredible easy to learn with you, keep up the great didactic.

[TenTonBooks]

@gabriel82: Thanks for the kind words! ~Geoff

[mrsglenister]

I am embarking on a web design career and your

tutes are unbelievably valuable! Thanks so much for sharing with us.

Are you planning on doing some tutes for rounded corner boxes and shadows underneath?

taffygirl

[TenTonBooks]

@mrsglenister: Heya taffygirl. Thanks for the comment, awesome! Rounded corners and shadows it is, I'll at that to my ever-expanding list of tutorial ideas. Lots more comin'! Cheers ~Geoff

[mrsglenister]

That is so kind of you!! I love the way you present your tutes, it makes learning so much easier. Keep up the fantastic work

xx

[TenTonBooks]

Thanks for the compliments! More comin'! ~Geoff

[lloyde]

Wow, gotta be one of the best tutorials I have ever seen, please keep them coming

[TenTonBooks]

@lloyde: Awesome thanks! Lots more on the way (just recorded 6 more today...now I just have to painstakingly edit them!) Stay tuned! Cheers ~Geoff

[thecreativeone]

I watched this on your web site and I must say, great work! You explained it in a way that is so easy to understand. Thank you! I'll continue to view your content.

[TenTonBooks]

@thecreativeone: Thanks a lot, glad you enjoyed! I'll keep 'em comin' as fast as I can! ~Geoff

[loesdilma]

incredible video! Would be kind enough as to explain how I could make a link to a specific div on the center page and leave all the rest intact? In a way that I could navigate through a website while the top, bottom and left divs don't change (sort of like frames). Thanks alot!

[TenTonBooks]

@loesdilma: Thanks for the comment! In regards to your question, "lepaux," a commenter in Part 2 of this video series asked the same question, and I answered in the comments for that video, so head over and check out what I had to say. Short answer: Gahh, frames! Thanks! ~Geoff

[aviator1987]

thanks for this great tutorial

plz show us how to make some space under the footer and how to make the template in the center of page

thanks a lot

[TenTonBooks]

@aviator1987: Thanks for the comment! To put space under the footer, you'll have to set a height value for the #Master rule (in this example, add up the heights of the header, the main area, the footer, the gaps in between each, plus the amount of space you'd like below the footer). As for centering, check out the other two parts in this video series, where I show how to do just that. And templates? Choose File > Save As Template. But maybe this should be the topic of a future vid! :) ~Geoff

[lepaux]

amazing. Takes real kindness to make such a clearly explained video for everyone to watch. 9 and a half minutes ago I hadn't the slightest idea of what a div was and now I'm feeling like an expert, can't wait to watch the second video, many thanks for the excellent job!

[TenTonBooks]

@lepaux: Wow, thanks! Great to hear you enjoyed so much. Thanks for the compliments. You know, some people make this stuff out to be rocket science...but I try to make it as easy to follow as possible. Thanks again, lots more to come! ~Geoff

[idro2k]

Awesome!

Really good clear explanations! 5/5! Keep it up!

[TenTonBooks]

Thanks, idro2k! Lots more coming! ~Geoff