Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have talked about creating structure within your XHTML, let's examine how to use Dreamweaver to quickly structure our content. In this exercise we will take our index file which here has been stripped down to it's bare bones and add meaning to the text, by formatting it within specific tags. If you're following along in your exercise files with me I have got the index_start page open. It would be easy to look at this file and say that it doesn't have any structure at all right now, but that wouldn't be exactly true.
If I Click inside this first line of text for example, I can use Dreamweaver's tag selector to see if it's currently inside of a tag. The tag selector is located at the very bottom of the document right here on the far left hand side. As you can see it's sitting inside of a paragraph. You can think of a paragraph as Dreamweaver's default tag. If you begin typing and hit Enter, so we will just go ahead and type some more and hit Enter, I get a brand new empty paragraph to hold our next line. Now I'm just going to go ahead and undo that because I don't need any of that typing for our site.
Well that's great. We will often need more than just paragraphs to define our content. Let's restructure the page using Dreamweaver's Properties Inspector. So again I'm going to Click inside the first line, Welcome to Groundswell, this means to be a Heading 1, the main heading on my site. So if I go down to my Properties inspector, and I Click on the HTML tags that I'm looking at the HTML properties of that, and this is another very quick way to figure out whether or not your cursor is inside of an element that has a specific tag. You can see here it's telling us that this is a formatted as a paragraph.
Well I'm going to go ahead and grab the pull down menu, and there are all my headings, there's my paragraph and I'm going to choose h1. Now before I do that, a lot of people ask me this question about preformatted and what that means. That actually wrapped the content in a Pre tag which causes browsers to display the text in a mono-spaced font and retain any line breaks or a white space that the texts might have naturally. it's really good for displaying computer code or scripting examples and that's primarily what it is used for. So I'm just going to go ahead and choose Heading 1. The text resizes but nothing really has happened to it visually other than the fact that as I Click inside of it, now I can see using the Tag Inspector that instead of a paragraph tag, it's now -- I have an h1. Let's do some additional restructuring.
I'm going to scroll down, and find a line that says Latest News. I'm going to Click on that and I'm going to format that as a Heading 2. So it's not quite as important as the main heading but it's pretty important, so it's going to get an h2. If I examine these paragraphs in a little bit more detail, I can see that Simon Craven wins the Maui invitational and Velosurty releases a new board. Those are kind of sub headings in and of their own right. So what I'm going to do is Click right after them and hit Enter. That gives me a brand new paragraph, so even Clicking inside of an existing paragraph and hitting Enter will split that content into two separate paragraphs, rather than keeping it on one. I will Click inside the Simon Craven one, and I'm going to format that as a Heading 4. I will do the same thing for the Velosurty releases new board, go ahead and do that as well.
You might be wondering why we use an h4 here instead of an h3. In terms of importance it would seem to be logical that we have already used an h1, and we have used an h2, so you might think an h3 should be used here instead. Well in fact an h3 doesn't fit the structure that we have decided for our site. All of our main content areas will have three levels of headings. H1 will only be used if there is a main heading that comes at the top of the content. H2s will be used for every other main heading, h3s will be used for sub headings, for articles and finally h4s will be used for a single paragraph sub headings. And that's what we are finding here. By coming up with a logical structural framework, early on in the process, we can make sure that all our pages use this consistent structure, our page is on it's way but clearly it's not quite done yet.
Next we will explore another fundamental structural element by working with lists.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.