Hi, For years now, I've always used tables and paragraph blocks to layout my sites. I know this is a bit old fashioned, and would like to get into using purely css and divs for alignmeny and layout. One thing i've always wondered about sites with really cool designs, is how they are created... Does the designer, create a new image in Photoshop (i.e. a 500*500 pixel image) and then use photoshop's tools to add effects, gradients and shadows etc? I am guessing the designer then cuts out each section of the image, and uses it as the background image in the divs on the page? Obviously, when using tables for layout, content panels are usually rectangular, with perhaps a few images in each corner of the table to give them a rounded effect (like in http://www.theunishop.com ). How is this done using divs and css? Is the background image a non regular shape (like a rounded table shape created in photoshop)? If this is the case, how do you handle the case when the content of a panel exceeds the size you have allocated the div element? For example, if you add a few more links or change the font size, then the text would wrap around inside the div, and cause the div content to span an extra line, making the content area greater than the size of the background image. From what I have gathered, using background images and divs doesn't give you much leighway for modifying your navigation panels etc?... I hope what I'm trying to ask makes sense...
Thats a lot of question Im not sure if i understand them all but you donthave to use tables to code. if you use CSS and DIVS all you do in CSS is name the the area you want to configure such as example content { then go to the DIV in the actual page and name it name="content" control width size and look from css file. the link given is actually simple. It is just slicing. Some people prefer to use programs such as dreamweaver after they slice though.
what you could do is make your picture in photoshop, then map everything onto it using fireworks, save as an html.