Organize your files first
Save all your html, jpg and gif files in a folder. This folder may contain subfolders.
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 obsolete files as you work. Otherwise it is very easy to create a huge mess that can take hours to unravel!
Image files
If you want to copy an image off the web, click on it and hold the mouse button down until a menu box appears. Select save file to disk and save to your appropriate folder.
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 will take at least 6 seconds to load with a 56.6 Kbs modem at home.)
To optimize image files, open them in PhotoShop Elements and under File, choose Save for web...
Adjust the image size. Since the typical size for 15 inch monitors is 800 by 600 pixels, generally images in the 400 to 500 pixel width range allow room for an equal amount of text on the side. Remember, the larger the image, the slower the down load. You may want to select a standard width for all your images to maintain a consistent look.
Then in the optimize window, select jpg and compare the medium and high settings. Usually the medium quality setting works fine.
To insert an image in an html file
Make a new html file in DreamWeaver or another web design application
Click on the insert image icon
Select the optimized jpg or gif 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. To get the text to wrap around it, click once on the image, then choose from one of the text location icon that appear at the top.
Remember that the arrangement of images and text will appear differently on everyone's computer according their monitor size and screen resolution. Most web designers today assume that users have at least an 800 by 600 pixel monitor. 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 down with the Fugu FTP shareware application or by connecting directly to the server. 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.
Tips: When I am creating web pages, I run my FTP application, DreamWeaver or another web design application and Safari or Internet Explorer at the same time. If I find that an image needs tweaking, then I may also need Photoshop Elements. It is best to make sure all your image files are adjusted and optimized 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 upload and cannot be read by web browsers.
Enter the URL as follows:
http://www.uvm.edu/~yourid/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.
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 repost 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!
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 Page Mill, 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 imacs are problems as the coding is directing the browser to a file on your computer, rather than to the proper file in your zoo account. To resolve the problem either manually remove the extra code or click on the view mode button on the upper right, then click it again to go to edit mode and delete and replace the image correctly.
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 Questions
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!
Keep your web files impeccably well organized.
If you make a mistake, correct it immediately.
Ask me or someone else for some help.
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. On Macs the applications stay running until you Quit them and this hogs the RAM memory.