HTML & CSS Direct Study

Layouts - Past, Present, Future

Layouts using Table:
As previously discussed may web designers would create complex layouts using primarily tables. Simply by stretch and reforming the spans in a table you could create a webpage that looked neat and organized. However using tables to create layouts can be very time consuming and frustrating, because each cell associates with all of the others often times making changes to one things means correcting errors on other cells. W3C (World Wide Web Consortium) as guided many web developers to use other ways to create creative and efficient layouts, however tables can be useful in some situations and make data easily presentable.

Layouts using Frames:
Frames are regions within the webpage that display multiple HTML pages. Displaying multiple pages within one page allows for flexibility, creative designs, and ability to changes individual pages without affecting the surrounding information. Frames were commonly misunderstood and misused when they were first developed, therefore currently they are not widely used and can sometimes be confusing to users. However, if frames are used correctly they can be beneficial by showing multiple pages of information at one time. Despite the development in frames there are still many issues that turns both developers and users away from them. Many problems are associated with frames that cause people to think negatively about them. Trouble with navigation, printing, bookmarking, designing, and even browser compatibility all affect the usage of frames. It is because of these drawbacks that they are not frequently used.

Layouts using Division:
Currently the most accepted form of layouts are created using divisions. Divisions can be manipulated and placed wherever the developer wishes for them to be located. By having individual divisions the developer can create different backgrounds, text styles, and appearances. This gives the developer room to be creative while also organizing a site well. Divisions can be very flexible and allow many changes to be made to them while not affecting other divisions in major ways.


Best Practices for Layouts (some CSS too):
1. Set Defaults – This helps to bridge the gaps between different browsers. When you set defaults this lets you start of with a blank page.
----- Margin = 0
----- Padding = 0
----- Border = 0
2. Work from the top down – in sections – If you begin at the top of the page then you are starting with the largest element. By working down the page you can enter into more detailed sections. This creates better flow and can prevent errors.
3. Document and Debug:
---- Documentation is important – you may not be the only one to ever edit the web page. If you clearly make comments then others can read, understand, and edit your code.
---- Debug: by debugging your page you accomplish a few things. First, this means that your site will display correctly as you wish for it to be displayed. Second, bringing your code up to W3C standards makes your code correct by industry standards
-------§ Firebug – Debugger add-on used in Firefox browsers
------- § W3C Validation – Checks your site for critical errors, can correct layout problems you may be having.
4. Come to a decision on Browsers – There are multiple browsers that users can view a web page through. It can be very difficult to create a page that will look correct in all browsers. When you develop a page research and decide which browsers you want your page to work well in. This decision can be made through analytics or recommendations by W3C.
5. Borders – Borders are not always used to outline each element within a page, however when developing a web page if an element is not correctly positioned or displaying correctly you can set a border to display. This will reveal why all elements are not correctly displaying.
6. CSS Practices:
---- Generic Classes – these can be used multiple times in multiple elements. This helps to set the overall look of the page without having to type repeated code.
----- Example: .bold {font-weight:bold;} -- this can now be used any place bold settings can be used.
---- Multiple Selectors -- If you want to have the same effect on different elements you can easily combine them so that they are all affected similarly.
----- H1, h2 { font-style:italic; font-family:Arial}