In Unit 4 of this course
you will learn about adding photos and other graphics to your web pages.
In order to work with graphics you're going to need some sort of image editing program.
These come in all sizes and learning curves, and range from free to hundreds of dollars.
For the purposes of this demonstration, I'll be using Adobe Photoshop.
You may need to consult the documentation of your particular application
in order to perform some of the commands I'll be showing you.
In the first part of this unit
we'll begin with a general introduction to web graphics and their effective use.
Graphics should fit with the purpose, organization, and style of the page...
should load quickly...
and should complement the content of the page, not interfere with it.
We'll also address copyright concerns for the images obtained from other sources.
There is a distinct set of ground rules you'll need to keep in mind,
but when in doubt, always get permission from the copyright holder.
In the second module of this unit you'll learn the basics of digital imagery
and the special roles that an image's resolution, dimensions, and file format play
in determining its quality and file size.
These qualities are of particular interest to any web designer.
By choosing the right format for the image type
and by keeping the resolution and dimensions to a reasonable size,
you can help ensure that your web page, including any graphics it contains,
loads quickly and doesn't force users to wait.
'cause nobody likes to wait.
Images for your web projects can come from anywhere...
stock image databases, your own digital photography,
or even printed material (with the help of a scanner).
You'll soon discover how to acquire these graphics as well as how to crop and resize them.
Cropping an image entails cutting out portions of it to fundamentally change the composition of the image.
Resizing an image keeps all information in the image,
but shrinks it down so that the graphic fits better within your web page.
You'll end up making judicious use of both techniques, and many more, in this unit.
By the end of this unit, you will have created a photo album ...
Clickable buttons for your portfolio home page...
A favicon, that small icon that appears in the browser tab for your web page, among other places...
And an eye-catching banner that will appear across the top of your website.
As you learn how to create all these images...
you'll also learn the HTML code for adding them to your web page
including techniques for ensuring the images are accessible to people who can't see them.
You can also add images to web pages using CSS, and you'll learn about that too.
This is an especially useful technique for adding images that are purely decorative, such as background images.