|
|
|
EZ-PageBuilder - Quick Start Guide
|
|
|
11. EXTRA CREDIT - Adding Background Color and Side Bar Navigation.
|
|
|
|
|
The previous steps have taught you how to build a basic but functional web site. There are EZ-NetTools® customers that have built a very successful on-line business using these very basic tools combined with a very effective marketing strategy. However, most people are not satisfied with a web site that simply displays text and graphics as a series of blocks stacked on top of each other down the screen. They prefer the elements (text and graphics) to display across as well as down the screen. While the advanced "Layout Manager" block will allow you accomplish that affect, it does require some skill and experience to effectively implement it. However, you can achieve some of these effects very simply with little more than you have already learned. Let's do it.
|
|
|
Adding A Background Color
|
|
|
It is easy to change the background color or graphic on all the pages on your web site. This is done through modifying the Global Information. This tool allows you to configure things that affect all your pages such as your background color as well as the header graphic, the default text color, and the contact information that appears as a footer on every page. For this course, we would like to change the background color to "Corn silk." The following link will take you to the specific page of an on-line course that deals with background color. Click on the link below to learn how to make that change and then use the "Back" button to return to this course.
|
|
|
|
|
Note: there are two links to the Global Information tool. One link is on the Construction tab. The other is within EZ-PageBuilder. One of the the drop down menu items under the "View" is Global information. Both links take you to the same tool.
|
|
|
|
|
Creating Side Bar Navigation
|
|
|
Now we will move the row of navigation buttons to appear as a side bar on the left side of the page. You must be using the EZ-PageBuilder tools. You will edit the Button Bar block that you have created earlier. To do this, click on the Edit icon (pencil) of the block "3-Button Builder."
|
|
|
|
|
At the bottom of the Button Builder window, select the "Sidebar" check box by clicking in the square.
|
|
|
|
|
Click "Submit" to see that the button bar navigation has moved to the left.
|
|
|
Preview your work to see what it will look like. That was easy wasn't it. A navigation bar on the left side is not only very standard, but also makes it very easy for your users to navigate your site. If you eventually develop a web site with many pages, you will likely want the same navigation bar on all your pages. The "Mirror" block will allow you to replicate the same block on all pages along with any future updates. However, explaining that block is beyond the scope of this course.
|
|
|
|
Not only is it easy to move your navigation buttons to a side bar, it is also very easy to dress up the side bar a little bit.
Begin by choosing "Page Options" from the "File" drop down menu while in EZ-PageBuilder.
|
|
|
|
Under the SideBar Alignment section, select the option next to "Under Header."
In the SideBar Width section in Pixels field, enter 120.
In the SideBar Background Color section, use the EZ-ColorPicker button to select "Maroon." Then click "OK"
|
|
|
|
|
Click Submit. You should have a page that looks like the graphic at the top of this page. The page background will be a light yellow and the navigation buttons will be on the side located in a maroon colored side bar.
|
|
|
You are now a Web Master! With this knowledge you can build a very functional web site. As you get more and more comfortable with the tools, you will want to experiment with the other basic blocks and eventually move into the advanced blocks. You will really enjoy seeing your creation on the World Wide Web.
|
|
