Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When designing a new page, one of the first tasks you'll need to do is create the basic structure of your page's HTML. Although we've seen how to import text from programs like Word and retain the default structure, most of the time you are going to need to do a lot of the structuring of the content yourself. And thankfully Dreamweaver makes it incredibly easy to add basic structure to your HTML. In this exercise, we are going to take our programs file which you can see here is been kind of stripped down to the bare bones. And add meaning to the text by formatting it with specific tags.
Now keep in mind, that in this exercise we are focusing on simply the main content region of the page, not the layout or the secondary areas. We are just talking about basic text structuring at this point. It would be really easy to look at this file at the moment and say, it doesn't have any structure at all, there is no formatting here. But this is not exactly true. If I click inside for example this paragraph and I look down here in the Tag selector, I can see that this is inside a paragraph tag. As a matter of fact, you can sort of think of the paragraph tag as Dreamweaver's default tag.
Any time you hit Return and begin typing, what are you really doing, is creating a brand new paragraph. You can see that right down here on the Tag selector, there is my new paragraph. So by default most of the elements that you have in Dreamweaver especially if you're typing in yourself or inside of a paragraph. You can't assume, when you look along the text however, that it is just automatically inside of a paragraph. You will notice if I click right up here in the Roux Academy of Art and Design, the very top line of text, there is no tag down here other than the body tag. And that tells you that this particular line of text is not wrapped within a tag.
The tag selector is very useful for telling you kind of where you are, but there is another view that you can do that makes things little bit easier to tell us what is going on in the underlying HTML structures as well and that's a Split screen view. So I am going to go up here to the Document toolbar and I am going to choose Split, so that I have got a Code view on the left hand side and a Design view on the right hand side. As we are working with our structure this is going to be really quick and easy way to make sure there we are using the proper structural tags. The next thing I am going to do and this is just so I have a little bit more space, I am going to collapse my panel doc down to icons so that I have more space for both the Design view and the Code view.
Okay, so I am going to start off with this Roux Academy of Art and Design. If I click inside that particular line, again I notice that there is no tag inside of this. Be careful here, if you click inside the Code view, if you see the code lines over here, sort of highlighted in blue, that means your focus is over here and any changes will actually be made of code itself, whereas if you click over here in Design view that's where you focus is. So just be sure that you know kind of where you are focused at any given time if you are in this Split view. So I am going to click inside the Roux Academy of Art and Design and probably the quickest and easiest way to add structure to your text inside Dreamweaver is to use the Properties Inspector.
So I am going to go down to my Properties Inspector and I am going to make sure that I have clicked on the HTML tab here, this little HTML button to make sure I am looking at the HTML properties of my content. You will notice that I have a little drop down menu here for Format and currently that reads as None because it's not inside of a tag. If I change that by grabbing this pull down menu and choosing say Heading 1, you will notice now that the text is wrapped inside of an h1 tag. Now in Design View it does get bigger and it does get bolder, but I don't want you to equate this structure with specific types of visual formatting because through CSS I can make the headline look any way I want.
I can make the text actually tiny or even hided all together if I want to. So just because the default rending of H1 is big and bold doesn't mean that it has to be the final rendering of the text or that doesn't mean that's why we choose a specific tag. We choose these structural elements because of what they represent. A Heading 1 is the top level heading, meaning it's the most important heading in either a section or the page. It depends upon the sort of strategy you develop for your page. Speaking of that strategy, I am going to go down to Academic Programs, I am going to click inside that and I am going to change this to Heading 1 as well.
Now you may have read in certain tutorials and articles only use one h1 per page. That was perpetrated more by Google than anything else. And I am not saying Google recommended it, but way back in the day Google's search results really liked having a single H1 tag up at the top of the page. You would index that page and apply a level of importance to that particular headline. Well no body outside of Google knows exactly how they handle their search results. But the new HTML 5 Standard says that it's fine, it's accepted practice to use more than one h1 and as we move forward with the site, the Roux Academy of Art Design will actually end up in the header of our page, where Academic Program is going to be in then article sections.
So there are going to be two separate sections and each one by using an h1 there, it becomes the top level heading for that section. So really, it's all based upon the personal strategy that you come up with for your file. The only thing that is important is that you remain consistent. Okay, now I am just going to go through and start adding structure to the remainder of the content. I am going to go down to Academic Departments. I am going to format that as Heading 2, I am going to go down to Animation, I am going to format that as Heading 3. So you can see I am sort of stepping down in level of importance as I go through the content.
Fashion and Textile design will be a Heading 3 because it has the same level of importance as animation. Fine Arts and Visual Culture will get a Heading 3. I am guessing by now you probably picked up on level of importance and what heading are you going to use for this. So Graphic Design will also be a Heading 3. Photography will be Heading 3, and then finally Academic Links is going to be Heading 2 and the rest of this content we will deal with in a later movie, as we start formatting lists. Okay I am going to scroll back up and I can see that now our page has some structure to it, even if you were to look at this page in sort of non-formatted way that we are seeing it right now.
You could gauge the level of importance of the content of the page by the headlines and the paragraph themselves. Now there is an additional structure that we can add to the page using a Properties Inspector as well. For example, if I highlight the names of the Department chairs, I can go down and click Bold. And what that's going to do for me is yes visually, it bolds it, but what it's actually done is it's taking that text and wrapped it within the strong tag. So it's using a structural element to basically say, hey this particular text within this line should be strongly emphasized which visually is rendered as being bold.
Alright, so I am going to go back and do each one of those names, just with Bold tag to be consistent in my structure and have a strong tag surrounding each one of those names. You may have noticed earlier, when I was looking at this Format pull down menu that we have an option down here called Preformatted. I get asked about that actually pretty frequently by folks. What is preformatted? Well that actually is going to wrap content in a pretag a PRE tag which causes browser to display the text in sort of a monospaced font and retain any line breaks or white space and that's the important thing because for most part HTML doesn't recognize more than one character of white space within that text.
So what is really good for and what it's primarily used for is displaying computer code or scripting examples within blogs, tutorials things like that. Our page is on its way, but structurally its not quite done yet. You'll notice we have this little section down here that we need to still format. So next up we are going to explore another fundamental structural element as we work 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.