Document Sample
Exercise Powered By Docstoc
					Exercise One

                                 The Planets
Setting up a project folder
   1. Open Sitebuilder if it is not open
   2. Click on create a new site in the left hand window
   3. Follow the wizard ( if you the close existing site dialog box opens then select
   4. In the Save my web site folder as
   5. Type in the_planets (do not forget the underscore between the two words, and
      type it in lower case)
   6. In the title of the web site enter The Planets (ensure you are saving to c:/
   7. For the start page option select the blank page option
   8. A blank web page will open

Getting the created files
A lot of the information for this site has already been created for you and is stored on
the web site.
    1. Download this information into the folders that have been created for you with
        the new site wizard, images to the image folder and texts to the text folder
    2. The template that is on the download site should be copied to the site root
        directory, the_planets

Testing Pages
As you create pages it would be prudent to test them in a browser as you complete
each one. This will allow you to make corrections to the pages as you go along. It
will also serve as a visual indication of how your page looks, don’t forget the final
look of this site is up to you as the web designer working to a strict brief.

Setting up the index page
You will now set up several pages, 10 in all one for each planet in the solar system
and one for the splash (index) page.
    1. If Sitebuilder is not open, then open it.
    2. Load the template into the editing area of SiteBuilder
    3. Using Save Page As save this page as index
    4. Change the Add the Planet Name text box to the solar system
    5. Load the text file index_text into the text file placeholder on thetemplate (the
         one on the left hand side)
    6.   Load the image index_page_image into the image place holder (the one on the
         right hand side)
    7.   Adjust the placeholders and image size to fill the screen and look good (use
         your heading as a guideline
    8.   Save the page as index (you will be asked if you want to overwrite the saved
         file say yes
    9.   The navigation bar will be completed later
The Sun
  1.  Open the file menu and select the new page option
  2.  From the sub menu that will open, select the without template option
  3.  A new untitled page will open
  4.  Right click anywhere on the new page
  5.  From the menu the opens select page properties (at the top)
  6.  A dialog will open
  7.  In the Title text box at the top enter The Sun
  8.  In the description box just below the title, enter “this page is about the sun”
  9.  Click OK
  10. Load the template page again
  11. This time use save page as to save it to file name the_sun
  12. Load the text file sun into the text place holder
  13. Load the image Sun into the graphics place holder
  14. Adjust the image to fit into the image placeholder, (you wil have to determine
       how much of the page is devoted to the image)
  15. Adjust the text and images so they look good on the page, (hint :- place the
       graphic so it is aligned with the middle of the text)
  16. Save the page making sure that it is saved as the sun page, (if you are asked to
       overwrite any other files say yes)
  17. The navigation bar will be completed later.

The Rest Of The Planet Pages
  1. Carry out the procedure outlined in The Sun for
          Mercury
          Venus
          Earth
          Mars
          Juptier
          Saturn
          Uranus
          Neptune
          Pluto
  2. Do not forget to save the pages as the planet name, title the pages with the
     planet name and add the correct images and texts to the page(s)

  1.   Load the page sun into the editing area
  2.   On the navigation bar delete the image of the sun (the navigation images are in
        the order of the planets from the sun, the sun being the first image)
  3.   Add a small text box by opening the Insert menu and selecting Text
  4.   In the text place holder that appears on the screen add index page (it might be
        an idea tp press the return key at the end of the word index and enter page
        underneath it, its your decision, if you do stack the words in this way do not
        forget to centre them so they look neat)
  5.   Resize this text box and put it in the space that you have left after deleting the
        sun image
  6.   Adjust the other images in size to compensate for the new navigation bar
    7.  Click on the first item on the navigation bar (the Index page text you have just
    8. Open the insert menu
    9. Select Link To (do not click the mouse button yet)
    10. A dialog will open, slide the mouse over and select the A page in my site
        option, (click the mouse button now)
    11. Another dialog will open
    12. On the right hand side is three text boxes
    13. The middle one is where you select the page to link to
    14. Click on the small arrow at the end of the text box, a list of the pages on your site
        will open
    15. Select the Index page, then click Create, this wilol link the sun page to the
        index page.
    16. Carry out the same procedure as outlined in steps 7 – 15 selecting the correct
        page i.e if clicked on the mercury image select the mercury page., for all the
        other planets in the solar system
    17. Test the page in a browser and test the links work, use the back arrow on the
        browser tool bar to get back to your page after a successful link
    18. Carry out this procedure for the rest of the navigation images
    19. Carry out the procedure outlined above for the rest of the planets pages, do not
        forget to delete the one that the page is about

Tidy Up

    1. Check the site all works in a browser (all the links work correctly and the
       pages display properly)
    2. Make sure that there is none of the template instructions showing (delete
    3. Submit the site to the instructional staff for marking.

Try For Yourself
When you downloaded the imges for this exercise you may have noticed that there are
images that have information about the files.

   1. Create pages to hold these files, you can have as many as you want on a page,
      (the size of the images and the number of images would in all practicality
      necessitate more than one page, but you may think differently).
   2. Add the information images to placeholders on your page(s0
   3. Add an extra item to your navigation bar pointing to the information pages
   4. If you have created more than one page add navigation to the information
      pages and the index page only

Shared By: