«sad.ark.tutorials.components»

Using Components for Efficient & Easy Navigation

In the face of all the controversy surrounding them, I used to be a big believer in frames. I still don't mind them actually. However the main reason I used frames was for the pure simplicity of being able to easily and quickly update navigation througout a site, instead of the tedious linking of each page every time I had to change something. For a non-programmer, that's about the only option you have. Now, I've found an even better way to do this; GoLive Components. In fact, it is almost the same as updating a navigation frame! Easy to do and very powerful. If you're interested, have a look.

Step One - Navigation and Layout

Let's say, for the sake of this tutorial, that you have a primary navigation for your site that has four main links from your homepage. Typically I would either put those in a bar across the top or down the side of the page. For this tutorial, we're going to have a simple navigation down the left side of our page. I'm assuming you allready have a good idea for your aesthetic and layout accomplished so all that has been worked through. This is what I came up with, and I've left the table borders showing so you can see how I've setup my tables:

Layout Revision One

Now, this page works fine, but it's only one page with no links. As soon as you create the other pages, you'd have to update the links for every page, on every page. Or, you could update the table containing the navigation and then copy and paste the table into each page. I've done that before. Still, a stupid mess. A better solution would be to put it into a frame. That is a great way to maintian navigation. But, let's now break apart this page and make our navigation into a re-usable component and get rid of the need for frames alltogether. Here's what I'm going to do. I'm going to go to step two.

Step Two - Create the Component

Select the table we are using to hold our navigation links and copy it. Then, make a new blank page and paste it onto the new page. Now we have a simple page with only a table holding our navigation. Mine now looks like this:

Now, we are going to save this page that holds our navigation. Go to File > Save As. In the Save As window, click on the handy site folder button as I've shown below. From the pop-up menu, choose Components. I've named my component page conav.html. Click save and we're on our way.

What we just did was to have GoLive save our page as a component instead of our regular html pages. You will notice that this is also how you save Stationary and Templates. Now our page will be found in our site components section of the object pallet. We'll go grab it next.

Step Three - Place the Component

Next, going back to my original page, I'm going to delete the navigation table that we copied and pasted into our component page in the last step. We will no longer need it. Now, in the empty table cell that held my navigation table, I'm going to place the component. To do this, follow these steps and check out the pic below. 1) Click the Site Extras button in the Objects Pallet. 2) Now click the pop-up menu at the bottom of the pallet and select the Components option. 3) If everything went right, you should now see the component we saved earlier.

With our page open, drag the component into to where you want it. I'm putting mine right back into the table cell on the side of my page where my old navigation table was. My page now looks quite similar to the old page. Notice the green triangle in the top left to let you know you are dealing with a component. Also, I'm going to turn off the table borders now. This is what my page looks like now with the component in place:

**Note that components can sometimes look very strange. This simple one is fine but when I've used a complex floating box navigation, placing the component does some strange things to the layout. It does not effect the end result but can make it a little difficult for layout.

Now that I have my main page and the component all in place, I'm going to save this main page three more times to make my page two, three and four. I'm doing it this way for ease of creating the tutorial. You may have existing pages or templates that you will need to drop the component navigation onto.

Step Four - Editing the Component

So, now I have 4 pages, each containing the component we created. The only problem is that I never linked the pages together, I just made some bogus links that don't actually go anywhere. This is where it get's really cool! Instead of editing the links for every page, we can now edit the component and it will automatically update all our pages! Check this out. Open any of the pages we just created and double click on the component (indicated by the green triangle mentioned and shown in the pic above). The component page opens and I edit it just like I would any page. After linking up all the new pages, save the component and GoLive brings up the following window:

This is great! It tells us all the pages using this navigation and let's us know it wil update them all for us. Rocks. Soon we'll be making navigation like McDondalds makes hamburgers! Have a look at the finished four pages.

Finished Component Example

Going forward - now, as you add more pages, simply drag the component onto them and any changes in navigation you make to the component will automatically be applied to all your pages! No more frames, or insane nights of searching for all the pages that have links to be updated!