Library background

Equipment In Room Web Site Procedures


Scan Room Plan(s)
  1. Go to the MET Lab where you won't be disturbed. Take the Red Book.
  2. Log on to computer and open the Scan Program

Load Room Scan Into PhotoShop
  1. Locate image in folder you save it in; right click on it and Open With PhotoShop
  2. Rotate canvas if necessary: Image/Rotate Canvas then choose an option e.g. 90 degrees CW (clockwise)
  3. If scan is dark or full of scan marks, try Image/Adjust/Levels: drag right arrow left until image whitens without losing too much line detail; click OK.
  4. Alternatively (or in addition) choose Eyedropper Tool in the Levels dialogue box--the one on the right is the WHITE eyedropper sampler--then click eyedropper tool in white area of building image.
  5. If you need to restore (or improve) line contrast, choose Image/Adjust/Brightness-Contrast and drag slider of either brightness or contrast or both right until things look good then click OK.
  6. Yet another way of achieving definition is to use Filter/Sharpen/Sharpen Edges which you can repeat until the lines are restored and look black enough.

Clean Up Room Scan Image
  1. Select White as foreground color. To ensure a white that matches your image white, select the Eyedropper Tool, click in the white area of your room plan. That ensures the white you paint will be the white of the floor plan image.
  2. You can check this is a clean white by clicking on the now white foreground color box; a color dialogue box appears. Make sure the box labeled Web Colors Only is ticked and if there's a small circle in to very top left corner, your white is about as white as white can get.
  3. Select Paintbrush Tool. If brush size dialogue box is not showing, go Window/Show Brushes and you can select brush size from the top row.
  4. Use Magnifying Glass if necessary (probably) and go in and around cleaning up spots and so on and erasing any writing that may have been on the image.
  5. If the image still looks dirty or spotty, you can perform the Image/Adjust/Levels tricks again. It often helps to have the image magnified when doing this, speaking of which, a handy shortcut when using the magnifying tool is CTRL-plus sign increases magnification and CTRL-minus sign decreases the magnification.

