Web Studio Newsletter

Feature Article

Design Your Pages for a Specific Size

Web Pages are a bit different than Word Processing or Desktop Publishing pages. When you use a Word Processor or you Desktop Publish a document, you determine ahead of time what the size the paper will be, what size margins you'll use, etc. You fix the pages to be a specific size and the reader of the document reads exactly what you produced.

With a Web Page, the viewer of your page can affect how big your page will be and what it will look like. It all depends on how big their browser window is. If they have a small screen or they have narrowed their browser's window, they may not see the entire width of your web page. They'll have to use scroll bars to see it all - not a good thing. If their screen is very large and they have maximized their browser's window, they may see a lot of "white space" on the right side of your pages - may not be a good thing. And you have no control over if!

Defining the Problem

Most web designers have had the same problem. The pro's have determined that they cannot control the size of the viewer's window. They have also determined that allowing the browser to re-arrange their professionally designed pages is not an option. Their clients have paid good money for the design of their pages and don't want a browser to blindly destroy their site's design integrity. They have also determined that there are only two ways to solve the problem. Design an entire site for each individual screen size they expect customers to have. Design one site for a specific size screen.

Solving the Problem

The pro's with unlimited budgets have gone with the first option. They have code on their pages that determines the current size of the browser window and sends the viewer to the nearest sized site. Remember, these people have created about five versions of their site for five different sized monitors.

The pro's with limited budgets (like all of us) use the second option. They design for a specific sized monitor. The question remaining is what size? It ends up that the most used monitor size today is 800 X 600 pixels. So, that's the size that they design for.

How Do I Do It?

You start by deciding to live with the fact that people with big screens will see blank space on the right side of your site. Remember, that is the big leap the pro's had to overcome as well. Secondly, you place your page elements on the page so that they don't go any further than about 780 pixels from the left side of the page. WebStudio can give you some help here.

If You are Starting a New Site

Go to the Site Properties dialog. On the first page of the dialog you'll see a section on Minimum Page Size. Enter 780 for the Width, and enter 600 for the Height. This tells the program the size page you want to have. However, you can put things outside of the 780 X 600 area and WebStudio will let you. You need to do one more thing to have WebStudio inform you. Click in the check box that says Automatically resize pages according to content. Make sure there is not a check in the box. What this will do is show you the 780 X 600 area with all space outside that area showing as white.

If you attempt to move an object into that space it disappears or is cut in half. You'll want to quickly undo any action that puts an object into the white zone. If you have a white background you won't see the white zone until you move an object into it. To make it more obvious you can add a light colored background to your pages to act as a page guide. Once you have finished your page, just right click on the background of the page and choose Remove Background..

If You are Modifying Your Existing Site?

You do exactly what was described previously, but you don't turn off the Automatically resize pages according to content check box. Make sure there is a check in the box. You then add a graphic to your page that you'll use as a guide to show if any objects fall outside your 780 X 600 area. Make the graphic narrow and make it deep. You can do this by using the selection handles in the middle of the top and side of the object. Then double click on the object to open the Properties dialog. Next click on the Lock Object Size check box and then type 780 into the Left field of the Position settings. This will set the left side of your object at the 780 mark. This can then be used as a visual guide to see if any of your present objects are out of the design space. If so, you'll have to move the objects and re-layout your page.

You'll want to do this for each of your pages. To simplify this copy and paste the guide object to each page. All you have to do is click on the guide object you added, choose Copy from the Edit menu, go each of your pages and choose Paste In Place from the Edit menu. That will place a copy of the graphic on each page in the same location it was on your initial page.

*top

Did You Know...

… Web Studio has Real Time Context Sensitive Help?

WebStudio watches what you are doing when you are using it. It will tell you what things you can do, based on where your mouse is located. The Help is displayed in the Status Bar, which is at the bottom left of the WebStudio window.

It will tell you what the tools in the toolbars do when the mouse is over one of the tool bar's buttons..

If the mouse is over one of the tabs in the Galleries, it will tell you what that tab's gallery has in it and/or what it can do for you.

Put the mouse over one of the items in a gallery and it will tell you want you can do with it. If the item has a yellow subfolder icon on its upper left it will tell you that you can double click to view additional content and it will tell you the name of the content collection in that folder. When the mouse is over the page or objects on the page, it tells you the most popular things you can do at that point with that object or with the page.

Virtually everything in WebStudio that you can put the mouse over will give you context sensitive help. Run the mouse over things next time you're using the program and see what you can learn!

...The House Icon in the Page List Designates Your Home Page?

Many people tell tech support that their hosting service said they needed a page named index.html in order for their website to work properly. That is true in just about every case!

WebStudio makes it simple for you to comply with the hosting company's needs. Take a look at the PageList on the right side of the WebStudio window, it has the names of all your pages in it. Now look for the page that has the House Icon to the left of its name. That is your home page.

If you don't have a House icon on any of your pages, you will need one.

To add the House Icon to a page and make it your home page, simply move the mouse arrow onto the pages' name in the PageList and click the Right mouse button. You'll see the House Icon appear.

If you want to change Home pages, simply right click on the page name of your new Home page. That's it!

...There is a Problem With Graphics from Microsoft Paint?

We had a customer a month or two ago who had a problem with their WebStudio Document file being corrupted on a regular basis. Fortunately, he backed up his files on a regular basis.

Our tech support people and the people on the WebStudio Forum tried everything they could think of to help fix his problem. The customer finally figured out what it was. He had put a JPG graphic that was edited in Windows Paint into a WebStudio page. After he saved the WebStudio document containing the graphic four times, it got corrupted. Once he removed the graphic from his page and substituted the same graphic, but after coming from a different program, the problem was solved.

Once the solution was posted on the Forum, many others came forward and said they had the same problem when graphics from Paint were added to many of their other programs, not just WebStudio. Bottom line, stay away from Microsoft Paint.

top

Manage Your Subscription

You are receiving this newsletter because you are a registered user of WebStudio or because you indicated you are interested in learning about products like WebStudio.

To subscribe or unsubscribe from this newsletter, please visit our subscription management page.

top