California Career and Technical Education Standards

• IT.B.B1.2 Use appropriate software to design and produce professional-quality images, docu...
• IT.B.B1.6 Know the basic design elements necessary to produce effective print, video, audi...

• Hook - Hooks / Set
  • Webkinz Studio - Pete and Repeat.mp4 [ Watch Video ] [ Download Original Video ]
• 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

  Open Dreamweaver.
  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.

  Click apply.
  Click ok.
  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.