Crop, Size and Save Image to Desktop
  1. Select the Rectangular Marquee Tool.
  2. Define area then choose Image/Crop
  3. Select Image/Size and change Resolution to 100 which will alter the pixel width & height of the image.
  4. Ensure width is something like 600-750 pixels and height 250-400 pixels more or less.
  5. The resolution should be no smaller than 72. Playing with that number, for
    example increasing resolution to 80 or 90 or anything between 72 and a hundred,
    more or less, will alter the height and width of the image and this playing alone is often enough to size your image nicely
  6. An alternative to playing with resolution size: If you need to make image smaller, ensure Constrain Proportions box is ticked then change/adjust width and/or height (changing one changes the other IF Constrain Proportions is ticked, until you get image size so it will fit web page nicely.
  7. If image is too small, undo (if necessary) resolution change (Ctrl-Z) and play with Resolution (making it MORE than 100) until image falls into suitable zone (600-750 pixels wide and 250-400 pixels high).
  8. Make a note (on paper) of the image height and width in pixels to use in step 3e (below)
  9. Save image to desktop before painting rooms yellow: this is simply to test the image first to see it fits the webpage nicely for viewing, without viewer having to scroll. Once you're confident about image sizing, you could go directly to yellow painting (below)

Create New Webpage for New Building Floor
  1. Use a former webpage for your template by opening an existing file in FrontPage e.g. 165.htm (a one floor building)
  2. Save the new page. e.g. open 165.htm then Save As 178.htm
  3. Once saved as new page, immediately change features of the page in the code view of FP. Change items in code to match change from 165 to 178 (changes in green color):
  4. META NAME="Description" CONTENT="Buildings 178"
  5. META NAME="Keywords" CONTENT="equipment,room,rooms,building, 178"
  6. TITLE Buildings 178 /TITLE
  7. Change the heading H4 to reflect new building info: the old one: H4 Buildings 165 - Classrooms and Offices /H4 so new one will look like: H4 Buildings 178 - Classrooms and Offices /H4
  8. You will most often have to change other features from the old page to match what the new page is and/or can do. If the new page has more than one floor, add some "jump to" features (or remove them). Change the date created in the code.

Delete Old Image Map and Alter Image Information
  1. Delete the old image map in the code view. (i.e. everything including and between the MAP tags (MAP NAME="FPMap0") and (/MAP). You will be later making a new image map for the new building.
  2. Change the features of the old image to match the new image you created in PS and which is sitting on your desktop. The old image code will look like this: (img src="/images/165.jpg" border=1 width="648" height="282" alt="Building 165" usemap="#FPMap0" /). Remove the usermap feature (usemap="#FPMap0"). So your revised version might look something like this: (img src="/images/178.jpg" border=1 width="655" height="275" alt="Building 178" /)

Color Rooms with Equipment
  1. In PS, Ensure image is in RGB mode (Image/Mode/RGB). This is important.
  2. Choose correct yellow to color in (first) room with equipment. Color is #FFFF99
  3. Down and dirty way to get this color is to open a former jpg with the yellow in it, then use eyedropper tool to select the color (as foreground or background). Change from eyedropper tool to paint tool.
  4. An easier way is, to click on the foreground color box in the toolbox, then click on the YELLOW area (occupies one box) in the vertical color bar. Have Only Web Colors selected. The third yellow from the left on the top row is FFFF99.
  5. Select image you wish to paint with FFFF99 yellow as your foreground color. With paint tool, color in the image. This creates a new layer.

Label Rooms with Equipment
  1. Change foreground color to black.
  2. Select Type Tool
  3. Click on yellow part of the room.
  4. Choose typeface (ArielNarrow) choose Bold and choose a size (which may be anything between 12 and 24 or more; experiment until it is a good size).
  5. Choose Move Tool and move the room number to more or less center. You may want to type in type of room e.g. “classroom” in which case repeat process but change Ariel Bold to Regular and reduce size of print. Move it into position when you are done.
  6. Layer/Flatten Image. This is necessary in order to save the image as a jpeg. It eliminates/flattens the layers you have created. You can do this either in the open Layers pallette or from Layer/Flatten Image.
  7. Save image to desktop as a jpg and then add it to FP images as per above.

Add New Image to Website
  1. Click Web Site tab in FP
  2. Minimize FP
  3. Open Rooms folder
  4. Select a building level folder e.g. 100
  5. Drag and drop from desktop new floor plan image (e.g. 178) to Images folder within Bldg 100 folder
  6. Select webpage tab for building you’re working on (e.g. 178.htm) and maximize FP again.
  7. Choose Preview tab at bottom of FP screen and check how image looks. Adjust if necessary in PS; otherwise, you are ready to add image map.

Make an Image Map of the Building Floor in FP
  1. Open the page in Design View (far left choice at bottom of page)
  2. Click on the image to select it.
  3. View/Toolbars/Pictures (to bring up toolbox)
  4. Select Polygonal Hotspot
  5. Move Pencil Tool to edge of yellow area, click, drag tool to next spot, click and so on until you get back to your starting point, click on starting point to complete the polygon (you can add any number of points and so define an area of any shape.
  6. Clicking on starting point brings up dialogue box. In the address line type the name of the page you want the viewer directed to when s/he clicks on the spot you have made a 'hot spot' e.g. 180_236.htm takes viewer to html page describing what's in room 236 of building 180.

Create New HTML File for Room
  1. In FP open an existing room file (describing what's in a room): open one in the same building if possible; if not, some previous file e.g. 180_236.htm
  2. Alter the information in code view to reflect new building information and numbers. Meta Information, Title, Heading information, what's in the room, additional information, date modified, links to other floors and so on.
  3. Save new file as new building. If you don't do this, the information in the 'template' you used will be changed and you'll have to do THAT over again, which is why I recommend changing the name immediately THEN altering the information.
  4. Test by saving then viewing page in Explorer, along with links.

Update Equipment in Rooms Page
  1. Create a link from the floor number of the particular room to the floor's html page
  2. Open the Equipment in Rooms page.
  3. File/Open With/FrontPage
  4. Open Code view
  5. Find the room number
  6. Enter the following in front of the number: [carrot]a href="/175_1.htm"[carrot] or whatever the name of the html file for the page is.
  7. Test and debug if and as necessary.
Note About Files Names
  1. There is a folder for each building ‘zone’ e.g. Folder 100 contains all info regarding buildings and rooms and images related to any building in the 100 zone; Folder 200, 300 and so on.
  2. 180_1 is building 180 first floor; 180_2 is building 180 second floor and so on and thus, as these are html files, 180_1.htm is the html file showing the map of building 180’s first floor.
  3. 180_101.htm is the html file detailing building 180 ROOM 101. These ‘room files’ are reached by clicking the clickable image map of, for example, the yellow area defining room 101 on the Bldg 180 map at 180_1.htm


]]>

MENU
CLOSE X Equipment Loans