little help please. Options

[kenw776]

Hi,

Im quite new to webdesign, I do flash animation and stuff, and recently have got into webdesign, and like dreamweaver very much.
I have a problem, with getting links (text) or buttons on background, or even so, something with a design background. for example.
If you have hotmail, log in and you'll see the hotmail and msn logo, then theres a design right underneath it, there is a design that slowly comes up and gives you the choices like today, mail, calender and contacts and which ever you choose connects to the design in the bottom.

Heres the code: lol i know its disgustingly complicated. But you can copy and paste that and it will come up in your design.

<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>&nbsp;&nbsp;&nbsp;<a href="java script:G('/cgi-bin/hmhome?');" tabindex=120 class="E">Today</a>&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;<a href="/cgi-bin/HoTMaiL?curmbox=00000000%2d0000%2d0000%2d0000%2d000000000001&a=f49ea1de074dc639e68d409cc36800c54659e33c43c1b6841fad11cac478c0de" tabindex=121 class="E">Mail</a>&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;<a href="http://calendar.msn.com/calendar/isapi.dll" tabindex=122 class="E" target="_top">Calendar</a>&nbsp;&nbsp;&nbsp;</td><td><img src="http://gfx1.hotmail.com/tab.separator.off.gif"></td><td background="http://gfx1.hotmail.com/tab.bg.off.gif" nowrap>&nbsp;&nbsp;&nbsp;<a href="java script:G('/cgi-bin/addresses?');" tabindex=123 class="E">Contacts</a>&nbsp;&nbsp;&nbsp;</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%>&nbsp;</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>&nbsp;&nbsp;<font class="G">|</font>&nbsp;&nbsp;<a href="java script:CPH('PIM_Inbox');" class="G">Help</a>&nbsp;&nbsp;&nbsp;</td></tr></table></td></tr></table>

Now, I dont think that is an image, so how do you make a design like that in html? just before the link today, the design goes upwards? How do you make something like that, and how do you add text on top of something that looks like an image or design? I dont think its layers.

Its very difficult to explain, im really sorry but if someone understands kind of what im saying, could they explain. and help me make a simple version.
I will explain if you do not understand.

Thank you

[jimlongo]

All those images are being supplied from a remote webserver - mostly fromhttp://gfx1.hotmail.com

It looks like this in my browser (I don't have hotmail)




Normally you would have the images on the same webserver as the html file you are creating?
Does that make any sense and/or help in any way?

[kenw776]

All those images are being supplied from a remote webserver - mostly fromhttp://gfx1.hotmail.com

It looks like this in my browser (I don't have hotmail)




Normally you would have the images on the same webserver as the html file you are creating?
Does that make any sense and/or help in any way?

Thanks. Im glad you understood what I meant.
So how would I go about making one of these, or something like it, where could I read up on it?

Also I think this is another type of example. If you look at the menu and the whole banner image of this site, id like to create something like this:
Marvel: http://www.marvel.com/
It has the marvel logo, and a contents design, and some place it has a login and the other area it has the menu like: marvel universe, movies and tc, comics ect, ect.
Just like to read how to get a design like that on a site and have links or text on it.

Thanks again, and sorry for all the questions.

[jimlongo]

It all really starts with basic html

There's no magic bullet, you need to read the HTML FAQs at the top of the page - look up some html tutorials , and build from there.

[kenw776]

It all really starts with basic html

There's no magic bullet, you need to read the HTML FAQs at the top of the page - look up some html tutorials , and build from there.

Thanks.
Ive read 2 html books, 1 html in 10mins, which are very basic, so what part or catogory would I find this kind of stuff?


Also, Ive learnt a bit of dreamweaver and originally learn flash from total training dvds.
Whats a really good dvd to learn HTML cause I hate reading it. Anything apart from Lynda?
Thanks

This post has been edited by kenw776: Sep 20 2006, 08:58 AM

[jimlongo]

I don't know, I saw a guy on TV the other day selling DVDs that teach everything from Word to HTML . . . money back gaurantee. I think his name was Dave something or other. He has infommercials that often run on Sunday mornings in my viewing area.

I guess you could do all that in dreamweaver . . . I don't know.
But as I said you could do it all in html with images, tables, css, a little reading and some patience.

Good luck,
jim

[kenw776]

I don't know, I saw a guy on TV the other day selling DVDs that teach everything from Word to HTML . . . money back gaurantee. I think his name was Dave something or other. He has infommercials that often run on Sunday mornings in my viewing area.

I guess you could do all that in dreamweaver . . . I don't know.
But as I said you could do it all in html with images, tables, css, a little reading and some patience.

Good luck,
jim

Thanks Ill take a few days off, and study like *beep* next week.
If anyone has anything else to say to help or where to get a dvd to learn, please let me know.
Thanks again

[Frederiek]

Go see http://www.d.umn.edu/itss/support/Training/Online/webdesign/. There, you'll find lots of links to references, tutorials, articles etc. on web design subjects.

Of course, you'll have to be willing to read and learn from it. You won't get anywhere without doing an effort. But I suppose you already know that.

Good luck.

[kenw776]

Go see http://www.d.umn.edu/itss/support/Training/Online/webdesign/. There, you'll find lots of links to references, tutorials, articles etc. on web design subjects.

Of course, you'll have to be willing to read and learn from it. You won't get anywhere without doing an effort. But I suppose you already know that.

Good luck.

Thanks. Yeah I know.
Someone in my other thread, mentioned I should look up sliced images table tutorials and learn on that line, which is great help.

[Darin McGrew]

The other thread said that what you were looking at was an example of sliced images. It also recommended that you learn a more modern approach.

In general, starting with a picture and trying to get your HTML to produce something that looks just like the picture is a poor approach for web design. Well-made web pages aren't like pictures. Well-made web pages stretch and adapt to the reader's browsing environment.

[kenw776]

The other thread said that what you were looking at was an example of sliced images. It also recommended that you learn a more modern approach.

In general, starting with a picture and trying to get your HTML to produce something that looks just like the picture is a poor approach for web design. Well-made web pages aren't like pictures. Well-made web pages stretch and adapt to the reader's browsing environment.

I would like to learn a more modern approach, which i think was mentioned as HTML as semantic and using CSS as decoration. And I know its an old school approach to it but I was looking online and I had no idea how to do something like that and was frustrated, and would like to learn how to do it. I am very new to this, so im not sure what is good and what isnt.
Thanks

[George in TX]

Don't fall into the trap I almost fell into trying to learn about Excel. The Video Professor might make some nice tutorials but his TV ads don't tell the whole story. Before you buy read this and make your decision:

http://www.clariondeveloper.com/videoprofessorscam/

[kenw776]

As written in my other thread:

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 wanted linked.

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

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