Summary

I designed and created a “splash page,” which is an introductory page on a website that catches the viewer’s attention. The page is about me and links to other web sites I have been using in class, such as my blog and my LinkedIn profile.

Paper Mock Up

Illustrator Mock Up

Splash Page

Sample HTML and CSS Code

What I Learned

I started out by planning out my splash page on a piece of paper, so I easily could make changes and not have to dedicate too much time to designing something that I later may decide not to go with. I then made a mock up of the design in Adobe Illustrator. Finally, I coded the webpage using Adobe Dreamweaver. I was using an example file with a navigation bar to help me with the coding. However, the type of navigation bar I wanted to use was different than the one in the example file. To solve this problem, I put all my icons into individual div boxes and formatted them individually. I followed this tutorial to learn how to create slices in Illustrator.