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 in Brighton, Sussex.
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.
