| In the previous article “Basic Types and | | | | different portions of the content, and then use |
| Requirements for Web Designing: PSEUDO | | | | CSS-P to place the content elements on the page. |
| TECHNOLOGY” we have discussed about the | | | | For the sake of this article, I'm going to pretend |
| various techniques of web designing process. But we | | | | there are just three columns on the page, and ignore |
| left the topic of table-less web designing because this | | | | the header and footer. |
| topic in itself is a matter of discussion. The first thing | | | | Identifying Your Sections |
| you should be aware is that this site is not built using | | | | Once you've defined the different content areas of |
| these techniques. The Web Design site on About | | | | your site, you need to write them in your HTML. |
| (and all About sites) is built using tables, and until | | | | While you can, generally, place your sections in any |
| browsers that support CSS Positioning are more | | | | order, it's a good idea to place first items you'd like |
| widely used, will be for the foreseeable future. The | | | | less advanced browsers to see first. |
| most important function of table-less web designs is | | | | For my three column layout, I'm going to have three |
| the fact that it greatly facilitates the improvement of | | | | sections: |
| accessibility. However they face a bit of difficulty as | | | | 1.leftnavigation |
| browser support is minimal. | | | | 2. rightnavigation |
| Browser Support: | | | | 3. content |
| CSS Positioning (CSS-P) is the only way to create | | | | These will be defined using div tags with the id |
| standards based Web pages using XHTML. Why? | | | | attribute. Remember, when you use the id attribute, |
| Because XHTML requires that tables only be used to | | | | you need to have a unique name for each id. |
| define tabular data, and not be used for layout. The | | | | 1.<div id="leftnavigation"></div> |
| problem is, until recently, most browsers only had | | | | 2. <div id="rightnavigation"></div> |
| sketchy support of CSS-P. But now, the following | | | | 3.<div id="content"></div> |
| browsers and versions, have minimal to good support | | | | Positioning |
| of CSS-P, among others: | | | | This is the fun part. Using CSS you can define the |
| • Microsoft Internet Explorer 6 | | | | position for your id'ed divs. Store your position |
| • Microsoft Internet Explorer 5 | | | | information in a style call like this: |
| • Netscape Navigator 7 | | | | #content { } Content within a div tag will take up |
| • Netscape Navigator 6 | | | | as much space as it can, namely 100% of the width |
| • Opera 6 | | | | of the current location, or the page. So, to affect the |
| • Opera 5 | | | | location of a section without forcing it to a fixed |
| • Mozilla 1 | | | | width, you can change the padding or the margin |
| • Konqueror 3 | | | | elements. For this layout, I set the two navigation |
| • Konqueror 2 | | | | columns to fixed widths and then set their position |
| Rethinking How You Build a Page: | | | | absolute, so that they wouldn't be impacted by |
| When you build a site using tables, you have to think | | | | where they are found in the HTML. While the page |
| in a "tabular" format. In other words, you're thinking | | | | won't look wonderful in non-CSS-P browsers, as you |
| in terms of cells and rows and columns. And your | | | | can see, it is possible to define how your page will |
| Web pages will reflect that. When you move to a | | | | look without any table tags. |
| CSS-P web designing, you'll start thinking of your | | | | The term web designing simply refers to fine art of |
| pages in terms of the content. | | | | designing websites that are available on the World |
| For example, the page for this article can be | | | | Wide Web and are used consistently by individuals. |
| considered to have five content parts: | | | | Designers are a very significant part of developing a |
| 1. The headerthis is where my photo is, the top | | | | website as they are responsible for providing color to |
| banner ad, and basic navigation. | | | | the external appearance of the website. Therefore, |
| 2. The left navigationthis is the left side of the | | | | they are vital in providing a lasting impression upon |
| page, with the subjects and essentials. | | | | the user, enhancing the popularity of the site. There |
| 3. The right navigationthis is where the tower | | | | are various factors and methods that need to be |
| ads and other information is. | | | | borne in mind when it comes to web designing a |
| 4. The contentthe text of this article. | | | | website. Websites are filled with written content as |
| 5. The footerthe bottom navigation, copyright | | | | well as images and they need to conform to certain |
| information, lower banner ad, and so on. | | | | forms like JPEG, PNG, GIF and HTML, XHTML etc for |
| Rather than putting those elements in a table, I can | | | | written content. One of the methods of designing is |
| use the <div></div> tag to define the | | | | known as table-less web design. |