Part of Unit: Art and Web Design Principles
Lesson Plan Overview / Details
Students will learn to create an image in PhotoShop to be placed as a repeating background in Dreamweaver.
- One Class Period
- 50 Minutes
California Career and Technical Education Standards
Student Objectives / Goals
- Students will learn to create a gradient in PhotoShop.
- Students will learn what a repeating background is.
- Students will transfer a gradient image designed in Photoshop and use it as a repeating background for a web page.
- Tiles the image both horizontally and vertically
- Tiles the image horizontally
- Tiles the image vertically
Activities in this Lesson
- Hook - Hooks / Set
- Why use a repeating background? - Lecture
Teacher will show an example of a repeating background using a gradient image from PhotoShop.
Adding a repeating background to your site will add to the aethetics of your site.
- Illustration of repeating background [ Download ]
- Begin in Photoshop - Guided Practice
Create a new document in PhotoShop
200w by 835h, resolution 72 (always for web)
Using the toolbar, select a foreground color using the color picker. Keep the background color white.
Select the gradient tool (Control G). You will see a replica your color selections in the rectangle on the tool options bar. Be sure the first box to the right of the rectangle that displays the gradient color is selected. (If you mouse over it, it says Linear Gradient.)
Back to the image.
Your cursor will turn to a crosshair. Click at the top of the image and drag down about ¾ of the image, leaving the bottom ¼ white.
Using the crop tool (Ctrl C) on the tool bar, crop about ¼ lengthwise of the image.
Save your document as background.jpg.
- Step 1 - Illustrated directions [ Download ] Illustrated Directions for creating a repeating, gradient background.
- Using a JPEG as a Repeating Background in Dreamweaver - Guided Practice
Go to File, New, HTML and hit create.
Be sure the Properties inspector is open. (It is located at the bottom of the Dreamweaver document. If it is not open, go to Windows, Properties or use the shortcut Ctrl + F3.)
Select Page Properties
Locate Background image, and browse to your background.jpg.
Find the Repeat dropdown box. Select repeat.
Save as index.html.
Preview in your browser and you now have a gradient background for your website.
- Step 2 - Illustrated directions [ Download ] Adding the JPEG into Dreamweaver
- Students Create Repeating Background - Independent Practice
Using directions, students will create a repeating background on their own.