Tabbed Navigation Bar: Dreamweaver Tutorial!

[joeygart]

I like every aspect of your video, it is so detailed.

[spritz0812]

Thank you so much for this video! I love it.

[himanshu097]

css se kar chutiye

[garrettbowser]

Another great tutorial. I like that you keep them as short as possible whilst at the same time siting several methods for accomplishing the same task. Well done and thank you for making this available to all of us for free.

[cuteboy0314]

great tut. sharing.

ituloom.com

[darkj3am]

This is not in CS5.......

[Lyronx]

@darkj3am so? i did it in cs5. and it worked well.

[Hysenbelliu91]

@darkj3am the video vas uploaded in 2007 dude, ofc it is not CS5!

[durrban]

Helpful tutorial. I recently switched my web host to Jonnyhost(dot)com and I can't be happier! Check them out!

[BitterAspect]

@MADE4Y0U no, cunt.

[salzahrani]

Thanks alot... it is really helpful

[chicagoizbeast3]

Will it center itself on all screen resolutions or will it be crooked?

[Pjam2006]

i can't make my navigation bar horizontal.. there is nothing after the down image initially

[visuals4you]

What are "Vactions"? ;)

[tapdance4]

Loved the video. Thanks for sharing you expertise. Been trying to figure out for ages how to make the navigation bar. Did you create the buttons in Dreamweaver too?

[dazmont13]

In CS 5 I mean...

[dazmont13]

Hey i need to ask. I have a problem. How can i edit every each buttons? For expample what if i want 'home' button to have itself background, the same for other buttons. How to place background to each buttons? Plz HELP

[DipitzProductions]

did you use dreamweaver to make your website? if you did or didn't can yo tell me how you made yours?

[lukegoh13]

if you spent more time on the tutorial you would actually find out tat the tabs dont stay down when the new page loads - such a shame this tutorial doesnt even link the buttons to find this out

[iiPeRSoNaLii]

@lukegoh13

Why would you want that on your page? It looks stupid.

Besides it does, if you check Show "Down" Image initially...

[horracio]

tanks! tanks! :)

[Kalpspras]

Thnx TheKdac...i realised it right after I made my comment. Thnx again for your answer....you just confirmed wat i did was right.

[shakaama]

I'm amazed tutvid has such a horrible video up. 105k views, so people want to see this, but we can't see anything in the video. such a shame.

[Kalpspras]

I agree hez good.But the element names dont display. Is there something i missed in the tutorial??Help

[TheKdac]

The element names don't display on the button they are just a name. You have to make the button in photoshop and have the text added to the button already.

[teakz89]

tutvid has very good helpful tutorials. I like how this guy explains so well and clearly.

[ekethump21]

another great video, but no names are coming out on my tabs, ie, home etc..they all just have the image/color, but no words :-/ Did I miss something...I inserted id's for all of them as I went along, its just not showing?

[embeebutterly]

@ekethump21

what i do is create the BG image and text as 2 layers. then as you change the colour, save each .gif. when you move on to next tab, just change txt layer

[zaire87]

@ekethump21 ofcourz theres no txt showing on ur tabs bcoz f u make tab images you hav to include d txt i.e home into tab image.. otherwize u wil leave it empty just a pure image of tab.

[RobinMoviesOffical]

at &fmt=18 behind the URL for HQ. Thanks BTW!

[decus69]

Cant see shit

[FredStarsVideos]

@decus69 lol

[coolbro06]

Poor video quality, can't see it very well when on full screen. :(

Shame since I really need to watch this.

[pogi1100]

@edaaaaarz

Click on the image in dreamweaver and look down at the properties panel then set the border to 0. Or if you wana just make a new CSS rule that has a 0 border class so that you wont have to manually do it everytime.

Great vid!

[edaaaaaaaaarz]

when i preview it in browser, then terrible blue stroke show's around button, after it's pressed. How to remove it ? Thanks

[outlawz1351]

You have to apply a CSS rule for links within that dig tag.

[forreforre]

Halway into "[CSS] How to build a simple website using dreamweaver" he's explaining how to apply a CSS rule that prevents borders around your inserted tag/img.. check it out

[pacotillo200]

Che ,sos coya.... no reniegues de tu pais,que tan bien le hace a latinoamerica ,son uno de los pocos paises que respetan su tradicion y vos no estas afuera de ello...chau coyitaaaa...!!!!!jejeeeee

[welshdragon2008]

confusing...

how did you create ur buttons.png images?

or maybe u have a tut on that?

[cwmhyfryd]

Hi

png images (buttons) can be created using either Adobe fireworks or Adobe photoshop.or other any image creating software with a png extension and then imported into Dreamweaver.

[Raidel007]

nice video....thanks!

[hulagun]

Thx for the video. I like the tutvid site, too.

[starkmachete]

