DIVs vs Tables - Page Layout

I am an old school web designer, who has used tables to desgin website layout. Unfortunately (or fortunately) this is method of page layout is no longer being supported, and Div tags are the way to go.

I am aware of DIV tags, but I have never used exclusively to design a whole page layout, I have used them in conjuction with tables.

Here is my oportunity to ditch the tables and learn how to use the DIV tag.

QUOTE:

<div> is the professional way of designing the webpage. It provides flexibility in web designing as you can make any kind of design using CSS. But the problem with CSS is that, its debugging is not easy and people find it hard to learn. That’s why they stick to <table>.<table> is easier to learn and implement as you have to only figure out the layout of rows and cells.

source: http://theprofessionalspoint.blogspot.com.au/2012/04/div-vs-table-tag-which-one-to-use.html

|
source: http://creativedev.in/2013/01/table-layout-using-div-tags/

The two most useful sites for learning and understanding DIV tags are:

W3Schools - http://www.w3schools.com/

and

Youtube - http://www.youtube.com

Both these sites were a fantastic resoruce for learning how to use DIV tags, and the associated CSS styles.

Youtube Video Links:

Learning to use CSS and DIV Tags for Columns in Dreamweaver
http://www.youtube.com/watch?v=vSJT7Wf6A04

HTML div tag Example and Tutorial using CSS
http://www.youtube.com/watch?v=68kiDajh1lg

HTML 101 - The Div Tag
http://www.youtube.com/watch?v=3JvUqqKNh8M

Floating Div Tags :: Dreamweaver Tutorial
http://www.youtube.com/watch?v=B_JLXPDH-jY

Relative and Absolute Positioning of Div Tags, Nesting Tags
http://www.youtube.com/watch?v=YLWLfzx4nq0

Links:

The Professionals Point: DIV vs TABLE tag: Which one to use?
http://theprofessionalspoint.blogspot.com.au/2012/04/div-vs-table-tag-which-one-to-use.html

Adobe Community: Choosing <div> vs <table> layout
http://forums.adobe.com/thread/1183246

HTML Layouts - W3Schools
http://www.w3schools.com/html/html_layout.asp

Website Colour - If I want to add some

I had better make a quick post about website colour. I have just mentioned 3 white sites, but if wanted to design with colour in mind. I would definitely use the following two websites for referencing, and inspiration.

I am sure there are more websites out there to help in colour theory, but these two sites would be my first visits.

1. Adobe Kuler: https://kuler.adobe.com/‎

Sample Screen Shot

Source: http://i.imgur.com/ipWtR.png

2. Color Scheme Designer 3: http://colorschemedesigner.com/

Sample Screen Shot

Source: http://0.tqn.com/d/create/1/0/g/3/A/-/Color-Scheme-Designer-3---Google-Chrome-2011-04-12-11-54-15.png

Image Sliders

Today I am looking at image sliders.

Some use Javascript, others use CSS only.

The CSS only image sliders, initially appear to be the easiest to use and I have looked into this a little more.

The major problem, that I have found with the CSS code for the slider, is that the back-button on the browser does not instantly go back to the previous page, but instead goes back to the previous image of the image slide. This is not a good thing, especially if you have viewed many images, and the the back button then appears not to work.

A few solutions to this, is to "navigate" away from this page using a navigation system, rather than the back button.

Some Image Sliders - CSS Only

http://tympanus.net/Tutorials/CSS3Lightbox/index.html

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index4.html - A CSS-only slideshow for background images

http://tympanus.net/Tutorials/CircleNavigationEffect/ - Nice. I can see myself using this one.

Some Image Sliders - JScript etc

http://tympanus.net/Tutorials/ItemBlur/  - uses CSS and JQuery. I like this for a navigation system.