Dreamweaver CS4 Tutorial: CSS Vertical Navigation Bar

[TheTCHIAM]

merci

[joeygart]

And through this I learned a lot and now I can edit my vertical bars.

[GamesForLifes999]

you can't even learn that at school :D you can learn only by doing (learning... trying to add something etc. ;D) Btw school won't learn you much like TutVid :D Keeeep that G00d work :D

[dimple240]

i am trying to made this but i am not able to give active and visited background.when the background comes then it not stay . and i am not using all image(Hover, Active,Visited) together in photoshop.I am using individual image in Active and Visited and Hover. Plz tell me what can i do?

[rawrkeez]

amazing tutorial, thanks for that <3

[cracks4ufree]

working serial as of APRIL 2011 for Adobe DreamWeaver CS5 here: watch?v=pn6WBuqpGWY

[cracks4ufree]

working serial as of APRIL 2011 for Adobe DreamWeaver CS5 here: watch?v=pn6WBuqpGWY

[MATEUSZHUJ]

193.33.176.106:27015

[xStrangersLullaby]

thank unlike everyone else, they didn't teach me how to make a navigation bar. thanks again

[blubb1127]

The whole video I was wondering who you sounded like, at the end I found out it was Adam Schefter from ESPN.

PS - Thanks, nice vid

[mangoprojects]

That's genius. Pixy style button works. Now I can embed four stages in one file. Thank you. - behind vfx

[flutep]

from where can I get the button GIF?

[qqqTOXICqqq]

Ok so i have a basic template in css with DW CS4. I added a horizontal spry bar menu. I click on each button & the same page pops up. What do i do? Anyone? It's so annoying...Thanks!

[augustuen]

How do you make the list to the right of your main content?

[DAHOUSEKRAUSS]

cool



[masterpatric07]

for GOD'S SAKE TALK SLOWER PLEASE.LOL

[SWAT091]

Answer this please:

As your a professional web developer do you actually use Dreamweaver design view or do you do most work my hand coding? I hear that most developers hand code. True?

[Zkeyboi]

@SWAT091 - other professional web developers don't use dreamweaver, others are using netbeans, coffee cup, etc... Depends on their favorite tools. Other developers are just using notepad or other free editors, maybe because some editors are too expensive... Not all professional web dev are doing manual hand codings, some prof web dev are using dreamweaver or other editors to make their work easier and faster. Why will u manually code a website if you can do it in easier way dude =)

[AndyBuckleTuts]

Hey great tutorial only thing is that I was reading your description and it says "Using Dreamweaver CS5" and your using CS4 just thought I'd let you know

[RYANMOW]

thanks very good tutorial man. how do you speak so quickly lol

[MrCoutinho07]

Hi,

This is Mr. Coutinho's Channel TV, a video tutorial and entertainment presented by Aftin Coutinho which brings you exclusive High Definition Video Tutorials.

You can also watch the videos on your mobile via YouTube.

Subscribe to the channel to get alerts when I add new videos.

[anco250]

great man! as usual...

just a question, is there a way to keep an highlighted background in the default vertical spry menu provided by dw depending on which page i am visiting inside the website?

thanks!!!

[shornipp999]

Fuck that! TUT CAST is much more better

[MindiMctier]

You can Download Photoshop and Adobe CS5 Master Collection free ; ; ; . . 123MediaFree.Info9 (Just take away the #9) ; ; ; . . It's the official version!

[cheltube38]

Good Css trickery for beginners. good work.

[anilkral1903]

⎝⏠⏝⏠⎠

[pokemonalexander2]

Just asking what is the difference between the javascript roll overs and css ones?

(sry im new to this " programing " thing)

[hyperdesignro]

@pokemonalexander2 well for starters not all browsers read javascript as they should so Css is pretty helpfull, on the other hand css is pretty limited when it comes to many thinks like actually interacting with the coding.

on: great tutorial - as usual - great job Nathaniel!

[Armanienius]

Great tutorial. Learn something there.

[kidanr]

I know all of the things you teach in Dreamweaver, I still watch all of your videos because it is fun watching others making websites for once :)

Btw. I usually just use notepad++ because Dreamweaver doesnt read my PHP so it's not that necessary.

[samara156]

sweet as sugar!

[kidel3]

You said "dark blue visited", isn't it more close to purple? (You said around 15 mins')

[RiChIeatWoRk]

Lol great, we learned that at school, that really helps, thanks a lot!

[kidel3]

@RiChIeatWoRk WTF? You guys learn web scripting at school?

[RiChIeatWoRk]

@kidel3 ya! It's cool to get some first views into programming if you will do such jobs in future!

[kidel3]

@RiChIeatWoRk To which of my comments did you answer..?

[neondusk60]

