ࡱ > 9\ bjbjoo
S v 8 $ % G3 ( ( ) ) ) V $ 2 2 2 2 2 2 2 4 7 2 J @ 2 D% ) ) ! 3 D% D% D% ) ) 2 D% 2 D% D% ^0 h 1 t " 0 1 4 3 0 G3 0 u8 D% u8 1 D% 1 { :
Manual for Making A Jmol Tutorial
By John Kogoy (03) and modified by A. Malcolm Campbell
Getting Started With Your Jmol Tutorial
Things Needed
This manual
Your favorite PDB file (this package contains de-oxy hemoglobin as an example).
Template files (templateframe.html, templatebuttons.html, and templateleft.html)
A working knowledge of Jmol so you can manipulate your file to get the views you want.
Lets Begin:
Make sure all 4 files (PDB + 3 template web pages) are all in one folder. First thing to do is to create duplicates of the three html files (not the PDB file) so you can modify them but not lose the originals. Call the duplicates YFPframe.html, YFPleft.html, and YFPright.html.
Open the file called templateframe.html with a web browser. Click on the buttons to see what they do. Explore the code behind the web pages using View Source to help you become comfortable with way they are organized. In order to make your own tutorial, you must add the PDB file of your favorite protein to this folder.
It is important to remember that the process of creating a Jmol tutorial uses a text editor. We will be working with the html itself by typing commands into the html file. If you are new to html, dont be intimidated. Minimal knowledge of html is necessary.
Now we can get started. Open templateframe.html with Dreamweaver. Initially, you will see the full, two-frame web page, with the protein visible in the left frame, and the area for text and buttons in the right frame. In the top left corner, change the view from Design to Code . Now you will see the master frame page has very simple directions to view all three web pages simultaneously. In the html code, you will see, among a lot of other html, the following text:
Basically, this is showing us that contents of the frames are derived from other html files. The left frame will take up 70% of the view and the right frame will take up the remaining 30%. The frame containing the molecule is called Jmolleft while the frame with the buttons is called Jmolright. This templateframe.html page does not really contain any content, other than these directions and a title.
You will also notice the following:
The comment notation allows you to type words within the arrows without that information being displayed on the website. This is useful for making notes to yourself. You will notice hints and directions have been inserted throughout the source codes of the three template html files using this comment notation.
Editing the Master Frame
Open YFPframe.html with Dreamweaver in the Code view. Now we are going to direct the frameset to the two web pages that will be seen inside the right and left frames.
Make the changes shown in red below:
Congratulations, you have redirected the master frame html page to open two new pages, the ones you will create. Thats not too hard, is it?
Editing the Left Frame:
Open YFPleft.html in Dreamweaver and change the view to Code. The first modification you will make is changing the pages title. At the top, find the line
*3D Structure of *A PROTEIN*
Replace *A PROTEIN* with the name of your favorite protein (e.g. in my case it would be hemoglobin).
Next, you will insert your own PDB file. Look for the following text:
1a3n.pdb is the file for deoxy-hemoglobin. Within the quotes, replace 1a3n.pdb with the name of your PDB file. Also, notice the line name=myfavorite It is a good idea to change this to something that relates to the protein whose PDB file you are displaying, for instance, hemoglobin. Remember what you put down here because you will need it again for the right frame. You can change the pixel size of your Jmol window. Keep the window square though.
Congratulations again. You have just told the left frame to launch YFP in the default view. You can modify this default view, but that comes later and it is an optional consideration. Now all that remains is to create buttons that tell Jmol to perform the functions you want it to perform. In case you didnt realize it, you are learning a simple computer language and writing your own computer code. Not bad for someone who thought you could never do this. Moving along now.
Editing the Right Frame
Open YPFright.html in Dreamweaver and view the Code.
Fix The Headings
The default title reads
MY FAVORITE PROTEIN
Change this text to the title of your choice. Slightly lower you will see:
3D Structure of **A PROTEIN**
Change this too.
Fix The First Button
Scroll down a bit, and you will see some notations made using the
format.
After some text, you should also see the following command that creates the first button: