Section 8.1• Create a custom theme• Design a color scheme• Use shared borders

Section 8.2• Identify types of graphics• Identify and compare graphic formats• Describe compression schemes

Section 8.3• Identify image sources• Use graphics ethically• Use clip art• Describe graphic input tools• Create WordArt

Section 8.4• Crop, resize, and resample a graphic• Create a photo gallery• Create a thumbnail

8.1Using Custom Themes and

Shared BordersGuide to Reading

Main Ideas

You can create custom themes that reflect your site’s purpose. Using shared borders allows page components such as banners and link bars to appear on all pages of your site.

Key Terms

external style sheet

embedded style sheet

cascading style sheet

shared border

pp. 212-217

pp. 212-2178.1

Using Custom Themes and Shared Borders

Custom themes and shared borders create a good graphic foundation.

Both of these are features are available in FrontPage to simplify the task.

Creating a Graphic Foundation

8.1Using Custom Themes and

Shared BordersCustom Themes

If FrontPage does not include a theme that exactly matches your needs, you can modify an existing theme. You can:

• Customize graphics and colors• Specify fonts using one of the following style sheets:

external external embeddedembedded cascadingcascading

external style sheet A style sheet containing format and layout settings stored in a separate file. (p. 214)

embedded style sheet A style sheet that contains format and layout settings that only apply to the current Web page. (p. 214)

cascading style sheet A style sheet that consists of code that defines formatting and layout settings for HTML tags. (p. 214)

pp. 212-217

pp. 212-2178.1

Using Custom Themes and Shared Borders

You can modify a theme’s font in the Customize Theme dialog box.

Custom Themes

8.1Using Custom Themes and

Shared BordersShared Borders

Shared bordersShared borders are a great way to show relationships between pages.

You can also specify that certain shared borders only appear on certain pages.

shared border An area that remains the same on all (or some) of the pages in a Web site. (p. 215)

pp. 212-217

pp. 212-2178.1

Using Custom Themes and Shared Borders

Check the boxes in the Shared Borders dialog box as shown here.

Shared Borders

pp. 212-2178.1

Using Custom Themes and Shared Borders

• Activity 8A – Creating a Custom Theme (p. 213)• Activity 8B – Modifying the Styles Used in a Theme (p. 214)• Activity 8C – Creating Shared Borders (p. 216)• Activity 8D – Inserting a Banner and Link Bar (p. 216)

8.2 Web Graphics Types and File FormatsGuide to Reading

Main Ideas

The two basic types of graphics are raster and vector. The two most common graphic file formats are GIF and JPEG.

Key Terms

raster graphic

paint program

vector graphic

draw program

GIF (Graphic Interchange Format)

JPEG (Joint Photographic Experts Group)

lossless compression

lossy compression

pp. 219-222

8.2 Web Graphics Types and File FormatsTypes of Graphics

There are two basic types of graphics:

• Raster graphicsRaster graphics, usually made with paint programspaint programs.

• Vector graphicsVector graphics, usually created with draw draw programsprograms.

raster graphic A graphic made up of pixels; also known as a bitmapped graphic. (p. 219)

paint program A type of software application that is used to create raster graphics. (p. 219)

vector graphic A graphic composed of simple lines defined by mathematical equations. (p. 219)

draw program A type of software application that is used to create vector graphics. (p. 219)

pp. 219-222

8.2 Web Graphics Types and File FormatsGraphic File Formats

There are two basic graphic file formats used in Web design: GIFGIF and JPEGJPEG.

Both file formats work well in Web design.

GIF (Graphic Interchange Format) A graphic file format that can save only a maximum of 256 colors. (p. 220)

JPEG (Joint Photographic Experts Group) A graphic file format that can support millions of colors; preferred format for saving photographs. (p. 220)

pp. 219-222

8.2 Web Graphics Types and File FormatsCompression Schemes and Download Times

Web designers often must have to compress files to speed download times. There are various strategies to speed downloads:

• Lossless compressionLossless compression• Lossy compressionLossy compression• Reduced color palette images• Converting image file formats

lossless compression A compression scheme in which a graphic file loses no data when it is compressed. (p. 221)

lossy compression A compression scheme that removes data from a graphic file so that the file is significantly smaller and downloads more quickly in a Web browser than one saved with lossless compression. (p. 221)

pp. 219-222

8.2

