KompoZer:

On this page:

Related Pages:

Go to TopCreating a Master Page

Consider the general page layout illustrated below. At the top is a header area, where one might expect the site title and logo or page name to appear. Under that is a horizontal menu for navigating the site. This features a set of buttons that change colour to reflect the currently selected page and to indicate that there is an active link under the mouse pointer as it is moved across the page. Beneath the menu the page splits in two. There is a narrow column to one side, which might be used for a vertical menu, links to the updated pages, or for thumbnail images that highlight and link to key areas of the site. The larger area will contain the main page content and finally, at the bottom, is a footer area, typically used for copyright notices, links to company information, or telephone numbers.

Sample Master Page Layout
Sample Master Page Layout

This general layout is the foundation of the vast majority of web pages today and will form our master page. It  can then be copied repeatedly and each copy populated with its own content. Of course there are many variations. Some sites have the menu above the header area. Others abandon the horizontal menu in favour of a vertical one in a column to one side or the other of the main content area. Many disguise the rectangular layout by using background graphics with sweeping curves. Others use a three column layout, where the additional column caries advertisements or larger graphic links to some important content and many abandon the footer block.

You are encouraged to adapt the basic structure found in the tutorial for your own site. Naturally you will want to introduce variations in the design. However, you are encouraged to follow the tutorial exactly as presented and not to attempt to make changes until you have managed to achieve an exact copy of the design presented here. This is because there are various approaches and techniques demonstrated at various points in the tutorial that will help with your own designs in the future. It's best not to miss them! Once complete, then feel free to attempt the various adaptations mentioned below and turn to the pages that cover how to add specific featuress.

Go to TopIntroduction to the Tutorial

This tutorial is broken down into these components:

  1. Creating the Containers
  2. Naming the Style Rules
  3. Identifying the Containers
  4. Applying the Header Styling
  5. Applying the General Menu Styling
  6. Applying the Menu Bar Styling
  7. Applying the Basic Button Styling
  1. Applying the Button Link Styling
  2. Applying the Button Hover Styling
  3. Applying the Content Area Styling
  4. Applying the Column1 Styling
  5. Applying the Main Content Styling
  6. Applying the Footer Styling
  7. Finding and Deleting Breaks

It assumes that you are already familiar with the purpose and function of a stylesheet and have completed the External Stylesheet tutorial on this site. It builds on that knowledge introducing three more significant components of web page construction, "generic containers" (HTML <div> tags) and CSS's "conditional" and "id" selectors.

Generic containers hold the five main "blocks" that form the design, shown in bold in the section above. (Never use tables as a way of laying out content on a page. Tables may work well for the fixed lay-out of a printed document, but is inappropriate for the very varied platforms to which a web site may be served. There's more about this issue on the page describing how to construct a simple Image Gallery)

Conditional selectors simply means styling that is only applied in certain situations. For example, a link on a menu bar is likely to need to be styled very differently to a link in the main body of the page, so one needs to create a set of rules for links that apply only within in the menu block.

An ID selector is not just for "special case" styling, in the way that a "class" is, but for "unique" styling. Importantly, any element assigned an ID can be used as an anchor, so only a single element on a page must be assigned a particular ID.

Before rushing to create the containers, we need to consider further the properties of the column and main content areas. It is easy to set the column or main content area to be a certain width or percentage of the window's width, but, as each is filled with content, they will extend independently. Not only that, the lengths may vary on each page with no guarantee one is always longer than the other. A mechanism is needed to ensure that the footer always appears below the deeper area and that the colour of the gap below the shorter area has the appropriate colour. This is done by adding a further <div> containing both the column and main content blocks.

The boundaries to the various containers offer many possibilities. Borders are used extensively in this design. If dispensing with them or any components of the design which use them, bear in mind that you may have to add them to the edges of the remaining containers in order to replace a missing one. Also bear in mind the HTML Box Model, as removing borders will affect the total width and height of the elements concerned. Another option is to replace borders and use a graduated blend, as on this site. Solutions to some of these and other design issues are described in the Customising the Master Page group of pages.

As this is a single page demonstration an internal stylesheet is used. This keeps the HTML and CSS code in a single file, which has an advantage for teaching but should not be used for real-world multi-page sites. If you wish to adapt the completed tutorial for a site of your own you should export the stylesheet, as described in the External Stylesheet tutorial, before making any copies of the master page.

Remember, it's best to try to reproduce the tutorial master page exactly, before attempting any adaptations and customising of your own. Now, let's start work...

Go to TopCreating the Containers

1. Open KompoZer (or start a new tab).

Selecting a <div>

2. On the Formatting Toolbar, drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A dotted red box will appear across the page and the paragraph format returns to "Body Text".)

