Any Tutorials for this stuff? Options

[kenw776]

Hi,

Im quite new to HTML, but not new to pc's.
I made a thread here which jimlongo helped me with, which helped alot.

But I was wondering is there any tutorials or vids that can show me or help me make a basic version or as hard as version of something like this:

Ive added the pic in an attachment.

Its the banner from hotmail, giving the links like home, mail, contacts, which interact with the little table below.

Heres the code:

<table border=0 cellpadding=0 cellspacing=0 width=100% ><tr><td colspan=2><img src="http://gfx1.hotmail.com/spacer.gif" height=1 width=779></td></tr><tr><td><table border=0 cellpadding=0 cellspacing=0 width=100%><tr> <td rowspan=2 background="http://gfx1.hotmail.com/tab.bg.dln.gif"><a href="http://g.msn.com/1HMMENUK/141??PS=74565" target="_top"><img src="http://gfx1.hotmail.com/EN_UK_118x35.gif" width=118 height=35 border=0 alt="go to MSN"></a></td><td rowspan=2 background="http://gfx1.hotmail.com/tab.bg.dln.gif" nowrap><font class="D">Hotmail</font></td><td rowspan=2><img src="http://gfx1.hotmail.com/tab.slide.hm.li.gif"></td><td colspan=12 height=13 bgcolor=#336699></td></tr><tr><td><img src="http://gfx1.hotmail.com/tab.separator.off.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.off.gif" nowrap> <a href="java script:G('/cgi-bin/hmhome?');" tabindex=120 class="E">Today</a> </td><td><img src="http://gfx1.hotmail.com/tab.separator.on.l.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.on.gif" nowrap> <a href="/cgi-bin/HoTMaiL?curmbox=00000000%2d0000%2d0000%2d0000%2d000000000001&a=f49ea1de074dc639e68d409cc36800c54659e33c43c1b6841fad11cac478c0de" tabindex=121 class="E">Mail</a> </td><td><img src="http://gfx1.hotmail.com/tab.separator.on.r.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.off.gif" nowrap> <a href="http://calendar.msn.com/calendar/isapi.dll" tabindex=122 class="E" target="_top">Calendar</a> </td><td><img src="http://gfx1.hotmail.com/tab.separator.off.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.off.gif" nowrap> <a href="java script:G('/cgi-bin/addresses?');" tabindex=123 class="E">Contacts</a> </td><td><img src="http://gfx1.hotmail.com/tab.separator.end.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.sln.gif" width=100%> </td></tr></table></td><td valign=bottom><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td background="http://gfx1.hotmail.com/tab.bg.sln.gif"><img src="http://gfx1.hotmail.com/spacer.gif" width=1 height=35></td><td background="http://gfx1.hotmail.com/tab.bg.sln.gif" nowrap align=right><a href="/cgi-bin/options?section=mail&subsection=&curmbox=00000000%2d0000%2d0000%2d0000%2d000000000001&a=f49ea1de074dc639e68d409cc36800c54659e33c43c1b6841fad11cac478c0de" class="G">Options</a> <font class="G">|</font> <a href="java script:CPH('PIM_Inbox');" class="G">Help</a> </td></tr></table></td></tr></table>


Now I know how to make tables, its just I need something showing me how I can do something like that. My design skills are ok, as I work with flash, fireworks and photoshop.

Thank you

[pandy]

Well, it's old school tag soup. Sliced images in tables. There ought to be oodles of tutorials about that out there. While I think it's good practice to learn how to do it it's really an outdated method.

Try to google something like this and variations thereof.
http://www.google.com/search?q=sliced+images+tables+tutorial

[kenw776]

Well, it's old school tag soup. Sliced images in tables. There ought to be oodles of tutorials about that out there. While I think it's good practice to learn how to do it it's really an outdated method.

Try to google something like this and variations thereof.
http://www.google.com/search?q=sliced+images+tables+tutorial

Hi,

Thanks alot. If its outdated, what do people use instead now? I still wanna leanr so I know what Im doing.
Thanks again

[Christian J]

Nowdays you can use HTML for the semantic structuring of the content, and use CSS for the decorations: http://htmlhelp.com/reference/css/

[pandy]

There's not the same need to cut images up anymore since with CSS you can position one image on top of another. Still, if you are new, the tables way is probably easier and it's a technique that has been used so much that everyone should probably try it at least once. If for nothing else, next time you see a site like that you will be able to figure out how it's done.

[kenw776]

Thanks guys.
I learnt how to do it the slice method and when my buttons were too small i just used the image map in dreamweaver to choose exactly which part of my button i want linked.

I will now try and learn css for the modern version of this.
Thanks guys

[kenw776]

If anyone has any advice or any tutorial videos to learn good, please let me know. Thank you