Make Way for Full-screen Websites

There are two main types of website layouts. Websites which fill your screen and websites which do not. In this tutorial we are going to explore how to make a website layout appear Full Screen using the famous Dreamweaver.

FULL-SCREEN

What is Full Screen?

Full-Screen websites are web pages which fill the entire browser window. No matter what size your browser window is, it will be filled entirely. For example, if you visit The Sydney Morning Herald Website: http://www.smh.com.au you should be able to see that all the content extends from the left of the page to the right of the page.

Full Screen websites are also commonly referred to as "liquid websites".

Which websites are Full Screen?

You usually find that a lot of "content driven" websites are using the Full Screen design. These websites have a lot of information they need to display onto their websites. By using a Full Screen layout, it allows the website to efficiently make use of space.

More websites using this:

• http://www.wired.com

• http://www.sitepoint.com

• http://www.weblink.com.au

Advantages of going Full Screen?

Yes, it is the question every one is asking themselves. What is so great about going Full Screen?

Let's face it, why not! A more factual reason would be that no matter what resolution your monitor is set at ( e.g. 800 x 600 pixels or 1152 x 864 pixels) your website will look the same on all types of monitors -- All the way to the edge of the screen!

MORE ADVANTAGES:

• Website is viewable at all screen resolutions
• Website will look great on older machines, using low resolutions
• Increase overall accessibility in the website
• The website can have a feeling of increased importance and value by using the entire space

DISADVANTAGES

• Can be a hassle trying to organise all your elements on your website to line up properly

Let's go Full Screen!

Your convinced that you want to create your next website into a Full Screen layout. Here is how we do it:

Step 1)

Create a new html file inside Dreamweaver.

File > New > Basic HTML page

Step 2)

Insert a Table with a width of 100%.

Insert Table > Width 100%

Step 3)

Select your new Table, and give it a Background Colour. Any colour will do.

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">

Now press F12 to preview your web page.

You should be able to see that the Table extends all the way across your browser window.

You want more? Here is how we can use a similar method by using a repeated background image.

Step 1)

Using Photoshop or a Photo Editing program, create an image which has a canvas size of 10 x 10 pixels. Now place an image inside this canvas. This image could be of anything -- Pattern designs usually work great. Save the image as either a jpeg file or a gif.

Step 2)

Create a new html file inside Dreamweaver.

File > New > Basic HTML page

Step 3)

Insert a Table with a width of 100%.

Insert Table > Width 100%

Step 4)

Now select the table. Under the properties box, Press the folder icon which is under the 'Bg Image' line.

Select the file which you just saved.

You should now see your image being repeated across the entire table and across your entire browser screen.

To view an example of a website which uses this technique, visit:

http://www.hansliebschercopperwks.com

To view their tiled image visit:

http://www.hansliebschercopperwks.com/introductionpage/introduction_tile.jpg

Notes:

- Using repeated background images, make web pages load faster. Instead of loading one big huge file, it loads one image which is then repeated itself throughout the web page.

Future of website layouts

Who knows what's in store for the Internet? Many designers still prefer using static websites which do not fill the entire web page.

Websites which do not fill the users screen are commonly referred to as 'solid websites'.

It can give the feeling of space allowing the web page to 'breathe'.

It is interesting to note that another Australian news website, http://www.news.com.au , do not use a Full Screen layout. Does this mean that it is inferior to http://www.smh.com.au ?

There is no right or wrong answer ... It comes down to the same notion of either driving an automatic or manual car.

Depending on the type of website being created, I generally prefer using a combination of both 'Liquid' and 'Solid'

An example of a hybrid website is: http://www.4print.com.au

Here you can see that the menu design uses a liquid form, while the body of the content remains 'solid'.

Have a think about which layout is best suited for your next website.

Liquid? or Solid?

Related Links:

• http://www.wire.com/
• http://www.sitepoint.com/
• http://www.weblink.com.au/