Building Business Websites

Lesson 3: More on Graphics and the Like

Discussion of using graphics and site navigation.

Rome Wasn't Built in a Day...

…and your Web site won't be either! But I'm going to do my darnest to make this as easy as possible for you.

Last lesson we learned how to create a table and put content into the table. We also learned how to do some planning for our business site, and you should now have an idea about what you want your navigation and content to be, yes?

It's OK if you don't know what to put on the page yet. It'll take some planning on your part and you'll likely change your mind a few times as you go through this process. Practice with me until you can think about the real thing, 'k?

What we're going to do today is create the remainder of our Silly Soap site and talk about creating graphics and some other fun stuff.

You have a copy of the architecture handy? Here it is again to refresh your memory:

Here too is where we want to think about our audience. If you know for a fact that your customers all have high speed Internet connections, then by all means, you can create a graphics-intensive site.

Considering, however, that most people still use dial-up, we're going to create a site that's short on graphics, but high on HTML. Why? Because HTML is "rendered" or displayed very quickly. If your navigation is made of graphics instead of plain HTML, it will take longer for everything to load. Yahoo.com is a prime example of a site with tons of pages, but their home page displays very quickly because the content is mostly HTML and small graphics.

In the spirit of offering alternatives to the site we'll actually build here, there are some things you can do to offset the load speed of your graphics. One time tested method is to build 2 sites - one that's "text-only" or heavy in HTML, and another one that has all your graphics bells and whistles. Customers enter your site via a splash page that allows them to pick which site they'd like to visit. You simply insert 2 links on the splash page - one that goes to the high speed connection site, and one that goes to the low speed connection site.

You can also create a Javascript that pre-loads images and graphics onto a person's computer, eliminating a few speed problems. If you have large graphics, you can create lower resolution "fake" graphics that load before the real thing, and make the customer think that the image is simply taking some extra time to load. These types of scripts are beyond the scope of this lesson, but you can find them in the Javascript book I noted for this course.

And speaking of images…let's talk a while about those. Know up front that producing quality graphics is not as easy as it looks. Professional designers spend literally thousands of dollars on photo and imaging software. The cream of the crop is Adobe's Photoshop, which retails for around $600.00. Adobe also makes a lite version of Photoshop called Essentials that retails for about $120. I've never used it, so I don't know everything that it's capable of. Ulead has created a number of photo editing softwares that also may include stock photos and Web templates for your use. If you recently purchased a computer, you may have photo software bundled with everything that came loaded on your computer.

Also, there is an open-source (AKA, free) alternative to Photoshop called "GIMP." For those of you using Windows as your operating system, the neat-o keen folks at GIMP have a product that works in…you guessed it, Windows. Installation is pretty straightforward, so go to the site and download GIMP if you're feeling adventurous: GIMP. I'm not going to be the one to teach you how to use this because that's a whole other course. GIMP has an online user manual that will explain basic functions so that you can work on your own site.

If you don't own a digital camera or scanner, it will be more difficult, but not impossible, to get your product images into your site. Most photo processing shops now provide the option of digitizing your photos and putting them on a CD for you. So you can either use your own 35mm camera or buy a disposable one and get the film processed onto a CD. If you are going to shoot your own pictures, I would HIGHLY recommend using the same, very plain backdrop for all of your photos. Grab a white sheet or even a white t-shirt if your products are small, and use it for a backdrop and a ground cover. If you have products that lend themselves towards a particular type of background, for example - you're selling sports equipment, offer at least one shot against the plain background, and maybe another of the item in its "natural habitat" (on grass or concrete). I say this because nothing irks me more then when I'm trying to buy something, and the background, foreground and ground cover interfere with my ability to see the darn product.

There is also a wide variety of free or low cost images and graphics available online. For that matter, your local Office Depot probably has a CD of clip art for $10.52 including tax…can you tell I just bought one?

Remember I said your logo should be in a "Web-friendly" format? This means that if you have a digital copy of your logo, the three letter file extension after the dot should be .jpg, .gif, or .png. If you don't have a digitized copy, you can very easily scan one in at Kinko's or using your own home scanner. A scanner is also good for scanning pre-existing photos and graphics that you don't have in digital format.

