In this chapter, you’ll take a look at the ways you can use images to further define the look and feel of a design, how to insert and position images, and the tools that Dreamweaver provides to help you get those jobs done.

4.2 Create a web page and define the page layout using HTML, CSS, and div tags.

Human beings are incredibly visual creatures. Our brains can process more information when we view a picture or illustration than we can by reading a long passage of text. The old saying “A picture is worth a thousand words” is certainly true.

Images and visuals are a huge part of the modern web experience, and in a world where you can snap a photo on your phone and instantly publish it online, visitors to a web page expect to see lots of images. And just like graphics, images can be used to define the layout of web pages and assist in the usability of the site—making it easier for visitors to find their way around and get to the information they’re after.

In this chapter, you’ll take a look at the ways you can use images to further define the look and feel of a design, how to insert and position images, and the tools that Dreamweaver provides to help you get those jobs done.

Bring On the Art!

Great news! Your client Chris the Cartoonist (Figure 4.1) has provided a ton of artwork for the WULVS.com website, and he’s also given you excellent guidance on how he wants the design to proceed.

Figure 4.1 Chris the Cartoonist

Chris Sez:

I really like the layout of the page! Those colors are kind of weird, but I know that’s just temporary, right? Let me tell you a little more about the storyline and the characters in my made-up world.

WULVS is a comic strip built around a security service run by Ray the Werewolf.

In Ray’s world, he works with a group of vampires, zombies, witches, mummies, aliens, and other characters who work as guards for hire by the “regular” humans of the world.

Part of the fun of the comic strip is how Ray runs his business—and his website—just like a regular business. After all, a monster has to make a living too. What I want to do is use the artwork of the characters in the strip to create Ray’s company website, wulvs.com.

I’m going to break down what I want for each page and put it into a separate document. OK? I’m looking forward to seeing your work!

Lucky for you, he’s happy with the layout that was made from the wireframes in the last chapter, and now you can take the big step of designing the pages the way Chris wants. Well, he isn’t sure exactly what he wants quite yet, but that just means that you can put on your designer hat and start working on a prototype for this site.

To get started on all the new elements for this design, you’ll need to download the files that have been provided and define your Chapter 4 website.