Made a layout and sliced it but...

V-P · July 2006

So I made a layout in Photoshop, and I even sliced it, but I don't know how to add text to it so that it can be changed via Dreamweaver. If anyone could help me out with this, please let me know. If you need the layout to do it, I'll e-mail it to you or if possible, attach it in a PM. Thanks in advance for the help!

RWB · July 2006

Depends on how you're designing it...

If your going to use tables, which I think splicing and exporting as HTML in PS does, then you'll want to use the images as background images in their cells. This will allow text to be typed in over the image during the coding process in Dreamweaver

V-P · July 2006

RWB wrote:

Depends on how you're designing it...

If your going to use tables, which I think splicing and exporting as HTML in PS does, then you'll want to use the images as background images in their cells. This will allow text to be typed in over the image during the coding process in Dreamweaver

Well I think you're right about the tables part. If that is the case though, I need help setting the tables up because I'm use to Frontpage's Absolute tables, which I want to avoid at all costs because it creates too many problems when you resize, etc. So I want to make it so that some slices are always centered, while others are tiled so that people can resize the browser. I'll put the HTML in that Photoshop made.

[PHP]
<html>
<head>
<title>Prototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="968" height="1213" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="5">
<img src="images/Prototype_01.gif" width="58" height="1089" alt=""></td>
<td colspan="3">
<img src="images/Prototype_02.gif" width="848" height="489" alt=""></td>
<td rowspan="5">
<img src="images/Prototype_03.gif" width="62" height="1089" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/Prototype_04.gif" width="274" height="600" alt=""></td>
<td>
<img src="images/Prototype_05.gif" width="487" height="82" alt=""></td>
<td rowspan="4">
<img src="images/Prototype_06.gif" width="87" height="600" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Prototype_07.gif" width="487" height="324" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Prototype_08.jpg" width="487" height="58" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Prototype_09.gif" width="487" height="136" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/Prototype_10.jpg" width="968" height="62" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Prototype_11.gif" width="58" height="62" alt=""></td>
<td colspan="3">
<img src="images/Prototype_12.gif" width="848" height="62" alt=""></td>
<td>
<img src="images/Prototype_13.gif" width="62" height="62" alt=""></td>
</tr>
</table>

</body>
</html>
[/PHP]
I have some other problems which I'll address as soon as I get this setup. Thanks RWB!

RWB · July 2006

So did you figure it out?

Use the background="" tage in the tables.

Also try giving the cells per image the size of each image, this will allow the tables to adjust themselves while loading, just kinda makes it look better when loading IMHO.

EDIT:??
Err nevermind, the images already had them :P

EDIT AGAIN!!! If you do use the images in teh background, youwill need to put those sizes into the tags for the tables LOL, mybad.

V-P · July 2006

Doesn't that make it so that the text is just floating on top of the "background"? Then if it was opened in a different browser or something, couldn't the text be misplaced (for example, if I float it above the content box, and if formats differently, then couldn't it show up outside the box or something?)

V-P · July 2006

Can someone help me out and slice and put my layout in dreamweaver so that I can add content and such. I know that this could be time consuming but I've tried to google and google, but I keep finding slicing tutorials that slice very differently from each other, and they don't show how to set it up in dreamweaver. BTW, dreamweaver or frontpage is okay, so if you're willing to help let me know and I'll send you the layout.

RWB · July 2006

Ygpm

V-P · July 2006

RWB did you get my e-mail?

RWB · July 2006

erg, I just got it, I was checking the wrong email account. I'll get'r done.

V-P · July 2006

RWB wrote:

erg, I just got it, I was checking the wrong email account. I'll get'r done.

Don't worry about it, take your time.

RWB · July 2006

I tried working around it for you, but I think it would best best if you fix this.

The slices are pretty crazy.. some are way off and don't make sense. Such as the header slice which takes up half of the two boxes below it... and becuase it's all flattened it makes it hard to build in such a way that you can add content at a later time. But I'll email you what I have so you can get an idea of what I mean.

V-P · July 2006

RWB wrote:

I tried working around it for you, but I think it would best best if you fix this.

The slices are pretty crazy.. some are way off and don't make sense. Such as the header slice which takes up half of the two boxes below it... and becuase it's all flattened it makes it hard to build in such a way that you can add content at a later time. But I'll email you what I have so you can get an idea of what I mean.

I have a non-flattened version, which is what I thought I sent you, but since I didn't I'll send it to you if it's easier to work with.

V-P · August 2006

You still there, right RWB?

RWB · August 2006

Man sorry, my schedule changed at work, I do overnights now and I am sleeping all day for some reason. I should have time at work though here to do some stuff...
I should have it done tonight if I don't pass out at my desk :P

RWB · August 2006

It's still in the works, but here it is...

http://www.fusion-dm.net/scar/index2.html

This is what I have done so far...

So... yeah. The main menu is bad right now. Trying to find a way to have the main menu work the way I think would be best.

Check it out... hereis the site with no CSS...
http://www.fusion-dm.net/scar/index3.html

Notice the site works just fine, just no good looks and no images. All the info is there including the header info and the like... Also notice the menu is all words, using css I've hidden the words and exchanged them with images. But this cuased issues with making them buttons. It works fine for the header "Exploring the Unknown"... but I think it might be best to turn those menu links into flash objects which I think will fix that issue plus give you rollovers alot easily. Or other nifty effects.

Here is the menu the way it was supposed to be :P
http://www.fusion-dm.net/scar/index.html

But it's basically there... I hate using tables... with this design you can change up the layout more easily.

V-P · August 2006

RWB wrote:

It's still in the works, but here it is...

http://www.fusion-dm.net/scar/index2.html

This is what I have done so far...

So... yeah. The main menu is bad right now. Trying to find a way to have the main menu work the way I think would be best.

Check it out... hereis the site with no CSS...
http://www.fusion-dm.net/scar/index3.html

Notice the site works just fine, just no good looks and no images. All the info is there including the header info and the like... Also notice the menu is all words, using css I've hidden the words and exchanged them with images. But this cuased issues with making them buttons. It works fine for the header "Exploring the Unknown"... but I think it might be best to turn those menu links into flash objects which I think will fix that issue plus give you rollovers alot easily. Or other nifty effects.

Here is the menu the way it was supposed to be :P
http://www.fusion-dm.net/scar/index.html

But it's basically there... I hate using tables... with this design you can change up the layout more easily.

Thanks for putting so much time into this. It turns out we're changing our topic to something computer-related, so that header probably won't work out, but I think the rest of the layout will be good. Also, I'm hoping to learn how to setup different layouts from the files you send me. But yeah, thanks

for your time. I was just wondering because I hadn't heard from you in a while.

RWB · August 2006

Yeah they changed up my schedule becuase the new guy complained about his shift.... grr... and next week they're doing all new shifts again. It's damaging my sleeptime.

I tried noting alot of the areas so you can duplicate them more easily. I'll send you what I have soon

V-P · August 2006

RWB, I just looked through all the code you put together, and I think I got most of it, except for the menu. I can't figure out why everything in the menu is there twice. If I delete the HTML part of the menu, there's nothing there, and I'm not good with CSS yet, so I don't want to delete random things from there. I'm making flash buttons at the moment so they should be ready in 20 mins or so.

RWB · August 2006

Dunno what you mean by twice... the only thing I can think of is how I have the links currently...
[PHP]<li class="home"><a href="../index.html" title="Take me home daddy!" target="_self">HOME</a></li>[/PHP]

If you do the links in flash, then you can remove the following...
[PHP]<a href="../index.html" title="Take me home daddy!" target="_self">HOME</a>[/PHP]

But leave the HOME... So now it just says:
[PHP]<li class="home">HOME</li>[/PHP]

Then you need to update the info in the CSS... in this case the class is "home"... [PHP]#main_menu li.home {
background-image: url(../images/menu_home.gif);
background-repeat: no-repeat;
text-indent: 25px;
height: 20px;[/PHP]

This is the current CSS... if you were to name the "home" link done in flash the same way, then the section you change will say:
background-image: url(../images/menu.swf);
[PHP]#main_menu li.home {
background-image: url(../images/menu_home.swf);
background-repeat: no-repeat;
text-indent: 25px;
height: 20px;[/PHP]

I hope it all works out, I admit I am behind on this stuff so I am paying for it now lol.

V-P · August 2006

RWB wrote:

Dunno what you mean by twice... the only thing I can think of is how I have the links currently...
[PHP]<li class="home"><a href="../index.html" title="Take me home daddy!" target="_self">HOME</a></li>[/PHP]

If you do the links in flash, then you can remove the following...
[PHP]<a href="../index.html" title="Take me home daddy!" target="_self">HOME</a>[/PHP]

But leave the HOME... So now it just says:
[PHP]<li class="home">HOME</li>[/PHP]

Then you need to update the info in the CSS... in this case the class is "home"... [PHP]#main_menu li.home {
background-image: url(../images/menu_home.gif);
background-repeat: no-repeat;
text-indent: 25px;
height: 20px;[/PHP]

This is the current CSS... if you were to name the "home" link done in flash the same way, then the section you change will say:
background-image: url(../images/menu.swf);
[PHP]#main_menu li.home {
background-image: url(../images/menu_home.swf);
background-repeat: no-repeat;
text-indent: 25px;
height: 20px;[/PHP]

I hope it all works out, I admit I am behind on this stuff so I am paying for it now lol.

Okay, I got it. Thanks.
On a side note, I'm learning cinema 4D at the moment, and it's amazing. It's like maya, but it's much, much easier to work with.

Made a layout and sliced it but...

Comments