Laying It Out - Step by Step

Further down this page, you can see the home page - index.html - of the demo site used to illustrate this guide.

You can see two versions of the "live" demo site at:

Free Host.
Paid Host.

The following sections will show you how you can take this as a base for your own site.

To get a feel for how the pages are constructed, you can save them onto your hard disk - I suggest into a "demo" folder within your project folder.

Newbie Tip

If you choose "Save" from the menu on many modern browsers, they will also save the image files to your hard disk - but they change the HTML to point to these local files.

To see the HTML as it was originally written, choose "View Source" from the menu. You can then save this file to examine the contents.

Under the Cover

Open index.html in your text editor. You can open it in an HTML editor, but you won't see as much of the detail as you will looking at the HTML code itself.

This file is extensively commented to show what the different lines of HTML do, where they come from, and what you would change for your site.

A comment line in HTML looks like this ...

<!-- this is a comment -->

... so searching for "<--" will take you to these additional information lines.

Adding mailing lists, dynamic content and "community" facilities to your site are all covered in individual chapters.

Anatomy of a PDCB Home Page

To create the graphic elements of the page - menus, headline graphics and dividers - and to rotate advertising banners, we will be using the free services of ZY.

Go here and register for ZY Modules and then head to the Module Store to see what's on offer.

The modules you see in use at the demo site are:

Graphic Heading

(Under the "custom web graphic" option). Useful for page and section headings. Make a note of the settings you use (font, sizes, colors) so you can create additional headings to the same style at a later date.

Newbie Tip

Once you have created a headline graphic with your site name on it, load it into any basic graphic program and cut 'n shut it into a square graphic no bigger than 100 x 100 pixels. This will serve as a basic logo that you will have an opportunity to use later.

Vertical Button Bar

The left margin navigation layout is a very common design - and it works. But you can have your navigation horizontal instead of vertical, if you are comfortable with designing your own layout.

Making It Work

At ZY.com, you can choose styles and colors that fit into your overall theme, and see the results immediately.

The graphics are stored in your personal space on their server so you don't use up your storage space - and they are accessible from any site you set up. So if you move your pages to a new host, you don't need to move these graphics around too.

In the demo pages, the same menu is used on all pages, but you can create multiple menus at ZY.com. For example, you might create a menu for individual sub-categories, each of which has menu entries for (say) books, products, news, recommendations.

If you set up departments like this, it's probably worth creating a sub-folder for each of these categories, so each can have the same template pages - books.html. products.html, etc - and you can use the same menu.

So your main menu points to areas:

• Area1
• Area2
• Area3

And the menu within each area points to a page per subject:

• Subject1
• Subject2
• Subject3

... if you keep the subjects the same within each area - and name the pages accordingly, you can use the same pointer to the same ZY menu on each page. Low maintenance - way to go!

The beauty of the ZY modules is that you are given a single line of code to insert on your page. Then, if you make a change to your menu at ZY, it is automatically updated on all your pages without you doing anything.

If in the future you decide to give your site a makeover - a couple of changes to your ZY modules can give the whole site a new lease of life.

You can do a great deal with the free facilities at ZY, but bear in mind that you get access to a wider choice of styles and facilities if you opt for the low cost paid service.

They also offer very easy to use, wizard driven page building facilities and hosting, but unfortunately only their most expensive options are licenced for commercial use.

Navigation Note

Most of the big, important Search Engines use "spiders" that follow links between pages to add to their database. They won't follow links in a ZY.com menu bar (they just see the single line of code) - so it's important to have text navigation links too. Putting them at the top of the page (as in the demo sites) means the Search Engines come across them early in their visit to your page, increasing the chances of them following the links. It's also good practice to allow for visitors with things like graphics and JavaScript switched off.