On-line Forms

1. Creating the Form

2. Customizing the Confirmation Page

Framed Page

Style Sheets

Photo Album

Include Pages

JavaScript Navigation

Shared Borders and a Navigation Bar

Themes

E-Education Services Office

201A Karl E. Mundt Library

Madison, SD 57042

Email: dsuinfo@dsu.edu

Phone: (605) 256- 5049

Opening FrontPage

1) Start your computer and log on.

2) Click on Start, Programs, Microsoft Office Products. , .

3) If you are prompted for a user name and password, hit Cancel, go to the Menu Bar and click on Tools, Options, and deselect Open last Web automatically when FrontPage starts. Click OK.

4) Go to the Menu Bar, click on File, . The Open Web dialog box will appear.

5) Notice the Web name: area, type the complete URL of the web you would like to open. Type http://www.students.dsu.edu/<your user id>. Click Open.

Creating a Online Form

You may need to reorganize your workspaces. In the Folder List, right click on your main folder, click on New, Folder. Name it advanced, click anywhere inside of the Folder List window.
Click your mouse inside the Editor window. If there is not a page visible, click on the New Page icon.
Change the background, right click anywhere on the page and click on Page Properties, click on the Background tab, change the background color, it should probably be a light color, and click OK.
Hit the Center icon and type Online Questionnaire, format the text however you would like and then deselect it. Hit Enter a few times, hit the left align icon and change the font to a smaller, simpler one.
Go to the Menu Bar and click on Insert, Form, Form. Your cursor should be inside the form, if not click inside the form to place it there. Hit Enter once.
Hit the up arrow key once, your cursor should be at the top of the form. Make sure that it is left aligned. Insert a table that has 6 rows and 2 columns.
Your cursor should be in the first row, first column. If it isn’t, click there and type First Name: and hit the space bar once. Go up to the Menu Bar and click on Insert, Form, Text box.
Double click on the text box you just inserted, for Name: type First_Name, click OK.
Hit the Tab key, type Last Name: and hit the space bar once. Go up to the Menu Bar and click on Insert, Form, Text box. Double click on the text box and name it Last_Name.
Click OK and hit the Tab key. Use your cursor to highlight the entire row, right click on the row and click on Merge Cells. Type Address:, hit the space bar once.
Go up to the Menu Bar and click on Insert, Form, Text box. Double click on the text box and type Address, change the Width in Characters to 40 and click OK.
Hit the Tab key, use your cursor to highlight the entire row, right click on the row and click on Merge Cells. Type Email Address:, hit the space bar once. Click on Insert, Form, Text box. Double click on the text box and type Email_Address, change the Width in characters to 40 and click OK.
Highlight the next row and merge the cells. Insert a table that has 1 Row and 5 Columns. In the first column type Graduation Date:. Hit the Tab key, go up to the Menu Bar and click in Insert, Form, Option Button.
Double click on the Option button, under Group Name type Graduation, under Value type 2003, click on the option button next to Not Selected, click OK.
Hit the Tab button and type 2003, hit the Tab button and insert another Option button. Double click on the Option Button and under Group Name type Graduation, under Value type 2004, click on the option button next to Not Selected, click OK.
Hit Tab and type 2004. Do not hit tab again.
Place your cursor in the second to last row of your table and type Goals for this class:
Highlight the last row and merge the cells, click inside the row you just merged, go to Insert, Form, Text Area. Double click on the box, name it Goals, change the Width in characters to 60 and Number of lines to 10. Click OK. Format the text and table how you would like.
Click on the Save icon, name your file online_questionnaire.htm, save your work in the advanced folder we created earlier.
Right click inside your form and click on Form Properties. In the Where to store results to section, you should see a file listed in the File name: text box. Delete that information and click on the Options button.
Click on the Email Results tab. Type your email address (ex. dawn.gaffney@dsu.edu) in the first text box. In the Email Message Header section, for Subject line type Online Questionnaire in the text box.
Click OK. Click OK. Save your work and click on the Preview in Browser button. Fill out the form and click on the Submit button. You will get a Form Confirmation page on your screen and you should also have the form results in an email message in your email account.

