First of all, let’s add the HTML to structure our content and make it easier to style consistently.
Where shall we start? With the Screenshot of the Full Width Layout. Open the bonus one.
If we look at the headings in the screenshot, a document outline suggests itself:
- H1: dtn
- H2: Exclusive, Feature, New This Month, Around Our City
- H3: Exclusive: London in Crisis, Man Bites Dog…, Ferris Wheel, Coffee and Your Brain, Spotlight: Shanghai Metro, To The Bat Cave, Stella By Startlight, Barack Obama
In other words, the headings suggest the levels of meaning of the various elements they head.
If this doesn’t make sense, please get in touch.
Looking at that layout, I would suggest we have six main grouping sections in the document. They are the following, in order:
- A header: this will contain an H1 and a NAV with a list-based menu inside it.
- A section: this will contain an H2 (exclusive), and an article. The article will contain an image, an h3, two paragraphs, then a generic DIV for the byline.
- A section: this will contain an H2 (feature) and an article. The article will contain an image, an h3, two paragraphs, then a generic DIV for the byline.
- A section: this will contain an H2 (new this month) and then six articles. Each article will have an image, an h3, one paragraph, a generic DIV for the byline, and a generic DIV for the category (such as Psychology, Science, or Travel)
- A section: this will contain an H2 (around our city) and nine images.
- A footer: this could be marked up a few ways. Three stacked DIVs? A paragraph, a DIV, and another paragraph? A single paragraph, with embedded in it a span around the image row, and the small tag around the copyright notice? A number of approaches could work here, so use what makes sense to you.
Let’s start, then.
Just before the phrase DTN, just inside the BODY tag, and after the items that will be the list, put a HEADER tag:
<header class="site-header"> dtn Features Reviews Politics Style Music Contact </header>
Then before the word EXCLUSIVE, put in a section with a class of section-exclusive.
<section class="section-exclusive"> Exclusive <!-- insert london thames panorama image --> London In Crisis In the hottest real estate market in the world, property speculation has inexorably driven away the lower, the middle, and the upper-middle classes. Who’s left? The bankers. Experts in urban planning discuss what can be done to make London a livable city again. by Lidka Krzesimir </section>
Below that section, once again marked off with comments, is the next section. Wrap it in a section with a class of section-feature:
<section class="section-feature"> Feature <!-- insert bulldog image --> Exclusive: Man Bites Dog, Dog Reveals Post-Bite Complications Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi officiis at recusandae vitae! Minima aliquid sunt illo tempore illum, aspernatur sit. Ipsam illum quas incidunt perspiciatis qui. Hic recusandae asperiores dolor, sit dignissimos rerum deserunt maxime a. Eligendi enim consectetur alias tempore porro debitis numquam. Minus veniam expedita nulla corporis ipsum inventore ipsam vel dolorum labore? by Stefek Hafeez </section>
Another section now: this one is for the New This Month articles.
<section class="section-new-this-month"> New This Month <!-- begin story 1 --> <!-- insert ferris wheel image --> Psychology Ferris Wheel Nothing is more terrifying than a stopped Ferris Wheel. by Gilroy Vikram <!-- end story 1 --> [ five stories removed for brevity here...] </section>
Now the last section:
<section class="section-around-our-city"> Around Our City <!-- insert 9 images from the BIKES folder --> </section>
And finally, the footer of the site. Things like credits and copyright notices, or repeated or secondary navigation are natural content for a footer on a site.
<footer class="site-footer"> DTN Magazine is made with: <!-- Export six images in appropriate format from the logos file using Illustrator. There is one image per artboard. Arrange them as per the LOGOS screenshot --> © 2018, Langara College </footer>
Now let’s move to working on the site header.