Keeping navigation current for Contribute users

[richsky]

Hello all, my name's Richard.

I'm using dreamweaver to save time and give newbies website update
capabilities using Contribute. It's quite simple and affordable, I'm not
selling you Macromedia as the best, but it helps. I've been using this solution
enough these last months and I've got a permanent problem. If I want to produce
website for my customers and give them the ability to content manage and add
pages, I have to give them control over navigation (right?). But how can the
navigation shows on which page the user is after a Contribute user add or
changed a link?

Not to simply add or change a link in a menu (this is simple, if I do use
includes, layered menu system that use includes, I give them access to a page
that link to these included files (clear enough?).

Basically I used Dreamweaver to produce Contribute compatible template system.
I use php includes to repeat main menu (or sometime submenu) in the website and
all CSS features possible to properly code the template and design it. It's
convenient for several reasons, first it's easy, second it avoid you to put a
new link on every single page (and then update it on every single page).

But to be really efficient and user friendly, and of course to show where you
are on the site, I use CSS to add life to it (rollover, etc..). Refers to this
excellent ALA article about how you can keep navigation current with CSS and
PHP and try it at home: [url]http://www.alistapart.com/articles/keepingcurrent/[/url]
There's plenty of usefull and interersting things there that you might use to
build your website (and to learn to use editpad for coding).

Using ALA's technique from Jason Pearce (thanks to him) seems to be far more
easy to use than Macromedia's one. Refer to
[url]http://www.macromedia.com/devnet/mx/dreamweaver/articles/button_states.html[/url] the
"Control button state" article of MM Murray Summers and Brad Halstead which
uses complex code that also wont give the possiblity to a Contribute user to
change the menu itself. First because they should edit an image (my user edits
only text and knows only few word capabilities, as every newbie does) and then
because even with Contribute how to add or change a menu item using this
complex code? No way (repeat NO WAY or give me the solution and you'll be
eligible as our new pope soon).

So here we are, why not mix a bit of these two solutions? In the "Control
button state article" you learn about template parameters... eg: <!--
TemplateParam name="pagename" type="text" value="home" --> How wonderful, it
gives you access to a parameter of the page via Contribute! (Exactly what I
need, but how can I use this parameter to change this: <?php $thisPage="About
Us"; ?> my piece of php code that says your are on the "About Us" page so the
CSS highlight About us in my menu...

Any idea you, king of Contribute and Dreamweaver and coding?


A List Apart Article

Keeping Navigation Current With PHP
by Jason Pearce

Turning unordered lists into elegant navigational menus has become the new
favorite pastime for many web developers. Adding a unique id or class attribute
to indicate which menu item reflects a user?s current page, however, can become
laborious. Even if you use body id attributes instead, as ALA does, some labor
is involved and it is easy to make mistakes. But thanks to PHP, we can add
these current-page indicators automatically.

Consider this tutorial a marriage of Christopher Robbins?s Manage Your Content
With PHP and Mark Newhouse?s CSS Design: Taming Lists. The offspring of this
marriage will be a single navigational document called navigation.php. Using
PHP, we will include our one-size-fits-all navigational menu into every page of
our site. Unlike other site-wide includes, however, this one will know which
page the user is viewing and will adjust the current-page indicator
appropriately.
Keeping current

To visually indicate which page of your carefully crafted CSS navigational
menu represents the current page, you typically add an id or class attribute
with a currentpage value, and style accordingly. Your markup and CSS might look
something like that shown next:
HTML

<div id="navigation">
<ul>
<li><a href="#">Page One</a></li>
<li id="currentpage"><a href="#">Page Two</a>
</li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>
</div>

CSS

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigation li {
background: #ccc;
border-left: 1px solid #999;
float: left;
margin: 0;
padding: 0;
}

#navigation a {
color: #666;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
}

#navigation a:hover {
color: #333;
}

#navigation #currentpage a {
background: #fff;
color: #333;
}

The result will look something like this:

* Page One
* Page Two
* Page Three
* Page Four



The navigational menu indicates which page the user is on by displaying the
Page Two link in a different color and background. The down side? As a
developer, you must remember to manually remove id="currentpage" from one link
to the next as you develop each page. Not so if you use PHP.

