Cover Image Chapter Eight
Tips and Tricks
  
CHAPTER 8 RECAP

In this last chapter you learned some tips for creating temporary images to preload before main images. You learned how to create small images that clicked to a larger version of that same image. You also learned to use the HTML code to change the size of an image if necessary or just to create an interesting look. Patterns became more than just a word to you. Now you can create any pattern you want whether it's a left side navigation bar, a repeating bordered background pattern or a repeating non-bordered background pattern. And you now know how to test, test, test your work. We can't stress this part enough. You can never test too much.

The Low Source Trick

This is a live example of the Low Source Trick from the book.

Defining Patterns

Creating Repeating Background Patterns

Figure 8-7

Using the above tile to create a repeating background pattern that looks like the image below. Click on either image to see the final product.

Figure 8-7a

Figure 8-8c

Using the above tile to create a background image that creates a vertical color bar on the left. Click on either image to see the final product represented below. The image above has been shortened from it's original 1200 pixel width to fit on this page.

Figure 8-8

Using Existing Patterns

Figure 8-1-

Using the above tile to create a repeating background image from an existing Photoshop tile pattern to create the background below. Click on either image to see the final product.

Figure 8-13

Creating New Patterns

Figure 8-15

Using the above tile to create a repeating background image from an existing Photoshop tile pattern to create the background below. Click on either image to see the final product.

Figure 8-16

HOMEWORK

  • Find a picture of a pretty outdoor scene. Create a low source black and white version and put them on the page together. Watch how the page loads with the low to high source images.
  • Create a page with 6 80 x 80 pixel thumbnail images that load a low source image first.
  • Now create pages for each thumbnail that show the larger image when the smaller image is clicked.
  • Create one image and display it on an HTML page at many sizes.
  • Create one image at 72 pixels by 72 pixels and display it at 400 pixels by 400 pixels on an HTML page.
  • Create a background vertical navigation bar with a width of 350 pixels.
  • Create a background that visually repeats across the whole image.
  • Create several different types of backgrounds.
  • Now go create your own homepage with everything you know using this book as a reference.
  • Check your work on a Mac and PC at all the above suggested settings.
GO FORTH AND PROSPER

You now have all the knowledge we can pass on to you. The rest is up to you. Do all the homework assignments and create new ones for yourself. The best way to learn is on deadline as you know. It's when you are forced to learn at an amazing pace. This book was designed so that you can go back and check out the bullet points of each step as a reference. Remember we've provided reference materials in the form of three different appendices in the book. We'd love to hear how this book worked for you. Please send us feedback.

HAVE FUN CREATING!