Dakota State University



[pic]

This Tutorial was Created by Dawn Gaffney and Modified by Melissa Gioglio.

[pic] Opening FrontPage

[pic] Opening A Web

[pic] Getting to Know the Workspace

[pic] Working with Explorer

[pic] Creating your First Web Page

[pic]Inserting WordArt

[pic] Adding Text Animation

[pic] Inserting Hover Buttons

[pic] Using Bookmarks

[pic] Finding custom Backgrounds

[pic] Publishing Web Site to a Zip Disk

[pic] Web Design Resources

[pic] Opening FrontPage

1) Start your computer and log on.

2) Click on Start, Programs, Internet Application, [pic] (this is one of those times when your machine might be different, if you can’t find the button for FrontPage look for it on another menu.)

3) The Microsoft FrontPage window will open on your screen.

4) If you are prompted for a user name and password, click cancel.

[pic]

[pic] Opening a Web

1) Go to the Menu Bar, click on File.

2) A menu will appear, click on [pic] . (*Please note- it is very important to click on Open Web, not Open.)

3) The Open Web dialog box will appear. On the bottom of the screen notice the Web name: area.

4) In this area type the complete URL of the web you would like to open. For the sake of this tutorial, type For example, if I wanted to open up my web site I would type in

[pic]

5) Click on the Open button. You may be prompted for your user id and password. Use the same ones that you used to log on to the computer and click OK. If you are logging in from home, or anywhere outside the DSU network, type dsunt\ and then your normal password and then click OK.

6) Your web will now open. You can enlarge the screen and manipulate it in any way you would like.

7) If you get any kind of an error message, click OK, Cancel, and Close FrontPage. You will need to move to a different computer, if there are no other computers available, we will create a web for you on the desktop.

• Getting to Know the Workspace

Views Bar- shown by default at the left of the workspace in Microsoft FrontPage, lets you switch quickly from one view of your web to another. Going to the Menu Bar and clicking on View, Views Bar, can remove this bar.

Folder List- allows you to manage all of your folders and files; it is similar to Windows Explorer.

Front Page Editor- this is where you do the work on your actual page.

[pic]

Menu Bar- very similar to the Menu Bars that you might see in Microsoft Word. There are of course some variations.

Standard Toolbar- formatting toolbar * Note the undo button.

Page View Tabs- allow you to take a look at your web page in three different views. The Normal tab is the one you will want open while you are editing your page. The HTML tab will show you the HTML behind the scenes. The Preview tab will show you what your page will look like in a browser.

*Please note- you cannot edit your page when you are in the Preview mode.

Estimated Download Time- This box shows you how long it will take your page to load on someone screen. The default setting for this is 28.8 modem, which is probably the slowest computer that you would be concerned about.

Window Tab- These tabs appear to show you what documents you currently have open. This feature allows you to easily switch from document to document.

[pic] Working with Explorer

So far you have opened FrontPage and opened your web, now what? Before you actually get started creating a web page, it is important to understand how to use the Folder List. If you have used Windows Explorer, you will find it similar to that program.

1. Before you get started you might want to make a little more room on the page. To get rid of the Views Bar, go to the Menu bar and click on View. Click on Views Bar, you should now have a little more room to work with.

2. Right click your mouse on the main folder, which should say , in the Folder List window. If it is selected it will turn blue. A menu will appear.

3. Click on New, another menu should appear, click on Folder.

4. Name your folder Images. Create folders labeled as Family, Friends, Documents, and Classes. To rename the folder, start typing the new name. If you can't type or rename the folder, right click on it. Another menu will appear. Click on Rename.

5. Click anywhere inside of the Folder List, your folder will be renamed.

6. To delete a folder, right click on it, choose Delete from the menu.

**Please Note: folders are a great way to organize your site. It would be a good idea to put all of your images in one folder, your word documents in another folder etc. This way it is much easier to navigate through all of your pages.

[pic]

[pic] Creating Your First Web Page

|Setting up Your Page |

Using Tables- When you are creating your first web page, getting started and trying to think of a design can often times be the hardest part. A good tip to remember is that tables can be used to organize various images and text tools on your page.

1. On the right side of your screen you should see a large gray or white area, also known as the FrontPage Editor Window, go to the Standard Toolbar and click on the New Page icon, it should look like a white rectangle. Create several new pages.

