MDP web basics :
your website on the MDP server
your MDP web site :
As students in the MDP program, you are expected to create and maintain a web site to show your work-in-progress and completed projects of all types of media including writing. At the end of each term the MDP conducts an open house of student work: your term's work should be up on your web site for this event.
This site lives on the Art Center people server, and your accounts are accessible at people.artcenter.edu/~username.
To simplify the viewing of your school web site and make it look professional, you should set up a standard folder structure with a simple menu system for accessing each project. In other words, when someone visits your site, they should see a front page that directs them to each project/assignment you want to display (rather than seeing all the files). This has the additional benefit of hiding any experiments you may be working on from the casual user.
This approach is implemented by having an index.html file at the top level of your account that acts as your menu. This top level index.html has links to the index.html files in each project sub-folder. All projects must be in sub-folders below your account. There should not be any files at the top level other than index.html menu. Of course, you'll need to update this index.html each time you add a new project you want to be accessible. Your server folder should look something like this:
project structure :
When building a web site, it's essential to create a folder/directory structure on your computer (or external media) that accommodates your whole project. This directory structure should include two major directories.
The source_files sub-folder includes folders for master art files (e.g. photoshop docs), flash files, sound files, etc. These files are never put on the web server.
The site sub-folder only contains the html files, GIF images, JPEG images, and any other files that are part of the website pages. The site folder exactly mirrors the structure of the files on the web server.
This organization keeps the files organized and easily accessed, and so that extraneous files do not get uploaded to the server. Photoshop and other master files should never be uploaded to the server. In addition, this single directory organization makes it simple to create backups and archives of the project by saving the entire directory.
To start the project, create a new folder, and then create several new folders inside this main project folder. A typical folder structure is like the following:
It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you've made the site, you will, in all likelihood, break the links in your web pages.
web file naming rules :
When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in Dreamweaver, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.
For the web page file names, be sure you use "index.html" (or "index.htm") for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files. Other HTML files should have meaningful names such as products.html or drinks_snapple.html, rather than names such as page1.html. Name your files as if you are giving the web site to someone else who won't be able to ask you any questions, for example, you 6 months after the project is finished when you can't remember anything about it.
Web file naming rules:
- No spaces in the filenames
- Use all lowercase letters
- No special characters in the filenames: For example none of the following are acceptable in web filenames: "!~:&(,
- The files MUST have the proper suffix (.html, .gif, .jpg)
- Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always "zero-pad" your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile02.jpg.
And again, it's critical that you name your files correctly from the start. If you attempt to rename your files after you've created your site, you will, in all likelihood, break the links between your web pages.
recommended page size :
total size (html+images+flash) for a typical
web page should be 40-60K
Some typical download times under ideal conditions, which rarely happen:
| Size of File | 256Kbps DSL | 1.5Mbps |
| 20Kbyte | 0.6 secs | 0.1 secs |
| 50Kbyte | 1.6 secs | 0.26 secs |
| 100Kbyte | 3.1 secs | 0.51 secs |
| 1meg | 31.3 secs | 5.21 secs |
You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.
Note: This size does not include rollover images that are pre-loaded. To estimate the total size of your page including the rollover images, add the size of all the rollover images to the total shown by Dreamweaver. You can find the approximate size of a rollover image by double clicking on the normal image. The resulting dialog will show the size of the image in the right hand side of the main image, which is usually similar in size to the rollover image. If you want to know the exact size of the rollover, select INSERT>IMAGE and in the browse dialog, Dreamweaver will tell you the size of any file you click on.
The situation is more complicated than simply screen resolution:
- Explorer, Firefox, and Safair have different amounts of space available for pages
- Macs and PCs have different amounts of space available for pages
- The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
- If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)
Based on all the variations, I've created a guide for designing pages for the two major screen resolutions: 800x600 and 1024x768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project's requirements. You don't have to design exactly for these dimensions. In particular:
- In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 400 pixels (for 800x600 displays) to be "above the fold". In newspaper terminology, copy that's "above the fold" is visible in the top half of the paper, and includes the most important articles and headlines.
- In the horizontal direction, you don't have to fill the space to the limits of the recommendation. Just because you can design to 770 pixels wide for an 800x600 screen, doesn't mean you should design that wide.
The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.
- Recommended maximum page dimensions for 800x600 screen: 770x400 (sample page)
- Recommended maximum page dimensions for 1024x768 screen: 990x560 (sample page)
Previewing page sizes in Dreamweaver
You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.
If the dimensions you want to view aren't available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size. Note: selecting one of these previews does prevent you from designing outside the selected dimensions! It just shows you what it would look like.
See pages 14-18 of Web Design in a Nutshell (O'Reilly) for more info. See webmaster.info.aol.com for information about AOL browser issues, and specifically their compatibility page webmaster.info.aol.com/compatibility.html
Uploading files to your personal site
- FTP host: [people.artcenter.edu]
- username: your Art Center email name
- password: your password
- host directory/path: public_html/ (i.e. put files in the [public_html] directory)
Browsing your personal site
- URL: [http://people.artcenter.edu/~username]
The MDP student accounts are on a Unix/Linux web server.
Define a site in Dreamweaver
- In the SITE window of Dreamweaver, select SITE>DEFINE SITES...
- Select NEW
- With LOCAL INFO selected
- Set SITE NAME to "mysite" (or whatever you want)
- Set LOCAL ROOT FOLDER to your disk where your web files will be stored
- With WEB SERVER INFO selected
- Set SERVER ACCESS to FTP
- Set FTP HOST to "people.artcenter.edu"
- Set HOST DIRECTORY to "public_html/"
- Set LOGIN to your assigned username
- If you are using your own computer, set the PASSWORD (your student ID), otherwise, leave PASSWORD blank so it is not saved on a publicly accessible computer.
- Select OK to complete the creation of a new site
- Select DONE to finish working with site definition
- select the CONNECT button (at the top-left of the site window, to the right of the site name) to access your FTP account
- You will be asked for your password if you haven't already entered it, and then you'll be connected to the server
- The left side of the SITE window will show all files currently on the server in your directory
- On the MDP server, any files you want available on the web should go in the [web] directory.
Once you've connected to the server, you can upload your site files (or download files from the server to your local computer).
To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side.
In most cases, you will upload the complete web site as a directory. In the above example, this would be the directory called proj0_site_v1. Drag this folder to the left hand side, and drop it when you've placed it over the top folder (public_html/). Dropping the folder on the "public_html/" folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it. Note that dragging the top level folder from the right side of the window will not copy that folder, it will only copy the files inside the top level folder.
If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).
When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don't select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it's good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.
As an alternative to dragging the files from one side of the Dreamweaver widow to the other, it is possible to move files through key command. If the file structure on your computer is the same as it is on the server, then you can click on the file in the Dreamweaver browser window and then click on the UP arrow button to upload it to the same location on the server. If you have the file open in Dreamaweaver, you can upload the file by using the key combination of COMMAND/SHIFT/U.
on the server :
When you upload and replace files that are already on the server, there are several issues you should note:
- Be sure you save the new file before you upload it, so your changes
get to the server.
- Dreamweaver (and other FTP programs) will not ask you if you want
to replace them. It will just write over the old files. Be sure
you want to replace the files on the server before you upload the new
files.
- After you upload the new versions of the files, you should check
to make sure they are on the server. View the web pages on the Internet
at their real location (with the http:// URL), and don't rely on the
Dreamweaver preview of the local file. If the web page is already open
on the browser, use the Reload/Refresh button to view the page.
- Sometimes when you replace a file and view it, you don't see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn't work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn't work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn't work, you probably didn't upload the file correctly, or to the right location.