Percentages in Dreamweaver, Photoshop and Fireworks.

[J1mmy]

Ive been told that I should get rid of pixels when it comes to web designing, I believe this applies both to the DW table(s) and images.

Now, I know how to use the percentage feature for the tables in DW, but Im not sure about Photoshop or Fireworks, which I use to create images.

How would I measure the right size of the image, how would I know that the size of the image which I just created in fireworks will look right in DW? Are the measurements in DW and FW/PS the same? I hope what Im saying makes sense.

Okay, lets use an example...

My table width in DW is 100%. I then go onto FW and create a canvas size (width) that is 50% - Now, would the image take up half of my table in DW? If it would, would it be the same in different resolutions too?

[xconspirisist]

Those measurements and advice only apply to XHTML. When you create images, you must specify the exact size of the image in px (pixels). You could create a 100x100 px image.

However, when you design your XHTML, you must not lay aside a 100x100px div box in order to place the image in. All website elements made from XHTML are designed to be flexible to people in different situations (15" monitors, up to 24" monitors), etc. You should accept that your website is likely to look different on different machines.

[J1mmy]

When Im using pixels, the site doesnt even look right in my own monitor, and Im not confortable in knowing how hideous and wrong the site will look in other monitors. A lot of the solutions to my problem have boiled down to using percentages.

So how shall I go about the measurements, when it comes to images and the page itself?

[haveacigar]

When Im using pixels, the site doesnt even look right in my own monitor, and Im not confortable in knowing how hideous and wrong the site will look in other monitors. A lot of the solutions to my problem have boiled down to using percentages.

So how shall I go about the measurements, when it comes to images and the page itself?

Personally i go for 750px in width so that there is a small border around the outside when someone with a 800x600 monitor is looking at the site.

[J1mmy]

I think you guys are missing the point out here....

I just want to know the measurements of my canvas when creating images, should they be in percentages or pixels. If pixels, then how would I calculate this relative to the percentage of the table in DW - so that everything looks right?

[xconspirisist]

You have not read my post. Look at what I wrote in my first reply.

When you create images, you must specify the exact size of the image in px (pixels).

So before you are rude, read. You cannot specify image dimensions in percent, because the percentage is arbitary - percentage of what? So, again, You need to specify image dimensions in pixels. When you put the image on a page however, you can morph that image to be a percentage of the PAGE.

You create an image that is 1000px for example, but you could tell it to be 50% of the page via HTML (you would not really want to do this). It would turn out to be 400px on a 800px x 600px resolution.

[Graft-Creative]

I just want to know the measurements of my canvas when creating images, should they be in percentages or pixels. If pixels, then how would I calculate this relative to the percentage of the table in DW - so that everything looks right?

It's not quite as complicated as you're seeing it J1mmy - most fluid/elastic/expanding, layouts rely heavily on a few very small repeating graphics.

What you are describing, while probably possible, isn't the best approach.

You need to look at your design with a bit of lateral logic: instead of 'how can I make this stretch...' think: how can I make it appear so, by applying a repeating background.

As for images, they'll always be defined in pixel dimensions, until, if ever, SVG takes off.

Kind regards,

Gary

[J1mmy]

You cannot specify image dimensions in percent, because the percentage is arbitary - percentage of what? So, again, You need to specify image dimensions in pixels. When you put the image on a page however, you can morph that image to be a percentage of the PAGE.

By morphing the image from pixels into percentages, what changes would occur?

You create an image that is 1000px for example, but you could tell it to be 50% of the page via HTML (you would not really want to do this). It would turn out to be 400px on a 800px x 600px resolution.

Okay, Im getting a rough idea of where your coming from here...

But Im guessing with the different resolutions, my images are going to appear differently, correct? If so, this is what Im trying to avoid, I just want the images and content within the table on the webpage to appear organised and flixed, at least to some extent the way I designed it.

You create an image that is 1000px for example, but you could tell it to be 50% of the page via HTML (you would not really want to do this)

Would this becuase the image will look deformed as compared to what it should look like?

[xconspirisist]

Yes, the image will look deformed becase the webbrowser is trying to show a 1000px image in 50% of the space.

There are many ways around your problem, and web developers have been trying to get around it for years. Good design dictates that you should developer your website to work regardless of knowing the screen resolution of your users. That same rules applies to designing for people with resolutions of 320x240 and 1600x1400. You generally can accept that the average lowest resolution is 800x600, though. I will offer hints as to designing your website for these conditions.

1) This solution is rather horrible, but web designers have been doing it for years, and large websites like bbc.co.uk and yahoo(?) still do it. That is to fit all your content into 800px. You can achieve this by creating a div element that is exactly 800px in width, and letting the excess space be automatically expanded or shrunk depending on how much excess space is availble.

2) Design your website with lots of "fexible space". Look on the forums for example. The green bars that span the width of the page have a large (or small) gap between the content on the left, and on the right hand side. This gap automatically shrinks for people that have smaller resolutions, and automatically expands for people with larger resolutions. This is the perfurred method. It takes a lot of practice, but we can help you out if you are willing to learn. It does envolve, simply, specifying all your HTML element dimensions in percentages though.

[J1mmy]

Just before I look into your suggested solutions, could I just point out that Dreaweaver has a feature where it can convert the table from pixels into percentages.

Now, if I was to create an image (pixels) implement it into my page and then convert that to a percentage which will not disturp the image appearance, would this work?

...Or are you telling me that the page will look different regardless of the percentages?

I could use a div, but Im using a table as the main container, would there be any difference.

[xconspirisist]

You cannot convert an image from pixels to percent, no more than you can convert 100 miles into 100 days. It does not work like that.

I can understand that you are having significant difficulty grasping this concept, perhaps if you tried to show us what you currently have and then explain in detail what you would like to achieve - we could better explain the processes that you can go through in order to accomplish that.

[J1mmy]

I havent really come up with anything yet, but this question came to mind when I started to find it difficult to create the right sized images for my page. Let me explain.

Lets say I created a width of a table, the width of the table is 100%. I want to create multiple images which will be placed along each other, in a row. Now problem arises when I insert my last image and there isnt enough space for it, OR theres extra space at the end. If there isnt enough space for the image, DW will automatically adjust the table to make it fit at the end of the row.

This is where I want to try and find a way where I can use some sort of scale where I can create the images and calculate it so they fit exactly on the page within the given width of the table.

A few examples, take a look at this website, http://www.webfusion.co.uk/
Now, in the middle of their homepage, how did they know the right measurements for those boxes? How did they know what size to create their images at?
Furthermore, look at the collection of images below that, they all fit in perfectly regardless of them being different sizes.

I hope the above information provides a better understanding in regards to the problem at hand.