A download time of 0:11 @ 56 Kbps means the page will require 11 seconds to download with a 56 Kbps modem.

pp. 219-222Web Graphics Types and File FormatsCompression Schemes and Download Times

8.3 Obtaining and Creating GraphicsGuide to Reading

Main Ideas

You can use pre-made graphics, such as clip art, on your Web pages. You can also create original graphics using either input devices or FrontPage toolbars. Always check the terms of use before downloading pre-made graphics.

Key Terms

scanner

dots per inch (dpi)

digital camera

inline graphic

WordArt

pp. 223-229

pp. 223-2298.3 Obtaining and Creating Graphics

Pre-made graphics can be found on the Web or in image collections from software packages.

Unless you have specific permission to use an image, doing so can violate copyright laws.

You can use clip art collections found on your computer as well.

Obtaining Pre-Made Graphics

8.3 Obtaining and Creating GraphicsCreating Graphics Using Input Devices

ScannersScanners and digital digital camerascameras are both input devices to create graphics.

Scanners define resolution in dots per dots per square inchsquare inch. For Web use, a 600 dpi scanner is sufficient.

scanner A hardware device that converts a printed image into a digital format that can be used on a Web page. (p. 225)

digital camera A photographic device that saves images in a digital format so they can be easily used on the Web. (p. 225)

dots per inch (dpi) A definition of resolution that states the number of pixels created for every linear inch of an image, such as 600 dpi. (p. 225)

pp. 223-229

8.3 Obtaining and Creating GraphicsCreating Graphics Using Input Devices

When you insert a picture file into a Web page, the picture is referred to in the HTML code. The browser must request the graphic file, called an inline inline graphicgraphic, and insert it into the page.

inline graphic Created by storing a graphic in an electronic format on a hard drive and inserting the graphic into a Web page. (p. 225)

pp. 223-229

8.3 Obtaining and Creating GraphicsCreating Graphics Using FrontPage

FrontPage provides tools to create simple graphics:

• WordArtWordArt• Drawing Tool

WordArt Text objects with special formatting applied. (p. 226)

pp. 223-229

pp. 223-2268.3 Obtaining and Creating Graphics

• Activity 8E – Adding Clip Art to a Web Page (p. 224)• Activity 8F – Adding WordArt to a Web Page (p. 227)• Activity 8G – Adding a Drawing to a Web Page (p. 228)

8.4 Editing and Formatting GraphicsGuide to Reading

Main Ideas

You can use the Pictures toolbar to modify images in FrontPage. A photo gallery is a collection of images. Thumbnails are small images that link to full-size versions of the same image.

Key Terms

resizing

aspect ratio

resampling

cropping

photo gallery

thumbnail

pp. 231-236

8.4 Editing and Formatting GraphicsModifying Graphics

To make major changes to a graphic, use a graphic or drawing application.

FrontPage can be used to make minor modifications, such as resizingresizing images, without changing the aspect ratioaspect ratio, resamplingresampling, or croppingcropping.

resizing Changing the size of the image as it appears on the screen without changing the file size of the graphic. (p. 233)

aspect ratio The relationship between an image’s height and width. (p. 233)

resampling Changing the number of pixels in a graphic file to match the new screen area occupied by the image; this changes the size of the graphic file. (p. 233)

cropping To remove portions of an image that you do not want to use. (p. 233)

pp. 231-236

pp. 231-2368.4 Editing and Formatting Graphics

Modifying Graphics

Contrast and Brightness Buttons

Rotate and Flip Buttons Crop

Resample Select

Restore

The tools on the Pictures toolbar allow you to manipulate pictures.

8.4 Editing and Formatting GraphicsCreating a Photo Gallery with Thumbnails

FrontPage makes it easy to create a photo galleryphoto gallery with thumbnailsthumbnails of each image.

photo gallery A collection of photographs with brief descriptions. (p. 235)

thumbnail A small image that links to a larger version of the same image; lets users decide if they want to view the larger image, which takes longer to download. (p. 235)

pp. 231-236

pp. 231-2368.4 Editing and Formatting Graphics

• Activity 8H – Manipulating an Image with the Pictures Toolbar (p. 232)

• Activity 8I – Cropping, Resizing, and Resampling a Picture (p. 234)

• Activity 8J – Creating a Photo Gallery in FrontPage (p. 235)

Chapter 8

For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.

Resources