One way to improve navigation in a dynamic content web site is to always allow the visitor retrace his steps. This is accomplished by placing at the top of the page a breadcrumb navigation trail. This is possible for this site, as it displays the ads in different categories on the same page, by using the category ID as URL parameter.
To be able to follow this section of the tutorial, you need to have downloaded and installed MX Breadcrumbs. This is a free Dreamweaver extension, which you can download here.
Once you've got the extension installed, and you've restarted Dreamweaver, you can begin enhancing the site's main page. To do so, follow the next steps:
Open the index.php file from the site's root folder in Dreamweaver. As you've seen when the page was created, it contains a table where all data is stored.
The breadcrumb navigation trail should be placed above all other elements, welcome message included. So the simplest way of doing it is to add a new row at top of the existing table.
To add a new row, simply right-click in the first row and select Table -> Add rows and columns from the pop-up menu. In the user interface that opens, select to add a new row, above the current selection.
Now click in the newly created row, and apply the Create Breadcrumbs command from the InterAKT tab of the Insert panel.
Configure the dialog box that opens as follows:
· In the
Connection drop-down menu, select the database
connection you've created at the beginning of this tutorial: connAds.
· In the
Table drop-down menu, select the database
table storing the data used to create the breadcrumbs. This should be
the same as the one providing the URL parameter, so that navigation will
really work. In this case, the table is category_cat
(the URL parameter is the category id, after all).
· In the
Primary key drop-down menu, select the table's
field containing the primary key. By default, the first field found in
the table is selected, but you can change it easily.
· In the
Parent ID drop-down menu, select the table
field containing the self foreign key, which points to the upper category:
idcat_cat.
· In the
Display name drop-down menu, select the table
field storing the labels that each breadcrumb element will display. For
the categories, it is name_cat.
· In the
GET Parameter text field you must enter the
name of the URL parameter that must be transmitted to the page, so that
it will load the appropriate information. Enter id_cat,
as this is used in the index page to select
the ads to display.
· In the
Page text field, enter the page that receives
the URL parameter and shows the ads. You can use the Browse...
button to search for the index.php file.
· The completed
dialog box looks like in the image below:

· Once you've
completely configured the user interface, click the OK
button to apply the command, and insert all the elements into the page.
Some page elements are added by the command in
the first row, as well as some server behaviors. In Dreamweaver,
the first row now contains:
