Designing a layout page for a web site.
1.
- Create a new folder for the web site in your file system.
- In Dreamweaver create a new site and point it at the newly created folder.
- Create a new HTML document.
- Save this in the root folder of the new site as 'layout.htm'
- In this new document type 'header' press enter.
- Type 'sidebar' or 'topbar' and press enter.
- Insert a paragraph of text (use lorum Ipsum) and then press enter.
- Type 'footer' and press enter.
- Save the page.
You have now created text for the different areas of the page.
2.
- Place your cursor on the word 'header'.
- From the quick tag selector (the gray bar at the bottom edge of the document window) select the <p> tag.
- From the common tool bar choose 'Insert div' and give it an ID name of 'header' and click ok.
- Place your mouse on the text that says 'sidebar' or 'topbar' and choose the <p> tag from the quick tag selector.
- Again insert div from the common tool bar. Give it an ID name of 'sidebar' or 'topbar'.
- Do the same with the paragraph of text and give it an ID name of 'content'
- And the same with the footer.
- Now click anywhere in the document and select the <body> tag from the quick tag selector.
- Choose Insert div and give it an ID name of 'container'.
- Save the page.
You have created the main div containers for your page.
3.
- Place your cursor on the word 'sidebar' or 'topbar' and select the <p> tag from the quick tag selector.
- Delete the text using the delete key.
- Now type the word 'Home' and press enter.
- Type 'Link2' and press enter.
- Type 'Link3' and press enter.
- Now highlight all of the words you have just created and make these into an unordered list by selecting the unordered list button from within the property inspector.
- Now highlight each of the words in turn and type '#' (the hash sign) in the link/url field in the property inspector, which will turn the word into a link (a null link at present but this allows you to style them as links).
- Place your cursor on any one of the links and from the quick tag selector, select the <ul> tag. This will select and highlight the whole of the unordered list.
- From the common tool bar choose 'Insert div' and give it an ID name of 'nav'.
- Save the page.
You have now created your main navigation menu (with temporary links).
4.
- Replace the word 'header' with the main title for your site and change the format to heading1.
- replace the footer text with your copyright text.
- Save the page.
You have just created all of the basic div's for your page, which you will now need to position and style (refer to units 7 and unit 8).