Adding a Confirmation Page

1. Go back into FrontPage. Go to the Standard Toolbar and click on the New Page Icon, change the background color.

2. Go to the Menu bar and click on View, Toolbars. If Drawing does not have a check by it click on it. If it is checked you can leave the menu.

3. Click on the Insert WordArt icon,

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

5. Type Form Confirmation, 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. Click on the Center icon to center the text.

6. 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.

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

8. Click on the down arrow next to Color 1: click on More colors. Click on the Custom tab. Click on a light color.

9. Click OK.

10. Click on the down arrow next to Color 2: click on More colors. Click on the Custom tab. Click on a dark color.

11. Under the Shading Styles section click on the option button next to From center. Click OK.

12. In the Line section, click on the down arrow next to Color: . Click on a color to select it. The Dashed: line style should be a solid line and the Weight: should be set at 1 px. Click OK.

13. 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.

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

15. 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.

16. 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.

17. 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. Place your cursor after the graphic you just created.

18. Hit the Enter key a few times and the Center icon, type Thank you for filling out our form. Format the text how you would like.

19. Deselect the text and hit Enter again, click on the Left align icon and type Form Results:. Hit Enter. Insert a table that has 5 Rows and 2 Columns, make sure it is Left aligned and that the border is set to 0. Your cursor should be in the first row, first column.

20. Go to the Standard Toolbar and click on the Web Components icon, in the Component Type section scroll down to the bottom and single click on Advanced Controls.

21. In the Chose a component section, double click on Confirmation Field.

22. The Confirmation Field Properties dialog box will appear type First_Name and click OK.

23. Hit the Tab key, your cursor should be in the first row, second column click on the Web Components icon. In the Component Type section scroll down to the bottom and single click on Advanced Controls.

24. Double click on Confirmation Field, type Last_Name and click OK.

25. Hit Tab or put your cursor in the second row, first column, highlight the cells and right click, click on Merge Cells. Click inside the cell to deselect it, go to the Standard Toolbar and click on the Web Components icon. Click on Advanced Controls, Confirmation Field, type Address and click OK.

26. Put your cursor in the third row, first column, highlight the cells, right click, click on Merge Cells. Click inside the cell to deselect it, click on the Web Components icon, Advanced Controls, Confirmation Field, type Email_Address and click OK.

27. Put your cursor in the fourth row, first column, highlight the cells and right click, click on Merge Cells. Click inside the cell to deselect it, click on the Web Components icon. Click on Advanced Controls, Confirmation Field, type Graduation and click OK.

28. Put your cursor in the fifth row, first column, highlight the cells and right click, click on Merge Cells. Click inside the cell to deselect it, click on the Web Components icon. Click on Advanced Controls, Confirmation Field, type Goals and click OK.

29. Highlight the table and format the text and table how you would like. Click your cursor below the table, click on the Center icon. Type Return to DSU, highlight the text DSU and make it a link to http://www.dsu.edu . Format the text how you would like.

30. Go back to the top of your screen and place your cursor after Thank you. Hit the Web Components icon, click on Advanced Controls, Confirmation Field, type First_Name and click OK. Click on the Save icon, change the title and name your page confirmation.htm, click Save.

31. The online_questionnaire.htm page should be open and on your screen, click on the window tab to make it active. Right click on the form and click on Form Properties. Click on the Options button, click on the Confirmation Page tab. Click on the browse button, find the confirmation.htm page and double click on it. Click OK, click OK.

32. Save your page and click on the Preview in Browser button. Fill out the form and click on the Submit button.

Creating a Framed Page