The group at Silly Soap just happen to have a copy of their logo in Web friendly format, and like I said before they bought an inexpensive digital camera to produce the photos of their products. They are not, however, ready to put these photos on the site yet.

Generally, when I'm building a small site, I like to go ahead and create all the pages of the site before I start loading content. Because we've planned ahead, I know exactly how many pages the Silly Soap site will contain. I take my architecture and write some notes on it about page names so that when I'm creating my navigation and links I stay organized.

I have made some notes on a copy of the architecture with the names of every page.

You can see that Silly Soap rethought their news section because it was fairly sparse in terms of content, and they opted only to create one page.

So now we can create the links for the navigation. I've created sample code for this below. Each link always starts with "a href" and ends with a closed "a" tag. Note that the page names are in quotes, and that these tags wrap around text. The text needs to be very clear so that customers know what each page is about.

Note too that I included a link around the logo image that goes back to the index page. You can make images "linkable" simply by placing them inside the "a href" tags.

You can also see that I made notations in my code about what content goes where. This will be helpful to anyone who does coding for you after the site has been created. It will also provide a reminder for you of what your thought processes were as you created your pages. Notations in HTML are done with a bracket, an exclamation point and a close bracket. I put the asterisks in mine too so that they're easy to spot.

The secondary navigation is specific to each major section of the site, so it will be added to the correct pages once we build them. For example, on the "products.html" page we'll add links for shampoo, bath and body, laundry, and toys. The page now looks like this:

Couple of things I don't like about this. I've never been crazy about Times New Roman as a font, and the navigation looks weird on the page. So I'll make a few changes to the code so that my font is Ariel, and my navigation is centered on the page.

Oh! One thing I almost forgot…you MUST set the background color of your page by typing the following code INSIDE your first "body" tag: bgcolor="#FFFFFF". This hex value represents the color white, but you can set your background to any color you wish. Many people don't have white set as the default background color in an open window, and if you don't specify it in the beginning, the background of your site will be whatever the customer's computer chooses.

Now that you have created the content that will be on every single page of your site, you can do a "Save as…" from the menu of your text editor, and save all of your pages using the names we've already stipulated. Presto! Almost like instant Web site, except now we need to create the content and navigation on the individual pages.

Starting with the first major section called "Products" I'll create the secondary navigation that is specific to that page. Since I'll be creating the secondary navigation, I'd like to separate it from the primary navigation in some way. One easy way is to make the font smaller than the font above it. Another way is to change the font's color. We're going to make ours smaller. The code looks like this:

And the page looks like this:

The easiest, quickest way to create all of your primary pages is to open your "index.html" page, then click "Save As…" in the file menu, and save it over and over using the names you've decided on in your naming scheme. The files will now look like this:

Now, in each page, you will build the content in the cells that say "Content goes here." You can do this several ways, and if you want to learn more HTML to make the table you've created jump through a million hoops, have at it! What I'm going to do is create a blank table row under my navigation so that there is some space between my content and my navigation, then I'm going to have my content span the entire horizontal width of my page. The code looks like this:

Important to note here too is that I opted to put the Silly Soap contact information at the bottom of the page. What good is a site if your customers don't know how to contact you? Put this information at the bottom of every page, or be sure to prominently display a link to a page with your contact information. Should you so choose, your ISP can also help set up a Web form for customer feedback that will be e-mailed to you.

The table cell that creates the space between the navigation and the content must have something in it, or it won't leave the space we want. HTML can read this code "& nbsp ; " (which stands for non breaking space) and know that the cell has something in it but it doesn't get displayed.

Lastly, we went back up to the top of my page, and took out the table border of "1" and replaced it with "0." As a beginner in HTML, I would recommend that this is the last thing you do to each page. It really will help you figure out how your content is being displayed as you build your site. Now the page looks like this:

Also, leaving in the table border until you're finished with your coding will more easily allow you to see how to space the images on your site.

1  2