Video: Building internal structure

I want to finish this chapter by taking some time to discuss many of the decisions that you'll be faced with, regarding page layout and page structure. So we're still working with the index.htm file, but this time I've opened it from the 02_08 directory. And a quick glance at the code shows us that we have a lot more content here than the last time we looked at this file. Well, the goal of this movie isn't simply to add all the remaining content; rather, I want to focus on how certain layout decisions will affect the page structure, and how you're going to need to have a strategy in place to help you make those decisions consistently across your site.

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Building internal structure

I want to finish this chapter by taking some time to discuss many of thedecisions that you'll be faced with, regarding page layout and page structure.So we're still working with the index.htm file, but this time I've opened itfrom the 02_08 directory. And a quick glance at the code shows us that we have alot more content here than the last time we looked at this file.Well, the goal of this movie isn't simply to add all the remaining content;rather, I want to focus on how certain layout decisions will affect the pagestructure, and how you're going to need to have a strategy in place to help youmake those decisions consistently across your site.

Now, to help us with this, I also have the homepage mockup open, and I'm going toswitch over to that.Now, this is the Illustrator file that you'll find in the Assets directory.It's the mockup_home.ai.If you don't have Illustrator, there's also a PDF file you can open upthat's the same exact file, and at the end of the day, you don't really need toopen them up at all, because we're not going to do anything to the mockup;we're just using it to compare the design to the actual structure of the pagethat we're building. Okay.The first thing I want to do is I want to zoom up on our menu so we can talkabout the structure of our menu based on the design that we've created here. Okay.

So each of these links has link text.In the case of our first one here, Galleries, it has an icon right beside it,and then below that we have a little tagline that is descriptive of the link. Inthis case, this one says, "explore our photos."Now, when we design something like this, one of the first things we have tothink about in terms of creating this page is how we're going to structure andcode these menu items.For example, does the icon get its own element?The tagline, "explore our photos," is that going to need to be a separate elementin order for us to style it the way that we want?And this is what I was talking about when I said you need to have a consistentstrategy in place, so that whenever you are faced with something like this, youkind of have an idea already of how you're going to structure this.

And the rule of thumb that I used for this site, and it's one that Iactually recommend that everybody uses, which is, you write the cleanestmarkup you possibly can.You want your markup, above anything else, to be semantic, meaning the tagsactually mean something, and you only want to represent the content that needsto be represented or passed off onto any other device.As designers, we think so much about presentation and design that we forget thefact that HTML is a markup language that is designed to essentially identifycontent within a document and structure that.

So in this case, I'm going to switch back over to our code, and I'm going toscroll down to about line 19 or so, so we can find that menu.Now, you can see that I've used an unordered list to structure the menu, andthat is extremely common. Most people do that. Most menus you'll find arestructured within an unordered list, for a couple of reasons.It groups all of our links together and it indicates that they're related, andit also gives us some styling hooks.We have the unordered list tag.We have the list item tags.We have the anchor or a tags, and all three of those are styling hooks for us.

Now, it terms of those icons, a policy that I use for images is that if theimage is purely decorative in nature, meaning it doesn't really need to bepassed on to any other user agent that doesn't understand styles,if it's just for decoration, then it shouldn't really be represented by anelement if you can avoid it.In this case we don't have to.We have the list item tags.We have the a tags.That icon could be a background graphic for either of those, and we coulduse that to style it.Now, the taglines, on the hand, that's a totally different story.We have to have a different styling hook on those;we have to have some way of separating them visually from the rest of our links.

So I'm going to highlight the first tagline right here, "explore our photos," andwe're going to wrap this in a tag.Now, what tag we're going to wrap it in, that matters as well.When you're faced with the decision like this where you have content that youneed to structure in order to style it the way that you want to style it, ifyou can do that in a way that still uses semantic markup, then really it's thebest of both worlds.So I'm going to go ahead and wrap that in an em tag, or an emphasis tag.And again, that does two things for us.It gives us a styling hook necessary to move the tagline down and format it theway I want to format it, but it also emphasizes the text, and within that largerlink, it lets other user agents know that this particular section of text standsapart and is different than the actual link text itself. All right!So I'm going to save the file and I'm going to switch back over to my mockup.

Now, next I want to focus on the area right below the menu, and that's where wehave this headline, "WE LOVE URBAN PHOTOGRAPHY." We have some descriptive text tothe right of that, and behind all that we have this big skyline image, and thetext that's sitting on top of a box is sort of semi-translucent.So from a design perspective, it almost looks like we have four separate elements:we have the image; we have the headline; we have the text; and we have the blue box.A lot of people that are new to web design, when they have a mockup that theydesign or they grab a mockup from somebody else, they tend to try to put everysingle element within their design into an element within code, and it doesn'treally have to work that way.

