Curve designs using HTML

[ssharish2005]

Hi everyone,

I am designing a web site for my company for which i am working for. But i am still learning these web stuff which i haven't done before. So got to learn very soon before i get more project. I can do some basic stuff but not too much. Any way i have question about designing stuff.

Well, almost most of the web sites uses tables with their edges curved and stuff and with the button edges curve. How do we do that. Can any one please explain me how to do those sort of design, which might help in creating good web site.

thanks in advance

ssharish

Well to do that there are three ways:

1. Use Javascript ( = right choice recommended)
2. Use tables and images( = headache)
3. Use CSS3 ( = foolishness )

here's a link which may help you:
http://www.html.it/articoli/nifty/index.html

[roryt]

I think seen as you are new to this stuff images are probably the best plan instead of learning endless code languages. Do you have any knowledge in graphics at all because I am happy to take you through how to do what you want. Please post a site that you like that uses the ideas you are interested in. We will make sure you can achieve what you want.

[ssharish2005]

I think seen as you are new to this stuff images are probably the best plan instead of learning endless code languages. Do you have any knowledge in graphics at all because I am happy to take you through how to do what you want. Please post a site that you like that uses the ideas you are interested in. We will make sure you can achieve what you want.

Roryt, Thanks very much. Well i dont have that much knowledge about graphics and thing. Just the basic stuff. I would really appricate your help.

There isn't specific website for me to go through. You know which one is best for the starters. Lets go along with any one.

thanks very much for your help

Thanks very much vishesh I did get the basic idea of now to go along with it. I will have a go with the tutorial.

Thanks again guys

ssharish2005

[roryt]

If you would like to know how to get round corners using tables and image, well this is how.
(all sizes are up to you but for the sake of the tutorial...)

Creating the image for the corners

1. Open your prefered graphics editor and create a new image which is 50px by 50px.
2. Create a circle and fill it with your desired color.
3. Create a new layer and drag it to the back and fill it with the background that is on your website.
4. You will need to save the image as the vector file. eg, .psd or .png or .pspimage
5. Now you need to crop the top left corner out, so the crop size will be 25px * 25px. Now save this file as a jpeg for the web and close it.
6. Now open up your vector image that we saved earlier and repeat steps 5 and 6 until you have four corners.

Creating the html using dreamweaver or a wysiwyg editor

1. Open your choosen web authoring software.
2. Create a new html page.
3. Create a table with 3 rows and 3 columns
4. Set the corner cells as 25px by 25px.
5. Insert your images into them either as a background image or as a normal image.
6. You then need to set the full table width to 400px by the height of 400px and set the other widths as follows:
   1. Middle top and middle bottom: height: 25px, width: 350px
   2. Left Middle and right middle: height: 250px. width: 25px
   3. middle middle: height: 350px, width: 350px
7. You now need to set the background color of the other cells to the same color as your circle was.

I hope this tutorial has been helpful. You can see how mine turned out here: http://www.photoshopthis.co.uk/daniweb/daniweb_corners/index.html

(unfortunately my server is down at the mo so it will be online by midday (uk) on 22nd dec 2006. :o