Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding DIV tag structure and layout

From: Dreamweaver CS3 Beyond the Basics

Video: Understanding DIV tag structure and layout

Part of understanding CSS based layouts is really having a full understanding of current and accepted Web standards that we are working with. So in this video, we are going to talk about those Web standards and we are going to talk about structuring our pages with DIVs, and we are going to explore site mockup that I put together for the cheek testing site, and talk about how looking at the mockup, we can sort of start to plan out what the structure of our page is going to look like. Now as a starting point, I am just going to open up another one of Stephanie's pre- designed page layouts. So I am going to go to File and choose New. And we had the 2-column hybrid, left sidebar last time, so why don't we explore something else? Maybe 3-column fixed layout, and we will get 3-column fixed with a header and a footer, because it's fairly common.

Understanding DIV tag structure and layout

Part of understanding CSS based layouts is really having a full understanding of current and accepted Web standards that we are working with. So in this video, we are going to talk about those Web standards and we are going to talk about structuring our pages with DIVs, and we are going to explore site mockup that I put together for the cheek testing site, and talk about how looking at the mockup, we can sort of start to plan out what the structure of our page is going to look like. Now as a starting point, I am just going to open up another one of Stephanie's pre- designed page layouts. So I am going to go to File and choose New. And we had the 2-column hybrid, left sidebar last time, so why don't we explore something else? Maybe 3-column fixed layout, and we will get 3-column fixed with a header and a footer, because it's fairly common.

I will go ahead and click Create and that will open up our new page. Now we could come in replace the existing content with whatever we wanted to replace it with. But that's not really what we are focusing on here. What I want to focus on, I am going to switch over to Code view, and right after the Body tag, I want you to start noticing how the DIV tags are actually arranged. And using our Code toolbar here on the side, we can select our Parent tag so we can see that the header is sitting inside of a DIV tag called Header, which is in turn inside of a DIV tag called Container. Our sidebar is also contained within that Container. So we have a Container DIV tag that surrounds it.

Then we have the Header, a sidebar. We have a Sidebar2; remember we have a 3-column layout. We have a DIV tag for main content and we have another DIV tag down here at the bottom for footer. Now the DIV tag really doesn't have a pre-defined styling attribute in most of the browsers or rendering devices that would consume your content, but by using CSS properties, we can give our DIV tags dimensions, positioning and other attributes like borders, background graphics, background colors and that sort of things. So, for table-less Web layouts, the DIV tag serves as a very important container for our content.

It is not a non-semantic tag. It actually gives order and structure to our content. DIV means division, in fact, and so when we combine it with classes and ID attributes, as we see here in our sort of pre-designed layout, it further defines and gives meaning to the contained content. Our accepted Web standards tell us that our structure and our presentation should be totally removed from each other and that's why a lot of people when they first look at these DIV tags and they see "id=footer," and they know that that's going to be used to style this, they will say "Well, that's not really separating style and structure, is it? I mean that's presentation." But it's really not.

It's identifying the content contained within this DIV tag. So it's a way of structuring the DIV tag and saying the content contained herein is the footer of the page. So that's actually very structural and very sound. It also allows us through the use of CSS to tie into that and to format it. So when you start to lay your page out, one of the things that you'll want to do is to examine the content of your page and try to figure out the areas of content that are different, separate areas that you might begin to think about structuring in a DIV tag. So we are going to switch over to Photoshop, and we are going to open up a file that is a mockup of the site that we are going to laying out in just a little bit. We have opened Photoshop up and we have got the mockup.psd file open and you will find this file in the Chapter 3 Exercise Files in the Images directory. So it's again mockup.psd, if you are following along in the Exercise Files.

This is a mockup of the Cheek Chastain Gallery site that we are going to be creating and laying out very shortly, and what I do when I am designing my own sites is I'll do a mockup in either Photoshop or Fireworks. Illustrator. Whatever program you guys are most comfortable with, that's the program you probably should use. So I usually do most of my mockups in Photosho, and when I do the mockup, I am going to do it at the exact size that I am working on in my browser. So I have got this to the exact width that I want my website to be, and all my images are the size I need them. So I can slice the images up and actually export them all here, or crop them down and export them out that way, whichever way I like working, but another thing that it really allows me to do is to determine the structure of the actual webpage itself. Where do I need DIV tags? What type of DIV tags do I need to do? What type of content do I need to define? So I am going to do an exercise where we are determining where our DIV tags are needed to go and what type of structure our page is going to have.

So I am going to bring out my Layers panel, and I am going to click on my top layer folder and create a brand new layer and I am just going to rename this layer Structure. What I can do with this new layer is I can begin to create overlays and I will do that by just creating solid fills of colors over the areas that are specific areas of content. So I am going to turn my attention to the top of the page and you've noticed I have got some guidelines already on the page that help me to lay my content out, and these guidelines can go a long way to helping me to determine where my structure on my page is. When you are working at a smaller resolution, like I am working out here, we will probably need the hide and show panels occasionally. Let me just take you through a couple of keyboard shortcuts here. If you hit the Tab key, all of your panels are going to go away, and if you hit the Tab key again, they will come back.

