University of Vermont Historic Preservation Program

HP 206: Web Tips & How to Upload Your Web Files at UVM

Organize your files first

As you create web pages, save all your html and jpg files in a specific site folder for your web project on your computer. This folder may contain subfolders. Also create a parallel collection of folders and files for your web site on your web account. At UVM we call these web accounts "zoo accounts" as that is the name that was given to the server. Avoid saving files in your web site folders that are not intended to be published on the web. Create another folder elsewhere for these.

Basics

Html file names must end in .html

Use all lower case alphanumeric characters with no spaces for file and folder names

Keep file and folder names short but descriptive

Avoid having several versions of files in various places. If you want to keep an older version, give the new version a new name. Delete all obsolete files as you work. Otherwise it is very easy to create a huge mess that can take hours to unravel!

Image files

Image file names must end in .jpg or .gif

jpg file compression works best for photos

gif file compression works best for line art and logos

Be sure that your image files are saved and optimized to less that 100K, and better yet, less than 30K if you are going to have several images in an html file.

(A 30K image could take at least 6 seconds to load with a dial-up 56.6 Kbs modem at home.)

To resize image files, on a Mac open them using the Preview application and under Tools, choose adjust size...

Adjust the image size. Currently, common screen sizes are 1280 by 800 pixels or larger. But remember, the larger the image on a web page, the slower the download and the greater the bandwidth required, which may be a concern for users connecting with tablets or smart-phones by cellular networks. You may want to select a standard width for all your images to maintain a consistent look.

To create a new file version of the image that is scaled down, while in Preview, under File, choose SaveAs... and save this version with a new file name in the proper location.

If you want to copy an image or graphic off the web, click on it and hold the control key down until a menu box appears. Select Save Image As... and save to your appropriate folder. Always respect copyright law and only post downloaded images that are in the public domain or those that you have permission from the web page publisher to use.

To insert an image in an html file

Make a new html file in Dreamweaver or Kompozer.

Click on the place on the page where you would like the image to appear.

Click on the insert image icon or in Dreamweaver pull down Insert and choose Image...

Select the jpg file from your site folder.

If the image file is not there. Find it and move to the right folder.

Click insert.

You can move the image to a new location on your page by dragging. Generally HTML editors do not provide the level of location control that one may be familiar with from using Photoshop or other graphic application, however.

Remember that the arrangement of images and text will appear differently on everyone's device according their monitor size and screen resolution. Dreamweaver CS6 has a Fluid Grid option for page layouts which will automatically reformat the web page based on the size of the screen. The default settings are 480 pixels long for mobile devices, 768 pixels long for tablets, and 1232 pixels wide for computers.

If you put on a larger image, then viewers with small will have to scroll to see everything.

Posting your web files to your zoo account

On the Macintosh computers this is usually done with the Fetch FTP shareware application or by connecting directly to the server from Dreamweaver. There are also free FTP applications for Windows.

When you create web sites, you should organize then into separate folders to keep everything organized. If you are not very careful with this, it is very easy to put a file in the wrong folder and get quite frustrated when the changes that you made do not appear on the web.

Setting permissions

Now you must set permissions for all your files that were posted.

Click the boxes so that the Owner, Group and Everyone can Read, just the Owner can Write, and the Owner, Group and Everyone can Search and Execute.

Do not click the boxes for the Group and Everyone to write, otherwise anyone could change your web page.

Checking your pages

To see your work, launch a web browser such as Safari or Internet Explorer. If you are checking changes to a page, be sure to refresh the page with the browser each time.

Tips: When creating web pages, plan on running your FTP application, as well as Dreamweaver or Kompozer, as well as Safari or Internet Explorer all at the same time. If you find that an image needs tweaking, then also use Photoshop or Preview.

It is best to make sure all your image files are adjusted for size before creating the html files. Be sure to keep watch on your image file sizes. If too large, they may take an long time to load or may not be read by some web browsers.

So to check your page, enter its URL as follows:

http://www.uvm.edu/~yourid/foldername/filename.html

You can create a default index file with links to your web pages by saving a file named index.html in your public_html folder. Then the URL will be http://www.uvm.edu/~yourid/ or even just www.uvm.edu/~yourid/ on most newer browsers.

Once you upload a file or folder to your web account and set the permissions, you do not need to reset permissions if you replace the file or folder with a new one with the same file name.

After you replace a file with Fetch when making changes, you will need to click on the refresh button on your browser to see the changes if the old file was already being shown.

Troubleshooting

If the html file appears but not an image, several things could be at fault.

You may not have uploaded the image file with Fetch.

Use your FTP application or server connection to see if it is listed in the right place in your zoo account folders. If it is not there, then re-post it to the right place and remove the file that is in the wrong place. Again, if you do not remove the erroneous file immediately, things can get very confusing!

If you find the file is in the right place, but it does not work, maybe the permissions were not properly set.

Follow the instructions above to set permissions.

The link coding for the image may not be correct.

Go back to Dreamweaver or Kompozer, open the html file and under the View menu, choose Source Mode. This shows the actual html coding for your page. Look for a code line similar to

IMG SRC="bostoncustoms.jpg"

This tells the browsers what image is to appear at that place on the page. If the image file is in the same folder as your html file then you should just see the jpg file name within the quotation marks. Any %20 or references to a computer are problems as the coding is directing the browser to a file on your computer, rather than to the proper file in your UVM zoo account. To resolve the problem either manually remove the extra code and save and upload or delete and replace the image correctly and save and upload.

Another common source of problems is typographical errors, especially when the case of a character is incorrect or if there is a space in the file name or if the file name is just spelled wrong.

You can link to files or images that are already on the web typing the full http:// URL when you make the links or insert the images.

Further Points

If you have any questions about these applications, first try using the Help menu items.

Double check you work step by step.

Save your work every minute! Kompozer is a free beta version and so it tends to be somewhat cranky.

On Macs, Quit your applications when you are done with them, don't just close the screen by clicking on the little box at the upper left as can be done in Windows. On Macs the applications stay running until you Quit them and this can hog the RAM memory and increase the odds of a freeze or crash.

Keep your web files impeccably well organized.

If you make a mistake, correct it immediately.

If you get stuck, ask me or someone else for some help. If connecting by email, include the web address (URL) of the page that you are working on.

More web tips