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

up

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 - 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.

up

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:

• 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>

up

Web Design | Image, Animation & Interactivity