Go back into FrontPage and close your online_questionnaire.htm and confirmation.htm pages, click on the New Page icon.
Change the background color, right click and hit Page properties, click on the Background Tab, change the background and click OK.
Type your name or whatever you would like to use as the title of the page, format it how you would like.
Click on the Save icon, find your advanced folder and double click on it. Name your page banner.htm. Click on Save.
Click on the New Page icon. Put in the title Links. Format the page and text as you would like, keep the text left aligned. Click on the Save icon.
Click on your advanced folder and name your page links.htm. Click on Save.
Go to the Menu Bar, click on File, New, and Page or Web.
On the right side of the screen you should see a new menu. Go to the New from template section and click on Page Templates. Click on the Frames Pages tab.
Click on the Banner and Contents icon.
Click OK. Notice that your page now has six buttons on the screen.
In the top portion of your screen, click on the Set Initial Page button. Double click on your advanced folder and double click on banner.htm. Adjust the border as you need to.
On the left of your screen, click on the Set Initial Page button. Double click on your advanced folder and double click on links.htm. Adjust the border as you need to
In the middle screen, click on the New Page button.
Type Welcome, and hit Enter. Now type a short welcome message and format the text and page how you would like. ** Note, do not leave the background color of the page set to the default or automatic. On some older browsers that defaults to a dark grey color.
Click inside the leftmost frame, under the Links title, type Online Questionnaire , you might have to highlight the text and format it. Highlight it again, click on the Insert Hyperlink icon, make sure that you are in the advanced folder, single click on online_questionnaire.htm.
Click on the Target frame button. When the Target Frame window appears, click on the middle frame. It should get darker.
Click on OK.
Click on OK again.
Click on the Save icon.
The Save As dialog box will appear. You have to save the middle frame in your page as a separate page.
Name it middle.htm and change the title. Click on Save.
A third window will appear; this is saving the entire framed page. Name it frame.htm and click on Save.
Right click anywhere on the page, click on Frame Properties. Click on the Frame Page button. Click on the check box next to Show Borders to deselect it. Click OK, click OK.
Save your work and click on the Preview in Browser button.

Creating a Style Sheet

Go to Microsoft FrontPage, close all the pages you have open. Go to the Menu bar and click on File, New, Page or Web.
In the New from Template section, click on Page Templates.
Click on the Style Sheets Tab. Click on the Downtown icon. Look in the Description section, you should see a small description of the styles sheet. Click OK.
A button should appear on your screen, click on the A Style part of the button.
The Style window shows you the styles that are set for the page, if you click on the different tags in the Style section you will see what they look like. Click on the h1 tag. Click on the Modify button.
Click on the Format button, click on Font. Format the text how you would like. Click OK. Click OK. Click OK.
Click on the Save button, save the file in your advanced folder and name it style. Do not put an extension, example would be .htm, at the end of the page name. Click Save.
Go to the Standard Toolbar and click on the Create a new normal page or New Page icon. Click on the Center Icon and type your name or the title of the page.
Highlight the text, go to the Formatting Toolbar and click on the down arrow next to the Style button, click on Heading 1.
Deselect the text and place your cursor at the end of the line, hit Enter. Type Welcome to my web site. Highlight the text, go to the style menu and click on normal.
Deselect the text and hit Enter, click on the Align Left icon, go to the Formatting Toolbar and click on the Numbering icon. Type Link 1, hit Enter, type Link 2.
Highlight the text Link 1, go to the style menu and click on Heading 3. Go do the Standard Toolbar and click on Insert Hyperlink, double click on one of the pages you created earlier.
Highlight the text Link 2, go to the style menu and click on Heading 4. Deselect the text.
Go to the Menu bar and click on Format, Style Sheet Links. If that option is not available, click on the down arrow to expand the menu.
In the Link Style Sheet window, make sure that the option button next to Selected page(s) is selected. If you wanted the style to format your entire site you would like on All Pages. If you only want the style on certain pages you will need to add the link to the style sheet on to each page. Click on the Add button, double click on the style.css file we created earlier.
Click OK. Save the page and call it style_sheet. You should see your page change to conform to the specifications you created earlier in the style sheet.
Close the style_sheet.htm page. Go to the style.css page and click on the Style button. Click on the h1 tag again, and change the Font. Save the page. Open the style_sheet.htm page and you should see that the text has changed.
** Note: Style sheets are a nice way of keeping all of your pages formatted the same, it also allows you to update the color or format of a heading in your entire site with just one click.