@RiChIeatWoRk good for you prick. Ungrateful bastard. Don't watch it or go back to school.

[seanyyg]

Fantastic tutorial Nathaniel. Thank you as always, you're a wonderful teacher :)

[Juniorwazhomeless]

FUCK dreamveaver, 2 hard to understand

[kidel3]

@Juniorwazhomeless Ha, you may say that, but in soon 6 years, I have ONLY used normal Notepad, no other editors.

[Juniorwazhomeless]

@kidel3 u cant make websites with notepad hahah

[Alexeixx3]

@Juniorwazhomeless Yes you can, all you need to know is html, it will be much harder, but you can do it

[kidel3]

@Juniorwazhomeless NOOB! I can, then tell me WHY IN THE HELL I have done so for 6 years! I'm not a NOOB using editors with suggestions. To script you must REMEMBER, if you REMEMBER you can easily make something. If you are using Dreamweaver, you are getting HELP scripting. So STFU.

[Rocadero]

I'm wondering why you choose to manually type all your CSS when DW has a very easy and fast CSS editor to enter all your code. I notice that you even seem to ignore the intuitive pop-up list and manually type words that are in the list where a simple down arrow-return gets the code. Although you seem to handle all this typing rather fast, you could do it all three times faster with the editor.

[wuddlknuddel]

thank you!

[tashtan1]

sir, my friend had a website sample that he made him self, he used a png picture that had exploded effect and he used it as just a picture over fixed background , if understood what i tried to show u by word please can u make a short video how to place link below png picture,

[greenhawk117]

It says CS4 in the title for the video but CS5 in the description bar

[JIYkp]

Wondering, what's the advantage of using only one image and changing the position rather than using a separate image for each one?

[GregPhelps12]

@JIYkp For the sake of loading times. Using multiple images would cause the page to load a bit slower.

[JIYkp]

@GregPhelps12 Is it significant? Does this affect all image types and sizes?

So I'm guessing that using .png would be a horrible idea.

[GregPhelps12]

@JIYkp If someone has high-speed internet, it doesn't really matter how many images and videos are on a page. Still, it is good practice to optimize images to the lowest file size possible while maintaining acceptable quality.

.png is just fine... it is actually used quite often on the web.

[MrDerekH]

so what is the advantage of putting all 3 button states into one image? Why can't I just use 3 different images? This way seems like it's overcomplicating things for no reason at all.

[shakaama]

@MrDerekH yeah i couldn't follow because the video isn't perfectly clear what the original gif looks like. So it made no sense to me. I got halfway through then I understood he was just using the one image.

Was he just trying to rush a video out? I don't get it.

[FlegDesigns]

@MrDerekH Ever been to a site where you roll over the button and after a second or two an image pops up behind? This prevents that, without JavaScript. This concept works well for many things, if you want rounded corners, don't make 4 images, make one, a circle. Then position it in the div. Etc etc.

[zzTeChJoEzz]

Cool video. You have put that you are using Dreamweaver CS5 in the description, when you are using CS4. I know there is barely any difference. Just letting you know.

[emgobyron]

can I do this on cs3

[tashtan1]

@emgobyron the point is how u use ur css imagination u dont necessarily have to use dw to do this u can do this in usual note pad program, dw is just for easing the work hes showing

[FlegDesigns]

@emgobyron Yes.

[IsThisMy1ife]

ur a great teacher. Thank u

[particleproductions1]

that is CS4

[thetechall]

is that CS4 or CS5 becuase in the title it sais CS4 and in the description it sais CS5 (by the way CS5 is pointless)

[SillieWous]

thx finally i understand ul & li tags

[Hawkfire44]

what i learned is that dream weaver uses code TT^TT

[PigLvl3]

@Hawkfire44 also good :P

[Hawkfire44]

@PigLvl3 what do you mean?

[PigLvl3]

@Hawkfire44 that's great that you learned is that DW uses TT^TT :)

[Hawkfire44]

@PigLvl3 what? you think an 11 year old doesn't use emotions?

[PigLvl3]

@Hawkfire44 TT^TT is emotion ? O_o :D

[Hawkfire44]

@PigLvl3 it is... i think

[victorolsen1]

thx for this :) i am gona do this on my site for my exams

[middelpatt]

i'm sorry, not verry impressive. almost the same as the horizontal navbar. with that information i think you should have been able to make this one your own.

but your other vid's are awesome!

[jcarmen2]

im on steroids

[SillieWous]

@jcarmen2 good for you

[MegaCamu]

what are you using CS5 or CS4. In the description it says CS5 and in the title it says CS4

[Haroids]

@MegaCamu They're both pretty much the same, don't worry about it. =P

[rowant1]

@MegaCamu It's CS4.

[karlisown]

first