I have chosen to draw the caffeine molecule and will use this as my example throughout this tutorial.

Transcription

1 How to Create a Molecule in ChemDraw and Publish onto Webpage By Sean Wolosin I have chosen to draw the caffeine molecule and will use this as my example throughout this tutorial.. Open ChemDraw Std Decide upon what molecule you would like to create (I am drawing caffeine).. To the left of the draw page is a toolbar that contains all the necessary structures that you will need to draw any compound/molecule (bonds, rings, text tools, shapes, etc.).. Left click on the structure you need to draw. You will see the button for the structure change color when it is selected.. Left click on the cyclohexane ring. Bring the pointer to the main draw page and you will no longer see the arrow-head. You will now see a small cyclohexane ring structure.. Left click and hold in the area where you would like to begin your drawing. Move the mouse in any direction and your cyclohexane ring will appear. You can change the orientation of the ring by moving the mouse in different directions. Once the ring is the size you would like it to be and orientated the way you would like release the mouse button. You now have a line angle drawing of a cyclohexane ring. In the drawing for caffeine your ring should be oriented as follows (I have numbered each of the carbons in blue as to make this tutorial easier to follow. To do this I used the text tool and the marquee tool as well as the color button at the top of the page but more on this later): Side note: If you would like all of your structures to be proportional and relatively the same size in all of your drawings left click object at the top of the screen and then left click on fixed lengths and fixed angles. You will see check marks next to these options once you have selected them. You can also correct a mistake at any time by going to the edit menu at the top of the page and clicking undo. If you don t like that idea you can left click the eraser tool in the toolbar, move the cursor to your mistake until it lights up and left click. 7. ChemDraw follows the rules for drawing correct line angle drawings of molecules. What this means is that you can change your line angle drawings to form different structures by selecting any area of the line angle drawing that you choose. The great thing is that if you violate a rule, chemdraw will tell you. 8. So lets change some things in our cyclohexane ring; we want to add a double bond between carbon and carbon of our drawing. Go to the tool bar and left click the single bond structure (looks like a single line). Drag the cursor to the right side of the cyclohexane ring to the bond between carbon and carbon. You will see a blue rectangle light up in the middle of the bond when your cursor is in the right spot.. Left click on the bond. 0. You will now see a double bond between these two carbons.. Caffeine is a heterocyclic molecule with two ring structures actually bonded together. So we now need to draw this second ring structure. Go to the toolbar and left click on the cyclopentane ring. We are going to connect this ring to the double bond that we just created.. Drag the cursor over to the double bond until you see it light up with the blue rectangle.

2 . Left click on the bond. You now should have a cyclopentane that is connected to the cyclohexane. And your structure should appear as follows (I have given each of the new carbons numbers in blue) : 7. As stated earlier, caffeine is a heterocycle so not all the atoms in the rings are carbon. We need to change some of these carbons to nitrogen s.. Go to the toolbar and left click on the text tool (it is the button that is the capital A ).. Drag the cursor to the bottom carbon # on the cyclohexane ring until the joint between the two bonds lights up and you see a blue box. Left click and you can now change your carbon to any atom that you would like. In this case it is nitrogen so I type an. We will consider this to be #. 7. ow we need to add a few more nitrogen s to our ring. Moving your cursor to carbon #. Change this carbon to a nitrogen following step # to do this (we will designate this nitrogen as #). 8. We also now need to replace two carbons on the cyclopentane ring with nitrogen s. Drag the cursor over to carbon # 7 on the cyclopentane ring connected to the cyclohexane ring. Change carbon #7 to a nitrogen following step # and do the same for carbon #. I will now refer to these nitrogen s as nitrogen #7 and itrogen # respectively. Your structure should appear as follows:. At this point you should have nitrogen atoms (two on each ring) that have replaced carbon atoms in your drawing. You should notice the each of them has a box around it. This is indicating that something is wrong with your drawing. If you drag your cursor over any of these atoms you should see a black box form around the problem. 0. Right click on one of these atoms and you will be given a drop down menu. Scroll down and left click on Explain this Warning. At this point a new window will appear and will explain what is currently wrong with your drawing.. Click ok to close this window.. In our current drawing we have nitrogen atoms with invalid valence s (this is bad) so lets fix the problem. Turns out that three of these nitrogen atoms have methyl groups attached to them and one is double bonded to a neighboring carbon.. Go back to the nitrogen that we have designated as #.. In your tool bar click on the single bond button.. Drag your cursor over to # until it lights up, left click and hold down the mouse button. You can now drag the cursor and draw a new bond in any direction that you would like. I am going to drag it down so that the bond is straight down off of the nitrogen. Release the button and you now have a new bond. You will notice that the box originally surrounding the nitrogen atom has disappeared. This means you have corrected the problem that originally existed.. At the other end of this newly created bond we want to put in a methyl group. To do this using short hand you can simply click on the text tool, highlight the end of the bond (blue box will form) and left click

