Bauhaus Project-Divs and Links

1. Bauhaus Design Lesson
Mr. Downs Web II
Part 2: Adding Links
Here are some of your options for inserting links in different styles for your web page. Since
your design is most likely abstract it may be a challenge to find the right place to add the
links. In this lesson we will learn the basics of adding regular text links,horizontal navigation
bar,vertical navigation list,Graphic Links(slices). For this lesson we will use a side navigation
contained in a div. Once you have finished the example we will go over how to adjust the CSS
style of the div to fit your needs.
Resources:
Dreamweaver Software
Photoshop
Step 1: Here are some sample positions for the links for your page. The black area represents
the background image you have created. The gray areas are the divs we will create to add link
styles into.
Step 2:Lets create a div in which we will place a side navigation bar into. Here is the code for
the background div and the new navigation div inside of it. This div will need to be contained
inside of the background image div that you have created previously. Here is the code to do this
and 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 the
links to be relative to our theme.

3. Step 4:Lets preview our page(file>preview in browser>internet explorer in dreamweaver) and
see 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 a
horizontal list. We will have to change both the CSS style of the div and the HTML code of the
list. Here are the changes we need to make. In the code we have changed the width and height
of 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 good
in the new div area. There is also additional CSS code we have added. This CSS code will style
the 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 the
content of your page. Here is a sample. For more samples of cool links for both horizontal and
vertical 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 gray
color of the div seen in this tutorial can not be seen but the links will still be moved to the
position 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 color
scheme. Be careful of using a navigation which will take away from your current design too
much.
3. You can create multiple divs on the same page to address needs you may have. This will
challenge your ability to position the divs for proper placement ont he page.

6. Part 3: Creating a Sliced Link
For some of your pages your creativity in your design has made it so a graphic link may work
more effectively for your page. A graphic link with a slice. A slice should be your last option for
making 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 to
see on a page unless you add text to describe the link area. Here are the steps to make a sliced
link.
1. Open the Photoshop Software with the image you would like to slice. File>open>choose your
file(cube.jpg etc...).

7. Step 2: To help users of the webpage find the link areas I have added text to help guide the
way. 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 chosen
area 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 to
link 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 the
cube. 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 web
slices”. Copy this code into the body of your chosen page where you would like it to go. Be sure
to save the images folder into the folder directory so that the image is linked to the code. Your
finished!!!!