Creating Web pages for your animation or other 2-d pages.
		PageOne> Animation
		1. Open Dreamweaver from the software folder in your dock. Create a new html page. There are two things you can do before you name and save this document (which we do at the beginning so that we set up our website and get in the habit of saving often.) First, type a name for your page in the title box at the top of your new document window. This is the name that shows up at the top of a browser window. Then go to the top menus >modify>page properties. Here only select a background color. Click and select in the llittle background box with the black triangle in it.I recommend a light grey background but white is nice too. Do whatever you want though.
		2. Back in your document window make sure you have these windows open, and if you don't then go to menu >window and select >insert and >properties and >files.
		3. In the insert window, the common tab shows a row of icons. Choose the fourth one from the left to insert a table to organize your page. The table window opens. Specify the number of rows and columns.( For a color wheel 20 each is a good starting number. For the animation, 3 to 6 will work.) So that the table does not actually show up on the internet make sure there is a 0 in the border thickness box. Table width can be in pixels or percentages. If percentages make sure you enter a number less than 100. You can also change these numbers later—when you select the whole table a properties window opens and you can reenter all these numbers.
		4. The table is made up of cells. Click in a cell to place your animation. Then go to the insert common tab and select the fifth icon from the left called the images inserter. You will be directed to locate the image or in this case the animation you want to insert. Find your animation in the 2d folder or if you are working on the color theory web pages go the the color folder.
		5. Your animation won't play in the dreamweaver window. To get a preview, go to the little globe in the bar at the top of your document window. Choose to preview in firefox. Remember that this is only a preview and even though it looks like it is on the internet, it is not. You still have to load it to the college's server.
		6. Close the preview window and continue working on the page.
		Create a Site, Load it on the internet
		7. See the files window at the right of your screen. It may be a single column. Click on the manage sites text. Select new and site in the popup window. At the top of the next window choose advanced.
		8. For site name type your name or user name. Then click on the folder to locate your web folder on the desktop. Remember, you should have a folder for only your web pages and images ready for the web. Inside this folder you should have made a folder called 2d. Anyway, locate the web folder, not the 2d folder. Then locate the same folder for the default images folder.
		9. Now select the Remote info button on the left side of the window. For access choose FTP.
		10. For host type just this: ftp.bethel.edu. For host directory type public_html
		11.Enter your login name and password. These are the ones you use for e-mail at Bethel. Click ok. And then click Done to get back to the working window.
		12.
		Create a transformation
		12. Select both shapes by dragging a marquee with the black arrow, across both shapes. They are selected when blue lines and anchor points are showing.
		13. Double click on the blend tool (10th tool down on right side of tool box). If the spacing says smooth color, change it to specified steps. This creates the number of shapes between the ones you have selected. Click ok.
		14. With the blend tool click on an anchor point on one shape. Then click on one on the other shape. When you select the second anchor point the blend tool converts the two shapes into a morph from on shape to the other. It creates shape transformations and color transformations.
		15. To separate the transformation into individual shapes, go to object menu>expand. Both fill and stroke should be selected.
		16. Then ungroup the parts: go to object menu >ungroup. Before the expand or ungroup will work you want to make sure that what you want to expand or ungroup is selected (blue anchor point and lines showing).
		17. Next you will create separate layers for each shape. Go to the layer list and click on the little black triangle in the upper right side. A drop down menu appears. Go to and select >release to layers (sequence).
		Save as Photoshop document
		18. Now export the Illustrator document as a photoshop document by going to file>export. Name the document and change the format to Photoshop (psd). Do not save this into your web page file called 2d. Save to another folder but pay attention to where. Click on the black triangle on the right side to see exactly whick folder and where you are saving.
		19. The next window that opens is important. Make sure the color mode is RGB. Resolution should be Screen (72ppi). Also make sure the write layers button is selected. Click ok.
		Prepare to Animate
		19. Open Photoshop (you can open image ready directly but you might as well get used to working in Photoshop. Next go to file>open and locate your new transformation document. Open it.
		20. Switch to Image Ready by clicking on the button at the bottom of the tool box. If you hold the cursor over it it will tell you Edit in ImageReady. The document will open in ImagerReady.
		21. Open the animation window if it isn't already there. Go to window>animation.
		22. On the animation window, click the small black triangle on the upper right side for the drop down menu. Select >make frames from layers. You will see new frames open in the animation window.
		23. Go back to that little triangle and >select all. Then again >copy. Then click on the last frame in the animation window.
		24. Go to the drop down menu again and choose> paste and paste after the selected from. Then again choose >reverse frames.
		25. You can watch your animation by click on the play button at the bottom of the animation window. Also see there that you can delete frames if you select them and click on the trash can. Or you can add frames if you want to add something or change the order. You can click on frames and move them around to change the order of the animation as well (but not for this project at this time).
		26. Next make sure the optimize window is open. Go to window>optimize. See there that the format is GIF. You can also reduce the number of colors since your document probably only has 10 or so colors in it. Make it 64 colors if you want.
		27. Now save the document>file menu> save optimized as. Save the document to your 2d folder for the web. Make sure the name is lower case and one word with no spaces. It must end with the .gif extension. ImageReady automatically adds this. But if you delete it you will have to add it back. Now you are ready to load your animation in dreamweaver for the internet.
		Page Two> Web page creation