2. Select the Default page.

3. Right click your mouse inside the Editor window. A menu will appear.

4. Click on Page Properties. The Page Properties window will open.

5. Click on the Background Tab.

6. In the Colors section, click on the down arrow next to the Background: box. 

[pic]

7. Click on More colors. Click on the Custom button and change the RGB colors to Red: 0, Green 0 and Blue 102. Click on the Add to Custom Colors button. Click on OK, click OK.

8. Click OK again. The background color of your page should now be the color we formatted.

|Inserting a Table |

1. Go to the Menu Bar and click on Table. A menu will appear.

2. Slide your mouse over the Insert option, there should be an arrow next to it and another menu will appear, click on the Table...  icon. If the table icon is not visible, click on the down arrows to expand the menu.

3. The Insert Table dialog box will appear. Change the settings so they look like the following image:

[pic]

** Note that we made this first table 640 pixels wide. This is the size of most screens. If you make it wider some people will not be able to see all of your web page on their screen. 

4. Click on OK.  The table will appear on your screen. 

5. We will do more with the table we just created later on in the tutorial, for now take your mouse and click underneath the table.

6. Insert another table with the same specifications as the other table.. do you remember how? Go to the Menu bar....

|Saving your Page |

1. Although we have not yet done much to your page, this would be a good time to save it. Make sure that you save your page often so that you don't lose any of your work. 

2. Go up to the Standard Toolbar and click on the Save icon [pic]. The Save As dialog box will appear. Do not change the drive to your zip or floppy A. Leave it as it is.

*Note, the name default.htm is the cover page of your web. FrontPage automatically opens this page in a browser.

3. Click Save, your page is now saved.

|Inserting an Image: |

1. To insert an image we need to go out the Internet and select one from a web site. Open Internet Explorer, Athletics, and locate the Dakota State University Logo on the bottom of the page.

2. Right click on the logo, when the menu appears, click on Save Picture As.

3. Save the picture to your disk or to a place on the C: drive where you can find it. Name it dsulogo.gif. Click Save and close Explorer.

4. Go back into Microsoft FrontPage Folder List.

5. Single click on the Images folder to select it.  Click on File, Import, Add File, browse for the dsulogo.gif file you just saved, double click on it.

6. If you have several images you want to import, click on Add File again. Find the next image and double click on it. Click OK.

7. Click your mouse in the topmost table, go to the Formatting Toolbar and click on the Center icon.

8. Go to the Standard Toolbar and click on the Insert Picture from File icon [pic].

9. Browse for your images folder, double click on it. Find the dsulogo.gif image that you imported and double click on it.

10. Move your cursor into the table below, and right click, click on Table Properties.

11. In the Background section, click on the check box next to Use background picture. Click on the Browse button, go to the images folder and double click on dsulogo.gif.

12. In the Specify Width section, change the Table width to 607. Click OK.

|Adding and Editing Text |

1. Your cursor should still be in the lower table. Go to the Formatting Toolbar and click on the Center icon [pic].

2. Type your name, highlight the text by holding down your mouse and sliding it over the text you just created. Go to the Formatting Toolbar and change the font using the various tools.  

3. Place your cursor at the end of the text and hit the Enter key. Type a welcome message and format the text.

|Saving your Page: |

1. Go to the Standard Toolbar. Click on the Save icon [pic] again. Notice that the Save As window does not appear. 

1. Click on the Preview tab, at the bottom of the Editor window, to see what your page will look like in a browser.

|Adding Links |

1. Type DSU in a cell of your table, go to the Standard Toolbar and click on the Insert Hyperlink icon [pic]. 

2. The Insert Hyperlink dialog box will appear. Type in the Address: window.

[pic]

11. Click OK. Your text should now be highlighted and underlined. Your text will also change to a different color. Right click on the page and click on Page Properties, click on the Background tab. Under the Colors section, click on the down arrow by Hyperlink, click on the dark blue box under Document’s color. You can also change the colors of the visited and active hyperlinks on the page. Click OK.

|Using Links to send Email |

1. Key the text Email Me in another cell of your table.

2. Click on the Insert Hyperlink icon [pic].

3. On the left side of the dialog box there is a Link To: section, click on Email Address.

4. Type your email address in the text box below E-mail address. When you start typing FrontPage will automatically insert the text mailto: do not delete this.

