How to Create a Two Column Web Page with Header and Footer in Dreamweaver CS4

  1. Click "File | New...". If you remember what I said earlier, this means to click the "File" menu, followed by the "New..." item on the menu that appears. A window with the title "New Document" will appear.

2.In the Layout column of the window, locate the line that says "2 column liquid, left sidebar, header                     and footer". Select that item by clicking it once.
                                                         Now glance at the rightmost side of the same window and look  for the item "Layout CSS". It should be somewhere near the bottom of the window. Click the drop-down box and select "Create New File". This causes Dreamweaver to place information controlling the appearance of your web page (called "CSS") in a separate file. We want this because all the pages on your site will share the same basic layout, and having such information contained in a single file saves disk space, bandwidth and speeds up the loading of your web page if your visitors load multiple pages of your website.

3.When you've finished doing the above, click the "Create" button.
                                                                                                           Dreamweaver will issue a dialog   box with the title "Save Style Sheet File As". Accept the default name and location by clicking the "Save" button.

4.Once you've done that, Dreamweaver will proceed to create a 2 column web page with some dummy content typed in.

5.Dreamweaver CS4 displays a slightly different screen layout depending on how large your monitor resolution is. If your screen resolution is large, Dreamweaver may start up in what it calls the "Split" mode, that is, it may show the underlying "raw" code of your web page in the top half of the window (the "Code" portion), and the visually pleasing version (the "Design" portion) in the bottom half. If your screen is smaller, Dreamweaver will simply start up in "Design" mode, where only the visually pleasing version is displayed.

6.To standardize the appearance of the Dreamweaver window, for the sake of this tutorial, please click "View | Design" from the menu.This switches the layout to "Design" mode, where only your web page, as it appears in a browser, is shown. Don't worry. If at any time, you feel nostalgic for the original "Split" layout, just use "View | Code and Design" from the menu to get it back
                            

Read Users' Comments (0)

0 Response to "How to Create a Two Column Web Page with Header and Footer in Dreamweaver CS4"

Post a Comment