1. MS FrontPage 2: Developing a web site for the Sunny Morning Products Yong Choi CSU Bakersfield

2. Creating a Search page using template Delete the default comment purple color text at the top of the page, including the horizontal line Type Search on the blank Line at the top Apply Heading 3 Apply Home page background Copy and paste navigation bar Modify Search instruction if necessary

3. Creating a Feedback Page Create a Feedback page using Wizard Save as Feedback (filename and page title) Type text and adding radio buttons (see handout) Suggestion Group name: MessageType Value: Suggestion Praise: Praise Problem: Problem

4. Creating a Feedback Page Adding a drop-down menu to a form From the Form field properties Name: Subject> Add button Choice: Web site Select the Specify Value, textbox: Website Initial state: selected Choice: Company Select the Specify Value, textbox: Company Initial state: Not selected

5. Creating a Feedback Page Choice: Products Select the Specify Value, textbox: Products Initial state: Not selected Adding a scrolling text box to a form From the Form field properties Name: Comments Width in characters: 50 Number of lines: 5

6. Creating a Feedback Page Adding a one-line text box to a form From the Form field properties Name: Username Width in characters: 35 Password field: No Name: UserEmail Width in characters: 35 Password field: No

7. Creating a Feedback Page Insert a one-line text box for the line about visiting From the Form field properties Name: Visits Width in characters: 3 Password field: No

8. Creating a Feedback Page Adding a a check box to a form Insert a check box before “Please” Name: ContactMe Value: Yes Initial state: Not checked Change the properties of the submit push button Name: Submit Value.label: Submit Form Button type: Submit

9. Creating a Feedback Page Change the properties of the reset push button Name: Clear Value.label: Clear Form Button type: Reset Review Form properties Including options

12. Sketch of the Products Frames Page

13. Frames If you use frames in your web, Page view has two additional tabs: The No Frames tab displays the message that will display in a Web browser if the browser does not support frames. The Frames Page HTML tab shows the HTML for the frame page.

14. Creating a Products Page Download and Import following pages for a frame page; banner, basket, contents, drink, fruit, and Ordrinfo press and hold down Ctrl key to select all Create a frame page Use the new page templates File name: Products Page title: Products

15. Creating a Products Page Setting Initial Pages for Frames Page Banner.htm in the banner frame Contain navigation bar Contents.htm in the contents frame Contain purchase options Drink.htm in the main frame Try to resize each frame Do want to resize each frame?

17. Creating a Products Page Examine the target frame followings… Drink Gift Packs Fruit Gift Packs Gift Baskets Order Information

18. Creating a Products Page Later! Create a Order From page Create a hyperlink from Order Information page to order form. The Order Form must be open in New Window. So, the target frame  New Window

19. More about Frame.. Adding a new frame to an existing frames page Ctrl key (press and hold down), and then drag the bottom frame border up about one inch. What happens? Printing a frames page in browser mode Preview> Preview in Browser> Print> As laid out on screen Compare HTML and Frames Page HTML. Any differences?

20. Creating a Order Form Page Similar to Feedback Page Save as ASP Send order to Database Try Out!! Assign names, values, and others based upon your intentions..

21. More about Frame.. Adding a new frame to an existing frames page Ctrl key (press and hold down), and then drag the bottom frame border up about one inch. What happens? Printing a frames page in browser mode Preview> Preview in Browser> Print> As laid out on screen Compare HTML and Frames Page HTML. Any differences?

24. Apply a theme Open index.htm. Select Theme from the format menu. Under Apply theme to, make sure All pages is selected. In the list of installed themes, select Artsy. Clear the check boxes for Active graphics and Background picture, then click OK to apply the theme.

25. To publish the Web Site Close all open pages in Page view. On the File menu, click Publish Web, or click the Publish Web button on the toolbar. In the Publish Web dialog box, enter the URL of your target Web server You have created so called “disk-based web”, which means your web site does not work properly unless you publish thru the web server. Try free web hosting service company from the Internet. http://www.freewebsitehosting.com/