Help with webiste to fit screen resolution on every computer

[Elisa74]

I have followed all tutorials and now have started over. I have finished my webpage in PSP, I think. After looking at other webistes including yours they all fill my screen. Which is a 17 in screen. How do i make my website do that. I made it 960x610 per your instructions but i would like it to look like others when i view them. I dont want to slice and transfer to dreamweaver until i know that i have it right.

Thanks
Elisa

[MichelesPaintShop]

Welcome Elisa,

Making a website so that it will fit most screen resolutions i.e. 800px and up would require a "fluid" made website.

MPS main website is a fluid website. It was made with layers... aka <div> and CSS.

Can you tell me a little more about what software you're using other than PSP? Are you using Dreamweaver?

Do you still have the PSPIMAGE of your work? If not you can use the sliced up pieces and merge them.


Basically when making a fluid site you design in % and not so much in set px sizes. Example. You make a box and set it at 850px wide. It is stiff and stuck at that width.

Make that same box at 100% it will always be 100% of the size it is being viewed in. However, there is one little problem Lets say the viewer can only see no wider than 1024px. A problem will turn up when you place a 1200px wide image into that 100% box when someone is viewing it at 1024px. Why? Because the viewer cannot go over 1024, but the box WILL go over 1024 to house the 1200px image.

This is basically what is happening to your fixed web template. To design we design in either Fixed or Fluid. Example if your website was designed at 920px wide, viewers at 1024px might see it just fine, but those on the older 800px will have to scroll to the right.

So, what does this all mean? This would mean a redesign so that the site is fluid.

We can have a 100% box, but in that box we might want to have a left sidebar. That sidebar will get set to be only 15% of the 100%. Lets say we also want to have a right sidebar so we set that also at 15%. Those two sidebars =30% ... 100% - 30% = 70% left over.

We can set the center content area to be 70%. Give or take a bit for margins, borders.

I know this all sounds a bit confusing, but when it is put into action things start to come together.

If you have Dreamweaver ... please let me know what version you're using.

Michele

[Elisa74]

Thanks for helping me Michele

I am using Dreamweaver CS3. I have redone my website 2 times. I am at the point where I was just getting ready to slice it, but I had the feeling that I needed to do something else to get what I wanted. Just not sure what. So this is what I want. This is just a random site but i dont know how to explain it to you.

http://www.cotr.tv/

On this site the background and the header and margins always stay the same on all of our computers. My site I did following your tutorial and I think i need to do it different, right. I am a fast learner but most of this is new to me. Hopefully you can head me in the right direction.

Thanks your great
Elisa

I went and read about fluid and static. So point me in the right direction, I like what i have in the static one i made. Can i go back and just make the banner, side bars, etc in PSP and then put them into dreamweaver at the percents.

[MichelesPaintShop]

Great

The website you showed me would be very easy to make. I can show you how that website was made and then you can edit your design to fit the style. As soon as I have a free moment this evening I will record a tutorial. I'm not sure if it will be up late tonight as I have to edit the video quickly. Hopeful to have something up by tomorrow.

Hope it helps

Michele

[Elisa74]

thank you so much, you are so gracious. Your tutorials are amazing.

Thanks Again
Elisa

[MichelesPaintShop]

Hi,

Just wanted to let you know that I didn't forget. I'm working on it. I had to take off for a few hours this morning to run my husband to Doctors. I'm back at it after I had to add a new page for a new release from Corel. So, with that said and after a hectic morning here I am (I think LOL) ...

Since I've had a few hours of lost time here I will just continue to make it as a quickie for you so please excuse

Michele

[Elisa74]

Thats okay, I am sorry that your husband is sick. Where will i find it when its done. Thanks again, your website is great.

Elisa

[MichelesPaintShop]

Hi,

Sorry for the delay as I underestimated the time for the tutorial, and didn't expect it to take this long.

For everyone that has been waiting ... here it is and I truly hope it helps in someway
Please note that the tutorial is large in file size so it may take a few minutes to load on slower connections.

Good Luck!

Fluid Website Design Paint Shop Pro

[Louanne]

Wow Elsia,

Your site looks great! Makes me want to pitch Expression Web and purchase Dreamweaver.

[MichelesPaintShop]

I adore Dreameaver. I use it on a daily basis along with Paint Shop Pro. Michele's Paint Shop was made ONLY with Dreamweaver and Paint Shop Pro.

I've tried several other web design software ... wasted so much money on garbage over the years. Dreamweaver paid for itself in the first month for me ... not to mention I kept my hair because I stopped pulling it out LOL

Would love to see your site

Anyone else reading this that is interested you can review Dreamweaver at their website.
Try Creative Suite 4 Free!

[chatty]

Thanks for helping me Michele

............... I am a fast learner but most of this is new to me. .........

Congratulations! Your site looks fantastic.

I only dream of the day I can get my site up to par. Am I correct in that the Dreamweaver $399 program is the only price available?

[WxGuesser]

I only dream of the day I can get my site up to par. Am I correct in that the Dreamweaver $399 program is the only price available?

No. I'd suggest taking a class in beginning Dreamweaver at your local community college. Then, with your student ID, you can get it for as low as $109 either at the college or from several different places on the Web. In fact, with student/educational discount you can get the Whole CS4 Suite (normally $1100+) for $399! Nearly 75% off!

With the cost of the class the total cost might approach what what Dreamweaver costs without the discount but you do get instruction, but I'd think that the class and Dreamweaver for less than the list price of Dreamweaver is a bargain.

Unfortunately for me, all the classes offered in the metro area are during my working hours; and since skills in Web Design are not part of the job requirements for a cable guy, the company won't give me time off to go to classes

BTW: You don't have to take a Dreamweaver class. You can take any class, just so long as you can get a student ID. A one hour class in basket weaving will work.

[chatty]

Excellent advice, WeatherGuesser. The state university is in my town. I should have checked there before buying anything graphic-related. Students get discounts on just about every program like that. Thanks for the tip.

[WxGuesser]

Glad to be of help