Web Design Codding

Tableless web design (or tableless web layout) is a method of web design and development without using HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as CSS (Cascading Style Sheets) are used to arrange elements and text on a web page. CSS was introduced by the World Wide Web Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.

Early in its advent, many web developers considered CSS a more powerful and easier to use way of formatting, and considered the FONT tag obsolete. On the other hand, early CSS had very limited and difficult to use layout capabilities and many common page layouts (like the 3-column design) that were very easy to implement with tables had no obvious equivalents in CSS.

As of 2006, CSS layout capabilities improved considerably. Nonetheless, many websites still use CSS for text formatting only, while using tables for layout.

Accessibility
Because of the Internet’s rapid growth, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Table less Web design considerably improves Web accessibility in this respect. Screen readers and braille devices have fewer problems with table less designs because they follow a logical structure.

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page.

Bandwidth savings
Clever implementation of table less design can produce web pages with fewer HTML tags thus reducing page download times. Using external style sheets to position page elements means more markup language may be cached and further reduce download times for subsequent pages using the same resources.

Poor implementation of table less design can result in many more lines of code used per page element which can increase download time. Tables have a defined set of rules which are clear and concise while table less design often involves working around browser inconsistencies.

Table less design does not necessarily imply bandwidth savings. If implemented correctly, the bandwidth savings are generally minor at best. It is still possible to build a lightweight web page with tables. The use of WYSIWYG editors or the technique used by the web page’s author will have a much greater influence on page download times.

Maintainability
Maintaining a website may require frequent changes, both small and large, to the visual style of a website, depending on the purpose of the site. Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors, changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.

In tableless layout using CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

Also, because the layout information is stored externally to the HTML, it is quite easy to add new content in a tableless design, whether modifying an existing page or adding a new page. By contrast, without such a design, the layout for each page may require a more time-consuming manual changing of each instance or use of global find-and-replace utilities. However site owners often want particular pages to be different from others on the site either for a short period or long term. This will often necessitate a separate style sheet to be developed for that page.

Due to browser inconsistency and a particular web designer’s implementation of tableless design, it may not be clear at first glance exactly how a tableless web page is constructed. While it is convenient to have markup language residing in a single CSS file, it can split layout logic unnecessarily. Browser inconsistencies can increase the risk of web pages failing to render properly which increases the need for maintainability.

Standard Tableless HTML
After the client approves the design by signing the design task approval sheet / design sign-off, the developer will proceed to the template creation (in .dwt format). The developer assigned should make the table-based HTML design created by the web designer into table-less HTML format. The web developer should have basic knowledge in CSS 2 and HTML.

A typical web design does have 6 div ids – div#wrapper; div#header, div#nav, div#masthead, div#body and div#footer. Below is the illustration of these div ids:

Typical div structure (if the navigation links is set horizontal)

Typical div structure (if the navigation links is set vertical).

Using UL and LI tags as navigation hover behavior
This tutorial will help you to create a navigation hover behavior using LI and UL tags.
Step 1
Open your photoshop and create new file. Set the width to width 500px and Height 30px. Press letter U in your keyboard to use shape tool but choose only the rounded tool and set the radius to 20px.


Step 2
Will now add new layer style for navigation. Go to blending option and choose gradient overlay. You can give any color you want for your glossy navigation so before you choose the right color make sure that the two colors will almost match.


Step 3
Hold press CTRL and click on the layer to select a perfect rounded side marquee tool on your layer and then hold press ALT to delete the top part of the marquee. Don’t deselect the marquee as of now make a new layer above the first layer and go to your gradient tool to choose your own color.



Step 4
And now let’s create one part of the navigation to make it a glossy navigation. Repeat the same as above by holding CTRL on the first layer, create new layer and put it above the second layer then delete the bottom part of the selected layer marquee.


Change the opacity of the layer 3 to 50% and set the layer property to screen.


Press CTRL+ALT+C to open canvas option and do the same option i did in the image bellow.


Duplicate your glossy navigation bar and do it same as the image bellow.


Step 5
Then let’s add some text as your navigation together with the hover effect. Make sure the text is aligned in the center.


What you see above there is only one hover effect so make more for the others and do the same bellow.


Step 6
Select one of the hover effect layers and go to blending tool then gradient overlay. The angle should be -90 degree and default gradient color, change the black to lighter one, change it to grey. And select overlay for the blending mode and opacity to 75%. To make your work faster for doing the same for the other hover effect layers, right click on the layer with the blending option settings and copy layer style then right click on the other hover effect layer and click on paste layer style.


Step 7
In this step will start coding in html. And what we are going to use is unordered list.

<ul id="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="blog"><a href="#">Blog</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

Step 8
This next step is coding the basic in CSS code for the navigation. So read carefully especially the comment part.

ul#navigation{ margin:0; padding:0; } ul#navigation li{ margin:0; padding:0; list-style:none; float:left; } ul#navigation li a{ margin:0; padding:0; width:100px; /*All link width are set to 100 pixels*/ height:30px; /*All link height are set to 30 pixels*/ text-indent:-2000px; /*Move your text link to 2000 pixels to the left*/ float:left; outline:none; }

Step 9
Let’s start inserting the image into your unordered list. If you notice the coordinates of 0 0 to -400 0; it is use to position your image navigation to display properly. The first digit is for the left position and the second digit is top position. I used negative coz if the position is set to 0 0, means the image is starting from the left part of the image navigation. So by displaying the second menu properly, you need to give it a negative coordinates for the left position. Then do it the same as the other menu but don’t forget using basic math for the positioning of your menu. Coz all width is set to 100 pixels.

ul#navigation li.home a{ background:url(09.jpg) no-repeat 0 0; } ul#navigation li.about a{ background:url(09.jpg) no-repeat -100px 0; } ul#navigation li.photos a{ background:url(09.jpg) no-repeat -200px 0; } ul#navigation li.blog a{ background:url(09.jpg) no-repeat -300px 0; } ul#navigation li.contact a{ background:url(09.jpg) no-repeat -400px 0; }

Step 10
For the final step, let’s start the hover effect of the image navigation guys. Just copy the code above and paste it in a new line then change the second digit to -30px and then it’s all done. You advanced navigation is ready to go.

ul#navigation li.home a:hover{ background:url(09.jpg) no-repeat 0 -30px; } ul#navigation li.about a:hover{ background:url(09.jpg) no-repeat -100px -30px; } ul#navigation li.photos a:hover{ background:url(09.jpg) no-repeat -200px -30px; } ul#navigation li.blog a:hover{ background:url(09.jpg) no-repeat -300px -30px; } ul#navigation li.contact a:hover{ background:url(09.jpg) no-repeat -400px -30px; }