Roll the ball right into the pocket ... absolute positioning in a nutshell

Elaine had a very good question about positioning, to wit:

scenario: table with background image in a cell. Background image has an area pre-determined for overlaying text.

question: how to best set in the text so that it appears in the area determined for it?

answer: use absolute positioning within a div that is within a positioned div. Position, in this case, is an attribute and may be defined in a css style.

solution: don't bother with the table, it only confuses the situation, then

1. set up a div with a class or id defined with the attribute {position: ppp;} where ppp is relative, absolute, or fixed.
2. on this 'containing' div, set
   {background-image: [url];}
   and set the height and the width of the div to the dimensions of the image
   {width: xxx; height: yyy;}.
3. set a div inside the containing div with the following attributes:
    {width: [width of text area];
   height: [height of text area];
   top: [distance from top of div in pixels]px;
   left: [distance from left edge of div in pixels]px;
   position: absolute;}
4. By using a background image, the surface real-estate is still available for the text div to be positioned and populated with the desired text; the image will not push the new div out of the way.

Here's an example file:

http://www.gravenimagedesign.net/PAE/positiontest.html

If you really want to use a table, go ahead, but you will still need a containing div within the data cell and a positioned div within the containing div.

Don't forget to set position: relative|fixed|absolute (choices) on the containing div; use position: absolute on the positioned div. 

Fiddle around with negative numbers of pixels when you do the positioning (from top, from left; could do from right or from bottom; don't do more than 2) dimensions. Talk about working outside the box!

Have fun!

Building Your Cabin

By now, you should have done some thinking about your class project.

Have you done an outline?

1. Title/name of site
2. Mission/intention/topic of site
3. Pages (you need five)
   a. Home page (index.html)
   b. A page focusing on something you want the reader to know or do, relative to your topic
   c. More in depth information or auxiliary possibilities (I am being purposefully vague)
   d. Associated ideas
   e. etc. Links to sites that support your thesis or illustrate something about your topic
   f. You can be very creative with pages...don't rely on any of my lists!
   g. Something about yourself, or the organization or company you are making a site about
4. For each page
   a. Links
   b. Navigation (between pages) ideas
   c. Images
   d. Text/content
5. For the site
   a. Color ideas (see http://kuler.adobe.com/ for some fun with color)
   b. A diagram of how your pages will link to each other
   c. A sketch of the home page or of a basic page layout...on paper in crayon or marker or colored pencil or in Photoshop or Fireworks or Illustrator or the program of your choice
   d. Ideas of how you want the type to look (fonts, sizes, colors, etc.)
   e. A diagram of file names and file structure (could be combined with b above)
   f. Features you would add if you knew how
       i. videos
       ii. rollovers
       iii. sound effects
       iv. visual effects

I hope you get the idea...do a lot of thinking before you start twiddling bits on Dreamweaver. You'll be happy you did.

Client review of web pages

If you don't want to upload a site to the web, copy your root folder (and all site files within it!) to a CD.

That way, the pages can be looked at in a browser and won't be vulnerable to being changed readily. If your pages work well locally, that is, in Dreamweaver, then the site will be accessible simply by double-clicking on the index.html file on the CD.

It is okay be leery of uploading pages and sites to the web, but the best solution is to have a "sandbox" area on your own webspace (and to HAVE your own webspace!). That way, you don't have to physically create a CD and deliver it.

For instance, I routinely have copies of sites on which I am working resting on my webspace. As they sit in their own root folders, they are accessible for those to whom you give the URL. You need not have them linked to your own site; in fact, it's probably better if they are NOT linked to your own site, unless you want all and sundry to be looking at works in progress.

When you have more than one site in your webspace, make sure that each is self-contained in its own root folder. The only index.html file that you want to show up by default when someone "goes to" your domain is the home page for the site. 

To wit: 

• My webspace (defaults to my home page, index.html, when my domain URL is called): 
  http://www.gravenimagedesign.net/
• Located within my webspace root might be other sites:
  http://www.gravenimagedesign.net/PHA/ (which would load the index.html page for my PHA 'sandbox' site)
  http://www.gravenimagedesign.net/PAE/ (which would load the index.html page for a PAE 'sandbox' site, if there were one)
• File structure would be as follows:
  home page and files of gravenimagedesign.net (webspace as a whole =  root folder)
  PHA/index.html all PHA files live in the PHA folder, which is ITS root folder
  The URL for this site would be: http://www.gravenimagedesign.net/PHA/{not necessary to add the pagefile name, unless you are not showing an index page}
  PAE/index.html   all PAE files live in the PAE folder, which is ITS root folder {again, not necessary to add the pagefile name to the URL, unless you are not showing an index page}
  The URL for this site would be: http://www.gravenimagedesign.net/PAE/

I need WHAT? to see your site?

Yesterday, we had a couple of vivid examples of flashy exciting websites becoming totally inaccessible to users in ways the designer probably had not imagined.

First, the nye site http://nyelabs.com/ required plugins and recent versions of Flash player that the school network had not installed. Bummer. It's a cute site, and it might be fun to investigate all the features that it incorporates...if only we could actually SEE it!

Second, the BOOK site http://www.lookatbook.com/ used some obscure links (available only to the terminally curious) to get to the "about us" pages (and obscure backlinks), as well as a popup for their "shop," which would certainly not be visible to those who have blocked popups.

All in all, our analyzing websites session was instructive, and (I hope) fun to see a tiny bit of what is out there on the web, in the interest of learning how to make better websites.

Don't Make Me Think!

The best reference I can suggest for usability and accessibility philosophy is Steve Krug's book, "Don't Make Me Think."

Google it or look it up on Amazon. You can pick it up used for not much money. 

http://www.sensible.com/

Steve has a sense of humor and if you can develop your intuition to include his philosophy, you will be well on the way to understanding your users and how to design websites for them.

Look him up!