3. With the cursor inside the dotted line type "Site Title" (without the quotes)

4. With the cursor at the end of the text hit CTRL-DOWNARROW. (The cursor can faintly be seen at the right of the container that's just been created, the Paragraph formatting list has returned to "Body Text" and the <div> button has disappeared from the status line.)

NOTE: The function of Step 4 is to move the cursor outside the HTML tags placed in the code to define the container block. Hitting CTRL-UPARROW and CTRL-DOWNARROW is a technique that can be used when you need to locate the cursor accurately immediately outside the tags that define any block of code.

Selecting a <div>

5. On the Formatting Toolbar, again drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A second dotted red box will appear across the page.)

6. With the cursor inside the second container click on the "Bulleted List" Toolbar button. (The container separates and expands and a bullet symbol appears.) Type "HOME" (without the quotes) and hit the carriage return key. (A further bullet appears.) Continue, adding "OPTION 2", "OPTION 3" and "OPTION 4" to the list but do NOT hit the carriage return key after the final list item.

7. Place the cursor within the text "OPTION 2" and click on the <li> status line button. Click on the "Link" Toolbar button. Enter "#" (without the quotes) in the "Link Location" field and click the OK button.

NOTE: The # character creates a link that sends the visitor to the top of the current page. It is used here as a dummy. On a working master page, a link to another page on the site would be used.

8. Repeat Step 7 for the "OPTION 3" and "OPTION 4". (As you start this step you should see the default styling for a link appear on the previous list item, underlined blue text.)

9. With the cursor still in the list, click on the <div> tag on the Status line, then hit CTRL-DOWNARROW to move the cursor out of the container.

10. On the Formatting Toolbar, drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A third dotted red box appears.)

11. With the cursor inside the new container type "Content" (without the quotes). (The function of this dummy text is to provide some content in the container, so that you can see the effect of some of the styling to be added later.)

12. Once again, hit CTRL-DOWNARROW, then drop down the paragraph formatting list to change "Body Text" to "Generic container (div)" so adding a fourth dotted red box. Type "Footer" (without the quotes) inside it.

Normal view showing the containers
Normal view showing the containers

13. Save the page in a folder created especially to hold your web site, entering "Master Page" when prompted for a page title and "masterpage.html" as the file name.

NOTE:  The function of Steps 14 and 15 is to provide two containers nested within the main content area. Although, initially, appearing more complex than necessary, this approach allows the greatest flexibility in the way all three containers can be positioned and styled.

14. Place the cursor at the end of the word "Content" and tap the carriage return key. With the cursor on the new blank line, drop down the paragraph formatting list and change "Body Text" to "Generic container (div)", so adding another dotted red box. With the cursor inside the new container type "Col1" (without the quotes).

15. With the cursor still in the Col1 container, hit CTRL-DOWNARROW to move the cursor outside that container and once more drop down the paragraph formatting list and change "Body Text" to "Generic container (div)". Click inside the new red dotted box, to place the cursor there and type "Main" (without the quotes) inside it.

16. Save the page.

NOTE: Step 17 is not necessary as part of the process, but is intended to reassure those using these techniques for the first time. It can be skipped if desired.

17. Because it can be difficult to make out the relationship between the red border lines, confirm that things have worked as intended by checking Source view. Click the "Source" tab on the Edit Mode Toolbar. The code between the <body> ...</body> tags should look similar to that below. Your code will certainly NOT be indented exactly like this but the text and surrounding opening and closing tags for each section should be in this order. Importantly, the "col1" and "main" <div>s should be nested inside the "content" div:

