Web Design Primer

Chapter 2 – Files and Links

Since a web page may have numerous linked files, like image and style sheets, and hyperlinks to other pages, file organization is very important.

A basic website will reside in a folder on a server that readers access through a universal resource locator (URL)— the web address that they type on their browsers. To load without being specifically named, the first page, or home page, on your site must reside in the main, or root, folder, and be called “index.htm” or “index.html.”

File Organization

A convenient way to organize a basic site is to make folders to hold the other web pages, images, style sheets, and JavaScript if present (Figure 2-1). Links (Figure 2-2) to these other elements need to be specified using the directory path on the server. For example:

  • Going down: If you place an image, “image.jpg,” that resides in a folder, “images,” then you must specify <img src=“images/image.jpg”>, including the folder followed by a forward slash in the file specification.
  • Going up: If in another page of your site, that’s contained in a folder, “HTML,” you want to use the same image, you must first specify an upward path from the “HTML” folder into the root folder, <img src=“../images/image.jpg”>. The two periods and slash tell the browser to go up one folder and then down into the “images” folder.
Screenshot of a directory listing.
Figure 2-1. File organization of a simple web site into a root folder with an index.html file and folders for style sheets (css), other pages (html), and JavaScript (js). Adobe Dreamweaver® screenshot(s) reprinted with permission from Adobe Systems Incorporated.

Hyperlinks

Other pages can be linked using hyperlinks of two types:

  • Relative hyperlinks are to pages on the same server, such as “page2.html” in Figure 2-2. Example of a relative link: <a href=“html/page2.html”>Page 2</a>.
  • Absolute hyperlinks go to a link on a different server, usually someone else’s page on the web. An absolute link: <a href=“http://www.ryerson.ca”>Ryerson University</a>.
Code for linking relative hyperlinks to pages on the same server.
Figure 2-2. Examples of code for linking to embedded files and images. Adobe Dreamweaver® screenshot(s) reprinted with permission from Adobe Systems Incorporated.

Dreamweaver’s Site Manager

Dreamweaver’s Site Manager (Site > Manage Sites) provides a convenient way to manage sites (Exercises). The root folder is displayed in the Files palette (Window > Files, Figure 2-3). After creation and editing, files and folders can be uploaded to the server with a built-in file transfer protocol (FTP) utility.

 

Root folder displayed on Dreamweaver’s Site Manager.
Figure 2-3. Dreamweaver’s File palette. Adobe® Dreamweaver® screenshot(s) reprinted with permission from Adobe Systems Incorporated.

Using Dreamweaver’s Site Manager

How to use Dreamweaver’s Site Manager

  1. Make a site folder for your site and organize any desired subfolders.
  2. Dreamweaver > Site > Site Manager.
  3. New Site > enter Site Name > click the folder icon to the right of Local Site Folder.
  4. Browse to the root folder you created, select, click Choose.

 

Linking to a Server

  1. In Site Manager, click Servers.
  2. Contact your site administrator for FTP settings to use.

 

Using the File Palette (Figure 3)

  1. Open the File palette: Window > Files.
  2. You can view various root folders on the local or remote computer (server).
  3. To connect to the server, click the plug icon in the upper left corner.
  4. If you change the file structure in the root folder, click the Refresh button.

Site Maps

A site map (Figure 2-4) is a diagram of the pages and hyperlinks in your site. It shows how readers will be able to navigate from one page to another by clicking on hyperlinks. A site map is useful in planning your site and determining the arrangement of files.

An organizational diagram displaying hyperlinks that the reader is able to navigate to from the Home Page.
Figure 2-4. A simple example of a site map. Hyperlinks will enable the reader to navigate from the Home Page to pages 1, 2, and 3, and to an external website, by clicking links. Created by Richard Adams. Licensed CC BY 4.0.

 

License

Icon for the Creative Commons Attribution 4.0 International License

Web Design Primer Copyright © 2018 by Richard Adams and Ahmed Sagarwala is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.