Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14

Thread: Layout Basics

  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Layout Basics – Liquid or Static?

    Skill Level: Basic
    Required Knowledge: Basic computer/internet terminology, some knowledge of HTML, JavaScript (optional)

    Keywords: Basic Layouts, Liquid Layout, Dynamic Layout, Static Layout, Automatic Resize, Banner, Stretch, Logo, Javascript, Resize, Resolution, Browser, Width.

    Files associated with this tutorial are in the Zip file below.
    JR

  2.  

  3. #2
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Part 1: Introduction

    I decided to write this tutorial because questions that are related to this tutorial are usually asked. Also, this is my first tutorial, so go easy on me in the responses

    This tutorial will deal with what your options are, discuss why to use them and explain how to make one.

    There are two basic types of layouts, liquid and static. A liquid (or dynamic) layout changes size depending on what resolution and/or browser size the user’s computer is set to, hence the name ‘liquid’. Conversely, a static layout is a layout that does not change size regardless of the resolution and/or browser size. In short, a static layout is one that doesn’t change whereas a liquid (dynamic) layout does.

    A liquid layout is great in smaller resolutions because it minimizes horizontal scrolling and replaces it with vertical scrolling by wrapping the content to the width of the page. A static resolution may have horizontal scrolling in smaller resolutions because it is a fixed size and the designer may have designed it for larger resolutions.

    It is also good for higher resolutions because the page can seem more ‘full’ and there is a lot less vertical scrolling than a static layout. However, whilst the page seems fuller in larger resolutions, the content may be as equally squashed together in smaller resolutions.

    If something has to cause horizontal scrolling, eg. a large image, a liquid layout will adjust to house it whereas it will usually break the design of a static layout.

    The main plus of a static layout is that it can be a lot more complex in the graphic department because you do not have to worry about the images being ‘stretched’ to fit the resolution.

    When designing you must take into account 800x600, as a large chunk of internet users still use it (at the time of writing this tutorial). Until the usage of this resolution significantly drops and is finally phased out by larger resolutions it must be catered for. Vertical scrolling is fine as long as it is not too excessive, but horizontal scrolling is a big no-no, avoid it like the plague. It is very bad for web site usability for a number of reasons, obviously because the user has to scroll back and forth to look at the page and because mouse wheels are designed to go up and down, not left and right.

    I will now deal with the technical side of the two layouts…
    JR

  4. #3
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Part 2: The basics of coding layouts.

    If you know your HTML you should know that you can generally use two methods for sizes; pixel values and percentages. These are at the backbone of the two layouts, where static uses pixel values in the majority and liquid layouts use percentages mainly.

    Note: Percentages are relative to whatever tag they are contained in; for example, a table within the body tag set to a percent will be that percentage of the page, whereas a table cell set to a percent within a table row will be that percentage of the row.

    Examples:
    --------------------------

    This is an example of a liquid layout
    Code:
    <html>
    <head>
    <title>Liquid Layout</title>
    </head>
    <body>
    <table width=”100%” cellpadding="0" cellspacing="0" border="0">
    	<tr>
    		<td>
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    Notice that the table width is 100% and it is contained in the body tag, this means that it will scale to 100% of the page. However, it does not need to be 100%, it could be any percentage. A smaller percentage for the main content table will give the feel of a static layout but will still change with the available width in the browser.
    -------------------------------------

    This is an example of a static layout
    Code:
    <html>
    <head>
    <title>Liquid Layout</title>
    </head>
    <body>
    <table width=”780” cellpadding="0" cellspacing="0" border="0">
    	<tr>
    		<td>
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    			Content Content Content Content Content Content
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    The table is set to 780 pixels wide; this means that it is a static layout because it will always stay 780px wide. 780 is the maximum width you should use for a static layout because it is the maximum browser space in 800x600 (Internet Explorer, not sure about the others.)

    --------------------------

    Simple, isn’t it? Now on to creating banners for liquid layouts.
    JR

  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Part 3: Banners in Liquid Layouts.

    You may want to have a banner at the top of your page that ‘stretches’ across the screen if you are using a liquid layout. Here is how it is done:

    The banner you are using must have a repeatable section for it to be incorporated into a liquid layout. Here is an example of a good banner to use.

    (See Banner1.gif in the Part 3 folder)

    Note that this banner can be repeated in places, so what you have to do is cut out the repeatable and non-repeatable parts, like so:

    (See logo.gif in the Part 3 folder)
    (See Banner2.gif in the Part 3 folder)

    Then with some simple HTML coding you can make the banner and area for your content.
    Code:
    
    <html>
    <head>
    <title>Liquid Layout - Banner</title>
    </head>
    <body style="margin: 0px;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td width="The width of your banner" height="The height of your banner"><img src="Your Logo" /></td>
    <td background="Your Repeating Section">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">Content</td>
    </tr>
    </table>
    </body>
    </html>
    (This is leftbanner.html in Part 3 folder)

    You must remember a few things when creating this layout.
    1. Set the page margins to 0, do this by putting [minicode]style=”margin: 0px”[/minicode] in the <body> tag. More on this subject can be read in the tutorial here.
    2. Remember to set the following attributes to 0; [minicode] cellpadding="0" cellspacing="0" border="0"[/minicode] to avoid the banner being broken up.
    3. Put in the &nbsp; (non-breaking space) special character code in the empty banner cells, so the repeating banner section does not go AWOL.
    4. In the second row (<tr>) of your <table>, in the <td> tag put [minicode] colspan="2"[/minicode], so the content area is not split up by the banner.


    To centre the logo in the banner, it is exactly the same but with 3 columns, the logo in the middle one and the repeatable banner either side. It is done like so
    Code:
    
    <html>
    <head>
    <title>Liquid Layout - Banner</title>
    </head>
    <body style="margin: 0px;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td background="Your Repeating Section">&nbsp;</td>
    <td width="The width of your banner" height="The height of your banner"><img src="Your Logo" /></td>
    <td background="Your Repeating Section">&nbsp;</td></tr>
    <tr>
    <td colspan="3">Content</td>
    </tr>
    </table>
    </body>
    </html> 
    (The result can be seen in centrebanner.html in Part 3 folder)


    Note: If centring the logo, therefore creating three columns at the top, remember to change the column span to 3 in the main content area cell -[minicode]colspan="3"[/minicode].

    It is easy isn’t it? Now on to the more advanced stuff, getting (and doing stuff) with the users resolution setting and available browser space.
    JR

  6. #5
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Part 4: Getting a little more advanced with JavaScript.

    If you are running a very graphically complex website that a repeating a banner is not an option, you may want to consider using JavaScript (and a few different sizes of your banner) to create your liquid layout. It is generally not a good idea though, because I am not sure about browser compatibility and sometimes people do not have JavaScript turned on for whatever reason (13% according to w3Schools, July 2003.) Plus the page will not be entirely liquid because horizontal scrolling will occur when the browser window is minimized.

    Let’s start off with a test to display the user’s resolution and browser space:
    Code:
    
    <html>
    <head>
    <title>JavaScript Resolution Test</title>
    <script type="text/javascript">
    <!--
    function getValues()
    {
    	document.getElementById('reswidth').innerText = screen.width;
    	document.getElementById('resheight').innerText = screen.height;
    	document.getElementById('bwidth').innerText = document.body.clientWidth;
    	document.getElementById('bheight').innerText = document.body.clientHeight;	
    }
    -->
    </script>
    </head>
    <body onLoad="getValues()" onResize="getValues()" onFocus="getValues()">
    <b>Resolution:</b> <span id="reswidth"></span>&nbsp;x&nbsp;<span id="resheight"></span><br>
    <b>Availiable Browser Space (Width):</b> <span id="bwidth"></span><br>
    <b>Availiable Browser Space (Height):</b> <span id="bheight"></span>
    </body>
    </html>
    (jstest.html in Part 4 folder)

    Note that in the body tag there are three attributes which start the JavaScript function; onLoad, onResize and onFocus. Basically, onLoad is when the page loads, onResize is if the browser window is resized and onFocus is when the browser window is brought back to being active from inactivity (for example if you go to a site, click away on an instant messenger conversation window and click on the site again.) If you play around resizing your browser window or change your resolution, the numbers should change in the test file.

    Don’t worry about knowing what the hell document.getElementBy… means, just concentrate on knowing two things, screen.width will get the amount of pixels across the users entire screen and document.body.clientWidth will get the amount of pixels available across the users browser.

    This tutorial will only go into creating liquid layouts using screen.width, this is because it would become very complicated using the available browser space.

    Firstly, make your banner for how many different resolutions you want the site to work on. In this tutorial I will only design it for 800x600 and 1024x768, but I will put some code in to turn the layout into a static layout for above resolutions (they are in the minority, anyway).

    Just remember one thing when making your banner; Always take away 20 pixels from the resolution width you are designing for, for the width of the banner For example, if you were making the banner for 800x600, make the width 780. Or 1024x768, make it 1004. You get the idea? Also, you must Ditch those page margins

    Here are the two banners I shall use for the different resolutions:

    800 x 600 (banner_800.gif in Part 4 folder)

    1024 x 768 (banner_1024.gif in Part 4 folder)

    It is a good idea to call your files the same name (eg. banner) and then add an underscore and the width of the resolution it is designed for. For example banner_800.gif for the 800 x 600 banner. My script will rely on using this method, however if you cannot change the file name, post a reply and I will write out an alternative script.

    Here is the code for swapping them depending on resolution…
    Code:
    
    <html>
    <head>
    <title>Banner Change</title>
    <script type="text/javascript">
    <!--
    function chooseBanner()
    {
    	width = screen.width;
    	filename = 'banner';
    	fileext = '.gif';
    	if (width == 800)
    	{
    		size = '_800';
    	}
    	else
    	{
    		size = '_1024';
    	}
    	document.getElementById('banner').src = filename + size + fileext;
    }
    -->
    </script>
    </head>
    
    <body style="margin: 0px;" onLoad="chooseBanner()">
    <table cellpadding="0" cellspacing="0" border="0" align="center">
    	<tr>
    		<td><img src="banner_800.gif" id="banner" /></td>
    	</tr>
    	<tr>
    		<td>Content goes here.</td>
    	</tr>
    </table>
    </body>
    </html>
    (jsbanner.html in the Part 4 folder)

    Explanation time:
    • Replace filename with the initial name of all of the banners eg. hello_800.gif, hello_1024.gif etc. would be hello.
    • Put the file extension of your banners in the fileext.
    • The if statement checks if the resolution is 800 pixels wide, if it is, it adds the _800 extension to the banner file, if it is not it will load the _1024 banner extension.
    • The getElementById gets the file name of the banner image and puts the three parts together, filename, size and extension. So if the filename was hello, the size was _800 and the extension was .jpg it would output hello_800.jpg.
    • The src for the image is the smallest size just in case the user does not have JavaScript turned on or there is some browser incompatibility. This means that it will be turned to a static layout.


    If you need it for more resolutions, or something like your file name, file extensions etc. are different, or you need something more advanced, just post a reply and I will try to help you develop it.
    JR

  7. #6
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    1. I have way too much time on my hands
    2. I have way too much time on my hands

    JR

  8. #7
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    3. Yes, you do and 20TD for you
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  9. #8
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    LOL, thanks
    JR

  10. #9
    Junior Member
    Join Date
    Sep 2003
    Posts
    5
    Member #
    3298
    nice work!

  11. #10
    Member
    Join Date
    Sep 2003
    Posts
    52
    Member #
    3267
    Nice work, I love how you say "horizontal scrolling is a big no-no, avoid it like you avoid the plague" or something like that, that was halarious.

    Thanks, Learned alot today by this topic.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com