So if you look at this, it is a distinct section--and I'm going to call thisbanner, so it is a distinct banner section--but really there's only twoelements that really need to be represented here, and that would be theheadline and the paragraph.We'll talk about how we're going to deal with the image in just a moment.I'm going to switch back over to the code, and if I scroll down, I can see thatwe have our text here, "We love urban photography," and then the copy right belowthat, but it is wrapped in a div tag.Now, a div tag is an anonymous block of content.So this one has a class of banner to identify as being the banner.

We're not using a section or article tag here because it doesn't really rise tothat level of importance.Now, the text, "We love urban photography," that's clearly a headline, butregarding the use of headings and paragraphs and things like that, you also needto have policies in place that determine when it's appropriate to use oneheading over another.Now, the policy that I created for this site basically says, if you're the firstor main headline within a distinct section of content, you're allowed to be anh1 tag, but it has to be an important section of content.In this case, remember we're using an anonymous container here, the div tag, sothat tells us that the section, while distinct, really isn't that important, interms of the actual content of the page.

So in that case I'm going to go ahead and wrap that in an h2 tag instead of an h1.Now, I'm sure there's some of you out there that are like, "Oh, well, you know, Iread a thing on Google that says you can only use one h1 per page."That is not the way the HTML5 specification puts it, and in fact, it's not eventhe way Google does their algorithm anymore, so that is not altogether accurate. Okay.The next thing I'm going to do is move down to our text, "We're betting you doto." So that is a single block of text, and since it's not a heading, it justmake sense to go ahead and wrap that in a paragraph tag.Now, you may have not noticed this in the mockup, so let me switch back real quick.

You can see the word Welcome right there looks a little bit bolder thanthe rest of the text.So we want to emphasize that as well.So I'm going to highlight the word Welcome there and I'm going to wrap that in a strong tag.Perfect! We have well-structured semantic code that is identifying this content exactlythe way that we want it to, based on the strategy that we have for the site.Now, you might be saying to yourself, "Yes, yes, yes, but what about that image,and what about that blue box?"Well, again, go back to the box model properties that we've been working on.This div tag is a wrapper that surrounds all of that content, so it would bevery easy to place that image as a background graphic, give it a width andheight, and then just have the content sit on top of it.

As for the paragraph itself, it's very easy to also give that a width and aheight, assign it a color, and make the color semi-transparent, and then usingsome techniques that we're going to learn in upcoming chapters, move it over tothe right-hand side so that it's sitting to the right of the image.So we don't really need any extraneous markup here whatsoever.Now, that would be lovely if we could structure the entire site the same way,without any extraneous markup, and when you put a strategy in place like that,you really should try your best to make sure that you follow it.However, you're always going to have to make exceptions to the rule.

I'm going to go back into the mockup for just a moment and I'm going to scrolldown, and I want to turn your attention to our gallery previews.So our gallery previews, we have three of them,Philadelphia, Chicago, and New York, and you can see they're structured exactly the same.We have a headline. We have the date. But what I want to really talk about here is this image.So we have an image here that lets us preview what's in the gallery.Now, I don't have it available in this particular mockup, but let's say we'regoing to have several different versions of this page.Eventually, later on in the title, we'll be creating what we call responsivedesigns, where we have one layout for desktop, another layout for tablet, andanother layout for mobile devices.

This image is going to change dramatically.In the tablet layout, for example, this image is going to be on one side and allthe text is going to be lined up on the other side.So the practice that we've been using, which is to structure images asbackground images and just sort of use the semantic elements that we havealready in place to put the image in, really doesn't work here.It's also decorative in nature here, so I don't really want to use an image tag,and there's actually several different reasons for that, a lot of which has todo with some responsive design stuff that we'll cover a little bit later on.So if I go back into our code, if I scroll down, I'm going to show you whatwe're doing in these sections.

So here, you can see we have an empty div tag, and that div tag has a class ofpreview, and inside of it there's actually a link,so you can click on that image and go to that particular gallery.Now, that's non-semantic markup.It's extraneous markup.If you were to write really just clean code, that probably wouldn't be there.So it's one thing to have your policies in place, but every now and then you'regoing to have to deviate from those policies in order to get your layout to lookexactly the way you want it to.You just want to make sure that that is the exception and not the rule.

So when you have to resort to that, that's fine, but if you find yourself doingthat over and over and over again, perhaps your page isn't structured quite aswell as you need it to be.Now, more than anything else, I'm hoping that this exercise illustrates how yourpage structure is actually going to be the results of dozens of small decisionsthat you're going to have to make based on the coding standards that you've setfor your page and the layout goals that your mockup is giving you.There is no one-size-fits-all, and if you gave the same exact mockup, if Itook that Illustrator file and gave it to three different web designers, Iwould bet you money that we would get back three different page structures interms of the HTML code.

That is why it's so important to learn the rules for creating standards-compliant code and for learning as many different layout techniques as possible.That way you'll have the ability to make really good decisions regarding pagestructure while having several different options available to you to achievethe desired layout.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.