PHP is an open-source server-side language. In order to use PHP, you will need
the PHP module installed on your server. Most Linux servers have this module
installed, and the PHP module is also available for Microsoft servers. If you
are unsure about your server or modules, just ask your web host.
What to include?

We?ll start by removing the navigational menu from all pages and placing it in
a separate document called navigation.php. This document will contain just the
(X)HTML that makes up your navigational menu. In this case, it will contain the
above <div id="navigation"> and all of its content.

As you remove the navigational menus from each page, you?ll add in a pinch of
PHP. All it takes is some basic PHP to include the content of navigation.php.

PHP?s include() function offers a handy way to call an external file from the
server. Simply replace the navigational menu with this line of code, being sure
to adjust for the location of the file on your server. I like to put all of my
PHP includes in a folder named phpincludes. (How original.)

<?php include("phpincludes/navigation.php"); ?>

While you have your document open, you?ll also need to add a unique identifier
at the very top of every page that PHP will understand, ideally appearing
before the HTML tag. You?ll do this by creating a varible called $thisPage and
assigning a value that is both descriptive and unique to the document.

Naming your document is easy. If you are working on the ?About Us? page,
assign the value About Us, like so:

<?php $thisPage="About Us"; ?>
<html><head>

Since PHP is a server-side language, the server will take care of the naming
of the document and the inclusion of navigation.php well before the the file is
sent to the browser. All that?s left is adding some PHP to your navigational
file.
Putting it together

If you haven't figured it out, the current-page magic is determined by the PHP
value of $thisPage. Since we have assigned a unique value to $thisPage for each
XHTML file, we are able to craft a navigational menu that will automatically
add the id="currentpage" to the appropriate link before the page is ever sent
to the user. Here?s how we do it:
HTML and PHP code for navigation.php

<div id="navigation">
<ul>
<li<?php if ($thisPage=="Page One")
echo " id=\"currentpage\""; ?>>
<a href="#">Page One</a></li>
<li<?php if ($thisPage=="Page Two")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Two</a></li>
<li<?php if ($thisPage=="Page Three")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Three</a></li>
<li<?php if ($thisPage=="Page Four")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Four</a></li>
</ul>
</div>

Pay attention to all of the PHP syntax. The dual equal signs and backslashes
next to the nested quotation marks are required. Your links should also go to
real pages on your site. I?m just using the pound symbol for simplicity, but
you knew that.

Upload your files to the server and give the menu a test run. This is
important, for unless you?ve configured PHP on your client or are using a tool
like Dreamweaver, the PHP includes will not run locally.

If all goes well, the server will receive your request, recognize and run the
PHP on your page, import your navigation.php file, and return a custom-built
(X)HTML document that ? like your mother ? seems to always know where you've
been.


Dreamweaver Article

Murray Summers
[url]www.great-web-sights.com[/url]

Brad Halstead
dreamweavermx-templates

Controlling Button States with Template Parameters and Expressions

On a complex (or even a relatively simple) website, there's always the issue
of displaying, in an easily grasped manner, some kind of roadmap (or
'breadcrumb') so that the visitor can understand where in the page/folder
hierarchy they are located. They need to know how they got there?or conversely,
how to get out! This is often accomplished by using a down state for the proper
button on a site, to indicate which page the visitor is currently on. In
earlier versions of Macromedia Dreamweaver, this was more challenging, and
often involved writing custom JavaScript code.

Nevertheless, some hardy users plunged ahead and, even on a template page,
recognized that it could be done using one of these strategies:

1. You can place the buttons inside editable regions. By doing so, you can
change the source of each button on any child page. The advantage to this
method is that it's easy to do?you can simply change the source for the image
on the corresponding page. The disadvantage is that if you have a three-state
rollover (up, over and down), and

[richsky]

Well it works.

Use this code in the <head>

<!-- TemplateParam name="current" type="text" value="'home'" -->

<?php $thisPage=@@(current)@@; ?>

And contribute users will be able to create new pages and setting which item
is the current in their menu.

Cheesy no?