you can also just use a simple dhtml script in an html editor for this task. creating the images is the hard part

[goranification]

hello, i have a cuestion, how can i make to when i pres a button of the navigation, make me go to other website?plzz help me, or make mi go to other where than i design.

[MihaiAlexandru92]

How do I add text to the nav bar?

[oops148]

yo dude do u work for people making websites...w0oot that cool..i wish i culd do that-watching ur vids

[gracekz7]

yooooooooooooooooooo

[evildwarf100]

where is the navigation bar...

[willyg1313]

how do you make the bottom navigation bar? with stuff like ABOUT US, or CONTACT US?

[farfarawayfromyou]

use a nother softwear, like photoshop. And if i don't whana download photoshop just for 1 buttom, then use paint x)

[sweetsword]

Great! How do you centre the nav bar?

[Tuzaflip]

Can I change a Navigation bar made directly in a template?.. cause I tried to change the "down" button in one file made from a template and I couldn't :(

[icu8319]

luv the vid! keep them comming :)

[snaggypaggy]

Also where did you get the buttons please?

[icu8319]

he made them in illustrator

[snaggypaggy]

Can i ask is the website your showing at start/creating nav bar on HTML? I'm pretty new and when I open dreamweaver it gives me all the options of what file format I wish to create my new document in..

[Likota1986]

Thanks so much, very usefull

[Trinbagowarrior]

We've done some pages etc...but we don't know how to connect the link to the various buttons...example...we did buttons for the home page, contact, videos, photos etc...but can't navigate to them using the buttons. I know this is prob a lot of work, but we really need all the help we can get.

thanks in advance..

[iia33ii]

wait so basically your sayig you need the buttons to link to the pages? cos if u do then its easy if it is the get back to me ill tell u how

[vapren]

good boy! :)

thanks!

[52MRT89]

do you know how to create a guestbook in DW?

[AdobeTutorialMan]

thanks really helpt

[Ipleadthefizith]

I just want to thank you for all of these tutorials, I learned everything I know about dreamweaver and a lot of what I know about Photoshop from you. Thanks a million.

[curmudgeonn]

today when i was walking home from karate class i slipped and fell on some ice hahahahahahahahahaa

[Superstes1]

they are saved as .PNG format

[willyg1313]

are the images he's chosing saved as gif or jpg or gif

[samscouto]

Can anyone tell me what is the best program to record this type of presentation. I just have to do an presentation like this to an website and i dont know wich program is the best.

Thanks!

[rpaslux]

i heard ( have read ) of camtasia. It's sorta like "fraps". the only difference is that fraps is usually used to record games and camtasia is used to record everything else you do in your screen. They are sorta like printscreen in video format ( if i made myself crystal clear. )

If camtasia does not work then ask anyone else. I know only of those two applications ...

[Murlo0c]

try CamStudio

[DigitalEgypt]

Try adobe captivate

[SerbianCobra]

he sounds sick or like he just got up :D

great tut as always

[cricotech]

he kinda maked it difficult

[farouk545]

where do you get the images from .... newbie : )

[atiamiyu1]

you must create them yourself in photoshop

[farouk545]

where do you get the images from : ( newbie

[farouk545]

great tutorial but where do you get the images from

[farsan25]

thank you so much

[thazoh]

Oh My goodness! Dude, you just made my life a WHOLE lot easier. This is the first comment I've ever given for the 3 yrs. I've been on youtube.

It was that informational. Thanx, I'm a full supporter of tutvid now.

[fanfoon29]

how can i get or make images for each tab like the over and under images

like for example the home button, is there a specific site that will give you them?

[gamerfreakUK]

Just make them in an image editor. The colour for the button background. Add a foreground colour as well if you want a gradient. Then add the text onto the image and save it as .gif.

[54spiritedwill54]

You do a really great job

[Anas786]

you you have any tutorial on creating layout for beginners?

[spenegdt]

I'm learning a lot from your awesome tutorials. I was wondering if you could make a tutorial on how to implement a poll section where people can vote? Keep up the good work.

[Chobley]

Great thanks...again learned something for my site!

[ChachiDGr8]

Great tut! I had been trying to create each button individually... duh. That little detail makes a big difference.

One thing I noticed in playing around with this: You can't change the size of the individual "instances" if you want to be able to align them horizontally in Dreamweaver later. Sometimes the pixel sizes seem off by one pixel, but leave them alone. When you export, they'll all be the same size. :)

Thanks again for the tut!

[Flightsfromvreny]

Great tutorial! Thank you very much :)

[Coco1284]

I made it up to where you click "ok" and it apears good exept the names!...only the button image...

can anyone tell me what i did wrong??

(excuse me if my english are wrong..)

[TheRandomAlex]

