Saturday, 9 August 2014

Project One: Markup structure

This week we learn't about how the markup language can be used to plan and prepare websites. It is a good idea to design your webpage first in either illustrator or photoshop and then from that model work out the code for it. We used a website page that was already made as an example. The idea is to draw rectangles all over the page to define the different elements of the page. We call this a div map. You have to make sure that they do not cross over one another. Theses rectangles are what will define our  "<div's>". The <div> tag is what you use to divide up your webpage into sections. In the image below we can see which <div> tags need to be inside of each other by the placement of each rectangle. 


Once you have created your div map you can then start building your structure up in dreamweaver using the <div> tag. The comments tag can be used to label each tag so you don't forget. Below I have started to create a mark up structure in dreamweaver for the webpage above. 



No comments: