Web page layout fundamentals

One advantage PagePlus has over a dedicated web-page creation program is that you can take your newsletter layout, or a print ad with a wild mix of multi-color graphics and fancy typography, and publish them intact to the web. In fact, your page can look as great on the web as it did on your screen!

While you don’t have to know HTML (the description language for web pages) to use PagePlus, you should understand that:

  1. The time it takes a visitor to load your page is directly related to the size of the HTML file plus any accompanying image files. The images take up considerably more spaceā€”and slow down loading time.

  2. Those parts of your layout that PagePlus cannot translate to HTML will be output as images. The more of your layout that PagePlus can translate into HTML, the better.

What about HTML?

If you’re used to working in a Desktop Publishing environment, you may have to scale back your typographic expectations somewhat when designing for the web. With its built-in support for HTML 4.0, however, PagePlus gives you a lot of design latitude.

In laying out text, you can specify any point size, use variable leading and letterspacing, and even justify paragraphs! The result is a much closer WYSIWYG match between what you see on-screen in PagePlus and what ends up in the web browser. Because HTML positions elements using absolute coordinates, overlapping elements is allowed, and file sizes are reduced.

In theory, you can use any font you like. However, if a specified font isn’t present on a visitor’s computer, an available font will be substituted, with unpredictable results for your beautifully designed layout! As a rule, stick with the standard Windows fonts (Times New Roman, Arial, Courier New, and Symbol) or use WebSafe fonts.

  • The PagePlus Layout Checker Wizard will warn you if your publication uses nonstandard fonts or character properties, text that must be output as a graphic, or other problems. For a complete list of these trouble spots, see the topic Automatic layout checking.

About web graphics

The file size of an image is directly proportional to its area; if you double the height and width, the file size increases fourfold. As a rule, keep picture dimensions to the minimum needed to convey your point. Plan your layouts so as to avoid large graphic areas.

Use photographic images sparingly. These tend to be larger and require more colors to display satisfactorily.

About Websafe fonts

Websafe fonts are a specially selected and configurable subset of fonts which offer the best font matches between your website (during design) and your web visitors’ computers (during browsing). On publishing, Websafe fonts are only referenced (and not rasterized) as they are assumed to be available on a web visitor’s computer.

Generally speaking, it is advisable to use a standard list of Websafe fonts unless you can be sure of font usage amongst your target audience.

To display Websafe fonts:

  1. Hover over the PagePlus tab studio right Web page layout fundamentals button at the middle-left of your workspace to reveal several tabs.   

  2. Click the Fonts label to reveal the Fonts tab.

  3. Click the tab’s PagePlus tab misc tabmenubtn Web page layout fundamentals  Tab Menu button then select Categories>Websafe. The Websafe fonts category appears in the tab.

Web page layout fundamentals