[pic]

5. Click OK and save your work.

|Linking to a Microsoft Word Document |

1. Select your Documents folder.

2. Go to the Menu Bar and click on File, Import.

3. The Import widow will appear. Click on Add File. Browse on your disk or on the computer for the autobiography word document you previously created for an assignment. Double click on the document. 

[pic]

14. Click OK.

15. It might look like nothing happened, but double click on the documents folder and the document will appear.

16. Go back inside FrontPage Editor. Highlight the word Autobiography.doc. Click on the Hyperlink icon [pic].

17. The Insert Hyperlink window appears. Click on Existing File or Web Page. Browse for the documents folder you created, double click on it. Double click on the Autobiography.doc. Your highlighted text should now be underlined.

18. Click on the Save icon. Go to the Standard Toolbar and click on the Preview in Browser icon. Click on your hyperlinks to test them.

19. Go back to FrontPage.

|Creating a New Page |

1. On the Standard Toolbar click new page button.

2. Select File, Save As, and rename the page. Click Save.

** Important note, make sure that you save the page you were working on before you do a Save As. If you do not, you will not save the changes that you made. Also, to not change the page to conform to the new page until after you have done a Save As.

3. Go to the Menu bar, click on Table, Insert, Table. The table should be centered and have six columns and three rows (modify your table if necessary). Click on the check box next to Specify Width, change the value to 500. Click on the radio button next to In pixels.

[pic]

4. Click OK.

5. Enter your information.

6. Go to the Menu bar and double click on the Format Painter icon.

[pic]

7. Move your cursor to the table, highlight the other text that you typed, it should change the formatting of that text so that they are all formatted the same.

8. Go back up to the Menu bar and single click on the Format Painter icon to deselect it.

9. Right click in the first row of the schedule table and click on Cell Properties. Click on the down arrow next to Background, click on a color to choose it or click on More Colors. Click OK.

10. If you need to change the color of your text, highlight the text and go to the Formatting Toolbar, click on the down arrow next to the Font Color icon. Click on a color to select it.

11. Click anywhere in your page to deselect the text. You may add more information to the table if you would like.

12. Save your page, go to the Standard Toolbar and click on the Preview in Browser icon.

13. Go back to FrontPage. If you want your schedule table to have a border, right click on the table, click on Table Properties and change the border to 1. You can also change the color.

14. Click your mouse just under the schedule table to move the cursor there, type Back to Home, format it how you would like.

15. Highlight the text Home, and click on the Insert Hyperlink icon. Browse to the workshop folder and double click on the default.htm file.

16. Save and preview your page again.

|Making an image a hyperlink |

1. Go to the Folder List, double click on your default.htm page. Move your mouse over the image at the top of the screen and click on it. You should notice little boxes pop up on your image.

2. Click on the Insert Hyperlink Icon [pic]. The Insert Hyperlink dialog box appears.

3. Type in the Address text box. Click OK.

4. Save your page.

|Adding Extras: |

Hit Counter:

1. Go back to FrontPage.

2. Make sure that your default.htm page is visible. If not select the default page tab or go to the Menu Bar click on Window and then click on default.htm.

3. Click your mouse on the page, to the right of your welcome message and hit Enter a couple of times. Type Thank you for being visitor: Format the text how you would like.

4. Go to the Standard Toolbar and click on the Web Component icon [pic].

5. In the Component Type area, single click on Hit Counter.

6. In the Choose a counter style area, double click on a type to select it. You should then see a Hit Counter dialog box appear. Click on the check box next to Reset Counter to , change the number to 100. Click OK.

7. Click the Save icon.

8. Look at your page in your Internet Explorer. Remember to hit Refresh.

9. Hit Refresh again and notice your hit counter change.

Time Stamp:

1. Place your cursor at the end of the line, behind the hit counter. Hit Enter, type Page last updated: and format it how you would like. Go to the Menu Bar and click on Insert.

2. Click on Date and Time... If Data and Time is not visible, click on the down arrow at the bottom of the menu. The Date and Time dialog box appears. Leave the default settings. Click OK.

[pic] Inserting WordArt and AutoShapes

1. Go into FrontPage, your default.htm file should be open.

2. Go to the Menu bar and click on View, Toolbars, if there is not a check by Drawing, click on it. If there is a check by Drawing click on your page to get rid of the menu.

