| |
|
|
Design page
templates
Individual page content needs a consistent look,
too |
| Once you have your site's
navigation and general design figured out, it's time to design
some complete pages. But before you start churning out a lot
of content, you should make a basic plan for how those pages
will look. Begin with the Home page. |
|
Home page design
|
| At your Home page,
visitors should immediately learn what your site is about,
what it offers them, and how it's organized. For a purely
visual impact, you can create a graphically oriented "splash
screen," like a magazine cover, that links only to major
sections. If you want, leave the navigation bar off this page
and handle links within the graphic. Just keep the image to
600 by 400 pixels so people with 640 by 480 screens can see
without having to scroll. (Make the image even smaller if
you're designing
for WebTV.)
|
|
A splash-screen Home page using
an imagemap
If you need more than a picture to explain what your site
is about, or if you want visitors to jump right into content,
make your Home page more like an introduction and annotated
table of contents. Keep the navigation bar around, and don't
worry about making people scroll down.
|
A
splash-screen Home page works well for an online store, a site
focusing on company image, or one whose purpose is easy to
grasp. |
Information-based Home page
with a navigation bar
|
Combine
information and a strong graphic on the Home page to highlight
key links and explain what they're about. |
Design page
templates
|
| So visitors get used
to how information is presented, the layout of similar pages
needs to be consistent across the site. You do this by
designing a standard template for each type of page.
You'll need one template for section pages and one for each
type of topic - articles, product catalog pages, or whatever
is appropriate for your site. For each type, consider what
elements its pages have in common. In this site, for example,
pages like this one have a heading and caption, picture,
article with subheadings, quick list of links, and column of
highlights. Arrange the elements once to make the template,
and use that arrangement for other similar pages.
In NetObjects Fusion, you can insert
pre-built page templates for things like a calendar, FAQ page,
and What's New page. Then, just replace our content with yours
and make any other changes you want. The new page even assumes
your SiteStyle. If you're really in a hurry, we've got a few
templates for an entire site. Find out more in the documentation
on templates.
Calendar inserted from a
template
|
Designing a standard layout for each page type not only
presents a consistent look for visitors, but it makes building
subsequent pages a lot easier. |
Layout basics
|
| In NetObjects Fusion,
content that's unique to a page (that isn't in a MasterBorder)
goes in the Layout. Here, you can wrap text around
pictures, format information in tables, use columns, and
position objects with pixel-level precision. Begin by adding
text boxes, pictures, and other objects, and dragging them
into the position you want.
|
|
Text boxes and pictures in the
Layout
|
Text
wraps within the width of its box and flows down as necessary.
Make text wrap freely around pictures by embedding the picture
in the text box. |
Not surprisingly,
different browsers have their own ways of positioning things,
so you can't be sure exactly how your pages will look to
visitors. Fortunately, NetObjects Fusion provides some ways to
optimize results:
- Align objects with each other or with the top, bottom,
or side of the layout, by using alignment tools on the
properties palette.
- Choose the appropriate HTML output method for
your audience and content. NetObjects will then generate
code that works best for different browsers and layouts.
- If your Layout consists of only one column where text
flows around pictures, consider making the entire Layout one
big text box. This produces the leanest HTML that works best
on older, version 3 and earlier browsers.
- To make text flow freely around a group of objects that
are positioned precisely in relation to each other, like a
collage of pictures, put the objects in their own mini
Layout (called a Layout Region), and embed
that in the text box.
- Use tables to line things up in rows and columns, such
as for a product spec or to align labels and fields in a
form. Each table cell acts like its own text box where you
can type and add pictures or other objects. When you
publish, cells are more likely to align as you want on any
browser. Tables generate larger HTML files, so use them only
when necessary. For details, see the documentation
on tables.
|
It's
important to choose the best layout strategy and HTML output
method for your pages. For details, see the documentation
on controlling published output. |
Tricks with
Layouts
|
| You can create
multiple Layouts for a page and switch back and forth just by
choosing the Layout you want to view from a drop-down list
(it's at the very bottom of the NetObjects Fusion window).
Before publishing, just select which Layout you want to use.
Why do this? Here are a few ideas:
- Try out different page designs by switching back and
forth to see which one looks better.
- Create separate Layouts for different languages, then
publish a separate version of your site for each language.
You might even use the BrowserLanguageRedirect
component from Apollon to route visitors automatically
to the version in their language.
- Similarly create layouts tailored for different browser
versions. If a page contains an action that won't work on
older browsers, create an alternative Layout without the
action. Publish a version of your site for each browser type
and use Apollon's Browser
Redirect component to route visitors appropriately.
|
For
details on working with multiple Layouts, see the documentation
on Layouts. |
Of course, no design is complete
without paying careful attention to the look of your text. And
in NetObjects Fusion, you can dress up your text using a whole
lot more than bold, italics, and pretty fonts.
Next: Design with
text..
| |
|
 |
 |
 |
 |
|
