Make Way for Full Screen Websites
Skill Level: Novice
Article by: Singer Design

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.

Contents

• What is Full Screen?
• Which Websites are Full Screen?
• Advantages of going Full Screen?
• Let’s go Full Screen!
• Future of Website Layouts

++ Back to top ++