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: http://polyland.lib.calpoly.edu/places/AgLand/agGallery/small/index.htm
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: http://polyland.lib.calpoly.edu/topics/Geology/studentsites/2003a/mappage.html
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
- 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:
- http://polyland.calpoly.edu/topics/Geology/studentsites/2003a/mappage.html
- http://polyland.calpoly.edu/topics/recreation/studentsites/2003a/index.html
- 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 http://polyland.calpoly.edu/overview/maps/main.html
- You can crop the mainmap located at: http://polyland.calpoly.edu/overview/maps/majormap.jpg
- And you can save and crop any of the maps at Facilities Planning Map website: http://www.facilities.calpoly.edu/mapsplans/map/maplist.htm 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
- Sample: Pennington Ranch Hike