"dreamweaver doesn't have to upload the ovary..i mean..etc)" lol...and UGH ok the program is good (ui havent download it) but because you never explain the linking part. Like ok you make a HOME button then what you soppose to type for the link, where the heck are you going to upload this page you made? does it become a website for free after you done editing it or what? is it just a page you make for a site you paying for...i dont know!.

[AlphaHunters]

thanks a lot!!!!!!!!!!!! you are so good!!

[runeinator]

Can you make a verticle navigation bar?

[dtvscrotes]

If anyone knows where to get buttons for the navbar plz respond cuz i dont wanna make buttons . I tried and failed lol

[powerpointalert]

There is a sitecalled cooltext where you can create and render buttons for free!

[feedthefitness]

This was good, very simple to follow, thanks again!

[dtvscrotes]

Where do you get the images for the buttons. Plz respond.

[knotleftb]

He said he made them...

[zipperator]

Great video! I just made one.... Is there a way to copy and paste into my other pages?

or do i have to make one for each page? Thanks

[Peteioz123]

where can i get the images???

[laptopsoundsystem]

if you go to the flash buttons icon, they are inside that. lots to choose from!

[polmoldovan]

the best vactions :)) very good tutorial though

[praslisa]

Thanks a lot !! you helped me a ton !! :D

[michaelvialpando]

"home button" (1:30)

lol sounded cool when you said it. kinda funny :D

lol home!

thanks for the vid!! do you have a vid or two about the VERY basics? lol im learning all these really cool things from you, but i kinda dont really have a basic foundation about my knowledge about dreamweaver. THANKS!

[death2u886]

where can we get the nav buttons off the internet? Msg Me

[neha301977]

Great video again! I am gonna watch all of your videos. Thanks a lot.

[Domthy]

i have done my whole site on dreamweaver, but now what!

How do you publish it?!!

[fafabolls]

tutvid is the best adobe tutorial :) these videos taught me alot about photoshop and dreamweaver. :) thanks!

[jaaano80]

I'm wondering about the source code it generates, pretty sure it's full of crap

[AuroTurtle]

dude you noob! everyone knows this! idiot!

Lol nah im just kidding =] thanks for all your videos dude! your the best! 10/5

[obefiend]

thanks. you tuts are definately the best in youtube!

[oxide2007]

You do a really great job, not just with the videos, but I like the artwork & sites you do. Keep up the good work.

[Yankeestonk]

Wow, how cool was this?! I spent all morning paying for help through Adobe and got absolutely nowhere! Two questions I hope you can help with. ( PLEASE!) How do you create "the space" over the page to click where you want the bar. ( my page is all the way to the top of the screen.) And how do you know exactly what size to design the images for the tabs? Thanks so much! Do you work over the phone on a particular problem with Dreamweaver for pay?

[monsta3000]

i love u

[Lypur]

this is a GREAT help, i'm on youtube as well, I currently have 2,700+ subscribers, I teach piano videos online and I'm wanting to build a site, I already have a domain name and a host, but dream weaver confuses the heck out of me....but sadly i don't know anyone who could help me out. So I'm just going to have to learn dream weaver from you! :D I really appreciate what you've done! I think sort of can relate to how people feel when they watch my videos now.

[SanDiegoHomeTour]

Thanks Great Video

[curtismarley4200]

Love what your doing Tutvid..You are inspiring..

[dudeyfuk]

lol u sedvactions instead of vacations :) but nice vid i actually learnt summin

[tutvid]

Ooh...yea I just noticed that. I am the king of misspelling, don't worry about it ;)

[blitzertam]

And I just paid 100€ to take courses for Dreamweaver when I can learn it from tut vid ..

[millsathn]

shit..unlucky man

[Doenerlover]

can i then upload it to my webspace ?

[ninjalike]

Thanks these are great !!!

[YoungThug16]

can you do a layout in dreamweaver for myspace??

[MLH0OF]

nicccccccccccce

thank you man this web is very nice place i chek it ...

[SmaLLNoOb1]

Another question, let's say my navigation bar is bigger than my Headbanner, how do I resize the whole table, and not just button by button?

[BBxSD]

My best guess would be to hold ctrl and select each button... I would have to try myself, but thats usually how it works... Or select the first button, hold shift, and select the last button... Then, normally, you will have every button selected, and you can expand the total selection!

[SmaLLNoOb1]

When I do this, the bottom option asking me for veritcal or horizontal isn't there, and it sets them vertical automatically.

Please help

[lefkytheshin]

Just curious, what program did you use to make the nav. bar buttons?

[tutvid]

I used Photoshop, although you could make the same exact thing in Fireworks or Illustrator.

[photoshopmama]

Nice video and nice voice, too!

[rawtunez]

Is this CS 3 ?

[tutvid]

No, this is Dreamweaver 8

[ekamil88]

I love your tutorial. can you zoom the video. thank you <33

[smcorrea]

very helpful thx