Laying out a page with DIV TAGS

This is a step by step description on how to lay a page out with DIV TAGS in Adobe DreamWeaver.

  1. Create a new folder in your documents and name this ROOTFOLDER – this is where your website development will be kept. 
  2. Open DreamWeaver and link it back to your rootfolder by clicking on the button shown below.
  3. Once you’ve pressed this button you then go to ‘MANAGE SITE‘ – this will then take you onto a screen the same as the screenshot below. Click on ‘NEW SITE’, browse for your ROOTFOLDER and name your site. Once you press save you are linked to the ROOTFOLDER. Its important to have this linked onto your dreamweaver as it will automatically save any of your work to the folder.
  4. Now you are all set up you must create a HTML document and save it as ‘INDEX‘  inside your rootfolder – this automatically tells DreamWeaver that this page is the main page to your website. It is easier to view your page as a ‘SPLIT’.
  5. To create DIV TAGS on your page you must go to the top of the page and click ‘INSERT’ – ‘LAYOUT OBJECTS’ -‘DIV TAG‘. This box should come up and the ‘ID‘ for the first part of my example webpage layout is header. Make sure you are inserting this ‘BEFORE END OF TAG‘ each time you make a new DIV TAG. Also you must make sure you are placing it in the right place – for example on my webpage layout I have a HEADER, LEFT, RIGHT, FOOTER. If i was to make the LEFT DIV TAG then I must select ‘body’ or ‘header’ if that was the tag before. This is to make sure you place each box in the right place of your webpage. Once you have done all four of the different DIV TAGS your HTML page will look like the second screenshot below.    
  6. Once you have those four boxes on your HTML page then you need to create a CSS  page to design each of your DIV TAG and to do this you must go to FILE – NEW – CSS – CREATE. Save this document to your ROOTFOLDER and link your HTML to your CSS (make sure your on the HTML page) by clicking on the button shown below. Once you have clicked this button a screen will pop up the same as the second image below, this lets you link the files together. You firstly click browse, find your CSS file in your ROOTFOLDER, press open and click ok. You will now see in the bottom right hand side of your DreamWeaver that there will be both the HTML and CSS files together. 
  7. You now need to design and modify each of your div tags and as you can see from the image below I have created a design to show you how big each of my header, left, right, and footer is going to be on my webpage in pixels. From these readings I can go into designing my DIV TAGS. Firstly you need to be on the HTML page and cick inside the word ‘HEADER’ which is located on the left hand side of the page. Once your curser is on this you then click onto the button called NEW CSS RULE which is next to the link button you use before. Make sure that all of the information is correct and looks like the snapshot below, click okay and then your onto making it the size you need. Go into POSITIONING- WIDTH 1000 px – HEIGHT 80 px – TOP 0 – LEFT 0. This has now created your sizing for the header, but to make sure you can see what your doing you need to add a background colour, and to do this you click BACKGROUND – COLOUR, pick any colour and click okay. Now on your HTML  page you can see your header should look like the third image below. You can tell that each of these rules have worked by clicking onto your CSS file  becuase all of the codes are displayed along the left. When you finish your document you will be able to see a number of different codes that have been used to create your designs- just like fourth image below.          
  8. Now you know all these basic DREAMWEAVER tips about DIV TAGS you can go on to create more and more different layouts and my final DIV TAGS for this layout ended up like the first image below, another example of a more detailed HTML page is the second image which has 6 different boxes. Once you are happy with you designs you need to look at them on the internet by clicking on the image of the world just above your codes.     
Advertisements