1. Bauhaus Design LessonMr. Downs Web IIPart 2: Adding LinksHere are some of your options for inserting links in different styles for your web page. Sinceyour design is most likely abstract it may be a challenge to find the right place to add thelinks. In this lesson we will learn the basics of adding regular text links,horizontal navigationbar,vertical navigation list,Graphic Links(slices). For this lesson we will use a side navigationcontained in a div. Once you have finished the example we will go over how to adjust the CSSstyle of the div to fit your needs.Resources:Dreamweaver SoftwarePhotoshopStep 1: Here are some sample positions for the links for your page. The black area representsthe background image you have created. The gray areas are the divs we will create to add linkstyles into.Step 2:Lets create a div in which we will place a side navigation bar into. Here is the code forthe background div and the new navigation div inside of it. This div will need to be containedinside of the background image div that you have created previously. Here is the code to do thisand an example of what it should look like.

2. Step 3. Lets add the navigation list to the inside of our new div. Lets also change some of thelinks to be relative to our theme. 3. Step 4:Lets preview our page(file>preview in browser>internet explorer in dreamweaver) andsee that it is working correctly. It should look like this. 4. Step 5:Lets adjust the style of the div so that we can have a different look. Lets create ahorizontal list. We will have to change both the CSS style of the div and the HTML code of thelist. Here are the changes we need to make. In the code we have changed the width and heightof the #sidenavigation. This will make our div go across the top of the page.In this photo it shows the changes we need to make to our list in order for our list to look goodin the new div area. There is also additional CSS code we have added. This CSS code will stylethe list so it goes across the top of the page. 5. Step 6: Preview your work. Choose file >preview in browser >internet explorer in Dreamweaver.You may need to make some changes so the dimensions of the div and list work together in thecontent of your page. Here is a sample. For more samples of cool links for both horizontal andvertical lists check out http://css.maxdesign.com.au/listamatic/.Remember as you create divs and choose list styles:1. You can make div backgrounds color transparent in the CSS. This means that the graycolor of the div seen in this tutorial can not be seen but the links will still be moved to theposition you want. This should help you be creative in placement of your lists.2. There are many different styles of lists. Choose a list which works with your design and colorscheme. Be careful of using a navigation which will take away from your current design toomuch.3. You can create multiple divs on the same page to address needs you may have. This willchallenge your ability to position the divs for proper placement ont he page. 6. Part 3: Creating a Sliced LinkFor some of your pages your creativity in your design has made it so a graphic link may workmore effectively for your page. A graphic link with a slice. A slice should be your last option formaking a link. The reason for this is that it provides limited text for the content of the web page.This limits the searchability of a web page on the internet. Sliced links may also be difficult tosee on a page unless you add text to describe the link area. Here are the steps to make a slicedlink.1. Open the Photoshop Software with the image you would like to slice. File>open>choose yourfile(cube.jpg etc...). 7. Step 2: To help users of the webpage find the link areas I have added text to help guide theway. The text has a drop shadow style.Step 3: Select the slice tool from the tool bar. 8. Step 4: Holding your mouse down,drag a square shaped slice area and the then release. 9. Step 5: Click on the area you selected to create a link and choose edit slice options.Step 6: In the slice options window which appears enter a url you would like to link the chosenarea to. In the example we chose friends.html .Step 7: Once you have selected all of the areas you want to have a link and given them urls tolink to you can go to file>save for web & devices. Choose this option. 10. Step 8: Select to save the image. In this step you can see the sliced areas.Step 9: Select to save as HTML & Images. This will save a HTML file and the image of thecube. Both are needed to get the image links to work. 11. Step 10: Find where you save the file and click on the browser file.Step 11: View your web page(but your not done yet)! 12. Step 12: Click to view the source code.Step 13: Select and copy all of the code between save for web slices and end save for webslices. Copy this code into the body of your chosen page where you would like it to go. Be sureto save the images folder into the folder directory so that the image is linked to the code. Yourfinished!!!!