<body>
<div> Site Title </div>
<div>
<ul>
<li>HOME </li>
<li><a href="#">OPTION 2</a></li>
<li><a href="#">OPTION 3</a></li>
<li><a href="#">OPTION 4</a></li>
</ul>
</div>
<div> content <br>
<div> col1 </div>
<div> main </div>
</div>
<div> footer </div>
</body>

NOTE: You may notice an excess of <br> tags in the source code compared with that shown above. This is caused by a bug within KompoZer 0.8b3. You can remove them by running the "Markup cleaner" found under the TOOLS menu. (The option is greyed out in SOURCE view. Return to DESIGN view to use it.)

Return to Normal view.

Go to TopNaming the Style Rules

1. Click the CSS (Artist's Palette) Toolbar button on the main window to open the CSS Stylesheets dialogue.

2. On the right hand panel, select "style applied to an element with specified ID attribute", complete the field at the bottom to read "#header" (without the quotes) then click the "Create Style rule" button. (The rule name will appear indented under the "internal stylesheet" label in the left pane of the dialogue.)

NOTE: As mentioned in the introduction to this tutorial, any HTML element assigned an ID can be used as a target for a link, so only a single example on a page can be assigned a particular ID. From the styling perspective IDs are similar to classes, used to create "special case" styling for an element. However, an ID selector is not just for "special case" styling but for "unique case" styling.

If you adapt this master page and plan to place the menu at both the top and bottom of the page, then all the "hmenu" rules will need to be changed to a CLASS with the rules appearing with a dot (.) not a hash (#) prefix marker.

3. On the CSS Stylesheets dialogue, click the Style Rule (Artists Palette) button. On the right hand pane, select "style applied to an element with specified ID attribute", complete the field at the bottom to read "#hmenu" (without the quotes) then click the "Create Style rule" button. (The rule name will be added to the left pane of the dialogue.)

4. Repeat Step 3 to complete the full list of rules:

NOTE: You may type the initial # into the field and the radio button above will automatically change to indicate you are completing a "style applied to an element with specified ID element". Similarly, when entering rules that include a space, the radio button will change to reflect the fact that you are producing a "custom style rule".

  • #header
  • #hmenu
  • #hmenu ul
  • #hmenu li
  • #hmenu a
  • #hmenu a:hover
  • #content
  • #col1
  • #main
  • #footer

NOTE: To correct a mistake in the spelling of a rule (or to change an ID rule to a class rule), simply double-click on the name on the left pane. A dialogue will appear in which you can edit the name.

Dialogue after adding rule names

With the list of rules complete, click the CSS Stylesheets' dialogue OK button.

Dialogue after adding rule names

Go to TopIdentifying the Containers

1. Place the cursor within the text "Site Title". On the status line, right-click the <div> button, select "ID" on the menu, then "header". (The <div> button changes to read <div id="header">.)

2. Place the cursor within the any of the menu items. On the status line, right-click the <div> button, select "ID" on the menu, then "hmenu". (The <div> button changes to read <div id="hmenu">.)

3. Place the cursor within the text "Content". On the status line, right-click the <div> button, select "ID" on the menu, then "content". (The <div> button changes to read <div id="content">.)

4. Place the cursor within the text "Col1". On the status line, right-click the <div> button (ignore the <div id="content"> button), select "ID" on the menu, then "col1". (The <div> button changes to read <div id="col1">.)

5. Place the cursor within the text "Main". On the status line, right-click the <div> button (ignore the <div id="content"> button), select "ID" on the menu, then "main". (The <div> button changes to read <div id="main">.)

6. Place the cursor within the text "footer". On the status line, right-click the <div> button, select "ID" on the menu, then "footer". (The <div> button changes to read <div id="footer">.)

NOTE: With the containers now identified, the effects of any new styling rules will be seen instantly in the main window as they are defined. Try to keep both window and dialogue arranged on the screen so you can check the effects are as expected.

Go to TopApplying the Header Styling

1. Click the CSS (Artist's Palette) Toolbar button to open the "CSS stylesheets" dialogue. On the left hand panel, select "#header".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #336699;
color: white;

EXPLANATION:As you might guess from the code, all that is done here is that a thin black border is added around all but the bottom of the block. Text becomes white and the background becomes a shade of blue.

Dialogue after adding rule names
Dialogue after adding rule names

IMPORTANT: All the instructions in this tutorial assume that you will copy the code fragments and paste them to the General tab of the CSS Stylesheet dialogue. While pasting code works reliably, there is a bug in the dialogue and editing any existing code in the General Tab can produce erratic results. If you wish to change or delete code in order to customise your master page it is more reliable to edit the appropriate values under the other tabs of the dialogue.

NOTE: When customising your master page, do not be tempted to style paragraphs so that they appear like headings. Search engines rely heavily on the tags when assessing the importance of text on a page, not the styling applied to them. Brand names, titles, slogans, strap lines, and the like, will normally contain the key search terms used to find a site. These should be marked up as headings.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the General Menu Styling

1. On the left hand panel of the dialogue, select "#hmenu".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 0.7em;
text-align: center;
line-height: 2.5em;
height: 2.5em;
background-color: #003366;
border: 1px solid black;

NOTE: Three out of four people who have written to me because of a problem they had with this part of the tutorial had failed to notice there are lines "height" and "line height" in the above!

Wait until you have applied all of the hmenu rules before worrying about how the main window appears!

EXPLANATION: Rules set here are in two parts. The first five control the appearance of the button text. The other three control the main features of the menu bar. The text rules could equally be set in the individual rules for the nested elements, but in general it is best to set rules at the highest level possible, so they don't need to be repeated lower in the hierarchy. The list of fonts is chosen from the Predefined list and set to bold. Font size for all text within the menu is set at slightly smaller than the default font size and aligned to the centre of the element that contains it. The line-height setting determines the position of the text on the menu bar. Height defines the height of the menu bar and the background colour provides the darker blue than the header to give it a distinctive appearance. It also has a full border to make it easy to use the code elsewhere. If used in several places the hmenu block should be set as a class rather than an ID. (Neighbouring blocks would need to have missing top or bottom borders to compensate, in the way that the "header" border was missing where it mated with the menu bar.)

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Menu Bar Styling

1. On the left hand panel of the dialogue, select "#hmenu ul".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "List" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

NOTE: For those entering settings under the Box tab an explanation of the code below is required:

CSS syntax is sophisticated and KompoZer will vary the code it generates. In particular, this shows up in the rules for box sides (borders, margins and padding). Rules may be specified for specific sides, as with the border in the Header rule above, but it may also generate code for the margins and padding with the syntax seen below .

In this case the margin and padding is to be applied to all four sides, so all four sides, Top, Right, Bottom and Left should have zeros entered to produce the code here.

list-style-type: none;
margin: 0;
padding: 0;

EXPLANATION: These rules, for any unordered list appearing within the menu container, provide the basic appearance for the buttons on the menu bar. First the default bullet that normally appears when an unordered list is rendered by a browser is disabled. The margin and padding settings both make the bar abut tightly to the header and content area between which it is contained and stops the indentation that accompanies the bullet in the default display of an unordered list.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Basic Button Styling

1. On the left hand panel of the dialogue, select "#hmenu li".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Border" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

NOTE: For those entering settings under the Box tab an explanation of the code below is required:

Extending what was learnt in the syntax applied to the menu bar, margin and padding can, in fact, have up to four values, one for each side. They are taken clockwise starting from the top, so here, the top and right sides are defined. With this syntax, when the when the third (bottom) number is missing it is taken to be equal to the first (top) value and when the fourth (left) number is missing it is taken to be equal to the second (right) value, i.e. the opposite sides in each case.

In this case the margin values are applied to all four sides and 0px padding is applied to the top and bottom edges, while left and right sides have 20px padding.

color: white;
background-color: black;
border-right: 1px solid black;
float: left;
width: 85px;

EXPLANATION: This is another contextual rule. In this case the styling will only be applied if the list item is contained within an "hmenu" block. It defines the appearance of the "current page" button. (Technically, it defines the appearance of all buttons, but those with links will be subject to further rules that over-ride this set. Similarly, other list items elsewhere on the page will use the browser defaults unless a specific rule over-rides their appearance too!) Text colour is set white to contrast with a black background. A text colour needs to be defined here, otherwise the browser's default for links (or that defined locally) will be used. The button only includes a right border as the others are provided by the #hmenu rules or any button to its left. Each menu item is floated to the left of the containing block so they draw up alongside each other, forming a horizontal list. The width is set to a width sufficient for the longest button text.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Header and most of the Menu Styling entered
Header and most of the Menu Styling entered

Go to TopApplying the Button Link Styling

1. On the left hand panel of the dialogue, select "#hmenu a".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

color: white;
background-color: #003366;
display: block;
text-decoration: none;

EXPLANATION: This is another contextual rule where styling will only be applied to the link if it is contained within the "hmenu" block. Most buttons have links so this styling takes over from the default styling that is applied to the "current page" button. A text colour needs to be defined here, otherwise the browser's default for links (or that defined locally) will be used. The background colour is varied from the standard menu button to indicate this is a link. (A menu button without a link will indicate a button whose target is the current page!) Setting text decoration to none overrides the browser default of adding an underline to any link. A link is normally an "in-line" feature (i.e. like italic or bold text, it can start and stop anywhere.) but here we want its features to extend over the whole button (i,e, the list item) so it needs to display as a block rather than its default in-line behaviour.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Button Hover Styling

1. On the left hand panel of the dialogue, select "#hmenu a:hover".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background" tab in the way that you learnt in the External Stylesheet exercise:

background-color: #333333;

EXPLANATION: This is another contextual rule that uses the CSS "pseudo-class" hover. This is one of a number of special case rules that allow control of the appearance of a link in the active, visited and hover states. Because this rule works like a class it inherits the properties of the normal version of the rule changing only the properties defined here. Now, should the pointer hover over a button with a link, the background colour will change.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Content Area Styling

1. On the left hand panel of the dialogue, select "#content".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background", "Border" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

background-color: #cccccc;
border-left: 1px solid black;
border-right: 1px solid black;

EXPLANATION: The content area reaches down to the footer and contains the "col1" and "main" areas which will appear to be superimposed over it. It has two functions. It ensures that the footer will always display beneath the longer of the two superimposed blocks and it provides a background colour to match the "col1" block should it be the shorter of the two. The borders are only required to each side as the top and bottom borders are supplied by the hmenu and footer blocks.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Column1 Styling

1. On the left hand panel of the dialogue, select "#col1".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Background" and "Box" tabs in the way that you learnt in the External Stylesheet exercise:

float: left;
width: 150px;
background-color: #cccccc;

EXPLANATION: Floating an element takes it out of the "normal flow" of the document content.(Normal flow refers to the general rule that one block follows the next with no overlap should an earlier one not fill the full width of the space available) Once taken out of the normal flow any following content will draw up alongside the floated block occupying any gap to the side of the floated element. The block is restricted to the desired width and given the desired colour.

3. Do NOT click the OK button. Instead elect the next rule in the left pane...

Go to TopApplying the Main Content Styling

1. On the left hand panel of the dialogue, select "#main".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background", "Box" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border-left: 1px solid black;
background-color: white;
color: black;
margin-left: 150px;

EXPLANATION: The left border is defined to match the right border provided by the content block. (Top and bottom borders are provided by the previous and following blocks.) The background colour overlays that defined for the containing content block. The text colour is defined here for convenience. It could equally well have been defined as standard for the entire page under a definition for the <body> tag. The left margin ensures that the block does not wrap under the col1 block when content here is longer. Leave this out if the content of this block is to wrap under the "col1" block when it is shorter than the main block.

3. Do NOT click the OK button. Instead select the next rule in the left pane...

Go to TopApplying the Footer Styling

1. On the left hand panel of the dialogue, select "#footer".

2. Paste the following code into the space under the "General" tab on the right hand pane. Alternatively you can enter (or edit) the values under the "Text", "Background" and "Border" tabs in the way that you learnt in the External Stylesheet exercise:

border: 1px solid black;
background-color: black;
color: white;
clear: both;

EXPLANATION: Although a black border around a black background may appear unnecessary, it is defined to ensure a uniformity of width (See Box Model) and to allow for easier colour changes of the footer background. Text is set white to be legible against the background. The clear rule forces this block to display below the bottom edge of any floated content. ("both" was chosen, rather than the more specific "left" or "right", so that no changes need to be made should it later be decided to swap the side of the column or add a Third Column.)

Dialogue after adding #footer code
Dialogue after adding #footer code

3. Finally, with the last of the sets of styling rules defined, click the OK button to close the CSS Stylesheets dialogue and return to the main window.

Go to TopThe "Finding Line Breaks" Trick!

At this point the Master Page is almost complete. However, the dummy text "Content" needs to be cleared and then it will be ready for customising.

Master Page
Master Page

1. Double-click on the word "content" to select it, then, on the keyboard, tap the DEL key. (This removes the word but the leaves an empty grey line caused by a line break which KompoZer will have inserted.)

2. The presence of the <br> code can be confirmed if you hit SHIFT-RIGHTARROW. This selects the hidden <br> code and displays its tag on the Status line. Right-click over the tag and select "Remove tag" from the menu. (The blank line is removed, although display problems with KompoZer may mean the Status line is not updated until you click somewhere else on the page - perhaps to confirm that "content" <div> itself remains intact, by placing the cursor in the text "col1" or "main" which should reveal its presence on the Status Line.)

All styles applied to the Master Page
All styles applied to the Master Page

4. The basic master page is now complete and can now be saved.

Does your copy look like my Master Page?

Go to TopDeveloping the Master Page

Do NOT be tempted to start filling the shell of your master page with real content.

If you have done your planning well you will now be thinking about how to implement the various additional features that will appear on the pages of your site. Add such things as headings and sub-headings using dummy text and the styling rules to apply to them.

You'll need these rules because, for example, if you place the cursor with the text "main" and select "Heading 1" from the paragraph formatting list, you'll find that the content and menu blocks separate, because the default styling for <h1> tags includes a top margin. To stop this you could set a zero top margin for <h1> tags and add some padding to move it down from the top slightly. Similarly, the default paragraph styling includes a bottom margin. To allow text in paragraph blocks to reach the very bottom of the "main" area, you would need to set <p> tags to have a zero bottom margin. With a top margin setting for <h1> set to zero, this might upset your intended display of the "Site Title" text. This will then require a contextual rule for the <h1> tag inside the header block.

To keep control of the styling all text should be placed in appropriate heading and paragraph tags, with more specialist blocks marked up with blockquote, list, preformatted and so on, as appropriate. Tables should only be used for tabular data and not for page layout. All these elements should then be styled through the CSS dialogue and just because your favourite browser renders them the way you like by default, don't assume that others will. It is wise to set everything in the stylesheet, even if it does just confirm the default rendering for that tag.

If you expect to include more complex features to your site, such as photo-galleries, that incorporate pop-up main images, you may want to use the code already developed by other authors. This is the time to visit sites offering such code and work out how they operate.

You'll also need to substitute the names of actual pages for the existing existing menu button text and replace the dummy links with real ones. That will mean that you need to have planned exactly what they should be and have decided on a file name so you can set the link location before you make copies of the master page.

You will, of course, also want to change the colour scheme. Adding graduated background images to various blocks can help disguise the inevitable rectangular components of web pages, especially if used in combination with some that provide sweeping curves.

Before you create any copies of your master page that you fill with the content of your first real page, you MUST export the stylesheet. Only then, can any further changes you make to the styles be applied any subsequent pages you create for your site.

Further hints and tips on changes you might make to this master page are provided in the Customise the Master Page and Further KompoZer Tips sections.

Go to Top Page updated: 10 December 2011