NOTE FROM DJ:  HAVEN'T TOUCHED THIS YET..YOU NEED SOME TUTORIALS OF YOUR OWN IN THIS SECTION, I  THINK, RATHER THAN JUST REFER TO DREAMWEAVER'S -- SEE ME... (DJ 6/09)

Tutorial 7 - Tables and Layers (tutorial in progress!). The <div> tag.

Visual layout in HTML forces you to work within some fairly rigid limitations. You've worked with text and image enough to know some of these limitations - you have returns for vertical space, and you have typographical spaces for horizontal space.

 

TABLES allow you to create GRIDs of CELLS in HTML. Each CELL can contain an inline text or image. Each cell can have a different BACKGROUND IMAGE, too.

 

You can constrain the SIZE of a table by selecting a specific PIXEL width. But text will still get larger or smaller depencding on the whims of the user, so this can mess up your table, too.

 

A TRANSPARENT GIF will help stabilize spacing in a table - they won't change size when text is scaled.

AP div (absolute position divs) are a lot more flexible that TABLES - it's like a moveable single cell of a table. This is as close as HTML gets to WYSIWYG layout design!

 

When you create AP div, be aware that you can NEST AP divs WITHIN AP divs, but this becomes very tricky, very fast.

 

USE CONVERT AP divs TO TABLES for the maximum browser compatibility (not so much of an issue anymore - but if anyone you know uses IE 3 or Netscape, you need to do it).

 

<div> Tags 

The <div> tag (like its trickier cousin the <span> tag) is a tag to define a SECTION or DIVISION of the HTML page. It is a verbal description of a visual design block or element. Again, it's like a cell in a table, except more flexible: you control every aspect of its appearance by defining elements of style, which you can apply through CSS (more on this later).

 

Dreamweaver's Help feature has a lot of detailed information on working with CSS and designing with <div> tags.  You can also check that out online: CSS and <div> tags.  NOTE FROM DJ:  (THESE TWO links are the same exact link to the same DW page------ ALSO,

 

 

D. The Transparent GIF

These are tremendously useful as spacers - invisible elements for spacing graphic elements, even text sometime (but that should probably be done with CSS - more on that later . . . ).

Here is a transparent gif:   <  >. The transparent gif is just a graphic created with one color, and that color is set to "transparent" (a wonderful property of the .gif file format that you can't do with .jpegs). Click on that space between the carets, and drag it to your desktop. I've made it a little bigger (use the width and height parameters in the Properties bar) so you can grab it, but basically it can be any size you need.

Use a transparent gif to control the space between inline graphics and text, but remember, this is NOT going to solve all your design problems. Transparent gifs are very handy for alighing a table ABOVE a background graphic, for instance. They're also used as placeholders that maintain the correct shape and size of layers that have been converted to tables (more on this in the TABLES and LAYERS tutorials).