Topic 4 - Web Structure

Web Flowchart

  • A web flowchart describes how web pages relate to one another.


Web Storyboard

  • A web storyboard is a sketches for every page in a web site which include elements such as graphic, animation, video, navigation and programming.
  • Below is the sample of web storyboard:
Page Name: Page No.

Graphic / Visual:












  • Page Name - Name of the page.
  • Page No. - Number of the page.
  • Graphic / Visual - Design of the page.
  • Navigation - Buttons to go to another page or site.
  • Programming - Programming that include in the page such as Javascript.


Web Directory Structure

  • Files need to be organized into manageable units; analoguos to the manila folders traditionally use to organize paper documents.
  • This unit is known as a file directory.
  • The directory that contains all other directories is called root directory.
  • Taken together, all the directories and files form a file tree, or file system.
  • A file is located in a file system by specifying its directory path.
  • When linking to other files, you may need to refer to a directory above the current directory, or to the current directory itself.

Sample of web directory


  • Above diagram is a sample of web directory.
  • When you want to make a link between the spec3.html and root.html, the link as below:

<a href="../../root.html">Link</a>

  • When you want the opposite way links, root.html to spec3.html, the link as shown below:

<a href="products/special/spec3.html">Link</a>

  • The general form of links as below:
    • up ---> down

    down one level
    <a href="folder/filename">Link</a>

    down two levels
    <a href="folder/subfolder/filename">Link</a>

    down three levels
    <a href="folder/subfolder/subsubfolder/filename">Link</a>

    • down ---> up

    up one level
    <a href="../filename">Link</a>

    up two levels
    <a href="../../filename">Link</a>

    up three levels
    <a href="../../../filename">Link</a>



backWeb Design | Image, Animation & Interactivitynext










Copyrights Reserved © Web Publishing 2003


  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project



To all my students!

Please visit this web site regularly.