Author Topic: designing a website...viewable in all resolutions?? (Read 1903 times)

hulkster · « **on:** September 19, 2007, 10:57:21 pm »

im designing a website, and im trying to make it so that its viewable in the main resolutions (800x600, 1024x768). im using frontpage (yeah i know but its what i got) but i cant for the life of me figure out how to make the site look good in these two resolutions. i know its like a percentage type thing, but i cant remember how to do it. help!

jbox · « **Reply #1 on:** September 20, 2007, 01:00:37 am »

Do you mean for stuff like:

img src=plain_white.gif height=8 width=100% (line)
img src=plain_white.gif height=100% width=8 (column)

hulkster · « **Reply #2 on:** September 20, 2007, 10:26:21 am »

well i created a webpage in photoshop, so its one big image basically. i used the slice tool to carve out the buttons and all that, and im ready for editing, but when i preview my new site, it basically looks like the image is scooted all the way over the left side of the page, and i have this big white space on the right side.

zaphod · « **Reply #3 on:** September 20, 2007, 10:29:23 am »

Tables are your friend.
What is the size of your image? If it is greater than 800x600, the horizontal scroll bar will show for the lower resolutions.

hulkster · « **Reply #4 on:** September 20, 2007, 10:53:26 am »

Quote from: zaphod on September 20, 2007, 10:29:23 am

Tables are your friend.
What is the size of your image? If it is greater than 800x600, the horizontal scroll bar will show for the lower resolutions.

when i created the image, i made it 800x600. this is my first run at creating a website in photoshop so bear with me.

when i view the site at 1024x768 it still scoots the site all the way over to the left as if it were just a picture.

zaphod · « **Reply #5 on:** September 20, 2007, 11:20:06 am »

It is scooting it to the left because it IS a picture. You could have the image centered but it'd still be an image. Without the benefit of seeing the image, I would have no way of seeing how you might want to break the image up more.
Conversely, there are many sites that are built for 800x600 (or 1024x768) and just apply whitespace to the sides when the viewer has a higher resolution. Nothing wrong with that. Guess it is up to you to decide how you want the page to end of looking.

boykster · « **Reply #6 on:** September 20, 2007, 01:56:48 pm »

Quote from: zaphod on September 20, 2007, 11:20:06 am

Conversely, there are many sites that are built for 800x600 (or 1024x768) and just apply whitespace to the sides when the viewer has a higher resolution. Nothing wrong with that. Guess it is up to you to decide how you want the page to end of looking.

that's what you want to do, especially if you have a single image as the main site. It sounds like you're on teh right track -> have an image that is 800px wide. someone mentioned that tables are your friend, and they are correct.

Code: [Select]


<html bgcolor=somecolorthatlooksgoodwithyourpicture>
<table align=center width=100%>
<tr><td align=center><img src="pathtoyourimage.gif" align=center></td></tr>
</table>
</html>

will get your image centered in a table and you can work from there....

hulkster · « **Reply #7 on:** September 20, 2007, 02:19:09 pm »

well this isnt live yet, but here you go:

http://www.nashvillecomedychaos.com/new%20site/website1.html

im doing a comedy website for a friend who's and up and coming comic in nashville. keep in mind that this is my first attempt at doing anything in photoshop, and my first attempt at doing a website in photoshop as well, so if it sucks, keep your comments to yourself

anyway, viewing that site in 1024x768 looks okay vertically (cept for the bottom white space), but you can see the white space to the right really sucks. i dont want it to just look like a picture in the middle of the page because it looks too boxy looking if you know what im saying. there are no floating edges...but maybe i dont need them.

so...suggestions on my problem?

zaphod · « **Reply #8 on:** September 20, 2007, 02:25:26 pm »

Quote from: hulkster on September 20, 2007, 02:19:09 pm

anyway, viewing that site in 1024x768 looks okay vertically (cept for the bottom white space), but you can see the white space to the right really sucks. i dont want it to just look like a picture in the middle of the page because it looks too boxy looking if you know what im saying. there are no floating edges...but maybe i dont need them.

