The previous three chapters of the Serif WebPlus X2 tutorial series dealt with how to create a web page, add and manage pictures, add, manage and style text content as well as publish a website. This chapter discusses how you can add a navigation menu bar to your site with this WYSIWYG (what you see is what you get) web editor.
If you have only just arrived at thesitewizard.com and are curious about creating your own website, you should start by reading the article How to Make a Website. The guide explains a lot of basic concepts and takes you through the steps of creating a website. Armed with that information, you can then start with first chapter of the Serif WebPlus Tutorial, if you plan on using the WebPlus editor.
By the end of this chapter, you will have created a navigation menu bar for your website.
If you observe the various websites you visit, you will notice that majority of them have links to their most important pages placed somewhere on every page. On thesitewizard.com, they are depicted as buttons lining the leftmost column of every page. Clicking any of these buttons will take you to the index page of one of the main sections on the site. Some of the top level pages are also linked from this menu of buttons, like the home page, the feedback form, the site map, etc. Since the navigation menu stretches along one column, this type of menu is said to be a vertical menu. Vertical navigation menus are typically placed either on the leftmost or the rightmost column of a site. It is also possible for navigation menus to be placed horizontally along the top of a page or at the bottom. Menus placed in this way are called horizontal menu bars.
Serif WebPlus X2 makes it easy for you to create navigation menus of either type for your site. That is, you can make either horizontal or vertical menus, or both.
Start up WebPlus and open the website that you have created in the previous chapters.
Click the "Insert | Web Objects | Navigation Bar..." menu item. If you will remember, this means to click the "Insert" menu, and when a menu appears, click the "Web Objects" item on that menu. A submenu will appear when you do that. Click the "Navigation Bar..." item on that menu.
A dialog box, with its title bar reading "Navigation Bar Settings", will appear. You have a few choices on the type of menu to insert:
The "Theme Graphic" buttons are actually pre-made graphical images with specific designs. Since they are graphical images, they may have fancy appearances like rounded edges, background colours (or "colors" if you use US English) that fade in or out, and so on.
"Text Only" buttons are like the buttons you see on thesitewizard.com. Their appearance as buttons is only an illusion, since they are actually plain text with a different background colour.
The "Horizontal" choice for either of the above options will let you create a menu that spans the horizontal width of your web page. The "Vertical" option lets you create a menu that is meant to be placed in either the left or right column of your website.
Note that the choices you make here only affect the basic design of the button. The actual colours of the button is configured separately, as is the text that appears on the button. In addition, if you are not sure what to choose, just select one and see how it appears on your page. You can always delete the entire menu later if you don't like it and insert a new one.
If you have clicked one of the "Theme Graphic" options, choose one of the design styles in the list box below.
When you have finished choosing the type of nav menu you want, click the "OK" button.
Your menu will appear somewhere in the centre of the page. Drag it to the location that you it to appear. If the menu is not to your liking, click it once to select it and hit the DEL key on your keyboard. You can then go back to the earlier steps to insert a different type of menu.
Note that at this point in time, there is only one button in your menu. Don't worry about that. As you create more pages for your site in later chapters, WebPlus X2 will automatically add more buttons for those pages. For now, since you only have one page, you can only see one button.
If you are using one of the Theme Graphic menus, you can also resize it in the usual way be dragging one of the square boxes along its edges. That is, you resize it the same way you have been resizing text boxes in the previous chapters.
If you are using one of the Text Only menus, right-click the menu button and select the "Edit Navigation Bar..." item in the menu that appears. The dialog box you saw earlier when you created the menu button will appear. Click the "Text Only Properties" tab near the top of the dialog box. At the bottom of the dialog box, in the "Advanced" section, click the "Fixed width" radio button and enter the size you want in the box below.
(Again, if you don't know what width to enter, just enter some random value, check out its effect on your monitor, and if you don't like it, return to the dialog box and enter a new value. Do this until the button has the size you want.)
To change the colour of a Theme Graphic menu, right click the button on your page and click the "Edit Theme Graphic..." item. A dialog box, entitled "Theme Graphic Settings" will appear.
For font changes, click the "Specify a font for this Theme Graphic" check box. You can then select a font from the drop down box below.
The colour of the button can be modified too. To do this, click the "Back Colour" tab at the top of the dialog box, then click the "Specify a fill for this Theme Graphic". The "Edit" button on the right side of that item will now be clickable. Click it to select your desired colour.
In your published site, the button's background colour changes when a mouse hovers over it. This mouseover colour, sometimes called "rollover" colour or "hover" colour can be set from the "Over Colour" tab. Click the "Specify a fill for this Theme Graphic" checkbox in that tab and select your colour after clicking the "Edit" button.
Finally, to change the colour of the text on the button, click the "Text Colour" tab at the top of the dialog box, then click the "Specify a fill for this Theme Graphic". Click the "Edit" button on the right side of the item and select a new colour for the text.
If you have chosen a Text Only navigation menu, and wish to configure its appearance, right click the button and click the "Edit Navigation Bar..." item on the menu that appears. Then click the "Text Only Properties" tab.
From this screen, you will be able to change the colour of the text by clicking the down arrow next to the "Colour" item in the "Text" section. The background colour of the button can likewise be changed by clicking the down arrow next to the "Colour" item in the "Menu" section. The "Highlight colour" for both the "Text" and "Menu" refer to the colours of the text and the background, respectively, when the mouse hovers over your menu.
In addition, if you've not already noticed it, you can choose a different font by selecting it from the drop down box in the "Font" field.
The text that appears on your navigation menu buttons is set in the page properties for the page. To set this, right click the "Home" button in the rightmost column in the WebPlus X2 window. (Note: I said the rightmost column of the WebPlus window, not your web page.) From the menu that appears, click the "Page Properties..." item. You have encountered this dialog box before, in chapter 3 when you wanted to change the page length of your web page in WebPlus X2.
In the dialog box that appears, the word "Home" should be currently set in the "Page name" field. The text in this field determines what is specified in your navigation menu button. It also determines the name shown in the rightmost column in WebPlus (where you right-clicked to get the Page Properties dialog box).
For this page, do not change the name from "Home". Although "Home" may seem to you like a pathetic name for a website's main page, it is the label used by practically every website on the Internet to refer to such a page. In view of this, web surfers automatically know what "Home" means, and will know that they can click on such a link to get to your main page. If you change it to something else, because you think you want a fancy name, you may end up making your website less usable for the majority of your users. Remember that the navigation menu is meant to help your visitors, not to impress them with your vocabulary.
Anyway, if you make changes in the "Page name" field, remember to click the "OK" button to leave the dialog box. Otherwise, if you're just taking a look, and don't plan to make any changes, click the "Cancel" button to dismiss it.
Once you've finished creating your navigation menu, save your work and publish it to your website. As usual, check out your site in your web browser.
In the next chapter, we will deal with the more general topic of linking, where you will learn how to link to other sites on the Internet, to other web pages on your website (such as those you don't want to put into the navigation bar), to PDF files, to images, and so on. You will also learn how to convert normal pictures in your main web page into clickable links.
Copyright © 2009-2019 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Serif WebPlus Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Navigation Menu to Your Website with Serif WebPlus X2
