Objective
You will be doing everything else on this page. But you only need to do one layout rather than two. It can’t be the one I demoed.
You will be building two magazine layouts using positioning for this project. Items made for print tend to break outside of a simple grid structure more than items originally designed for the web. Absolute positioning allows you to precisely place elements on your page. In practice, it should be used very judiciously, however, because it removes items from the flow of your page, preventing backgrounds from growing appropriately and causing content to overlap.
You are to choose two of the layouts I’ve provided on the public folder [mag_layouts_web] for Web 1 and build them in html to match as closely as possible. You can’t use the layout I use for demo (if a demo is done).
Very important: You should open the files, change the resolution to 72, make the width 800px, and re-save it (in that order). This should be the final size of what you build, and your outermost container should serve visually as the page does in a magazine setting. That is, you should set a wrapper or container which has a background color of the layout you’re creating, and the body should have a different background color, giving the appearance of a page sitting on a background.
You should type out the text of items like captions, subheads, and short callouts of text. But you may use latin text (lorem ipsum) for the main article text; just use text that is of an equal length of the article and stylistically similar.
- You must absolutely position at least two items on your page, but use it as much as you can.
- Your page should use appropriate semantic markup (Paragraphs should be p tags, not content separated by break tags for example).
Note: If you position everything inside your main container absolutely, that main container will have no reason to grow vertically, so you’ll have to give it a height. This is not something you’ll typically do, but it’s okay and necessary for this exercise as we’re practicing absolute positioning.
Drop your html layouts in the dropbox by the end of class on the due date in a folder labeled [lastname_f_p1]. Place each of your layouts in a separate folder within that main folder, labeled “layout-1” and “layout-2.”
Here is a good resource for the sort of thing you’re doing here, along with other positioning types: https://www.w3schools.com/css/css_positioning.asp