Redesign In Dreamweaver

[ori]

I'm a newbie here. I found this forum the other day while investigating font issues. It was very helpful! So, I'm back with my own question.

 

I designed a site with Fireworks and Dreamweaver and wanted a layered look to the text. Here's a link to show what I mean...

http://www.broadreachcp.com/index.htm

So, see how the "About Us" is a graphic under the body text? Is there any way to do that kind of layering of actual text or a mix of graphics and body text strictly in dreamweaver? Right now all the text for this site has to be graphics and everytime I edit it I have to return to Fireworks and take it through a long process to export it to Dreamweaver and get it up and online.

 

Thanks for any advice in advance!

[TCH-Andy]

Hi Ori,

 

Welcome to the forums.

 

You can use a table structure (in the same way that Fireworks has) and define a background image for the cell. Then place the text into the cell. You will need to specify the padding correctly to get the effect you want, but it should be fine.

 

The alternatives would be to use layers, or CSS and position the graphic that way.

 

There may be other routes (I'm sure someone will let you know the ones I've missed) but those are my initial three thoughts of ways to do it.

[ori]

ooo, thanks for the quick response. I'll look into those. Speaking of layers, I just played with layers and this is what I ended up with...

http://www.broadreachcp.com/contactTest.htm

It seems to be pretty unpredictable on my Mac in different browsers as far as where the layer ends up. Also, it seems to slow down load time considerably.

 

Thanks for the other ideas. I'm new to this world and welcome the help!

[TCH-Andy]

You will need to define everything in the same system....

 

At the moment, you have the main table defined as 700 wide, and centred in the page. However, you define your layed text as an absolute position from the top left corner. Hence, it looks fine if someone has a window 700 pixels wide, but not if it is any different. Which is why I would probably start by using a background image to the table cell - as then it is in the same place, wherever the table is centred.

[TCH-Rob]

Welcome to the forums Ori.

[TCH-Thomas]

Welcome to the forum, Ori.

[TweezerMan]

Welcome to the forums, ori!

[TCH-Bruce]

Welcome to the forums Ori

[surefire]

CSS positioning would eliminate all those spacer gifs and give you the background image you're looking for... with much less code and work. Even if you didn't go with pure css and used a basic two column table for your layout you could save yourself a ton of time with CSS.

 

But the more you use CSS, the less you can depend on the preview pane of Dreamweaver (or any WYSIWYG software) to show you what the site will actually look like.

[abinidi]

Just for your information, here is what I see in Firefox 1.0.4 using Win XP:

 

 

If I were you, I'd follow one of the other suggestions in this thread and avoid layers -- especially if you are going to center your table. (Now if you were to use a left-aligned page, then layers would work okay.)

 

Good luck. Let us know how it goes.

[ori]

Thanks for all the welcomes! Yes, I think it's time for me to dive into CSS. I've used it a bit for defining the look of text links, where I don't want an underline and want specific font/color etc. That's it though. We'll see how it goes.

 

One quick thing about using a table with a background layer. I'm getting a repeating, tiling effect with the bkgd image. Does that image have to be the exact dimensions of the table with padded white space, or is there a way to specify that I only want the image to show up once in the upper left corner?

 

Here's what I mean,

http://www.broadreachcp.com/contactTest2.htm

[TCH-Don]

Welcome to the forum Ori

 

With stye you can do all that by using style class for the table.

 

 

style.css

>body.{
background-color: gray;
}

table.demo{
border: medium solid white;
background-color: silver;
background-image: url(image.jpg); /* image is 300x225 */
background-repeat: no-repeat;
background-position: 0% 0%;
width: 400px;
height: 300px;
}

 

 

html

><table class="demo" cellspacing="0" cellpadding="0" >