How to change the resolution of a page in iWeb

Hi,

I'm making a website for a project, and I decided to do it in iWeb. The brief of mt project says the resolution has to be 1024*768, however, when I change the resolution to this, the page instantly looks horrible with a white border to the right of my content. Is there a way to change this, or centre my content in the white part?


Thanks,

Jonny.

Posted on Mar 1, 2012 11:57 AM

Reply
15 replies

Mar 1, 2012 12:09 PM in response to TheRecycleBin

Not all themes can have the page width increased and keep its appearance. Those that can are White, Black, Modern Frame and Formal (except for the blog page).


Therefore to get a page size you need you should pick one of those themes, start with a blank page and add your own graphics and other elements to create your website design. That way you can manage all aspects of the page design.


OT

Mar 3, 2012 8:08 AM in response to TheRecycleBin

The header, footer, & Padding will all effect the finnished size for your layout. If you are looking to have a header &/or a footer you might want to drag an image that is exactly 1024 x 768 and use it as a guide. You can send it to the back & delete it when you are done with your layout.


this image is exactly 1024 x 768 if you click on it

User uploaded file


You might also want to check out my video on creating layouts:


http://www.youtube.com/watch?v=wHVVtJ7Ka4o

Mar 3, 2012 9:20 AM in response to TheRecycleBin

Resolution is a measure of the sharpness and clarity of an image or an expression of the total number of pixels on a monitor screen. This is different from the dimensions of the viewable area of a web page which can be expressed in pixels, ems and %.


A web page consists of two main areas - head and body.


The body is the viewable area and that is the one you need to set the dimensions for width and height - in your case 1024 x 768 pixels.


Although a web page can be further divided into areas such as header, content and footer this is not carved in stone. Header and footer content normally remains constant throughout a web site and that's where you would put all the stuff that is required to show on each page. Nowadays this is considered bad practice since it repeats info and wastes space in the case of sites being viewed on mobile devices.


In your case, the content area dimensions have been defined so everything else has to fit inside it and the sum of the header, main content and footer layer heights have to equal 768 px.


This is rather a strange project since the trend is to make web pages more flexible to suit different devices by using percentages!

Mar 4, 2012 3:03 PM in response to TheRecycleBin

This is rather a strange project since the trend is to make web pages more flexible to suit different devices by using percentages!

I have set the resolution to 1024*768, I have got rid of headers, footings, and paddings. When I drag a text box to the very side of the page, the box tells me that it is at 1024 on the x axis, which is what I want, but when I drag it downwards, the page extends infinitely. I checked the resolution of my page with the guide posted above. All of my content fits in the page, but I have a bit left over at the bottom... I took a screenshot to show what I mean. http://imageshack.us/photo/my-images/72/applediscussionsexample.png/


<Edited by Host>

Mar 4, 2012 8:28 AM in response to Roddy

I had a resolution of 1064.+765 and designed it for possible I pad viewing,but found that my big mac had wasted real estate space.


I found out that suggested res for big macs are 1250-800 ,so..........I made miy web site 1200-800 and found that it fit the I pad and looked bigger on my big mac.



Why then is 1200*800 not the formula?


It seems 1064+768 is wasting real estate if viewer sees it on mac and.......looks fine on I pad.


What is the best formula for web site and web magazine I am planning to do???

Mar 4, 2012 9:38 AM in response to guillermo1

There is no formula for a web page and you have to consider the type of content and what device the viewer is using.


A "standard" width for a conventional webpage could be considered to be 980px with a page height of no more than about 1200px to avoid too much scrolling. Any page that is much higher than this should, at least, have a "back to the top" button...


http://www.iwebformusicians.com/iWeb/Navigation.html


The browser width on personal computers is user adjustable and not everybody wants to fill the whole screen width.


The browser width on mobile devices is fixed and the user only has the option of portrait or landscape orientation.


US letter size is 8.5 inches wide by 11 high (816 x 1056 px) and the European A4 is 8.27 × 11.69 (794 x 1123 px). Either would be a good starting point for an e-zine.


The iPad is 768 px wide in portrait mode but remember that its not the only tablet available. I think Kindle is 600px wide and others are smaller.


Text on wide pages is difficult to read - hence the use of columns in magazines and newspapers.


Designing web pages for mobile devices in general is not possible with iWeb since it can only use a fixed page width. An example of a folding column magazine style layout can be found on this page...


http://www.ezmacwebdesign.com/showcase.html

Mar 4, 2012 10:37 AM in response to TheRecycleBin

Hi again,

I've tried everything suggested on this page, but I still have a problem. When I publish my site, I go into full screen mode. When I test another page in the site, the height of the page changes and it is very noticeable. When I used the ruler app which was suggested, the width of my page is definately 1024px, but the height is definately not 768px. Also, all the pages have different heights, and there is nothing to stop them being 768px. I have no idea how to fix this. Does anyone have an idea?

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

How to change the resolution of a page in iWeb

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.