Creating a Photo Gallery

Open Netscape and go to http://www.workshop.dsu.edu/advanced_fp/photos/ You should see a listing of image files. Click on hali.gif, right click on the image and click on Save Image As. Create a new folder on your desktop, name it photos, double click on it and click on Save.
In the browser window, click on the Back button, click on jennie.gif and save the file to the photos folder. Save the other two files to the folder as well. Once all of the images are saved, you can close Netscape.
Go back to FrontPage, close any pages that are open. Click on the Create a new normal page icon. Click on the Web Component icon.
In the Component Type section, single click on Photo Gallery. In the Choose A Photo Gallery Option click on the Slideshow layout icon.
Click Finish.
In the Photo Gallery Properties, click on the Add button. Click on Pictures from Files. Click on the Browse button and go to the Desktop, double click on the photos folder, double click on hali.gif.
Click on the option button next to Override and use custom font formatting. Choose a font and the properties for that font. In the caption text box type Hali looks for the assist.
Click on the Add button again, click on Pictures from Files. Browse to the desktop again, double click on the photos folder and double click on jennie.gif. Type Jennie scores two against Tech.
Follow the same steps as above for the remaining two pictures.
Click OK. Click on the Save icon, name the page photo_gallery.htm. If you are asked to save imbedded files, click OK. Click on the Preview in Browser button. Click on the thumbnails.
You can format this page any way that you would like, including using style sheets and themes.

Using Include Pages

Close the search.htm page. Click on the Create a new normal page icon.
Click on the Center align button and type Frames Page | Email Me | DSU Home . Format the text how you would like.
Highlight the text Frames Page and click on the Insert Hyperlink icon. If you need to, double click on the advanced folder and double click on frame.htm. Highlight Email me and make it an email link. Highlight DSU Home and click on the Insert Hyperlink icon, link it to http://www.dsu.edu
Click on the Save icon and name the page navigation.htm.
Go to the Folder List and double click on online_questionnaire.htm. Place your cursor in the space below the title and above the form.
Go to the Standard Toolbar and click on Web Components, in the left page click on Included Content. In the right pane, notice all of the options, click on Page. Click Finish.
Click on the Browse button, find the navigation.htm file we created and double click on it.
Click OK. Save and preview your page.

Inserting a JavaScript Menu:

