Backgrounds & Images

In this lesson we cover three important skills:
  1. Choosing a background image or color

  2. Adding a graphic to our homepage

  3. Uploading everything to our Geocities accounts on the web

I have provided a step-by-step review of these skills in the tables below. Please refer to them while making changes to your web pages. As always, if you need more help, please come by my office or send me an email at: matthew633@hotmail.com

Choosing a Background Image or Color


If you chose a picture as your background please go to Background Lesson 1 for detailed step-by-step instructions.

To choose a background color with Composer:
  (for PC)simply put your cursor on the Composer screen and right-click the mouse. Select properties from the pull-down menu. Then choose the color that you want.
  (for Macs)go to the format menu at the top of the screen. Select properties from the bottom of the pull-down menu. Then select the second option. (I think it's special details or something like that) This will allow you to click on the little rectangle next to the word background. From here, just select the color that you want.

If you chose to use a color code to make your background, please refer to the steps below:
  1. First you need to choose the background color that you want and the correct code that identifies the color. To keep this tutorial open and also see a list of color codes at the same time go to the File menu at the top of the browser window. Select New from the pull-doen menu, and then select (Navigator) window. This will open another browser window. In this new window go to Browser-safe colors to see the list of color codes.
  2. Find the color that you want and write down the code for it. The code is the 5 or 6 character sequence directly below the color square.
    For example: CCFFCC.

  3. Now that we have the correct code we need to open our web page in HTML and insert the code in the correct location. So, go to your Geocities account (geocities.com). Sign in with your user-name and password, and open your filemanager.

  4. Find your page in the filemanager.
    For example: home.html

  5. Click on the little pencil icon to open the page in HTML.

  6. Near the top of the HTML text box, find the html code that says

  7. place the mouse cursor after the word body but before the bracket. Then type in the following code:
    . Be sure to substitute the color code that you want.

  8. Press the save button near the top of the window. This should return you to the filemanager. Your background color should also be saved now.

Adding a Graphic To Our Homepage & Uploading Everything


  1. First you need to choose the picture/graphic that you want to use on your page. To keep this tutorial open and also see a list of graphics at the same time go to the File menu at the top of the browser window. Select New from the pull-doen menu, and then select (Navigator) window. This will open another browser window. In this new window go to Gifs to see a selection of sample graphics (gifs).
  2. Follow the instructions at the top of the graphics page for saving an image

  3. Save the image to your desktop.

  4. At this point we are ready to attatch the image to your webpage. But to do this we need to first open your page in Netscape Composer. So in the URL address rectangle at the top of the graphics page window type in the address to your webpage. Note we do not want to go to your geocities account (geocities.com). We want to go to your actual page on the web.
    For example: http://www.geocities.com/elirecruiter/home.html

  5. Open your page in Composer (File....Edit page...)

  6. Within Composer, place your mouse cursor on the location in the page where you want the image to go.

  7. Then click on the image button at the top of the window. A grey, rectangular box should appear.
  8. Next to the white rectangle click the button that says Choose file. In the box that appears, we want to look for your graphic file on the desktop. Find your file and press open.

  9. Then press the Apply button at the bottom of the box. Then press the Close file button.
  10. Your image should now appear on the webpage. But we still need to save the changes we have made.

  11. So, under the File menu, select Save as.... A save box should appear. Save your revised page to the desktop. Replace the old version.
  12. Ok, so far so good, but we still need to upload everything to our web space at geocities. To do this return to your filemanager in geocities.com/.

  13. Follow the steps for uploading that I included in the handout: Helpful Web Building Steps....

  14. Be sure to upload your graphic file as well as the webpage file.

  15. The computer will automatically make the connect between your webpage and your image, so they should appear together when you view the revised file. Note: if your changes don't appear on the screen when you view your revised page, press the reload button at the top of the window.
 

  Back To the Web Design Center