LIS 545 2008
Programming for Information Systems
Week One: Web pages are nested grids
Let's start by considering the grid structure as a basic visual organizing element. Eye tracking experiments indicate which parts of a web page readers will examine first. Thus we have the concept of web page "hot spots". The YUI library provides many grid structures, and we can use Jakob Nielsen's research on the structure of "cononical" web pages to select one. With a little CSS style code we can color sections of the web page and set some text fonts. Finally we transform our first web page to XHTML.
Week one project: The Grid
A student writes ...
Attempt 1: I put the source code from the Grids Example page into Dreamweaver and added your code example modifications. Most of it worked: I had the colors, I had a header and 2 body elements. It did not however, have the grid format to match your example. And I have no idea why.
Terry talks...
My instructions are to "Save this page to a new subdirectory..." If you go to the "Preset Template 2, 180px left ...", view example in a new window and then simply use your browser to "save page as ..." in your new subdirectory, you produce this effect:
If you look in the folder (i.e., "grids-t2_source.html") that was created on download you'll find the source of your difficulty: "reset-fonts-grids.css". This is the file that creates your grid structure.
If you're not getting a grid structure, then your web page is not able to locate this file.
If you look at the source code of the downloaded HTML page, you'll find this call "href='grids-t2_source_files/reset-fonts-grids.css'". Notice that it thinks that the necessary file is located in the folder "grids-t2_source_files".
The general solution to your problem is to align the call from your HTML to the real location of this file. One way of doing that would be go to back and download the web page again and then let your browser create the subdirectory. Another way to do that would be to put "reset-fonts-grids.css" in the same subdirectory as your web page and correct to the call to it to be simply "href='reset-fonts-grids.css'.
