Web Site Designs Gallery by Ginny LeBleu

Tutorial Web Site Designs

Each site I have created has served to enhance and improve my web design skills and expertise. The process is best illustrated by posting the old with the new as it offers insight to the learning curve and reflects the progress of one web designer's path to becoming a professional web designer better than any words could convey.

Classes and books are not the only key resources to learning and growth. Many patient and knowledgeable instructors, students, and computer enthusiasts have contributed to my knowledge base. No doubt, the journey would have been more difficult and perhaps aborted at some hair pulling moment without them!

Fireworks and Dreamweaver Student Work Site

Scary Stuff 2000 The beginning of web design with Jodi Reed's CIS 213

Every designer shudders when they look back on their first projects. I removed all of the links to the course chapters to save space (very boring stuff) but this is a perfect example of a newbie doing just about everything wrong.

I used layers which means this degrades disgracefully on many a monitor because layers back then and even now are not well supported by the browsers. This is downright nasty in Netscape! I used animated gifs (still love them but use them sparingly now except when designing fun and family sites where you can use them with abandon! I neglected to put alt tags on the images. The color is a bit bright on this design and the code is horrible due to my choices and ELK (extremely limited knowledge) stage. This is a great site to share showing the humble beginnings of this ever improving web designer!

Web Wizardry 2001 Student Site - A required assignment from Christine Clark's Web Publishing I Class.

This was my first experience using Fireworks to design a home page. Rollovers and graphics are made and placed in position using the Fireworks software before exporting into Dreamweaver as a completed page.

A drawback to this method is that the page is fixed and not subject to liquid design. At the time I created this page, I had never heard of Liquid Design much less know how to do it! Learn more about Liquid Design below on the Tutor Tots link.

HobbyFind.com 2001 Mock up entry page to a made up business site. A required assignment from Christine Clark's Web Publishing I Class.

This is another example of a home page made entirely in Fireworks. Again, Fireworks did the slicing making a complex table once it was exported into Dreamweaver.

This is where I began learning how to make Disjointed Roll Overs which are fun and appealing on web pages. When you roll over a button not only can the button change but another area in the design swaps out an image as well. Move your mouse over the round buttons on the HobbyFind page and see how it works. Below is a tutorial on how to make them in Fireworks.

Tutorial Site 2001
One part of Web Wizardry Web Site done in Christine Clark's Web Publishing I Class.

This is an actual tutorial on how to make your own Disjointed Roll Overs using Fireworks.

Drawing in Fireworks 2001

Vector art is as easy to create in Fireworks as it is in Illustrator or Corel Draw or Paint Shop Pro. This is an original drawing drawn with the pen tool in Fireworks.

This illustrates how easy it is to take one drawing and modify it to have many different looks or outcomes.

Tutor Tots 2002

Tutor Tots Tutorial is all about Liquid, Ice, and Jell-o Design. I am pleased with this site and a wee bit proud because it is handcoded and does not have a table that it resides in.It is a Liquid Design meaning that it will expand and contract to accommodate individual users equipment, settings, and preferences.