PDA

View Full Version : From photoshop sliced to dreamweaver


Mark Wilson
10-31-2007, 02:11 AM
Hello All
I am totally noob to website design- i decided to try and teach myself after getting frustrated asking people to help me and continually dissapointed.
Hope you guys can help.

i sliced up my image in photoshop (background)- my navbar resides within that solid background (buttons sliced individually), these are saved - html and images.
I open the slices from the html file in dreamweaver and use the navbar menu in dreamweaver and program the different rollover states, ( all same size) they push the table out of alignment and everything becomes jumbled. I am not sure if i a doing it correctly but any light on the siutation would be appreciated.

Thanks.
attached is a small sketch

Ricky55
10-31-2007, 10:48 AM
Yeah I come accross this loads of times, you need to do:

When you open the sliced up html document in dreamweaver you need to delete the images that are there from the initial slicing, then place your cursor in the space left behind and then insert your nav bar, ensuring that your nav bar images are exactly the same size as the ones you sliced, if they aren't then the table will collapse.

I had the same issue when I did this site (see link a while back)

http://www.spenvalleykitchens.co.uk/doors_ashby.html

Thanks

Ricky55

d a v e
10-31-2007, 11:29 AM
you also need to be careful it doesn't split when you increase text size too ;)

Mark Wilson
10-31-2007, 11:56 AM
Yeah I come accross this loads of times, you need to do:

When you open the sliced up html document in dreamweaver you need to delete the images that are there from the initial slicing, then place your cursor in the space left behind and then insert your nav bar, ensuring that your nav bar images are exactly the same size as the ones you sliced, if they aren't then the table will collapse.

I had the same issue when I did this site (see link a while back)

http://www.spenvalleykitchens.co.uk/doors_ashby.html

Thanks

Ricky55

Hey Ricky thanks for the reply-
I deleted the orginal buttons as you said and replaced my "roll overs" very much like your site- by the way i like your site- simple, straight forawrd and clean, dont have to think , am how do i go here....

This was my procedure, open html- the sliced up image opens, i delete the original button- place cursor in empty space as you said and then go to navbar menu- insert navbar etc...

i then go to second button and do the same thing- delete original button insert navbar and kapoof the second button is stuck under the first and the table collapses.
hey dave text is embedded on button (complete graphic, is this not good ?)

Thanks guys

Oh by the way- this only happens when i select the navbar menu- it works flawlessly when i use rollovers- the only reason why i dont use rollovers is i have more than 2 buttons states.

Ricky55
10-31-2007, 02:48 PM
Complete graphic is fine if the buttons are doing something special, if its just text on a plain background you may as well just use a unordered list styled with CSS. If you don't know how to do this using images like I did is fine. As long as everything is saved for the web i.e. nice small files you'll be fine.

Getting back to your problem with the nav bar, email me the files if you want and I'll have a go with it.

dale_richard@hotmail.com

Email the page and the button images.

Jittor
10-31-2007, 03:40 PM
Ricky55 is on the right track, but before you delete that sliced image go into code view and copy the width and height of the image and place it within the <td columspan>

For example if you have this:

<tr>
<td colspan="3">
<img src="images/UInterface_v7_01.jpg" width="779" height="137" alt=""></td>
</tr>

You would change it to this:

<tr>
<td width="779" height="137" colspan="3">
<img src="images/UInterface_v7_01.jpg" width="779" height="137" alt=""></td>
</tr>

This will keep the table from expanding or breaking apart. The only down fall it this keeps it at the width and height, but it works well for buttons, graphics , and fixed text, but if you need the column/table to expand it will not.

Ricky55
10-31-2007, 03:56 PM
or you can type this in the property bar this is a good tip to prevent tables from collapsing in a few different situations.

Mark Wilson
10-31-2007, 05:31 PM
ok i am going to give this a try- as i said i am very new to this all so its going to take me some hours.

I really appreciate all the fast responses- you guys are really helpful- wow.

If i fall flat on my face and set fire to my hair, well actually before then, i will email you Ricky- many thanks.

1