Scribd Logo
Upload

Welcome to Scribd!

  • 18 Site Organization

    Uploaded by

    jsdtrainer
    1 views6 pages
    The document discusses organizing website files into subfolders for better management as sites grow larger. It explains that relative paths must be used to link files between subfolders, giving examples of proper relative paths in HTML markup and CSS style sheets. Absolute paths that specify the full local file system path should be avoided, as they will not work on a live website.

    Original Description:

    Web site Organisation

    Original Title

    18--Site-Organization

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses organizing website files into subfolders for better management as sites grow larger. It explains that relative paths must be used to link files between subfolders, giving examples of proper relative paths in HTML markup and CSS style sheets. Absolute paths that specify the full local file system path should be avoided, as they will not work on a live website.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views6 pages

    18 Site Organization

    Uploaded by

    jsdtrainer
    The document discusses organizing website files into subfolders for better management as sites grow larger. It explains that relative paths must be used to link files between subfolders, giving examples of proper relative paths in HTML markup and CSS style sheets. Absolute paths that specify the full local file system path should be avoided, as they will not work on a live website.

    Copyright:

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

    Site

    Organization
    The Need to Organize Site Files
    Thus far, we have placed all our site files into the main (root) website
    folder. As a website becomes larger and more sophisticated, a single
    folder becomes too cluttered to manage effectively.

    To better organize our site, we can group similar files, such as images and
    CSS files, into their own dedicated subfolders.
    Relative Paths
    Once we move site files to subfolders, we need a way to tell the
    browser where to find them. To do this, we use relative paths:
    <div class="gallery">
    <img src="images/flowers.jpg" />
    <img src="images/orange.jpg" />
    <img src="images/pink.jpg" />
    </div>

    The path is always relative to the


    file making the reference. In this
    case, the path is relative to the
    location of index.html.

    Always use the forward slash (/) in file


    paths, never the backslash (\).
    Absolute Paths
    A common mistake committed by novice web designers is to copy and
    paste the full path to a local file in their markup:
    <div class="gallery">
    <img src="images/flowers.jpg" />
    <img src="images/orange.jpg" />
    <img src="file:///C:/Users/me/Desktop/Website/images/pink.jpg" />
    </div>

    This can be a frustrating error, as


    the browser on our own computer
    can locate and display the image.
    But when the site is uploaded to a
    live web server, the image won't
    appear, since the location is no
    longer valid.

    These paths, since they are not relative


    to the current location, are known as
    absolute paths.
    External CSS Style Sheets
    Our earlier example of an external CSS style sheet assumed the actual
    CSS file was in the same directory as the XHTML file. Now that we are
    better organizing our site, we should move the CSS file to its own folder:
    <head>
    ...
    <link rel="stylesheet" type="text/css" href="css/mycss.css" />
    </head>

    Complex websites can have dozens


    of style sheet files in the CSS folder.
    Relative Paths in Style Sheets
    As we know, CSS style sheets can set background images for
    elements. Now that the style sheet is in its own folder, we need a way
    to point the CSS file to an image that is located up one folder level and
    then down into a different subfolder:
    body {
    background-image: url('../images/orange.jpg');
    }

    This is the mycss.css file.

    Remember, the path is always


    relative to the file making the
    reference. In this case, that file is
    the CSS file in its own subfolder.

    The two periods and forward slash


    instruct the browser to "go up one
    folder level".

    You might also like