This web page has been designed to work with a browser that supports Dynamic HTML or Cascading Style Sheets
Home
Let's Create a Web Page
You must load the ".ims" file version of this tutorial. From your IMS program Select -File -Open Template "SpinWys.ims"
Position and Scale
The three yellow shaded Objects were created with a typical paint program and then loaded as 'GIF' images with the Sprite command (Mona Lisa button). These three Objects are actually the primary components of the Virtual Mechanics web site.
Select the "Corner" component with your mouse and drag it to the top left corner. (Its name will be displayed in the 'Page Tool Bar'). If you get it close to the corner you can release it and use the four arrow keys to nudge it into place.
Select the the horizontal "NavBar" and drag it adjacent to the "Corner" Object so that the bottom of the "NavBar" lines up with the top of the arc in the "CornerObject".
Select the "Edge" Object and drag it so that it is lined up below the "Corner Object". Position the cursor over the bottom center drag handle. The cursor will change to a verticle Up/Down Arrow. Select the handle and drag the bottom of the box towards the bottom of the screen. As you do, the "Edge" Object will stretch on the Y axis. There is no limit on how far you can stretch or scale an Object. When you release the "Edge" a small gap may appear between the "Edge" and the "Corner" Objects. Use the arraow keys again to nudge it into place.
Once you have all three Objects positioned correctly, you may wish to lock them into place to prevent accidental movement. This is accomplished by selecting the Lock/Unlock command in the Object menu or by pressing the 'Key' button on the Object bar. The Key symbol will change to a Lock symbol whenever a locked Object is selected. Simply press the Lock button to unlock an Object.
Select and Z axis
Select the "Home" text Object and drag it to the NavBar. As you move the text over the NavBar you will notice that it disappears behind it. With the "Home" Object still selected press the "To Front" button on the Arrange Bar. This will bring the "Home" Object in front of the "NavBar" Object. When Objects are on top of each other, you can select hidden Objects by holding the Shift key when making a selection.
URL Link
With the "Home" Object selected, open the Object Editor. (The button with a picture of a Tree, Circle and Rectangle). Select the 'Anchor' tab and check the box "Link to Page". Select 'WebPage' in the adjacent edit box. This is page two of this project. To make this Object disappear when the mouse is moved over it select the Options tab. Uncheck the box "Set Visible on Mouse Over". This will cause the 'Home' Object to disappear when the mouse moves over it.
Mouse Over and Visibility
To make the 'Welcome' GIF appear when the mouse moves over the 'Home' Object, drag the 'Welcome' GIF over the 'Home' text. If it is behind the 'Home' text, select the 'To Front' command from the Arrange bar or Arrange menu. To make this Object invisible until the mouse moves over it, with the Object selected, select the 'Object Editor' and select the 'Options' tab. Uncheck the boxes: "Set Visible on Loading", "Set Visible on Playing" and "Set Visible on Mouse Leave". This Object will now only be visible if the mouse moves over it. To create the link to the next Page, select the 'Anchor' tab, check the "Link To Page" box and select "WebPage" from the adjacent drop down box.
Browser Preview and HTML Output
Exit the editor and select the "Preview 3.2 HTML Project" button. (green >>). This will display your project within your default browser. Selecting the "Home" button will take you to the second page of this project so that you can compare your page to our finished example.
Create your HTML files with the 'Export' button. This will create two HTML pages. "WebParts.htm" is your modified page and "WebPage.htm" is our finished example.
