Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background pic created in Fireworks, What Canvas size?

Status
Not open for further replies.
mldmld

mldmld

Technical User
Jul 22, 2003
95
US
I create my background images for web pages in Fireworks. What canvas size do you use, so you will not have to scroll left to right when I put the image in Dreamweaver.

How do you set the web page size in Dreamweaver, so it looks good in all screen sizes, ie. 800X600, 1024X768

I would like to use Fireworks to make the backgrounds for my work in Dreamweaver.

Is this the best way to make a background to be used in Dreamweaver.

I am new to Macromedia, appreciate the help.
 
Sort by date Sort by votes
What kind of background do you intend to create?

I normally make my backgrounds in Fireworks, but I heavily edit the product Fireworks creates. First, I segment it (still in Fireworks), then optimize individually, and I tend to create the structure with those segments from scratch and not to using the Fireworks table model - I'm way more flexible like this. Using CSS for positioning is also a good idea, and it helps you keep your page size down.

If you look at my own site, I used just that technique, with only two source files (one for the left and top bar, one for the sheet-like post backgrounds). I then placed the graphics in <div> elements and placed them in an external CSS file. Dreamweaver can do that for you, too.

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Oh, and regarding the canvas size. It's always a good idea to have users with 800*600 screens in mind when designing a web page, there's amazingly lots of those ancient things around... however, it's also a good thing if your design scales nicely and still looks good with higher resolutions...

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
As small as possible, and scalable. You can even use several layers (that would actually be a good idea here) - one for the background and one for the border. In the border layer, have some gradients but not too many and create images that you can repeat for the rest. Like this one (it's to the left of my site, as a background for the <body> tag) or this one (which is on top of my page, in a <div>):

Code: 
<div id="top"><img src="media/design/top.jpg" width="20" height="54" alt=""></div>

And then, in the CSS file...

Code: 
#top {
 	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	z-index:1;
	background-image:url(media/design/top.jpg);
}

Like this, you can create layouts that look good in any resolution. (Actually, the IE renders this a little incorrect though, but if you have another <div> you place all the way to the right, this should be no problem).

Then, the gradients - you can simply overlay them, in additional <div>s, with images like this one.

I hope you see what I mean, otherwise feel free to ask again. I know, that's not the easiest way, and you may want to look at a CSS tutorial, but it's really flexible and the way to go on your way to become a pro. Unlike me. I'm not a pro yet. Still using tables for the layout. *mumbles on*

haslo@haslo.ch - www.haslo.ch​
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Foxy61
  • Locked
  • Helpful tip
Photoshop styles in Fireworks 1
Replies
0
Views
307
Foxy61
Foxy61
veropcnet
  • Locked
  • Question
Fireworks MX 2004 download?
Replies
0
Views
314
veropcnet
veropcnet
sidalam
  • Locked
  • Question
created buttons in Fireworks which I want to put in Dreamweaver
Replies
1
Views
320
phinja2008
phinja2008
gpet
  • Locked
  • Question
Removing background from images
Replies
0
Views
249
gpet
gpet
chivs
  • Locked
  • Question
Making Text Clear in Fireworks 1
Replies
1
Views
333
tsp1lrk72
tsp1lrk72

Part and Inventory Search

Sponsor

Back
Top