- 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!!!!