
86
Serena® Collage® 5.1.3
Chapter 3 Design-Time Component Reference
About Image Buttons
When an image is used as a navigation button, the Navigation Bar component can flatten
text onto the image. You can do this by adding a special
text
parameter to the
<img>
tag
for a button, as in the example below:
In this example, the
$node.name
macro flattens the asset name onto the image to
generate the Navbar button for the page. As a default it will use standard image effects to
place and format the text. But if you have defined specific effects for the images, these
effects will be used. This is useful when you want to control the font, color, and placement
of the text on the banners or navigation buttons.
How to Insert a Navbar Component
Follow the instructions below to insert a Navbar component, either in Dreamweaver, or
manually using your HTML editor.
Dreamweaver
1
In Dreamweaver, place the insertion point where you want to insert the component.
2
Click Window | Objects to display the Objects palette.
3
Select the
Serena Collage Design Components
palette.
<nexus:component classid="nexus/components/Navbar"
dwcomptype="navbar" code="$nexusComponents" nodes="parent
currentlevel children">
<node:active>
<a href="$node.url"><img src="p3.gif" border=0
text="$node.name"></a>
<br>
</node:active>
<node:inactive>
<a href="$node.url"><img src="p1.gif" border=0
text="$node.name"></a>
<br>
</node:inactive>
</nexus:component>
Current page appears first, then other pages at
the current level, then any pages underneath
Image type
buttons
Button text will display
the asset name
NOTE
You can use the Image Effects feature in Collage to change the appearance of the
navigation bar. See the Collage online help for more information.
Kommentare zu diesen Handbüchern