3 7. Type in CH. ow to change the notation (make the a subscript) you can do the following: a. On the toolbar left click on the marquee tool. b. Mover cursor over to CH and left click. You should now see that the CH is highlighted (looks like it is flashing). c. At the top of the page you will see a CH /Formula button. d. Left click the formula button. e. CH should now look like CH. 8. Repeat steps 7 for # and #7 (you should not need to click the formula button anymore at this point because everything you type in will automatically be changed to the formula version).. itrogen # and Carbon #8 have a double bond between them in the caffeine molecule. Click on the single bond tool, move the cursor over to the bond until it lights up and left Click. Your structure should now appear as follows: CH H C 7 8 CH 0. ow we need to add two oxygen atoms that are double bonded two separate carbon atoms and we are finished drawing our structure (yippee!).. Click the multiple bonds tool on the tool bar. You can actually select many different types of multiple bonds with this button by clicking on the arrow in the lower right hand corner of the box and dragging the cursor over to the bond type (triple bonds, hybrid bonds, etc ). For now we only need a double bond.. Drag the cursor over to carbon # until it lights up and left click and hold the mouse key. ow drag the cursor up to make the double bond. Repeat this procedure for carbon #.. ow we want to add oxygen atoms to the ends of the double bonds we just created. To do this click on the text tool on the tool bar, move the cursor to the end of the double bond until it lights up and left click. Type in O. Repeat this procedure for the second double bond. You now have a completed chemdraw structure for the caffeine molecule that should appear as follows: O CH H C 7 8 O CH Caffeine. The thing is even though we have our chemdraw caffeine molecule we are feeling both proud and ambitious and we want to publish our drawing on our website. The following section explains how to do this.

4 Section II: Publishing Chemdraw object on the web. Goto the file menu and left click save as.. Select the folder or area you would like to save the file in. I recommend saving it in the web folder that you have created to store all files that are being published to the web. Give the file a title.. This next step is very important. Under File ame is a window titled Save As Type. Click the down arrow to the right side of this box. A new window will drop down.. Select and left click on GIF Image or BMP Image (I am going to save my drawing as a GIF image).. Click save.. A warning bow stating that this document will not be able to be opened by ChemDraw will appear. Click ok. 7. If you choose you can save again as a chemdraw file so that you can re-open the file with chemdraw. 8. Open Mozilla.. Click on file on the navigation bar at the top of the page. 0. Scroll down to ew and click on composer page.. Click on file, scroll down to open file and open the index web page that you would like to add your chem. draw image to.. To publish the chemdraw picture from your computer (your own personal picture) do the following: a. Click Insert on the navigation toolbar. b. Scroll down and click on Image. c. A window entitled Image Properties will pop up. d. ext to Image Location is a box where you can type in the location of your image. e. Easier method is to click on Choose File and then find the image on your computer (should be in your web folder if you saved it there). f. Once you locate the image click on it and then click and then click Open g. ext to Alternate Text enter a brief description of your picture. h. Then click OK. i. Your Image will now be visible on your construct page.. Once you have finished adding media and content to your website construct page click File and then click Save.. If you want to preview the page before you publish it to the web you can click on the browse button located on the toolbar at the top of the page. This will allow you to navigate the page.. You now may close Mozilla.. Open FileZilla... If you do not have this program than go to the following website to download the file: 7. Once FileZilla is open find the open site manager button at the top left of the tool bar. Click the down arrow next to the button and you will see a drop down menu with two options (You must choose and click on your site. It should read something like seanjw@sas). 8. A new window will pop up asking you to enter your password. You must enter the password that you use for your SAS Webmail account).. Once you enter your password click Ok 0. If you successfully connect you will see this happen in the main status window (topmost window). If you do not successfully connect you will see a message that tells you that the computer is retrying to connect. This probably means that you entered an incorrect password. If this happens click disconnect in the file menu and retry steps - using the correct password.. Once you have successfully connected find the Web folder you created in the Local Site window. Double click on this folder to view its contents in the window below the Local Site window.

5 . To the right you will see a window entitled Remote Site with a number of folders. Double click on the folder entitled html. This is the folder that all web items must be placed into.. Once you have opened the html folder you can transfer the chemdraw GIF image that you would like to publish to the web. There are two ways to do this. a. You can click and drag the file directly from the File ame window to the Remote Site folder. b. You can right click the file from the File ame window and click on Upload.. You must also upload the index.html folder that you modified to the remote site folder.. Once you have transferred all files to the Remote Site folder check the permission for the file. If you don t have the proper permissions selected you and others may not be able to view the document on the web. To fix the permissions you can right click on the file in question and click File Attributes. This will allow you to change file attributes such as owner, group, and public permissions.. Click File and disconnect to end your session. 7. Open your server and navigate to your webpage to check if your picture is visible (It should be). 8. You are now done. Isn t that nice;)