Actually, I don't see much of a problem. I think it looks pretty darn good. Map out the buttons to be clickable, and get some content in the middle, maybe some copyright bit at the very bottom, and it'd look done to me. You want the major content to fall on above the fold for everyone, and this looks to do that. I say good job.

hulkster · « **Reply #9 on:** September 20, 2007, 02:36:39 pm »

well the links and content im not worried about. maybe im not seeing the same thing as you are. check out the attached pic....the picture i made/website looks decent enough....but its the alignment and all that white space that makes it look not like a webpage. should i just center it and be done with it?

btw, that image is coming from a 1152x864 res on a 19" monitor. i know that's part of the problem with the white space at the bottom, but the space on the right side still sucks.

zaphod · « **Reply #10 on:** September 20, 2007, 02:48:53 pm »

No, I'm seeing the same thing. Your layout looks like a huge number of corporate sites out there. Two quick examples: http://www.statefarm.com/ and http://www.bcbsil.com/. Same 800x600 in the upper left as yours. All the corporate sites I build are the same.

I think you are being too critical. As I said, get some sample content in there and see if it doesn't look better to your eyes.

boykster · « **Reply #11 on:** September 20, 2007, 02:51:31 pm »

dude, just put ALIGN=center in teh table tag and it will look like this:

boykster · « **Reply #12 on:** September 20, 2007, 02:53:50 pm »

then change the body BGCOLOR to #00076F and it will look like this:

boykster · « **Reply #13 on:** September 20, 2007, 02:56:27 pm »

then, like someone said, make some sort of footer or copyright notice for the bottom and call it good...

the file name "lame footer" is my attempt, not your graphics.....

hulkster · « **Reply #14 on:** September 20, 2007, 03:06:42 pm »

yep, while i was waiting for replies....i made changes, and conveniently enough, the changes i made were the exact ones you guys recommended!

i was thinking about putting the copyright thing on the bottom, and yep, time to add links. thanks for the tips guys.

hulkster · « **Reply #15 on:** September 20, 2007, 03:54:57 pm »

okay, now i need a cool name for my "business"

i dont want it to be anything "hulkster" cuz if one of my coworkers sees it and wants me to do a website for them (for whatever reason) i want to have a cool name or logo to put at the bottom of my sites. any suggestions? i OBVIOUSLY dont do this full time or for a living, but if a coworker said they wanted a website, i could do something fairly decent i guess....but i want a cool name.

hulkster · « **Reply #16 on:** September 21, 2007, 12:55:42 pm »

okay, now i have another question. if you look at the pics above, you see the big white block in the middle where the content will obviously go.

well, my problem is that upon slicing everything in photoshop, that white block is actually a slice as well. so....how do i put text in it now for updates? like, in other sites that ive created before, i just made frames, so when you clicked on something it just changed the middle part. id like to do that with this, but i cant like, create a frame on top of the white block image.

how do i go about updating the site? i know i can use the text tool and make text blocks for everything, but that makes it difficult to edit, and id rather just make websites. any suggestions?

zaphod · « **Reply #17 on:** September 21, 2007, 01:58:49 pm »

Your center image is going to be carved up into four pieces: the top sliver, left, right, and bottom. Slivers will be wide enough to get to the white section. You'll have a table in the middle, text in the center, these four pieces surrounding it. I've seen code out there to allow for scrolling text within that box.

Don't take this wrong, but I did have to laugh, Hulkster, at your comment about just wanting to make websites. This is making websites.

There is a lot more to them than just slapping a pretty image on a page. That's the battle I have to fight with website requests at work all the time.

hulkster · « **Reply #18 on:** September 21, 2007, 02:02:19 pm »

i understand....ive made several websites in frontpage, and through html in the old days, but its been a while. this is the first time ive made a site through photoshop so yes i understand theres more to it than just a real quick fix.

