Lesson 6

Insert a Background Image and Perform Site Maintenance

 

OBJECTIVE:

In this lesson, you will insert two types of background images.  You will then use the Assets panel to delete them both from the website.  You will also check for non-web-safe colors in the Assets panel.

Sample Solution

Lesson:  Insert a background image

  1. Click Modify on the Application bar, then click Page Properties to open the Page Properties dialog box
  2. Click the Appearance (CSS) category
  3. Click Browse next to the Background image text box, navigate to the Digital Design assets folder for Chapter 3, then double-click umbrella_back.gif
  4. Click OK to close the Page Properties dialog box, then click the Refresh Site List button to refresh the file list in the Assets panel - the umbrella_back.gif file is automatically copied to The Striped Umbrella assets folder - a file with a single umbrella forms a background made up of individual squares, replacing the white background - it is much too busy and makes it difficult to read the page
  5. Repeat steps 1-4 to replace the umbrella_back.gif background image with stripes_back.gif, located in the Chapter 3 assets folder - the striped background is also tiled, but with vertical stripes, so you aren't aware of the small squares making up the pattern - it is still too busy, though

Summary:  You applied a tiled background to the about_us page.  Then you replaced the tiled background with another tiled background that was not as busy.

 

Lesson:  Remove a background image from a page

  1. Click Modify on the Application bar, click Page Properties, then click Appearance (CSS)
  2. Select the text in the Background image text box, press Delete then click OK - the background of the about_us page is white again
  3. Save your work

Summary:  You deleted the link to the background image file to change the about-us page background back to white.

 

Lesson:  Delete files from a website

  1. Click the Assets panel tab, then click the Images button
  2. Refresh the Assets panel, right-click stripes_ back.gif  in the Assets panel, click Locate in Site to open the Files panel, select stripes_back,gif on the Files panel, press Delete, then click Yes in the dialog box that appears
    [TIP:  Refresh the Assets panel if you still see the file listed]
  3. Click the Assets panel tab, then repeat Step 2 to remove umbrella-back.gif from the wesite, open the Assets panel, then refresh the Assets panel
    [TIP:  If you delete a file on the Files panel that has an active link to it, you will receive a warning message - if you rename a file on the Files panel that has a link to it, the Files panel will update the links to correctly link to the renamed file - to rename a file, right-click the file you want to rename, point to Edit, click Rename, then type the new name]

Summary:  You removed two image files from The Striped Umbrella website, then refreshed the Assets panel.

 

Lesson:  Check for Non-web-safe colors

  1. Click the Colors button in the Assets panel to display the colors used in the website, then drag the left border of the Assets panel to display the second column - the two blue colors listed are not actually in the page code for the about_us page, but are in the attached style sheet - the Assets panel does not list any non-web-safe colors
    [TIP:  If you see a non-web-safe color listed, click Site on the Application bar, point to Advanced, then click Recreate Site Cache - the non-web-safe color should then be removed from the Assets panel - this should also remove any colors you have experimented with, unless you have saved a page with a color left on it - if you see an extra color, use the Find and Replace command to locate it, then remove it from the page and refresh the Assets panel again]
  2. Save your work, preview the page in your browser, close your browser, then close all open files

Summary:  You checked for non-web-safe colors in the Assets panel list of colors.