Home » Resources » Dreamweaver CS4 Tutorial » A two column Web Page with a Header and Footer

Part 1.1: Creating a two column Web Page with a Header and Footer

Now we have defined your website we will start to create your first web page.  We will create a 2 column page, this means the page will have two vertical columns.  Normally the left hand column will contain the site’s navigation menu and the right hand column will contain the site’s main content. All this is covered in our comprehensive Dreamweaver training course.

1: Click ‘File > New’ on the Menu Bar.  A window titled ‘New Document’ will appear.

2: This window gives you different default options for laying out your page.  Choose “2 column liquid, left sidebar, header and footer” from the ‘Layout’ column of the window by clicking it once.

3: On the right hand side of this window is an item named ‘Layout CSS’.  Select ‘Create New File’ from the drop down menu.

The appearance of your site is controlled by ‘CSS’, selecting this option causes Dreamweaver to place all the ‘CSS’ in a separate file.  This saves disk space, bandwidth and makes your website more efficient and quicker to download for users.

4: Click ‘Create’ at the bottom of the window to continue

5: A dialog box will appear entitled “Save Style Sheet File As”.  Click ‘Save’ to accept the default name and location.

6: Dreamweaver will now create a two column web page containing some dummy content.

7: Dreamweaver CS4 has a slightly different screen layout which depends on the size of your monitor.  If you have a large screen resolution, then Dreamweaver will start up in a ‘split’ mode.  This means it will show the ‘raw’ code of your web page at the top half of the window and the ‘Design’ view at the bottom half.  If you have a smaller screen resolution, then Dreamweaver will start up in ‘Design’ view only.

In order to standardise the Dreamweaver window, click “View > Design” from the menu bar.  This will change the window to ‘Design’ mode where only your web page will be viewed.  You can however return back to ‘Split’ mode by clicking “View > Code and Design”.  Please note that throughout this tutorial, including the screenshots, assume that you are in ‘Design’ mode at all times

You have now created a two column web page with a header and footer.

Similar resources you may like

1. The Home Page
2. Publishing Your First Web Page
3. Testing Your Web Page
4. The Status Bar – Dreamweaver CS4
5. Header, Footer, Side Bar and the Main Content

Tags

css, Dreamweaver, dreamweaver cs4, dreamweaver tutorial, Header and Footer, two column Web Page, web design

Share This Resource

This entry was posted by Colin Welch on Friday, March 13th, 2009 at 10:17 am and is filed under Dreamweaver CS4 Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.