We want to be able to click on each of the text lines in the Navigation cell and for the appropriate page to be displayed. These links need to be set in the template page. Links can also be set to other websites including social media sites such as Facebook and Twitter.
Open the mm_template file. It is in the TEMPLATES folder in the FILES panel in the PANEL GROUP.
Highlight the word HOME in the Navigation cell and, in the HTML section of the PROPERTIES panel, drag the POINT TO FILE icon at the right of the LINK box to the index.html file in the FILES panel.
The word home should be underlined to indicate that it is linked.
Highlight the word CATEGORIES and set it to link the categories2.html page.
Link the word REVIEWS to the reviews.html page and the word CONTACT to the contacts.html page. Note: If the colour of the link text is too dark for the background, you can use the PROPERTIES panel to change the background colour of the left cell so the text can be seen clearly then click on the CONTENT label in the bottom right cell and change its colour so that the colours complement each other. This is an advantage of a template, you can experiment with the appearance of all the pages in one page.
Save the template and the pages that are linked to the template will be displayed. Click on UPDATE to update the pages followed by CLOSE once the update is complete.
Open the index.html page and preview it in a browser by clicking on the PREVIEW/DEBUG IN BROWSER icon in the DOCUMENT Toolbar. Check that the links work correctly then close the browser.
To illustrate linking on images, a link to Facebook will be added.
Open the mm_template file, click just to the right of the CONTACTS link and press <Enter> or <Return> to move the cursor to a new line.
Insert a 1-row, 2-column table with a width of 150 px, no border, cell padding or cell spacing.
Widen the left cell, enter Follow us on in it and format the text to the Table_Text style.
Click in the right cell and insert the Facebook image downloaded from the above link, setting its ALTERNATE TEXT to Facebook image.
Click on the Facebook image and in the PROPERTIES panel, click in the LINK box and enter https://www.facebook.com. Note: You can insert a link to your own Facebook account if you have one. A Twitter icon can be inserted next to the Facebook icon if you wish to.
Save the template, update the page linked to it and test the Facebook link by previewing the index.html page in a browser.
Email links
Links can be set on email addresses to make it easier for users to send emails.
Open the CONTACTS page, highlight the email address and click on the EMAIL LINK icon in the COMMON section of the INSERT tab in the PANEL GROUP.
You can change the email text or address; for example, you might link to enter your own email address in the EMAIL box so that you can check that the link works, then select OK.
You can reset the email address to the Table_Text style so that it is easier to see over the background.
SAVE and preview the page to check that the link works.
Open mm_template.dwt. It is in the Templates folder in the FILES panel within the PANEL GROUP.
Highlight the word ‘home’ in the Navigation cell and, in the HTML section of the Properties panel, drag the POINT TO FILE icon at the right of the LINK box to the index.html file in the FILES panel.
Dreamweaver will probably underline the word ‘home’, and change the colour, to indicate that it is linked.
Highlight the word ‘Categories’ and set it to link the categories.html page.
Link the word ‘Reviews’ to the reviews.html page and the word ‘Contacts’ to the contacts.html page.
Note: If the colour of the link text is too dark for the background, you can reset the text to the Table_Text style or you can also use the Properties panel to change the background colour of the left cell so the text can be seen clearly.
Save the template and the pages that are linked to the template will be displayed. Click on UPDATE to update the pages followed by CLOSE once the update is complete.
Open the index.html page and preview it in a browser by clicking on the REAL-TIME PREVIEW icon in the STATUS BAR. Check that the links work correctly then close the browser.
To illustrate linking on images, a link to Facebook will be added.
Open the mm_template.dwt file, click just to the right of the CONTACTS link and press <Enter> or <Return> to move the cursor to a new line.
Insert a one-row, two-column table with a width of 150 px, no border, cell padding or cell spacing.
Widen the left cell, enter Follow us on in it and format the text to the Table_Text style.
Click in the right cell and insert the Facebook image downloaded from the above link.
Click on the Facebook image and in the Properties panel, click in the LINK box and enter https//:www.facebook.com.
Note: You can insert a link to your own Facebook account if you have one. A Twitter icon can be inserted next to the Facebook icon if you wish to.
Save the template, update the page linked to it and test the Facebook link by previewing the INDEX page in a browser.
Email links
Links can be set on email addresses to make it easier for users to send emails.
Open the contacts.html page, highlight the email address and click on the EMAILLINK icon in the HTML section of the INSERT tab in the PANEL GROUP.
You can change the email text or address; for example, you might like to enter your own email address in the email box so that you can check that the link works, then select OK.
You can reset the email address to the Table_Text style so that it is easier to see over the background.
Save and preview the page to check that the link works.
