- Web Design Phases
- Flowchart of the Series and Related Workshops
- UW Web Publishing Services
- Tools of the Trade
- Internet File Management
- What Next?
UPLOADING AND DOWNLOADING: LOCAL VERSUS REMOTE
In most cases, there are two versions of your site: the local version, living on the computer at your desk, and the remote version, which lives on the web server. You use the local version when you are making all of your changes, and when you are ready to make those changes public, you copy the changed files from the local version to the remote version.
Working on the Local Version
When you are working on your site on your computer, only you can see it. A common practice is to create a folder on your desktop for your site. Let’s say you’re working on a portfolio web site for yourself. You might have a folder on your desktop called
portfolio. Inside that folder, it is common to have three folders:
builder, a folder containing notes on your site and other materials you used to generate your site. This might include all the Word documents in your portfolio that appear on your site in HTML format, etc. It might also contain the source graphics for your photoshop documents, like the actual photos from a scanner or digital camera.
photoshop, a folder containing the Photoshop files for the images on your site. The name is not so great, but it is a convention. It is common to create the
photoshopfolder even if you don’t actually use Photoshop.
local_html, a folder containing the local version of your Web site. This is where you would put your HTML files, ImageReady images, and all the files you want to later publish to the public version of your web site.
You can download a “starter site” zip file by clicking here. This starter site contains the above folders along with a few starter files that are often needed to get a site off the ground (like an HTML boiler plate, etc.).
This structure is useful because it allows you to make “snapshot” backups of your site without taking up a lot of space. You can right-click on the
local_html folder and select “Create Archive” on the Mac or “Send To > Compressed Folder” on the PC. This will create a file called
local_html.zip which you can then rename to something like
local_html_backup_12-01-09.zip with the current date. You might also want to back up your
photoshop folders occasionally as well.
Uploading to the Remote Version
When you are ready to upload the site from your personal desktop to the public Internet, all you have to do is connect to the server and put all the files from your
local_html to the server’s
public_html folder. If you’ve only changed a few files, then it might be easier to upload each file individually as opposed to re-uploading every file.
The important thing to notice here is that you must upload your local site to the remote site after round of changes you make for the changes to take effect: the two sites must be manually synchronized. There are tools that allow you to synchronize the two sites (there is one built into Dreamweaver), but they are beyond the scope of these workshops.
FILE NAMING CONVENTIONS
Web Servers typically run on the UNIX or Linux operating systems. These operating systems are case-sensitive with respect to file names while Windows is not. To the web server,
Index.html are different files, but to Windows they are the same. In a similar vein, special characters like spaces, question marks, etc. do not translate to URLs very easily. For these and more reasons, we have the following naming conventions used for web files.
To ensure maximum compatibility, your file names should always:
- Consist only of lower-case letters, numbers, and the underscore (
- Start with a lower-case letter,
- Have exactly one dot (
.) which is only used to separate out the file’s name and its extension, and
- Always be less than 255 characters including the extension and the dot.
The following file names are valid:
The following file names are not valid:
home page.html(spaces not allowed)
12.jpg(must start with lower-case letter)
page.html.txt(there must be exactly one dot)
Again, these are just conventions: they are not technically requirements. It is a good idea to follow them, however, to make sure that your web site will work the same way regardless of which server it is running on and regardless of which operating system your user is running.
File referencing is very important when we want to connect files together in some way. Usually this “connection” is a link on one page to another. Often the connection is a page including an image or a style sheet. Sometimes, though, the connection can be as technical as a remote database socket connection.
If you want a particular connection, it’s safest to use the connection’s full or absolute address. The absolute address of a connection is very much like a GPS coordinate on the earth or your full mailing address. In general, the absolute address of a connection is:
host is usually something like a domain name or an IP address and
city/town/... is the path to the connection and
resource is the resource or file itself.)
You are probably familiar with one sort of absolute address: a URL! A URL is an address to some file (e.g. a picture of your cat) on some host (another word for a server; e.g. students.washington.edu) using the HTTP (Hypertext Transfer Protocol) protocol.
For HTTP, the slashes after
host indicate folders. The first slash is to indicate the “root” folder. This “root” folder is kind of like the
public_html for the entire server. So that means that when you type in
you are accessing a file called “index.html” in the “root” folder on the “google.com” host (server) using the “http” protocol.
This also means that when you type in
you are accessing the
index.html resource in the
YOURUWNETIDfolder (which is itself inside the “root” folder) of the
Absolute addresses are useful when the file or resource we are connecting to is not on the same server as is our file or resource.
An address is an absolute address if and only if it contains
://. Without the colon-slash-slash, the address is called a “relative” address. Relative addresses indicate how to access a file or resource relative to the resource that is giving the address.
Relative addresses don’t include a protocol or a host. A relative address only works if both the requester and the request-ee are on the same host (server) and protocol.
A relative address is similar to telling someone “go left of your house three blocks and look for my car in front”: it is assumed that you and the someone live on the same host (“planet” if you must).
Using relative addresses, we have access to the following ‘shortcuts’:
./means “the current folder”
../means “the folder that contains the current folder”
/means “the root folder on the host”
Say you have the following site structure:
index.html. Using absolute paths, you would have to link to
http://students.washington.edu/YOURID/index.html, but using relative paths, we can just say “the address of index.html in the same folder as this document” by typing
./index.html. Similarly, if we wanted to include
proof.html, we want to say “the
eqn.jpgin the current folder.” Simple! That would just be
Let’s try the
../ now. Let’s say we want to include
proof.html. We need some way of indicating to the browser and the server where to find this so-called
me.jpg file if we are “starting at” the
proof.html file. We want “the
me.jpg file in the folder containing the current file”. Well,
../ gives us a ‘shortcut’ to the folder that contains the current folder. We’re linking from
proof.html, so the current folder is
math402. So the proper relative address is simply
“What about the
/ up there?” you ask? If you are on the
students.washington.edu host, then
/ is a relative path meaning “http://students.washington.edu/”, that is, the root folder of the students web server. It is perhaps useful if you would like to link to another student’s web page or files on another student’s web page.
Relative paths are useful because the relative paths of our documents don’t change depending on which host we’re on. That is, it doesn’t matter if you’re working in
local_html. If your files are linked together using relative addresses, then when you move your files to another host, then you won’t have to change a thing!