Scribd Logo
Upload

Welcome to Scribd!

  • 17 Site Organization

    Uploaded by

    Group B
    49 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    49 views2 pages

    17 Site Organization

    Uploaded by

    Group B

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Project 17: Site Organization

    Objectives:
    At the end of this project, you will be able to:
    • Organize your site by moving files into subfolders.
    • Use relative paths to link to CSS and image files.

    Instructions:
    1. Create a new folder called "Site Organization".
    2. Copy all the contents of the "Photo Gallery" folder into the "Site Organization" folder.
    3. Create a new, completely blank file in Notepad and save it to the same folder as "style.css".
    4. Add the following styling to the blank external CSS file just created:
    a) Center all elements on the page using the <body> element and the text-align property.
    b) Make <h1> headings display in orange color.
    c) Add a solid black border (2 pixels wide) around all images.
    d) Bold all link text.
    e) Make all link text show in red color when being moused over.
    f) Set the margins for all paragraph elements to be 20px on the bottom and zero for the
    remaining three sides.
    g) Make all paragraph text show in 18px font size and in bold letters.
    5. Edit each of the six XHTML files and add a line just before </head> that links to the external
    style sheet file.
    6. View the web pages in a browser and verify that the CSS styling is being applied to all pages.
    7. Create two new subfolders named “css” and “images” within the “Site Organization” folder.
    8. Move the CSS and image files into the appropriate subfolders.
    9. Now try viewing the web pages again in a browser. Are the images visible? Are any of the CSS
    styles being applied?
    10. Edit each of the six XHTML files again and modify the CSS and image paths to be relative
    paths to their new locations.
    11. View the website in a browser once more. Navigate through all the pages. Verify that all
    images are visible and that the CSS styles are being applied across all pages.
    Rubric 17: Site Organization
    Name: ____________________________

    Component Possible Points Score


    All elements on all pages are centered via the <body> declaration in the 1
    external CSS file.
    Main headings on all pages display in orange color. 1
    Thumbnails and full-size images on all pages show the black border. 1
    The navigation menus are in bold text and red letters when moused over. 1
    Image captions on the main page are in large bold letters. 1
    Image captions on the main page have a noticeable margin separating 1
    them from the next image.
    The external CSS file has no syntax errors and no unnecessary lines. 2
    Two new subfolders have been created and named according to the 2
    instructions.
    All CSS and image files have been moved to the new subfolders. 2
    All six XHTML files have been modified to use relative paths and refer 4
    to the CSS file in the new subfolder.
    All six XHTML files have been modified to use relative paths and refer 4
    to the image files in the new subfolder.
    Total Score 20

    You might also like