Lesson 2: Page Backgrounds

 Signed in as:    
      Sign out



Your home page

Advanced Websites
   Layout and design
   Page framing
   Server Side Includes
   Navigation I
   Navigation II
   Processing images
   CGI Coding I

In this session we see how to make your web pages more visually interesting / pleasing by setting up a good background color. Topics include:


Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Click here if you have problems with the sound on the video.


Lesson 2: Backgrounds
Part 1: Solid Colors and Gradients

Click here for the video transcript


Hands on exercise

This exercise is primarily focused on choosing background coloring

In your AdvancedWebFiles/index.html page, add class=back to the <body> element

In your workStyles.css, experiment with different solid colors and gradients to find one you like the best for this website.

Once you have a background, you will want to keep it consistent across your website



Session 2

Here we examine using images for your page background. Topics include:



Lesson 2: Backgrounds
Part 2: Images

Click here for the video transcript.


Hands on exercise

This exercise is primarily focused on choosing images for your page background

First, check the suggested locations for images to find an image you'd like to use as background for your AdvancedWebFiles/index.html page.

Then change the definition of ".back" to use that image (or multiple images) to create the effect you want.


Supplemental materials

    A cumulative summary of the contents of the course so far: Click here for the cumulative technical summary



 Lesson navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.