Learning Report No. 01

A good source I've found desling with lists is Listomatic. It is a tutorial site by Max Design, a web design and development business from Sydney Australia.

Lists do not have to be at the mercy of boring HTML defaults. By utilizing CSS, one can be creative with their lists.

This is the result after one of the tutorials:

one
two
three
four

What I Learned

From this site I learned a new way to customize my lists. In this case replacing the boring default dot with a custom image. The HTML used is nothing more than creating a basic list, and the CSS is barely more than linking an image. Web building does not have to be elaborate and complex. On the contrary, understanding only the basics opens a large range of creative possibilities.

How I Implemented it

It would be redundant to explain the tutorial, because it is a really good, easy to follow tutorial. I took some screen shots of my process for the visual learner, and those can be viewed here. However, there was some preparatory work and basic understanding that was not mentioned on the site that I can go over.

The Image

First, to have an image replace the default bullets, I needed an image to replace it with. I created mine in photoshop, saved it as a .png (which is a web safe file type) and made sure the size would work as the bullet.

Linking CSS files

I also needed a CSS file to link to the HTML. In CS4 Dreamweaver this is as simple as going to file>new, and selecting CSS. I automatically saved the file as "claireification.css" and placed it in the css folder that is in my root folder. I then toggled back to my working HTML window, selected window>css styles, clicked the link icon at the bottom, browsed for the newly saved CSS file; hit okay, and the style sheet is linked to my HTML. This means that any styling I define on the CSS file is implemented in the HTML file.