Getting the Big Picture
- Bring On the Art!
- Get Your Files Here
- Define the Chapter 4 Website
- Image File Formats for the Web
- Project 4.1 Prototyping and Designing with Background Images
- Project 4.2 Inserting and Editing Images
- Project 4.3 Floating Images into Position
- Project 4.4 Creating Structured Layouts with Images
- Project 4.5 Styling the Header Area
- Challenge! Create Your Own Design with Photoshop
- Conclusion
In this sample chapter from Learn Adobe Dreamweaver CC for Web Authoring: Adobe Certified Associate Exam Preparation, 2nd Edition, explore how the client-to-design process works for creating page prototypes that meet customer requirements. You will learn how to 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.
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 in which 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. Don’t forget to make your images accessible for visitors who cannot physically see your site.
In this chapter, you’ll take a look at how to 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.info website, and he’s also given you excellent guidance on how he wants the design to proceed.
){kind=link}
Figure 4.1 Chris
From Chris:
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.info.
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. 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 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.