Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : To all you Template Customizers

[Fsiano]

Hey Guys, I started this in an older post but figured I would start it again now that I have a better example of what I am trying to get at. A client came to me with a template and I am trying to get it done right.

When the Template was outputted from wherever they purchased it, the images are placed as Backgrounds of tables, then there are table cells created over it to hold other imagery and text. Take a look at this link here.
It is a Photoshop file by the way.

http://www.findessays.com/example/example.jpg

Notice how it is all sliced up. But remember that everything is in as table backgrounds, not actual images within a table cell. They are basically a big table, with a background image ,then lots of new cells above to hold the text,etc.

How do I get it to output like this???
Anyone know? Please shoot me any pointers by replying with a post. If anyone is kind enough post your aim and I can explain it live if you are willing.
Thank you to all that reply
Frank

[X2it]

Yuk. Clients who come with templates seem to demand so much of our time I don't do it anymore. I'm assuming that pic comes from dweaver or something like that?

My advice would be, look at the html in your browser (assuming it looks right) then screenshot it and take it in to photoshop or similiar and slice it/rebuild html from scratch.

There are other ways to do it, but this way (although it seems the long way round) is really the quickest if the template is that messed up.

[bedlam]

Err. It's simple, really.

You have to have a look at the slices, and the way they're arranged. Then create an html table where the size and arrangement of the cells matches the size and arrangement of the slices.

Then make any graphics that are not interactive (not buttons or imagemaps or something) into backgrounds of the respecive table cells.

After that, put the graphics that are interactive into their appropriate cells and attach appropriate javasript/imagemap/whatnot behaviour to them.

Add content and you're done.

Fireworks can do this for you (can Photoshop? I don't actually know...) except for the content of course. But the process is not really that difficult. I'd say if you're involved enough in creating a site to be customizing templates, you're involved enough to learn html...

B

[Fsiano]

Thanks for the replies so far guys.
To bedlam, of course I know html
I have been hand coding for well over 7+ years now. I usually design my pages from scratch. But to get a page from scratch to look like the template will take time obvisouly. It is just the slicing properties. I don't want the page to be a million little boxes that load very slow. ya know.
But I guess I will just have to take the time and do as you guys said. Make graphics and build tables over them. I was hoping there was a way around it. If you took the html into dreamweaver you would understand my point. It is so clean cut that a program must have done it, or someone spend countless hours on it.
Hmm, was hoping maybe someone knows the actual slicing trick. When I slice and export, my graphics are in the actual tables, not automatically as backgrounds. anyone know how to do this?
Thanks for the replies so far guys
Frank S

[bedlam]

Originally posted by Fsiano
If you took the html into dreamweaver you would understand my point. It is so clean cut that a program must have done it, or someone spend countless hours on it.
Hmm, was hoping maybe someone knows the actual slicing trick. When I slice and export, my graphics are in the actual tables, not automatically as backgrounds.

I must not understand what you're trying to do; given the PS file so that I could determine the x & y dimensions, names and positions of the slices, that table (based on the graphic you linked to) wouldn't even take an hour to build and populate with the fore and background images... You just have to specify all of the cell sizes and pop transparent gifs into the empty cells to ensure they keep the right sizes. Unless I'm mistaken about something, that's just a single table (albeit a fairly complex one ). The graphics will probably increase the load time more than the table.

[edit:]Well, I'm a dope. that image has one big layout table and four smaller ones in it. Still not too difficult to slice & dice [/edit]

That template is not really badly designed...the only thing I'd change for sure is the green bullets (where it says 'company news'). I'd remove the cell there and insert the bullet in the main cell along with the title.

B

[Fsiano]

Hey Bedlam, I sent you a message via pm. check it out. just some more info. thanks

[Fsiano]

I figured it out !!!!!!
I was simply an extra table inside the extra table I made. It was throwing me off big time because it was copying over the same background image making it look like domino's. I just had to put the table within an extra table and remove the background image.
THANKS TO EVERYONE !!!
Frank S

[bedlam]

Cool