 |
|
|
|
|
|
|
|
|
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:
- 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 you change the
button's source to the down state,
you will still get a rollover onmouseover.
In addition, since the buttons are
now in editable regions, you lose
the control of the template (this
is the big disadvantage).
- You can leave the buttons in a
non-editable region, and dynamically
set the source of each button depending
on the page using some clever JavaScript
and variables in an editable region,
first described by the wizards at Project
Seven. The advantages and disadvantages
are the same as #1 above (except
for the last disadvantage which is
overcome by the fact that your buttons
are *not* in an editable region using
this method).
|
|
|
Either
of these methods has another disadvantage: the
button is *still* hyperlinked to the corresponding
page. If you are currently on the "About Us" page,
why would you want the button to still be linked
to the "About Us" page, so that when
you click it, the page refreshes. It's a small
thing but it's annoying, and not professional in
our opinion.
|
| |
| This is where Dreamweaver
MX comes in... |
| |
| There are two new features
of templates in Dreamweaver MX that are wonderfully
suited to solving this problem: template parameters
(in other words: page variables) and template expressions.
We'll show you how to use these two features in a
template to set a button's down state and remove
the hyperlink! |
| |
Sample Files
Before you begin, you should download the sample
files to follow along with this tutorial: |
|
|
| |
| |
| We have a template
page created with some navigation buttons. The site
is defined with this hierarchy: |
| |
| [ROOT] |
| index.htm |
| members.htm |
| products.htm |
| faqs.htm |
| |
[Templates] |
| |
|
tut_buttons.dwt |
| |
[assets] |
| |
|
buttons.css |
| |
[SourceFiles] |
| |
|
Buttons_Tutorial.png |
| |
[images] |
| |
|
header.gif |
| |
|
header_bg.gif |
| |
|
[navigation] |
| |
|
|
faqbutt.gif |
| |
|
|
faqbutt_o.gif |
| |
|
|
faqbutt_d.gif |
| |
|
|
homebutt.gif |
| |
|
|
homebutt_o.gif |
| |
|
|
homebutt_d.gif |
| |
|
|
memberbutt.gif |
| |
|
|
memberbutt_o.gif |
| |
|
|
memberbutt_d.gif |
| |
|
|
productbutt.gif |
| |
|
|
productbutt_o.gif |
| |
|
|
productbutt_d.gif |
|
| |
| We need to have a way
to identify which page is being built when we spawn
a child from the template. To achieve this, we insert
a template parameter on the template page that contains
a text variable. The value of the template parameter
can then be set on each child page, using the following
code: |
| |
</script>
<!-- TemplateParam name="pagename" type="text" value="home" -->
</head> |
| |
| This line is inserted
below any JavaScript in the head, but above the end
of the head and outside any editable regions. |
| |
| Note: We have given
this parameter the default value of "home",
which means that unless we specify otherwise, any
child page from this template will be treated as
if it were the home page. |
| |
| This is the code for
the products button on the template page: |
| |
<td><a
href="../products.htm" onMouseOver="MM_swapImage('productsbutt','','..
/images/navigation/productbutt_o.gif',1)" onMouseOut="MM_swapImgRestore()
"><img src="../images/navigation/productbutt.gif" alt="Our
Products" name
="productsbutt" width="98" height="22" border="0" id="productsbutt"></a>
</td> |
| |
| The code above is a
standard rollover button for the "Our Products" page
on this site, and it is in a table cell. |
| |
| Next, we changed the
code so that the "Our Products" button's
state will be determined by the pagename parameter,
and a clever application of template expressions,
like this: |
| |
<td>@@(pagename=="products"?'':'<a
href="products.htm" onMouseOver="MM_swapImage
('productsbutt','','images/navigation/productbutt_
o.gif',1)" onMouseOut="MM_swapImgRestore()">')@@<img
src="images/navigation/productbutt @@(pagename=="products"?'_d':'')@@.gif" alt="Our
Products" name="productsbutt" width="98" height="22" border="0" id="productsbutt">@@(pagename=="products"?'':'</a>')@@</td> |
| |
Now, here's what happens in the template expressions.
(The template expressions are the part of the
code that looks like this: @@(xxxx)@@.)
Before anything gets written to the table cell,
the value of the template parameter is checked.
You can see this in action in the @@(pagename== ...)
part of the code.
If the pagename (as set on the child page using
MODIFY > Template Parameters...) is "products",
then a null is written into the cell.
This is done in the section with the ' ' just
after the ?.
If the pagename parameter is equivalent
to "products", (that's the == part),
then we don't want a hyperlink on the button,
right? So we only write the <a href part if
this pagename test fails.
You can see this occurring, just after the : in
the code above. This is how you can create an "if-then-else" test.
In this example, if the page is the products page,
then write a null, else write the first part of
the hyperlink.
|
| |
| Note that because the
nesting of the quotes gets a little tricky here,
we have used the single quote entity code for the
single quotes within the hyperlink code, as shown
in the ' part. See the table below to find
out about other characters that may need special
encoding inside template expressions. |
| |
Common
Conversions
|
Character
|
Character
Code
|
'
|
'
|
"
|
"
|
@
|
@
|
|
| |
At
this point, we are ready to write the <img> tag
and its source statement. We want this source to
be the down button state when the pagename test
succeeds. So, we perform another if-then-else test
using a template expression that is actually embedded
within the src line! If the test succeeds, we add
the _d suffix to the button's filename just before
the .gif extension.
It is important to note that the "_d" suffix
is just how we elected to name the down state. We
used "_o" to represent the over state,
and no suffix to represent the up state. Of course,
you may choose to use different naming conventions. |
| |
| Finally, we test again
for the pagename and if the test fails, we add the
closing </a> tag. Remember, if the test succeeds,
we don't want a link on the button. |
| |
| Here's how the code
on the products page looks after setting the template
parameter to "products" (MODIFY > Template
Parameters...): |
| |
<td><img
src="images/navigation/productbutt_d.gif" alt="Our
Products" name=
"productsbutt" width="98" height="22" border="0" id="productsbutt"></td> |
| |
| Notice that there is
no hyperlink and no rollover. Additionally, the button
is set to the down state in the code above. |
| |
| Here's how the same
code looks on any other page of the site: |
| |
<td><a
href="products.htm" onMouseOver="MM_swapImage('productsbutt',
'','images/navigation/productbutt_o.gif',1)" onMouseOut=
"MM_swapImgRestore()"><img src="images/navigation/productbutt.gif" alt="
Our Products" name="productsbutt" width="98" height="22" border="0" id="
productsbutt"></a></td> |
| |
| Notice that there is
a hyperlink and a rollover on all the other pages. |
| |
| And all this happens
automatically when the MODIFY >Template Parameters...
option is used to set a pagename value and the dialog
is closed. |
| |
A
final note: In order to do this, we had to remove the
proper paths for the button images and hyperlinks
from the code and "hardwire" the paths.
This means that we have sacrificed the site management
capabilities of Dreamweaver MX by using the @@(..)@@ expressions
in the code (in this instance at least). This also
means that if the image file is moved, or if a
hyperlinked page is moved, the child pages will
break. On the other hand, since all the child pages
are now controlled by a single template, and since
the code is pretty straight-forward and relatively
easy to fix, it's not such a big sacrifice, in
our opinion.
|
| |
| So, to summarize: We
have used a pagename parameter and template expressions
to control the downstate button image within a navigation
element. This control happens within a noneditable
region of the template page, and is automatically
expressed when the value of the template parameter
is specified. If you have made it this far, and understand
what we have done and why we have done it, then you
should have no problem not only extending this approach
to the rest of the buttons on this page, but also
to your own pages, too! |
| |
| To learn more about
how to do cool things like this, get our book entitled Dreamweaver
MX Templates. |
| |
Modification
Suggestions
There are several modifications that can be made
to this example. We invite you to explore them
using the sample files you've downloaded. |
| |
- Modify the Title to use the same parameter.
This reduces the number of steps required to
make new pages for the site. We've already
done this one for you in the downloadable sample
files. This modification was accomplished
by removing the doctitle editable region and
inserting the parameter in the title tag.
- This example site assumes that, and will only
work if, all your pages exist in the same folder. If
your site's pages do not exist in the same folder,
then your links to images and URLs must be either
root relative or absolute.
Document relative: ../images/navigation/productbutt.gif
Root relative: /images/navigation/productbutt.gif
Absolute: http://www.mysite.com/images/navigation/productbutt.gif
- Add more menu items to the template and make
them work on child pages, following the same
instructions provided above.
- Notice that each of the child pages has its
name in an H1 tag pair in the editable region
beside the navigation system. Convert the template
so that the pagename parameter is also used inside
the H1 tag pair. Here's a hint: You'll need to
modify the contained area of the editable region
and use an expression.
|
| |
| |
|
| 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).
|
|
|
