Getting Your Folders and Graphics in Place

Print This Procedure ( doc :: pdf )

As we mention in the Gathering Project “Supplies” section, your first task is to create a folder for your Web files and organize your graphics. Here’s the process we suggest you follow (though feel free to change the folder location and name to suit your preferences):

1.      Create a folder on your C:\ drive and name the folder music.

2.      Open the music folder, and create a subfolder named images.

3.      Copy all of the files (or the ZIP file) from www.creationguide.com/oldschool/images into the images subfolder that you created in step 2.

As you copy files into you images folder, notice the naming scheme we’ve used to label images:

·      b_xxx Specifies that the image is a button. A b_ graphic appended with the number 2 (for example, b_background2.gif) indicates a second version of the button that displays whenever the associated page is displayed. (You’ll see what we mean later.)

Therefore, b_background.gif is the Background button, and b_background2.gif is the “current page” version of the Background button, as shown in the following images.

·      bg.gif Specifies the background graphic. The music site uses the same background graphic throughout the site, so only one bg.gif file is required.

·      footer.gif Identifies the graphic as a running footer graphic used at the bottom of the site’s pages.

·      logo.gif Identifies the logo graphic. The music site uses the same logo graphic throughout the site, but it’s possible that you’d have a few versions of a logo graphic (especially if you’re using a smaller or modified version of the logo on subpages).

·      p_xxx Specifies that the graphic is a picture. The music site has only one photograph, and it’s on the home page.

·      sendnote.gif Identifies the graphic as the “send mail” icon. Later, you’ll link this icon on the music site so that users can click the sendnote.gif graphic to open a preaddressed e-mail message when they want to send a message to Chris Soll.

·      t_xxx Specifies that the image is a title bar banner graphic. For example, t_background.gif is the Background page’s title bar banner graphic (which displays the word Background and is placed at the top of the page that presents background information about Chris Soll), as shown in the following figure.

The Background page's banner graphic

When you create your own Web pages and Web graphics, you’ll probably devise your own naming scheme. We’ve shown you the method we used to name our graphics to give you an idea of how helpful having a naming system can be. You’ll see the benefit of a well-planned graphics-naming scheme as you start to insert HTML code in the upcoming sections.