Advanced Search

Center Your Layout

DreamWeaver Tutorial by Björgvin Guðmundsson

Introduction.

In this tutorial I am going to show you how to make your layout/graphic stay horizontally and vertically centered in all screen resolutions used today.

"Note: This is not valid HTML - The right way would be to do this using CSS. Get more info on it here or here"

Step 1.

- Make a new document and save it on your hard drive.

- Right click on the screen and select “page properties”.

- Now the page properties pop-up window will appear.

Click for bigger image

- Set the “left margin”, “top margin”, “margin width” and the “margin height” to zero (0).

- Click the OK button.

Step 2.

Now we need to enter Dreamweaver’s “code and design view” by clicking the “code and design view” button in the top-left corner of your window (or go to “view-code and design”).



Step 3.

Now we must manually add a few words to the code. (I don’t know why DW leaves this out). You need to add “right margin” and “bottom margin”.

Before:


After:



After you have added the "right margin" and the "bottom margin" values, go back to “design view”
(or leave the “code and design view” open, some designers leave it open all the time)

- Save your document (file – save)

Step 4.

Make a new table, (see image).



Go to the properties palette (window – properties) and type in the following value. Height: 100%

"It is very important that the next step is done right."

Click inside the table and in the properties palette set the Horizontal and Vertical align to center and middle.

(See image)

Click for bigger image

Step 5.

Now you can make a 780x420px table inside the 100% one, and it will always stay centered.

The document’s html code:



center your layout





your layout/graphic here




You can find more Dreamweaver tutorials at tutorialvault.net