1. 1 Creating Links Lesson 2

2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages. Make it bold, dark red (heading 1) like the title & align center Insert links to all other pages on the site. Home | Order Now | Contact Us

3. 3 Create the Contact page. From the file menu, choose save as and name it contacts.html Now delete the story. Activate the home link. Add the following text: Add a mail link to your web page Select the e-mail address and click on the edit box Link an type “mailto: followed by the e-mail address. Clicking the link will open your default e-mail client and set the address automatically. Add a subject: mailto:cookiesetton@gmail.com?subject=website Information Request You can also go to Insert menu, email link Open the site in the browser to see the site and navigate from page to page. Notice how the color changes on the links you have visited. Should the extensions be.htm or html? Both will work for this class. Be consistent in whichever you choose. Dreamweaver will choose html by default. Some say that the index should be html and the others pages should be htm.

4. 4 Adding background graphics Click into the left most menu bar cell of the index page. Click Attributes, browse specific, menubar. Repeat on the right side of the page. Click into the left cell of the text level. Select the left_border.jpg. Do the same on the right with the right_border.jpg. If Browse specific does not appear: Ctrl + click to activate.

5. 5 Create a Navigation System with Graphics Remove the links: Home | Order Now | Contact Us from the index page. From the Insert menu, select Image objects, navigation bar, element name, home.jpg. If you don’t have the option for Navigation bar, add one object at a time. Use the + sign to add Order Now & Contact Us jpg and rollover jpg buttons Insert the links by clicking the “Point To” Preview the page in your browser to verify that the pages work

6. 6 Using Table to Organize pages ( Do not save the file with this table ) With the insertion point after “Our Story”, click Insert, table, rows – 3, column, 3, table width 100%, border thickness 1 px. Drag the image, beaver only from the assets panel into the 1 st cell. Drag the 1 st paragraph in the 3rd cell Cell padding - Space between the cells.

7. 7 Cell Space between the image or text and the wall of the cell Click into the middle cell, change W to 25. Do not save the New Table. How to position the image and text within a cell (do not save) Create another table – 2 rows, 2 columns, 100% width, just below the table you created in the last exercise. Move the beaver image into the left hand cell. Move the text into the same cell. Select the image and in th properties panel change the Vspace and Hspace to 10. Notice how the space between the text and the frame change. V = vertical distance between test & image H = horizontal distance between text & frame. Change the alignment: top, bottom, right, left.

8. 8 Graphics

9. 9 Navigation using Rollover Images Remove the Links on the second row. Click in the center of the row. From the Insert menu, choose Image Object> Rollover Image. Enter the image information and select the images you wish to be the original and the rollover image. You will use the Home, Home roll, Order, Order_roll, Contact, Contact_roll Preloading the rollover image will enable your web browser to download the rollover image in the background to make a smoother rollover effect. –Enter any Alt tags text and click OK. –Press F12 to view the image on the browser. Move the mouse over the image to test the rollover effect. Ctrl+ Click in the row. Add the menubar image. Add another row at the bottom of the index page. If there is a border replace it with the menubar img. Insert the copyright image in the center.