Tutorial 2. Creating Linked Web Pages

This tutorial takes the work of the sliced pages tutorial and moves it to Dreamweaver, where we'll work creating two more pages. We will hook up the arrow graphics to become buttons that will allow navigation between three gallery pages.

1. Going on fromt the first tutorial. Here is a page as finished in the first tutorial, here showing gallerybox_01 in the display area. We also have two alternate images we could use here, the oranges, gallerybox_02, and the food sign, gallerybox_03. We will make three different webpages using each image.

2. Rename the HTML page you output from Photoshop. In your files and folders, rename the HTML page you created in Photoshop from gallery.html to gallery_01.html. The reason for this will quickly become apparent.

3. Viewing the page in Dreamweaver. Find the HTML page in your site files and folders, and open it in Dreamweaver, gallery_01.html. The page as opened in DW should look pretty much like this. If it doesn't, find the three icons in the top left-hand corner of the work area, called "Split" (above, it's blue for having been selected). Try clicking back and forth on the Code View, Split View and Design View to get a sense of what they do. This class is not about learning HTML, but in Split View, note that when you click on the image display area in the design view at bottom, the code that makes it happen becomes highlighted in the Code View, above. It works the other way, too; when you highlight code, the objects in the design view become selected.

4. Make copies of the first gallery page. In your site folder, duplicate your gallery_01.html file twice. Rename the duplicates gallery_02.html and gallery_03.html, as seen above.

5. On the second and third gallery pages, switch out the displayed images. Open the two new pages in Dreamweaver; they should appear with tabs — the first gallery page should still be open. You can switch back and forth between the open pages by clicking on the tabs. Switch to gallery_02.html. In the split view, double click on the displayed image, the bread. A dialogue box will let you browse for an alternative image file. Navigate to gallerybox_02.jpg, as shown above, and select.

5. Repeat with third page. The new page, gallery_02.html should now appear as above. Save the page (unsaved pages in DW have an • next to the file name). Click the tab to make gallery_03.html active and replace the bread image with the food sign image and save it, too. Now you have three pages that are identical except for the photographs they show, i.e., a gallery.

PART II: Linking the Pages.

Now you're ready to finish hooking up the pages so that, in a browser, you can click through the images using the arrow buttons we made. Return to gallery_01.html clicking on the tab in Dreamweaver.

6. Hook up forward arrow as a button. Now that the first gallery page is up, look at Split View. Click on the forward arrow; it should appear as above, and the code should be highlighted that makes it go.

7. Identify arrow as a link. Now go to the Properties panel, and click the "Link" folder icon to place a link; a browsing window should appear. Navigate to gallery_02.html in the site folder, and select.

8. Now the page to be linked to appears in "Link" input box. Above in the Code View, a link tag should appear bracketing the image tag. It looks like this: <a href="gallery_02.html"> … </a>

9. Set border to zero in image tag. With the arrow image still selected, place a "0" (zero) in the "Border" attribute box; in the code view a border="0" should appear in the image tag, so it reads: <img src="images/fwdbutton_00.jpg" alt="forwardbutton" width="22" height="26" border="0">. Explanation below.

(Note: In proper xhtml, that is, modern HTML, the attribue should have an end "/", since the tag doesn't have an "end tag" section -- reading <img src="images/fwdbutton_00.jpg" alt="forwardbutton" width="22" height="26" border="0" / >.)

10. Your code should now look something like the image above. Here is why the border="0" code is needed. Not all browsers handle HTML the same. The biggest risk in a page-building scheme such as image slicing that depends on the exact fit of elements is that the browser will some little something will be added that throws everything off. The most likely culprit is the "border" attribute of images used as links, you know, buttons. The default in Mac's Safari, for example, is not to show a border, but in Win Internet Explorer (IE) it's the opposite: IE shows a border as a default. The 1-pixel border IE likes to add to show the object is a link adds two pixels to the total width and height of the button. These 2 extra pixels each way are enough to wreak havoc on a sliced site, forcing all the slices apart and showing the background color shining through. In Dreamweaver, you can add the code manuall as well: put your cursor in the image tag right after the "height" attribute and type in border="0", as shown above. Setting the value of the attribute to zero prevents IE from adding the border, and the slices of the page should stay snugly together.

11. Test link. Save the page, then test it. To test the first gallery page, drag the file to a browser, or in DW, find the icon that looks like a globe (seen above) and choose a browser from the list. It will launch and display the page. When you click the forward arrow now, the second page with the oranges image should load. (Its arrow buttons, of course, will not work, because we haven't coded that page yet.)

12. Repeat this procedure shown in Part II for the back button. Since this is a gallery, the back button of the first page will load page 3 of the three-page gallery!

13. FINISH. The second two pages are still open in DW; hook up their buttons the same way you did in page 1, linking to the appropriate pages.