Photoshop/Dreamweaver CS4 Tutorial: Slicing images for navigation bar

This tutorial shows how to build an ugly navigation bar in Photoshop CS4 and slice it up so that you can bring it into Dreamweaver as individual images arranged using tables for layout.

This tutorial was recorded for a web design class that I teach but I thought I would share it with the world. Audio quality is a little low for size purposes.

For more tutorial videos check out http://www.provideoschool.com

Category:

Education

Tags:

• photoshop
• slice
• tutorial
• slices
• slicing
• dreamweaver
• cs4
• table
• layout
• navigation
• bar

[NightSniper2008]

There are some points that are understood by demonstration. You don't have to spend hours talking to explain them.

[Rainhylda]

One thing that some of the newer users may need to know is to keep the hyperlink border from showing is to add: border="0" Those who won't know this will freak out.

[kicox1]

anyone know how to put a horizontal menu in dreamweaver with drop downs onto the banner???

to be specific, i made the banner in photoshop and the rest of the page but i dont want pics as my Menu i want to use actual HTML made in dreamweaver with the SPRY tool. however, it always pushes it UNDER the BANNER.. i want it on the bottom of the banner (possibly see thru, show only text) now i did manage to move it up but the drops downs are all messed up..

if youd liek to help please reply

[villaboy96]

@Rainhylda You are a fucking legend, you do not know how happy I am right now. Been worrying for weeks about the site as it has been distorted and u have given me the explanation. You absolute hero, and I'm not joking.

[BitterAspect]

APB?

[xxTechWiZxx]

@provideoschool how'd u become a youtube partner?

[Fabi2330]

@provideoschool Im just starting dreamweaver Im having some issues but I think Im just missing a step - I want to creat a very basic navigation bar I added my first one Home and when I want to add another one for Reservation Im having issues - what do I do after I have made at least one navigation link. (Home) I did tht up down over in Photoshop. How can I add more into that same space in my navigation bar. ???? hope u understand my problem.

[dougl126]

When I copy the code and look to see if everything copied over I see only empty boxes with question marks. Any ideas why the images aren't copying over? Thanks

[NubonicsInc]

@provideoschool and how did you become a youtube partner?

[rongmario]

@provideoschool are u a youtube partner? u only have 12 vids..