3. At the bottom of your screen you should have a Drawing Toolbar

4. Highlight your name, or title of the page and hit the Delete key.

5. Click on the Insert WordArt icon, [pic]

6. In the WordArt Gallery, double click on the design that is in the first column, third row to select it.

7. Type your name, or whatever you would like as the title of your web site, in the window. You can change the font and the size in here. Click OK.

8. Your WordArt should have little boxes around it showing that it is selected, if it doesn’t, single click on it. The WordArt Editor should appear. Click on the icon that looks like a paintbrush and a paint bucket.

[pic]

9. In the Fill section, click on the down arrow next to the Color box. Click on Fill Effects.

10. Click on the down arrow next to Color 1: click on More colors. Click on the Custom tab. Red: Should be 255, Green: should be 228 and Blue: should be 4.

11. Click OK.

12. Click on the down arrow next to Color 2: click on More colors. Click on the Custom tab. Red: Should be 22, Green: should be 37 and Blue: should be 104. Click OK.

13. Under the Shading Styles section click on the radio button next to From center. Click OK.

14. In the Line section, click on the down arrow next to Color: . You should see a box that is the same blue we used for the fill color, single click on it. The Dashed: line style should be a solid line and the Weight: should be set at 1.5 pt. Click OK.

15. On the WordArt Editor there is a button that has Abc on it, this is the WordArt Shape Icon. Click on it and then click on a shape you want your text to be. If your text becomes smaller, click on the boxes surrounding the text and drag them up.

16. Click your mouse so that the cursor is at the end of the graphic you just made, hit Enter.

17. Go back to the Drawing Toolbar and click on the down arrow next to the AutoShapes button. Click on Basic Shapes and then click on one of the shapes.

18. Place your mouse in the white area of your page, left click and hold down the button, drag your mouse down and to the right. Your shape should appear.

19. Double click on the shape, change the color and line, click OK. If the image covers any of your text, put your cursor at the beginning of the line of text and hit Enter.

20. Save your page and preview it. Your image is probably not where you would like it to be, go back to FrontPage.

21. If the image is not selected, single click on it, your mouse pointer should be a four sided arrow, click and drag your image to the location you would like it to be.

22. Save your page again.

[pic] Adding Animation

1. Click on the Image that we created as the title of the page,

2. Go to the Menu bar and click on Format, then on Dynamic HTLM effects… The DHTML Effects editor will appear on your screen.

3. Click on the down arrow next to the On: box. It currently says, .

[pic]

4. Choose Page Load from the menu.

5. You should now see that the box next to the Apply window has in it. Click on the down arrow next to the Apply window.

6. In the drop down menu, click on Spiral.

[pic]

7. Click the X in the upper left corner of the DHTML Effects window to close it.

8. Click on Save.

9. Click on the Preview in Browser button.

10. Hit Refresh if you did not see the animation.

[pic]

[pic] Inserting Hover Buttons

1. Go back to FrontPage, to the schedule.htm page by clicking on a window tab, just above the Editor window, it should still be open. If not, go to the Folder List and double click on it.

2. Go to the bottom of the page and highlight the text Home, hit the Delete key.

3. Go to the Standard Toolbar, click on the Web Components Icon [pic].

4. Under Component Type , click in Dynamic Effects.

5. Under Choose an effect, double click on the Hover Button icon.

6. In the Button text area type: Home. Hit the Font button and change the font size and color and click OK.

7. Click on the Browse button next to the Link to area. Find the default.htm file and double click on it.

8. Click on the down arrow next to the Button color: box and choose the gold color that we used in the web page. Use the down arrow next to the Effect color box and click on one to choose it. You can also change other options.

9. Click OK. Save your work.

10. Click on the Preview tab to see how your button looks. If you like how it looks, insert hover buttons for the rest of your links, replacing the text navigation. Click on the Normal tab.

[pic] Using Bookmarks

1. Open Internet Explorer and go to

2. Place your curser over the text, hold your mouse down and highlight all of it. Once the text is highlighted, go to the Menu Bar, click on Edit, Copy.

3. Now, click on Start, Programs, Accessories, Notepad. The Notepad Editor should appear on your screen. Click on Edit ,Paste. Use your mouse to select all of the text, go to Edit, Copy.

