 |
 |
 |
|
|
|
|
|
|
How many times have you wanted to have
a visible trail through the folder
architecture of your website for
easy navigation to a previous area,
as seen on the Macromedia site? It
is an easily understood and instantaneous
'roadmap' of where you are in the
current site, and how to get back
the way you came in. Breadcrumb trails
are a particularly effective tool
in a complex network of files and
navigation links.
There are many ways to
implement this nice little feature—but
doing so in a template controlled environment
can prove challenging.
Options for Creating
Breadcrumb Trails
There are several strategies available
that you can use. Some are server-side,
some use JavaScript routines to calculate
the current position, and others are
hand made on each and every page (YIKES!).
While we recommend that
you use a JavaScript routine or a server-side
solution, we were asked by a template
enthusiast (Chuck Parish) how to troubleshoot
some issues that he was having with
templates, parameters, mouse-over events
to change the browser status bar and
the breadcrumb trail. Our solution
worked well for him—and may help
you with your website, too.
|
|
|
| |
Sample Files
Before you begin, you should download the sample
files to follow along with this tutorial: |
|
|
| |
| Now let's get started. |
| |
- Open your file management software (Windows
Explorer or Macintosh Finder) and create a new
folder somewhere on your local hard drive. Extract
or unstuff the sample files into the new folder
you just created.The downloadable sample files
contain files and folders in a compressed format
(ZIP for Windows and SIT for Macintosh users).
When you extract these files, it's important
that you do so in a manner that will retain the
original folder structure.
- Launch Dreamweaver MX and create a new site
definition (using the Site > New Site... ). Set
the local root path to the folder named crumb_trails,
which is located inside the folder that you created
in step 1. Name this site whatever you want.
- Open the templates named woohoo.dwt; ugh.dwt and drat.dwt located
in the Templates folder. These are the templates
that we used to experiment with, as we developed
the trail navigation block. Set your page
view setting to the Standard View (NOT Layout
View) so that you can see both the code and design
views (split-screen). This will make it easier
to see what's going on in the code.
- Open the child page named folder1/folder2/page2.html.
This is a child page that was created from the
template named woohoo.dwt to show the functionality
and control of the crumb trail using template
parameters and expressions.
-
Leave all the files open so
that you can easily switch between them as
we run through the description below of what
was done and why.
|
| |
Experimenting
with the Templates
The objective of this exercise (as explained to us
by Chuck) was to provide a template solution for
a breadcrumb trail system using the expressions and
parameters in Dreamweaver MX. The breadcrumb
trail should show the path by which the user arrived
on any given page in the tree structure. The items
in the path should be hyperlinked, and when moused
over, the status bar message of the browser should
change, displaying a descriptive navigation message
rather than a URL. The current page should not be
linked, but Chuck also wanted a next and previous
page navigation method. The template parameter was
to be controlled through the Modify > Template
Properties... dialog. Sounds simple, right? |
| |
Attempt 1 (100%
Failed)
We tried making a unique parameter in the template
that would contain the whole string for the breadcrumb
trail. Then, on each child page, we modified the
parameter value using the Modify > Template Properties...
dialog to show a new string or breadcrumb trail for
each page in the site. |
| |
Sample Code
for Attempt 1
Our first attempt can be analyzed by looking at the
files ugh.dwt and ugh-Index.html.
Here's a snippet of the code we used: |
| |
<!-- TemplateParam
name="trailsegment"
type="text"
value="<a href="page1.html"onMouseOver="window.status='Return to Page 1 of How to find
God.';return true" onMouseOut="window.status='';return
true">Page 2</a><span class="navcrumbstitle">> </span>"
--> |
| |
The Problems
with Attempt 1
This methodology was abandoned due to the fact that
the string was complex in nature as related to double
and single quotations. Although a workaround
could be provided, the Modify > Template Properties...
menu item and the interface of Dreamweaver MX would
not read or manage the current parameter value. In
other words, it was an impending train wreck from
a maintenance point of view! This in turn revealed
another issue—if you changed the parameter
value in code view, the change would not propagate
on the child page(s) until the Modify > Template
Properties... was opened and closed. Opening and
closing the Template Properties dialog forced the
Template engine to run, which then updated the parameter
value used on the page from based on the value set
manually in the head. This approach would make it
too labor-intensive to update each page. |
| |
Attempt 2 (75%
Passed, 25% Failed)
Our next strategy involved separating the modifiable
content of the string into unique parameters. |
| |
Sample Code
for Attempt 2
Our second attempt is replicated in the files drat.dwt and drat-Index.html.
Here's some of the code we used: |
| |
Head Region:
<!-- TemplateParam name="Displayroot" type="boolean" value="true" -->
<!-- TemplateParam name="Nameroot" type="text" value="Home" -->
<!-- TemplateParam name="URLroot" type="text" value="index.html" -->
<!-- TemplateParam name="Statusroot" type="text" value="Return to our Home Page" -->
<!-- TemplateParam name="Displaylvl1" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl1" type="text" value="Folder Level 1" -->
<!-- TemplateParam name="URLlvl1" type="text" value="folder1/index.html" -->
<!-- TemplateParam name="Statuslvl1" type="text" value="Go to Folder 1 [root]" -->
<!-- TemplateParam name="Displaylvl2" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl2" type="text" value="Folder Level 2" -->
<!-- TemplateParam name="URLlvl2" type="text" value="folder2/index.html" -->
<!-- TemplateParam name="Statuslvl2" type="text" value="Go to Folder 2 [root]" -->
<!-- TemplateParam name="Displaylvl3" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl3" type="text" value="Folder Level 3" -->
<!-- TemplateParam name="URLlvl3" type="text" value="folder3/index.html" -->
<!-- TemplateParam name="Statuslvl3" type="text" value="Go to Folder 3 [root]" -->
<!-- TemplateParam name="Displayprev" type="boolean" value="true" -->
<!-- TemplateParam name="Nameprev" type="text" value="Previous Page" -->
<!-- TemplateParam name="URLprev" type="text" value="page2.html" -->
<!-- TemplateParam name="Statusprev" type="text" value="Back to Page 2" -->
<!-- TemplateParam name="Displaynext" type="boolean" value="true" -->
<!-- TemplateParam name="Namenext" type="text" value="Next Page" -->
<!-- TemplateParam name="URLnext" type="text" value="page4.html" -->
<!-- TemplateParam name="Statusnext" type="text" value="Forward to Page 4" -->
<!-- TemplateParam name="Namecurr" type="text" value="Page 3" --> |
| |
Body Region:
<span class="trail">You are here: <!-- TemplateBeginIf cond="Displayroot" -->
<a href="@@(URLroot)@@" onMouseOver="window.status='@@(Statusroot)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameroot)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl1" -->
> <a href="@@(URLlvl1)@@" onMouseOver="window.status='@@(Statuslvl1)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl1)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl2" -->
> <a href="@@(URLlvl2)@@" onMouseOver="window.status='@@(Statuslvl2)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl2)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl3" -->
> <a href="@@(URLlvl3)@@" onMouseOver="window.status='@@(Statuslvl3)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl3)@@</a>
<!-- TemplateEndIf -->
> @@(Namecurr)@@
<!-- TemplateBeginIf cond="Displayprev" -->
: <a href="@@(URLprev)@@" onMouseOver="window.status='@@(Statusprev)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameprev)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaynext" -->
: <a href="@@(URLnext)@@" onMouseOver="window.status='@@(Statusnext)@@';return true;" onMouseOut="window.status='';return true;">@@(Namenext)@@</a>
<!-- TemplateEndIf --></span> |
| |
The Problems
with Attempt 2
This methodology was almost there, but we
were missing the ability to customize the separator
markers for the trail, as well as for the next and
previous selections. We were also forced to show
those separators, (which doesn't give us much flexibility,
but would have worked in a pinch). |
| |
The Final Attempt
(100% Passed!):
This time, we were able to customize the unique trail
separator, the next and previous separators, and
the descriptive status bar message on the breadcrumb
trail links. We were also able to programmatically
control the display the separator(s)—only displaying
them if the previous segment of the trail is displayed—in
order to prevent the possibility of multiple separators
displaying in the trail. |
| |
Sample Code
for the Final Attempt
Our first attempt can be analyzed by looking at the
files woohoo.dwt and woohoo-Index.html.
Here's the code we used: |
| |
Head Region:
<!-- TemplateParam name="Displayintro" type="boolean" value="true" -->
<!-- TemplateParam name="Nameintro" type="text" value="You are here: " -->
<!-- TemplateParam name="BCTrailMarker" type="text" value="&raquo;" -->
<!-- TemplateParam name="PrevNextMarker" type="text" value="&laquo;" -->
<!-- TemplateParam name="Displayroot" type="boolean" value="true" -->
<!-- TemplateParam name="Nameroot" type="text" value="Home" -->
<!-- TemplateParam name="URLroot" type="URL" value="index.html" -->
<!-- TemplateParam name="Statusroot" type="text" value="Return to our Home Page" -->
<!-- TemplateParam name="Displaylvl1" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl1" type="text" value="Folder Level 1" -->
<!-- TemplateParam name="URLlvl1" type="URL" value="folder1/index.html" -->
<!-- TemplateParam name="Statuslvl1" type="text" value="Go to Folder 1 [root]" -->
<!-- TemplateParam name="Displaylvl2" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl2" type="text" value="Folder Level 2" -->
<!-- TemplateParam name="URLlvl2" type="URL" value="folder2/index.html" -->
<!-- TemplateParam name="Statuslvl2" type="text" value="Go to Folder 2 [root]" -->
<!-- TemplateParam name="Displaylvl3" type="boolean" value="true" -->
<!-- TemplateParam name="Namelvl3" type="text" value="Folder Level 3" -->
<!-- TemplateParam name="URLlvl3" type="URL" value="folder3/index.html" -->
<!-- TemplateParam name="Statuslvl3" type="text" value="Go to Folder 3 [root]" -->
<!-- TemplateParam name="Displayprev" type="boolean" value="true" -->
<!-- TemplateParam name="Nameprev" type="text" value="Previous Page" -->
<!-- TemplateParam name="URLprev" type="URL" value="page2.html" -->
<!-- TemplateParam name="Statusprev" type="text" value="Back to Page 2" -->
<!-- TemplateParam name="Displaynext" type="boolean" value="true" -->
<!-- TemplateParam name="Namenext" type="text" value="Next Page" -->
<!-- TemplateParam name="URLnext" type="URL" value="page4.html" -->
<!-- TemplateParam name="Statusnext" type="text" value="Forward to Page 4" -->
<!-- TemplateParam name="Namecurr" type="text" value="Page 3" --> |
| |
Body Region
<span class="trail">
<!-- TemplateBeginIf cond="(Displayintro==true)" -->
@@(Nameintro)@@
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displayroot" -->
<a href="@@(URLroot)@@" onMouseOver="window.status='@@(Statusroot)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameroot)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="(Displayroot==true)" -->
@@(BCTrailMarker)@@
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl1" -->
<a href="@@(URLlvl1)@@" onMouseOver="window.status='@@(Statuslvl1)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl1)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="(Displaylvl1==true)" -->
@@(BCTrailMarker)@@
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl2" -->
<a href="@@(URLlvl2)@@" onMouseOver="window.status='@@(Statuslvl2)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl2)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="(Displaylvl2==true)" -->
@@(BCTrailMarker)@@
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaylvl3" -->
<a href="@@(URLlvl3)@@" onMouseOver="window.status='@@(Statuslvl3)@@';return true;" onMouseOut="window.status='';return true;">@@(Namelvl3)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="(Displaylvl3==true)" -->
@@(BCTrailMarker)@@
<!-- TemplateEndIf -->
@@(Namecurr)@@
<!-- TemplateBeginIf cond="(Displayprev==true)" --> @@(PrevNextMarker)@@ <!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displayprev" -->
<a href="@@(URLprev)@@" onMouseOver="window.status='@@(Statusprev)@@';return true;" onMouseOut="window.status='';return true;">@@(Nameprev)@@</a>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="(Displaynext==true)" --> @@(PrevNextMarker)@@ <!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="Displaynext" -->
<a href="@@(URLnext)@@" onMouseOver="window.status='@@(Statusnext)@@';return true;" onMouseOut="window.status='';return true;">@@(Namenext)@@</a>
<!-- TemplateEndIf --></span> |
| |
| An Explanation
of the Parameters |
| |
| Parameter Name |
Type |
Function |
| Displayintro |
B
|
Set visibility
of the custom Trail message (T/F) |
| Nameintro |
T
|
Customizable Trail
message |
| BCTrailMarker |
T
|
Customizable Trail
separator |
| PrevNextMarker |
T
|
Customizable Current/Previous/Next
separator |
| Displayroot |
B
|
Set visibility
of the root level (T/F) |
| Nameroot |
T
|
Customizable root
text |
| URLroot |
U
|
Customizable root
url (from current position) |
| Statusroot |
T
|
Customizable Status
bar message |
| Displaylvl1 (through
3) |
B
|
Set visibility
of sub-levels 1 through 3 (T/F) |
| Namelvl1 (through
3) |
T
|
Customizable sub-levels
1 through 3 text |
| URLlvl1 (through
3) |
U
|
Customizable sub-levels
1 through 3 url (from current position) |
| Statuslvl1 (through
3) |
T
|
Customizable Status
bar message |
| Displayprev (next) |
B
|
Set visibility
of previous/next link (T/F) |
| Nameprev (next) |
T
|
Customizable previous/next
text |
| URLprev (next) |
U
|
Customizable previous/next
url (from current position) |
| Statusprev (next) |
T
|
Customizable Status
bar message |
| Namecurr |
T
|
Customizable Current
location Text |
| |
Table
Legend
|
T =
Text, B =
Boolean (true/false), U =
URL
|
|
| |
| All of these items
are customizable on the child page built from this
template using the Modify > Template Properties... menu
item, which allows you to have total control of your
breadcrumb trail on each and every page. |
| |
Understanding
Parameters and Expressions
Without the parameters and expressions, our code
would look like this in the template:
Note: For the sake of simplicity,
we are only looking at a single segment of the entire
trail here. |
| |
<a href="index.html" onMouseOver="window.status='Return to our Home Page';return true;" onMouseOut="window.status='';return true;">Home</a> |
| |
| If we decided not to
use template parameters and expressions, we would've
had to place the code above into an editable region
in order to customize to it. As it turns out, the
child page (when viewed through the browser) looks
identical to this, but our trail exists in a non-editable
area, allowing consistency throughout the site for
position and style. If you like, you could add a
parameter for the style too, but there is no way
for the style sheet selections to be controlled through
the Modify Template Properties dialog. Since our
original goal was to control the breadcrumb trail
through templates, we decided not to control the
styles using a parameter. Instead, we let the template
itself dictate the style, since it is much better
suited to display a preview of the settings. The
style selector can then be used to make the style
settings. |
| |
Things to Consider
Because this is a home-grown breadcrumb trail method,
you will have to customize each of these parameters
after you initially save the child page. Once customized,
you can feel free to move the files to other locations
in your site's architecture. The links will be
maintained because we used the URL parameter type
for the URL* parameters. Cool, huh? |
| |
In
addition, because of the interplay among these
parameters and the effect of that on the final
resulting code in the child page, it is possible
to get things a little jacked by making an uncoordinated
adjustment of these parameters. Make sure you know
what you are modifying and why!
|
| |
Modification
Suggestions
There are several enhancements that you can make
to this trail exercise, some of which have caveats
if you apply them to a site which already contains
the crumb trail as described above. |
| |
- Change the template Name* parameter
values to something descriptive so that when
the Modify > Template Properties... dialog
is run, there is descriptive content in the parameters
that is understandable to the template user.
- As an alternative to Modification #1, add a
new optional region containing a layer that houses
the instructions for the crumb trail parameters.
(This method is preferred, for some, over Modification
#1.)
WARNING: If you add this after
the fact in an existing site, be sure to set
the parameter for the optional region to false
prior to updating the site. If you do not, then
this layer will be visible on every existing
page based on the template. This will look bad.
If this happens, you'll need to manually modify
each instance page using the Modify > Template
Properties... dialog. Once the site
is updated, feel free to set the template parameter
to true, so that any new pages created from the
template display the instructions layer.
- Add the Namecurr expression to the template's
title tag so that you don't have to remember
to update the title of the document. This will
create a title based on the value of the Namecurr
parameter.
- Add or remove folder levels as required. If
adding folder levels, be sure to keep the same
naming scheme for the template parameters in
the head section and the regions in the body
section where the crumb trail resides. Don't
forget to modify the expressions that display
the trail separator so that they are relevant
to the appropriate folder.
WARNING: If you add folder levels
after the fact in an existing site, be sure to
set the parameter for the new folder level(s)
to false prior to updating the site. If you forget
to do this, these newly added folder levels will
be visible on every existing page based on the
template. This will require manual modification
of each instance page using the Modify > Template
Properties... dialog. Once the site
is updated, feel free to modify the template
parameter to be true (displayed) so that any
new pages created from the template display the
full possible crumb trail path.
|
About
the authors
Although a biochemist by training, Murray
Summers has spent the last 20 years working in
the computer industry. In 1998, Murray started
his own website production company, Great Web
Sights (www.great-web-sights.com)
and he is the co-author of Dreamweaver
MX Templates. As a Team Macromedia member,
he also participates in the sponsored forums for
Dreamweaver and other products. He lives in rural
Philadelphia with Suzanne, his lovely wife, their
12-year-old daughter Carly, a Golden Retriever,
an Eskipoo, and some goldfish.
Brad Halstead (www.dreamweavermx-templates.com),
is a Computer Software Engineering Technologist
by training, but deviated from that dream to
join the Canadian Military as an Air Weapons
Systems Technician where he learned all about
various computerized Aircraft weapons systems
as well as loading the munitions. Brad has dabbled
in the web in various capacities since 1989 and
left the Military to become a full-time Computer
Technician. Brad tries to play an active roll
in the support forums for Dreamweaver and Project
Seven as time permits him to. He lives in
London, Ontario with his cherished partner Brenda
and their 8-year-old daughter Megan, 13-year-old
daughter Amanda, 12-year-old son Aaron, and 2
Yorkshire Terriers (16-F and 12-M).
|
|
Submit feedback
on our tutorials, articles, and sample applications.
|