Go to Microsoft FrontPage, close any page you have open. Click on the Create a new normal page icon.
Go to back to Internet Explorer and go to http://javascript.internet.com/navigation/indent-menu.html
Scroll down so that you see a text area box, place your cursor at the beginning of the line that starts with <!-- STEP ONE:
Scroll down until you see a </HEAD> tag. Hold your shift key down and click in the space under that tag.
Go to the Menu bar, click on Edit, Copy. Keep the window open, go back into FrontPage. Click on the HTML tab. Place your cursor at the beginning of the line that starts with a <HEAD> tag.
Click and highlight the text all the way down to the closing </HEAD> tag. Click on Edit, Paste.
Go back to Internet Explorer, place your cursor at the beginning of the line that starts with a <!-- STEP TWO: . Scroll all the way down to the bottom of the window, hold down the Shift key and click your mouse at the end of the last line. Click on Edit, Copy.
Go back into FrontPage, place your cursor in the line between the <body> and the </body> tag. Click on Edit, Paste.
Click on the Normal tab. Save your page and name it javascript.htm. Click on the Preview in browser icon.
Go back into FrontPage, click on the HTML tab again.
Scroll down to the  section. Go to the first line after the above text, change the (this,'Visit the JavaScript Source') text to (this,'Visit DSU.edu').
Scroll down to the text that says Item One change the text to Visit DSU.
Click on the Normal Tab. Save the page and preview it in the browser.
Go back into FrontPage, click on the HTML tab once more. Scroll up to the top of the page. Under the <style> tag, go to the line that has A.mBlue:link {color:#00CCFF; text-decoration:none;} change the #00CCFF to #000099.
Click on the Normal tab, save your work and preview the page in a browser.
If you would like to view a version of the menu we just created which has been completed modified visit: http://www.workshop.dsu.edu/advanced_fp/javascript.htm For the sake of time, we only edited a few items in the menu.

Opening a Web to create your theme in:

If you are in your web page and you want to use a theme, you would not create this web on your C: drive. You should move on to the next section.

Go to Microsoft FrontPage, close all the pages you have open and close FrontPage.
Open Microsoft FrontPage again.
On the Menu Bar, click on File, New Page or Web.
In the New page or web section, click on Empty Web.
In the Specify location of the new web, type C:\MyDocuments\MyWebs\advanced. Click OK.
A new FrontPage window should appear.

Formatting your web:

Go to the Menu Bar and click on View, Navigation . If that option is not visible, click on the down arrow at the bottom of the menu.
On the Standard Toolbar, click on the Create a new normal page icon four times.
In the Editor window, right click on the Home Page button and click on Rename. Type your name.
Right click on the other three pages and name them: Syllabus, Assignments, and Schedule.
Double click on the page with your name on it, look in the Folder List. Your other pages should be visible. In the Folder List, right click on the page with your name on it and rename it default.htm.
Click on Go to the Menu Bar, click on View, and Page. In the Folder List window, double click on your default.htm page.

Adding Shared Borders and a Navigation Bar

Go to the Menu Bar and click on Format, select Shared Borders. The Shared Borders dialog box appears.
Under Apply to, select the option for All pages
Select Top, Left, and Bottom. Under Left, select Include navigation buttons.

Click OK. If the shared border does not appear on your page, click on the page.
Click on the text at the Top of the page. It should become highlighted.
On the Menu bar, click on Insert, choose Page Banner. The Page Banner Properties dialog box appears.
Click OK. Right now you will just see text, when we add a theme it will become a picture. On the Formatting Toolbar, click on the Center icon.
Click on the text at the bottom of the page, type If you have any further questions or comments please send me an email.

Click on the Center icon.
Highlight the word “email.” Make it an email link. Click on the hyperlink icon on the Standard Toolbar, click on the Email Address icon, type your email address. Click OK. Click OK again.
Place you cursor over the Navigation bar, the text at the left of the screen, and right click.
Click on Link Bar Properties, a dialog box will appear.
Click on Child Pages Under Home. In the Additional Pages section: click on Home Page.
Click on the Style tab, in the Choose a style section scroll up and click on the Use Page’s Theme button type to select it. In the Orientation and appearance section, make sure that Vertical is selected.
Click OK. Click on the Save icon.
Click on your Preview in Brower button.

Applying a Theme

Go back to Microsoft FrontPage, make sure that you are in the correct window. You should see your default or index page in the Editor window.
From the Format menu, choose Theme. The Themes dialog box appears.
Under Apply Theme to, click on All pages.
Click on a theme to choose it.
Click OK. A prompt window will appear:

Click on Yes. Microsoft will now add this theme to all of the pages you have created.
Place your cursor in the space under your title and to the right of your buttons. Type Welcome to my Web Site on your default.htm or index.htm page.
Highlight the text, on the Formatting Toolbar, click on the down arrow next to the Style window, it should say Normal. Click on Heading 2, click on the Center align icon.
Click next to your text to deselect it. Hit Enter and click on the Left align icon. Put a bulleted list in the section. On the Formatting Toolbar, click on the bulleted list icon. Format it how you would like.
Click on the Save icon.
Go back to Internet Explorer, hit Refresh. Look at all of your pages. Notice the consistency of all of the pages. You might have to hit Refresh each time you look at your page.
Go back to Microsoft FrontPage, close the web site.

Congratulations you are done!!!

E-Education Services Office

201A Karl E. Mundt Library

Madison, SD 57042

Email: dsuinfo@dsu.edu

Phone: (605) 256- 5049