now, would it just be easier to create the text boxes like i said before that were on top of the image?

boykster · « **Reply #19 on:** September 21, 2007, 02:10:08 pm »

zaphod is going the route I would.....carve the center white box into essentially just "frames" for the box, then have a table or cell in middle. Your current image is laid out using a table, so you just need to finagle a central cell where the box is now and add a new table, or heck even a <div>. You can use CSS to make sure it's perfectly centered and matches up with the outer frame....

then in that div you can enter "push" content into there using the innerhtml property, or you can even put an iframe in there to dynamically load content pages....so many possibilities....

zaphod · « **Reply #20 on:** September 21, 2007, 02:12:35 pm »

Quote from: hulkster on September 21, 2007, 02:02:19 pm

now, would it just be easier to create the text boxes like i said before that were on top of the image?

I've never tried that, so I will defer to others. Not a frames-guy myself.

I've always spent the time to table up all the sliced images, so there is a column (or entire table) in the center, where the text needs to be.

Edit- I see boykster slipped in a response while I was hunting keys. I agree with his agreement.

hulkster · « **Reply #21 on:** September 21, 2007, 02:18:47 pm »

Quote from: boykster on September 21, 2007, 02:10:08 pm

zaphod is going the route I would.....carve the center white box into essentially just "frames" for the box, then have a table or cell in middle. Your current image is laid out using a table, so you just need to finagle a central cell where the box is now and add a new table, or heck even a <div>. You can use CSS to make sure it's perfectly centered and matches up with the outer frame....

then in that div you can enter "push" content into there using the innerhtml property, or you can even put an iframe in there to dynamically load content pages....so many possibilities....

okay, so instead of making the white part one big slice, in photoshop i would need to go in and basically slice an "outline" and leave a blank spot in the middle? i guess where im confused is how does photoshop treat slices....just as images? if so, and i sliced around it like an outline like you are suggesting, what happens to the center part where i didnt manually slice it out and name it? does photoshop just make that free space? and thus, i would be able to make that a table or frame??

zaphod · « **Reply #22 on:** September 21, 2007, 02:30:48 pm »

Yes, they are all separately named images. You can see that on your site by right-clicking on each piece and seeing they are differently named. You just won't have an image for the center area- Photoshop is out of the equation at that point.

hulkster · « **Reply #23 on:** September 21, 2007, 02:33:44 pm »

Quote from: zaphod on September 21, 2007, 02:30:48 pm

Yes, they are all separately named images. You can see that on your site by right-clicking on each piece and seeing they are differently named. You just won't have an image for the center area- Photoshop is out of the equation at that point.

okay, i THINK i understand. i just slice around the spot where i want to put text, and then save for the web....then when i go into frontpage or dreamweaver or whatever, ill have that empty spot for a table or something, and then i edit it like i would a normal site.....right?

zaphod · « **Reply #24 on:** September 21, 2007, 02:39:00 pm »

Pretty much. You'll be creating an 800x600 table for your completed image, then create cells (col and rows) within that to hold each image slice. It'll take you a bit of time but not a big deal by any means. Then you'll have it in a form that you are comfortable with already (from your Frontpage days).


Main	Restorations	Software	Audio/Jukebox/MP3	Everything Else	Buy/Sell/Trade
Project Announcements	Monitor/Video	GroovyMAME	Merit/JVL Touchscreen	Meet Up	Retail Vendors
Driving & Racing	Woodworking	Software Support Forums	Consoles	Project Arcade	Reviews
Automated Projects	Artwork	Frontend Support Forums	Pinball	Forum Discussion	Old Boards
Raspberry Pi & Dev Board	controls.dat	Linux	Miscellaneous Arcade	Wiki Discussion	Old Archives
Lightguns	Arcade1Up	Try the site in https mode		Site News


Unread posts \| New Replies \| Recent posts \| Rules \| Chatroom \| Wiki \| File Repository \| RSS \| Submit news