EverWeb Codebox

Page Layout Guidelines

Web Page Sections

Website pages normally have three main sections - Header, Content and Footer.

The Header contains the Website name, navigation and any other important info that is required on every page of the site. It is not necessary to have the navigation in the header but it is more convenient when duplicating template pages.

The Content is obviously different for every page and its height will vary from page to page.

The Footer can contain copright & legal info, links to pages such as the site map and terms & conditions, contact info etc. The navigation can be duplicated and a copy placed in the footer on long pages.

The copright notice should be in the footer on every page and look like this...

Copyright © Name - 2013 - All Rights Reserved

Use Option G to type the ©.

Typical settings for a web page are shown to the right.

A conventional website design should use the centered layout and have a width of 980px.

The Header and Footer height and content should remain exactly the same throughout the site.

The Top Margin setting is used to move the page downwards to show some of the  browser background above the header.

The layout needs to be turned on most of the time so that all the object boundaries are visible. Use the Window menu to does this or, better still, get familiar with the keyboard command: Shift + Command + L

If more screen real estate is required for the design area, hide/show the Inspector panel using: Shift + Command + I

Dragging Objects

Items are moved in and out of the header and footer by holding down the command key while dragging.

Objects can also be set to "Allow free dragging" in the Metrics inspector. This allows them to be drag in and out of the header/footer and also off the page content area into the browser background if this is necessary for some strange reason!


Sizing Objects

Sometimes it is quicker and more convenient to resize objects in both height and width to maintain the aspect ratio. This can be done by checking the box next to "Constrain proportions". More conviently, this can be done by holding down the Shift key while dragging one of the handles.


Object Spacing & Page Height

Allow some space around each object. Do not let them touch or overlap since this can cause layout shifts in some browsers.

Page height should always be slightly greater than the content since text boxes can expand - particularly in Firefox. Although page height is set in the Page inspector, it can also be quickly adjusted by adding an empty text box to the page and dragging it downward.


Testing

Always test pages in as many browsers as possible using the Preview button in the toolbar before publishing to the server. Use Google Chrome and Firefox for testing. Safari for desktop/laptop is of little value for testing since it is used by very few. Test in mobile Safari using an iPad if you don't have Xcode with the iOS Simulator.

Remember that some objects that use javascript and/or flash may not work or even be seen until the site is published to a server!

Web Page Layout
EverWeb Page Layout