Home > Building a Website > Create Breadcrumb Links

Building Steps

1. Set up a Site
2. Create a Template
3. Create a CSS File
4. Link to a CSS File
5. HTML Basics
6. Set Page Margins & Background
7. Create Site Structure
8. Create a Three Column Layout
9. Style Headings and Paragraph Tags
10. Style Website Links
11. Create Breadcrumb Links
12. Style Round Cornered DIVs #01
13. Style Round Cornered DIVs #02
14. Create Navigation Tabs
15. Adding a Footer
16. Create Editable Regions
17. Name the Categories
18. Create a Page from the Template
19. Create a Library Item
20. Creating More Pages

Create Breadcrumb Links

Leave a trail so your visitors don't get lost

Breadcrumb links are so-called because they're the digital equivalent of leaving a trail of breadcrumbs as you delve deeper into a website. They’re useful for (at least) a couple of reasons:

• Firstly, search engines like them because they help them to determine the relevance of a page and its related categories.
• Secondly, these links help a user to determine at a glance exactly where they are in a website, and give them the opportunity to go up a level or two by clicking on the ‘parent’ link. They’re most useful on large, complex sites.

To create the breadcrumbs, we need to place the links within an appropriately positioned DIV tag. We will ‘float’ the DIV right and then specify exactly how many pixels from the right and top edges of the header DIV tag the breadcrumb DIV will be positioned.

These links will also take on a different appearance to the global a: links we just created. This is how we do it:

Create the breadcrumb trail container DIV

Make sure that you are working in Split View. Click in the Header DIV and make sure the cursor is positioned within that DIV tag in the Code pane.

In the Insert palette, click Insert DIV Tag.

At the bottom of the dialogue box that opens, click “New CSS Rule”.

Once done, a box will appear in the header containing the text “Content for id "breadcrumb-trail" Goes Here” (figure 1).

Figure 1

Define the appearance of Breadcrumb links

Because we don’t want links in the breadcrumb trail to behave in the same way as global link styles, we need to create ‘pseudo class’ link styles that only apply to text that appears in the ‘breadcrumb-trail’ DIV. To achieve this we need to do the following.

The same procedure is carried out for the a:visited style, ensuring that after the link has been clicked/visited, the color doesn’t change to the default purple (or whatever color has been selected for global visited links):

Test the appearance of Breadcrumb links

To test the visual functionality of the link styles, replace the text in the DIV tag with the following: “home > link”. If working in ‘design’ mode, the ‘greater than’ symbol should automatically code itself as is HTML equivalent in the ‘code’ pane:

>

Now select the work ‘link’ in the design pane, and type a # symbol into the Properties Link text field. Press return, and the link should now appear in the same color, but underlined (figure 2).

Figure 2

If you preview the page in a browser of your choice (after saving all files, including the CSS file), you should see the new link change to white when you roll over it.

Create Breadcrumb Links - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!

Please send any questions or feedback to: feedback@using-dreamweaver.com or leave it on our Facebook page.