If you hold the Shift key down and hit Tab, just your floating and your side panels will go away, and of course, Shift+Tab is a toggle that brings them back again. So, that can help us out. I am going to switch to my Marquee Selection tool and I am going to hit Shift+Tab to hide those side panels, and I am going to create a Marquee Selection around all the top content up here. Now this is going to be my header. So looking at this, this is definitely a distinct section of content on the page. I am just going to choose a color for my header, and it doesn't really matter what color you choose at this point.

I am just going to choose something that maybe has a little bit of contrast with the color underneath that. And I will grab my Paint Bucket tool and I will just click inside that to fill it. Now, that hides the content. So it's not a bad idea maybe to bring your layer back, and lower their Opacity down a little bit, maybe lower down about 40% or so. So that's my top content now. What's really nice about this is that even from a Page Layout standpoint, if you are planning your page out, I can look at my Info palette. Now I'll just open up my Info palette right here and you can see that I have a width and a height defined for that.

Now unfortunately, that's in inches. So I am going to bring out my rulers, View > Rulers, or I can hit the hot key for that, and I will just switch that to pixels real quick, because I am more interested in knowing where my pixel will set at. Now I know that my header is 900 pixels wide and 123 pixels tall, and if I were going for a fixed layout, I would be able to write those dimensions down and know exactly what my header was going to be set to. So I am just going to continue defining my main areas of content, and if I look on the right hand side, the sidebar is obviously a distinct section, so I will create another section around the sidebar and we will just scroll down to the very bottom of this. Now heights don't quite matter as much when you are doing Web design. It's the width that you are really concerned about. So I'll choose another color here from my sidebar, and I will go up and choose kind of a magenta or purple color there, switch to my Paint Bucket tool and click on that.

So, I am beginning to really define the major areas of content, and I will create another selection around my main content, choose a different color for that, maybe we will go into a blue. And then finally, down at the bottom, I can see that this page has a footer. So, I am going to want to go ahead and just draw selection around the footer, and if you are not really precise with your selection, it's not that big of a deal. Just make sure that when you are doing defining widths and if you have a defined height that you are precise with it, because you don't to be a couple of pixels off here and there because when you start doing your CSS, that can cause a chain reaction and cause other bad things to occur when you are trying to lay your pages out. So, we will just go ahead and drop that in. So, if I am looking at my page now, I can see that there are four distinct areas of content. There is my header, my main content, my sidebar and down at the bottom, we have our footer. So I know that I need at least those four DIV tags in order to make this work and I need to start really planning out what the structure of this is going to be. And one of the things that you want to do at this point is start looking at your areas of main content, your larger areas, and start thinking to yourself, is there a reason for me to actually add anymore structures in those areas? And one of the things I am looking at when I see the header is my navigation, and that tells me that maybe I should create another area of content for my navigation. So I am actually going to create another layer and on this other layer, I am going to go ahead-- and you have to be careful at double clicking that too fast.

I am going to go ahead and double-click the name and I am just going to call this Secondary Content. Interior Content would have worked there as well. And here I will just go ahead and draw another section for my navigation, maybe come up with a different color scheme. So, maybe this time I am going to use some neutral colors that are a little bit more desaturated, and we will click and once again I will probably lower the opacity of that down as well, just so I can see the content underneath it. Now as I begin to do this, I am going to go through each of these sections and my main content area, as a matter of fact, has three areas of content in it. There is a Featured Painting, a Current Show, and a Favorite Galleries, and probably that should be into your content as well.

So, I will just go through and select those and just go ahead and give them some colors as well. Now, notice that I am not being very precise when I select these because as I begin to position this using CSS, I am more concerned about the distance between them and how it looks visually on a page, and I will really make that more of a part of my CSS and probably go ahead and change this color out a little bit, so it is not exactly the same as the section above it. Now we have three very distinct areas. Now as we are planning this out, we have to determine whether or not these really deserve to be in a DIV tag and as I am looking at the Featured Painting and the Current Show, there is a lot of things in there. There are images, there are tags, there are headlines. There are specific type of tags like the acrylic detail on the left over here, which is going to require some individual styling.

So probably in that case, they deserve to be in their own division, their own DIV tag. When I look at the menu up here, now not everything needs to be in a DIV tag. When we go back and we look at our header up here, we have our navigation, and that's a secondary section of content, but whenever you are designing a navigation bar like this, we typically put them in an unordered list or an ordered list. Again, a personal choice. But if this is an unordered list, the unordered list actually offers us enough structure and allows us to assign an ID to it, to where we don't really have to have a DIV tag on it. So if there is an existing element that contains the content that you can use to style it and use to structure it and use to pass along information about what the content is, take advantage of that and don't necessarily always surround every little piece of content within a DIV tag. So, that's using a page mockup to determine site structuring. In our next video, we are going to review the box model so that we can prepare ourselves to actually go back, create these DIV tags, and then assign these properties to them.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38728 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.