4. Go back into FrontPage. Open the schedule.htm page. Click your mouse to the right of the Back to Home link, hit Enter, then hit Ctrl+V. Notice that the text has been pasted but that it also has no formatting properties to it.

5. Go to the Formatting Toolbar and click on the Align Left icon. Click on the Increase Indent icon twice. Click on the Save icon.

6. Move your cursor to the bottom of the text, hit Enter. Type Top. Go to the top of the screen, highlight the Schedule title text, go to the Menu Bar, click on Insert, then click on Bookmark…

7. Leave the default setting and click OK. Save your page.

8. Go back to the bottom of your screen and highlight Top.

9. On the Standard Toolbar, click on the Insert Hyperlink icon.

10. Click on the Bookmark Button, double click on Schedule and click OK.

11. Save your work. Click on the Preview in Browser .Go to the bottom of your screen and click on Top.

[pic]

[pic] Finding and Using Custom Backgrounds

1. In Internet Explorer, go to . This is just one of millions of sites which have free backgrounds.

2. Scroll down and click on a link to a background page.

3. Browse the thumbnails for an image that you like. Once you find one, right click on it.

4. Click on Save Picture As.

5. In the Save Picture window, save your background to your disk or to someplace on your C: /drive that you will remember.

6. In the File name: box, type background. Click Save and close the browser window. Go back to FrontPage.

7. Click on the folder images in the Folder List.

8. Go to the Menu Bar and click on File, Import, and Add File…

9. Find the background image that you saved and double click on it. Click OK.

10. Click on the New Page icon, a blank page should appear in the Editor window.

11. Right click anywhere inside the page, click on Page Properties.

12. Click on the Background tab. In the Formatting section, click on the check box next to Background picture.

13. Click on the Browse… button. In the Select Background Picture window, Find the images folder and double click on it, .

14. Double click on the background picture you saved.

15. Click OK. Your background should have changed.

16. Click on the Save icon, make sure you are in the workshop folder. Name the page background.htm, click Save.

17. Click on the Preview in Browser icon.

[pic] Publishing a Web Site

* Publishing your web site to a zip disk, a disk or your hard drive is a very important thing to do. If you publish your web often you do not have to worry about making mistakes or deleting things that you still want to use.

1. Go back to FrontPage.

2. Insert a zip disk into the drive, if you have a disk go ahead and use that. If you don’t have a zip disk or a disk, go ahead and save it to the C: drive.

3. Go to the Standard Toolbar and click on the Publish Web icon [pic].

4. Click on the Browse button. Find your zip disk, disk or spot on your C: drive where you want to save your web to. Click on the New Folder icon and then rename the folder.

5. Click on Open.

6. You will get a prompt about converting the web, click OK.

7. Your Publish Web window should look similar to this image:

[pic]

8. Click on Publish. You may get another prompt, just click continue.

9. Click Done and your page is saved.

[pic] Web Design Resources

This section of the tutorial was designed to give you a few more tools you can use to create effective and well planned out web sites. There are millions of sites like these on the web, I have just chosen a few of my favorites. Enjoy!

□ Web Design-

1) Use it-

2) Usable Web-

3) Cool Homepages-

□ Tools and Utilities-

1) Web Master Station-

2) Web Site Garage-

□ Computer Tutorials-

1) Web Design Guide:

2) Training Tools:

|[pic] |E-Education Services |

| |201A Karl E. Mundt Library |

| |Madison, SD 57042 |

| |Email: dsuinfo@dsu.edu |

| |Phone: (605) 256- 5049 |

| | |

Your Web pages will be evaluated using the following criteria:

Name_______________________

Web Page Evaluation Form

1. Student name on the homepage.(2)_________

2. Scanned picture or a picture from a digital camera.(5)_______

3. A table.(2)_______

4. A hit counter.(2)_______

5. A timestamp.(2)_______

6. Link to your Pluto e-mail account.(4)_______

7. Links to other Web sites (include at least four links).(4)_______

8. Inserting a link to a document.(2)_______

9. Links, hover buttons, etc. to move around the Web pages.(4)_______

10. Enhancements, such as gifs, pictures, multiple pages, backgrounds, etc.(6)______

11. Number of pages: 1-4 Pages (4) 5-9 Pages (8) 10 + Pages (12) _______

Total Earned________/45 Points

[pic]

-----------------------



................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download