JBSWARD

Computing Web Site Building Build your own website from scratch 00 - Introduction 01 - Mission and Objectives 02 - Product or Service 03 - Site Map 04 - Build Written Content 05 - Navigation 06 - Site Colors 07 - Site Theme 08 - Layout 09 - Build Template File 10 - Individual Pages 11 - Hosting 12 - Uploading 13 - Promotion 14 - Conclusion Building a template file 00 - Introduction 01 - Setup 02 - Startup Code 03 - Layers and Layout 04 - CSS Styles PART I 05 - Basic Elements 06 - CSS Styles PART II 07 - Final Product Define a site in Macromedia Dreamweaver MX 00 - Introduction 01 - Local Configuration 02 - Remote Configuration Multicolumn Layouts and Web Grids 00 - Introduction 01 - Page Areas 02 - The Basic grid 03 - Expanding the grid 04 - Not standard compliant grids 05 - The table approach 06 - The layer approach 07 - The frame approach 08 - The dynamic approach 09 - Client Side Dynamic Approach 10 - Beyond the grid Multicolumn Layouts and Web Grids: Jorge Blanco Webmaster Other articles written by this author Related Articles + Build your own website from scratch + Building a template file Related Links Little Boxes W3Schools HTML W3Schools CSS	Multicolumn Layouts and Web Grids. By Jorge Blanco 9. Client side dynamic approach. There is one last subject to cover before moving on to more complex layouts. This is the use of client side scripting. Usually the preferred language is JavaScript. The uses of client side scripting are many, but when regarding to web grids, the most udeful application of client side scripting is dynamic formatting of the page dependind on the user's browser or resolution. Many web developers like absolute positioning for their websites but are constantly troubled with the issue that even if they have great care, webpages are usually rendered differently from one browser to another, not to mention that along different resolutions the change can be quite amazing. It is at this time that client side scripting comes to help. By this method the webpage can get to know the user's browser and resolution and adapt consequently. You may have already noticed that this site uses these techniques, it uses PHP for dynamic content management, it uses a layer based layout and it uses client side scripting for adapting to the user resources (among other things). The result, altogether can be quite impressive, specially from the technical side, since it cuts down the maintenance of the site while offering a broad range of options for all kind of visitors. Although some knowledge on JavaScript is needed to further use this technique, I want to give you some code to help you out on dynamically sizing your pages, with this code snippet you can get the window's measures and store them in a variable, what you do with that is up to your imagination. var wnWidth = 0, wnHeight = 0; function heightGrabber(){ if( typeof( window.innerWidth ) == 'number' ) { //Non-IE wnWidth = window.innerWidth; wnHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth \|\| document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' wnWidth = document.documentElement.clientWidth; wnHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth \|\| document.body.clientHeight ) ) { //IE 4 compatible wnWidth = document.body.clientWidth; wnHeight = document.body.clientHeight; } } This code is totally cross-browser compatible and can be complemented by some other fucntions, but I'll leave that to you. Next, what you were already expecting for so long. Read on, complex layouts are coming. <Previous Index Next> Rating: 5	Affiliates Join Us
Jorge Blanco 2005-2007© All Rights Reserved. All content is property of its respective authors. Partial or total reproduction without the author's written permission is strictly forbidden under any circumstances.