Some notes on website construction (1)

1.      Saving

a.       Save your pages with .html or .htm suffixes. If you accidentally save in other formats, your documents will have other suffixes.

b.      Images are saved with .jpg or .jpeg or .gif suffixes.  Make sure your files have only one suffix. Jpg is usually for photos; gif is for line drawings.

c.       None of your files for the web should be very large in size.  200 KB is an outside limit.  Make sure all your  pictures are saved at 72 dpi (dots per inch) resolution.  Computer screens wont show higher resolution. 

2.      Images

a.       Images are processed in various ways.  This can best be done in the Photoshop program, available on all lab computers.

b.      Open Photoshop; go to File>Open.  Navigate till you find the image you want to modify, either in your Hum 330 folder or on a disk you placed in your computer drive. Double click to open the image.

c.       Go to Image>Image Size. Make sure the boxes entitled Constrain Proportions and Resample Image at the bottom of the dialogue window are checked. 

d.      Set the Resolution window to 72 pixels per inch. Set the width window to the size you want.  Standard width for images on CPL website is 450 pixels, but if you want smaller images for logos or thumbnails, select appropriate size.  If you have a map or some reason to insert a larger picture, the template will stretch to accommodate up to 650 pixels width.

e.       Click OK.  Photoshop will shrink the view of the image on your screen to smaller than it will appear on your site.  Hold Control or (Apple) Command key and click + to zoom up to 100% view.

f.        You can make other changes by going Image>adjust if you want to experiment in Photoshop.  You can also add text and lines and outlines and color changes to the image using the Photoshop toolbox in the upper left.

g.       Once finished manipulating the image, go to File>Save and navigate to your Hum 330 images folder to save it there.  If you want to keep your original image along with the adjusted one, use Save As instead of Save and give the new image a different name.

3.      Web photo galleries

a.       If you have a sequence of pictures that you’d like your user to be able to navigate through, you can do this easily using Photoshop’s web photo gallery function.  For example:

b.      To make a gallery like this,  go to File>Automate>Web Photo Gallery. In the Folders box, click Choose and navigate to the folder with your pictures.  For Destination navigate to your Humanities 330 folder and create and name a New Folder for your gallery.  In the Options box, for Banner, type the title of your gallery and leave the other boxes blank.  

c.       Click OK and let ‘er rip.  If you want to change the size of thumbnails and large images you can do that by repeating the above steps and going into Options and making changes of size to all the images.

d.      Once the three folders plus index file constituting your gallery has been created by Photoshop, you can  now open and modify any one of the html pages, including the index page,  in  Dreamweaver.  You can even apply your CPL template to any or all of these pages.

4.      Image mapping

a.       Inside Dreamweaver, you can make any part or parts of an image hot—creating a link to another page when clicked on.  This is very useful for linking places on a map to images or information.  For example:

b.      Make sure your Properties Inspector Window is open by checking Window>Properties.

c.       Select the image you want to map and find Map on the lower left. Click the rectangle or circle and draw a rectangle or oval over the area of the image you want to link to another page.  The arrow will move the figure you’ve created over the image.  At Link#, either type in the URL of an off-site page or click the folder to navigate to a file on the CPL website or in your 330 folder that you want to have open when the user  clicks on the “hotspot “you’ve  just created. 

5. Making Maps for your Website

  1. Maps are informative and fun for both user and website creator. You can copy maps from many sources, save them as jpeg files, open them in Photoshop to alter or resize the image, add features and placenames and lines and colors to any part of the map. This is how the topo maps with Cal Poly features and trail maps on the website and in the Field Guide were created. You can make parts of the map hot, by following the instructions for making imagemaps in Dreamweaver. Here are some student examples:
  2. In addition to any maps you find on the CPL website to copy and manipulate, you can save a screen shot of any size map in the zoomify window at
  3. You can crop the mainmap located at:
  4. And you can save and crop any of the maps at Facilities Planning Map website: The maps you find here are all in pdf form and need to be saved with a ".jpg" suffix. When you save one of these you can specify the resolution you want to save it at all the way up to 300 dots per inch instead of the usual 72 dots per inch. When you save it at a higher resolution you will be able to enlarge it as much as you want to when you open it in Photoshop.

6. Using Google Earth to make a tour

  1. Sample: Pennington Ranch Hike