The Walkthrough

Planning the HTML Site

Print This Procedure ( doc :: pdf )

For the HTML project, we decided to create a Web site for Chris Soll, a professional musician and music instructor. Our first planning step involved meeting with Chris and finding out what types of information she wanted to include on her Web site. In our initial consultation, we found that she had a number of student-specific as well as professional-specific topics she wanted to incorporate into her site. Based on this information, we initially attempted to design a two-tier navigation bar, but the design started to look too cluttered. We determined that we could make a cleaner site by using specifically named buttons and providing a quick Site Overview section on the home page. The final design resulted in a clean, flexible layout.

After you create Chris Soll’s Web site which we quickly began to refer to as “the music site” during our consultation, based on the overwhelming presence of her baby grand piano, flute collection, and stacks of sheet music and music books in her studio you can use your HTML document as a template to create similar Web sites that have a completely different look and feel. (Don’t worry we describe how to use the music site’s code as a template later in this lesson.) The following figure shows the framework we came up with to illustrate the pages we wanted to include in the music site, and the next figure shows a finalized storyboard sketch of the music site’s home page.

The music site’s structure, which enables access to any page in the site from every location

Sketch showing the basic layout for the music site’s home page design