|
Creating web pages of Teaching Experiments is a relatively simple and
quick procedure. However spending a little more time optimising the quality
of graphics in the experiment will greatly enhance the overall appearance
of the Teaching Experiment on the web.
Converting the Word document to HTML
Open the Microsoft Word editable version of the Teaching Experiment you
wish to convert to HTML format. Choose 'Save As HTML' or 'Save As Web
Page' from Word's File menu. Choose a location to save the file to — preferably to a new folder
on your desktop. Note that Word will convert the embedded graphics within
the editable version of the Teaching Experiment into GIF images, and will
place each of these images in the same location, and at the same level,
as the HTML file. It is therefore helpful to save the file into a newly
created folder, so that all the GIF images will also be saved to this
location, separate from other files.
It is important to keep the images in the same folder as the newly created
HTML file. Shifting the images to another location (e.g. into a folder
of their own), will break the relative links in the HTML file, and the
images will not be found. If you wish to change the location of the images,
you will need to update the links in the HTML document to point to the
new location of each image.
If you have a good working knowledge of HTML, you can do this within
a simple text editor, or HTML editor such as BBEdit. If you are not familiar
with HTML, then we recommend you use a HTML WYSIWYG editor such as Macromedia Dreamweaver, Microsoft FrontPage or
Claris HomePage.
Note that for Teaching Experiments that contain experimental formulae,
the formulae may be lost when the Word document is converted into HTML
format. This is because only a limited number of scientific symbols are
available in HTML. As a workaround we suggest you take a screen capture
of all formulae and embed them in the HTML document as images.
Improving the quality of the images
The images embedded within the editable version of the Teaching Experiment
have been optimised for printing. Unfortunately because of their specific
format, they do not present very clearly on screen. When the editable
version is converted to HTML, the GIF images created retain their same
poor screen quality.
Since it would be more helpful to provide clear images for your students,
we suggest you follow the steps below to replace the GIFs generated by
Word with ones captured from the PDF version of the experiment.
Screen Captures of PDF images
Firstly, open the PDF version of the Teaching Experiment. Using the Zoom
control, enlarge the file so that the first image fills the screen. (Enlarging
the image will ensure the image is of the best quality.)
Now capture the image using a suitable screen capture application, or
simply using the appropriate command for your computer to capture the
screen area. SHIFT-COMMAND 4 on a Mac produces a cross hair cursor which
you can click and drag to define the boundary of the part of the screen
you wish to capture. Images are saved onto the hard drive as Picture 1,
Picture 2 etc. In Windows, ALT Print-Screen copies the active window to
the clipboard.
Continue taking screen shots of every figure in the PDF, including any
smaller images that may not have a caption, such as LabChart icon, View buttons
etc. If you work successively through the PDF from Figure 1 to the last
image, the numbering of the images will be retained in chronological order.
This is important for the next step.
Preparing the images
The next step is to prepare the images ready for the web page, in an image
manipulation application such as Adobe Photoshop, Equilibrium DeBabelizer
or Corel PHOTO-PAINT.
Open each image in turn. Crop the image to near the outside border of
the figure. Next, erase parts of the PDF borders that may have been captured
on the corners of the image. Resize the image to be 500 pixels wide. Leave
the height to be free to scale in proportion to the new width. If you
do not have a WYSIWYG HTML editor application (e.g. Dreamweaver), then
note the dimensions of the image (width and height, in pixels) for later
use.
Save the image in GIF format, (optimised for web palette if prompted
by the application).
For best results, we recommend you use Adobe Photoshop (using the 'save
for web' command), or Equilibrium DeBabelizer. After cropping and erasing
unwanted elements, reduce the colour depth to "dithered 256 colors".
Resize the image to be 500 pixels wide. Note the height and save the image
in GIF format.
If you do not have access to Photoshop or DeBabelizer, and you are interested
in displaying quality web graphics, contact your local
ADInstruments distributor for assistance with preparing graphics.
We can send you a folder of optimised graphics.
Replacing the Word-generated GIFs with optimised
images
Create a new folder and give it a name (e.g. Respiration_Expt). Inside
this new folder create another new folder and name it "webgraphics".
Move the optimised images into it.
The next steps depend on whether you have access to a WYSIWYG HTML editor:
If you do NOT have a WYSIWYG HTML Editor:
- Now repeat the procedure "converting the Word
document to HTML" above. This time save the HTML file into
the newly created folder (e.g. Respiration_Expt). Do not close the
file. Instead, with the HTML file created and still open, scroll
to the first image, and select it. Using Insert > Picture >
From File, replace this image by pointing Word to the folder containing
the optimised images, and selecting the first image. Work successively
through the document replacing each Word image in turn with the
optimised image in your 'webgraphics' folder. Save the document
before quitting.
- Word will have saved the new images with the dimensions
of those that were replaced. This needs to be edited. Open the HTML
document in a simple text application, like SimpleText or Notepad,
and scroll down the HTML text until you find the first img src tag,
for example:
<img src="path to your first image/image1.gif"
width="?" height="?">. Change the width and
height dimensions to those of the first optimised image. Repeat
for all other images, specifying the appropriate dimensions.
- Finally, to clean up, delete the word generated GIF
images, and any other copies of the HTML document you are not using.
If you DO have a WYSIWYG HTML Editor:
- If you have Dreamweaver, FrontPage, or another WYSIWYG
HTML editor, open the HTML file in the HTML editor, and replace
the links to the Word-generated images with the optimised images.
- While you are editing the HTML document, you might
like to create a table to encapsulate the document - for example
you could limit the width of the bounding table to 600 pixels. With
the images set at 500 pixels wide where appropriate, this will result
in a reasonably balanced looking web page.
- Finally, to clean up, delete the word generated GIF
images, and any other copies of the HTML document you are not using.
|