Post #6: The Process of Designing a Web Site

For my LIS 753 class I developed a website. This post is meant to detail the process I went through while I worked on it. I didn’t know much about html before I started. I decided to do a page for an AV department, similar to what I might design at the library where I work (although this mock-up is a bit more simplistic).

 

I began by creating a storyboard that contained all of the design elements that were required for the project. You can view the storyboard here. After the storyboard was completed it was time to begin coding. I decided to make the “look and feel” of all of my pages the same. This meant that I could work out all of the bugs on one page, then make copies of the html for each additional page.

 

The first step after the header information was to set up the table, which serves as the structure for the page. There are 3 tables on the page. 1 table is for the title. 1 table is for the body of the page. 1 table is for the links and contact information. Tables can be very confusing. I originally thought that I needed to use tables within tables in order to make the page look the way I wanted it. This made me wish I was learning CSS. Luckily I was able to avoid nesting tables!

 

Now that I had my basic structure it was time to fill in the blanks. Adding images and links was the bulk of the work. This was pretty straight forward as a result of the exercises that we did in class. Now I added background colors and fonts using the appropriate tags. Once this was done I made copies for the other pages.

 

I had to change a few of the images and things on the new pages, but it was useful because I used the old text as a “placeholder”.

 

Next I decided to use a flash based slideshow from http://www.xatech.com for my images in the film and music departments. This allowed me to input image locations and slideshow size, and output code. This way I did not have to learn flash.

At this point I was basically done. I needed to tie up a few loose ends such as adding image attributes, an alt note, and anchor, and fix a few links.

After the clean up I was done!

 

Check out the finished product