Monday, February 25, 2008

making a list and checking it twice

whew, what a wild ride we had this week.

We started out by creating a new page titled "Ten things I want to do before I die" - saving it as an index.html file in a new directory called tenthings. On this page we created an ordered list of... 10 things we wanted to do before shuffling off this mortal coil.

Then we spent a little time designing a topology map of a site we could build around this page; 10 more pages with details of each of our ten things, links to each of these pages from our index, links from each detail page to the index page and to the next and previous items in the list.

Next we looked at designing the layout for a typical detail page. Paragon of page design that I am I came up with the following jewel...

What followed was a whirlwind of activity...

  • Locating and saving an image (into an images directory) from flickrCC
  • Inserting said image on the page (including setting the alt, height and width attributes)
  • Making the image into a clickable link back to the original page on flickr
  • Using CSS to remove the unsightly blue border using an embedded or internal style tag in our document's head section
  • Creating a CSS div and adding a class name of "quoteblock" for a wikpedia quote about our goal.
  • Putting an H2 and blockquote into that div and cutting and pasting some wikipedia text there.
  • Setting the border, padding, background-color and font-style for our quoteblock class
  • Giving the other blocks on the page a similar treatment
  • Removing the CSS and putting it into an external style sheet so we can use it in the other 9 detail pages too.

Image: 'Dead Can9t Dance'

No comments: