Web Design & Architecture -- LIS 9723 logo

Related Links

File Structure - notes for naming files and how pathways work

Site Management in Dreamweaver

Notes: The default (index) page

index.html pages are called default pages. If you use one in a folder, then the server knows to show that file, even if it's not typed out in the address bar.

So, if you type http://colors.com in the address bar, the server will show you the page called:


It is a best practice to have an index page for every folder that holds content.

Root Folder

The root folder is the folder that holds all the folders and files for your entire website. (For example, on the publish server, your root folder is called public_html.) Usually pathways are built so that the domain actually represents the root folder.

So, the absolute (complete) URL to the reds section landing page (j) would be:



Relative Linking

Dreamweaver does a pretty good job at linking your files together with relative links. You can set relative links to be relative to the site root or to the document. For the kind of websites we're building (static), we'll want to make all of our links relative to document. However, sometimes Dreamweaver doesn't get it right, and we need to fix the file structure ourselves, so you need to know how to do this, and how the rules work.

Essentially, there are three things to know:

  1. you link down in the file structure by putting the folder first then the file, eg., folder/file.html
  2. you link to a file in the same folder by just putting the file name: file.html
  3. and you link up in the file structure, but using two dots and a dash, to indicate move up one level: ../

So, here is a file structure for a website about color. I've given each file name a letter, so that you can see how relative linking works.

file structure

A few samples:

The relative link from the home page (a) to the dark red page (d):


The relative link from the blues page (f) to the crimson page (h):


The relative link from the blues page (f) to the aqua page (e):


The relative link from the dark blue page (c) to the light blue page (g):



Test yourself:

  1. What is the relative link from the home page (a) to the mixed blues page (i)?
  2. What is the relative link from the blood red page (b) to the aqua blue page (e)?
  3. What is the absolute URL to the dark blue page?
  4. What is the relative link from the light blue page (g) to the reds page (j)?
  5. What is the link from the mixed blue page (i) to the aqua page (e)?

Answers here, at the bottom of the File Structure article.



Back to Top
Last updated: March 11, 2013

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner