Setup Guide V1 (last updated December 8, 2006)

Designed for the Perception Series Templates and Modules

Icon bar basic tutorials

A text and graphic link bar for (HOME | CONTACT | SITEMAP) located in the 'Branding' area of the web page.


The icon bar contains just three links using a combination of text and graphics. The icon bar is embedded into each web page in your template using an 'include' page component or Library file for DW. As with the top link bar, editing the include page, will update all pages in your web site using the embedded icon bar.

Add and icon


INSTRUCTIONS:

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the 'icons' page

  • drag a new 20x20 pixel icon image into the page (to the left, the right, or in between 2 existing icons)

  • type a name for the new icon

  • right click on the new icon text, select Hyperlink properties and browse to the page or type in a URL to link to

Remove an icon

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the 'icons' page

  • select the icon and press delete on keyboard

  • repeat for the icon text

  • save

Edit icon text

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the 'icons' page

  • double click on the icon text

  • type in your new text

  • save

Edit icon hyperlink

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the 'icons' page

  • right click on the icon text

  • select hyperlink properties

  • browse your site, locate the new page you want to link to and select it

  • or - type the name of the page into the 'Address' text field

  • save


*NOTE* the icon image is also hyperlinked. When you change a link for the text part of the icon, you will also need to change the link on the icon image using the same steps listed above.

**NOTE** you can modify the appearance of the text for the links bars directly on the include page, but we recommend editing the style sheet (intermediate tutorials) if you want to do this.

Move or re-locate on page

  • open your Templates (Template_name) folder

  • open the (index / fullscreen / compact) .dwt pages (or open your individual pages if not using DWTs)

  • select the 'icon bar' with your mouse

  • drag to a new location, or use the 'arrow' keys on your keyboard to nudge the icons into place

  • save to update
 

Overview | Basic | Intermediate | Advanced