MS FrontPage 1:Developing a web site for the

Sunny Morning Products

Yong ChoiCSU

Bakersfield

Developing a Web site

Define the objective of the web site Identify your target audience Have a statement of purpose Know your main objectives Have a concise outline of the information your site

will contain. Determine the web site’s contents

Design the web site Build the web site Test the web site

Developing a web site for the Sunny Morning Products (SMP)

Sunny Morning Products (SMP) is an international bottler and distributor of fresh orange juice and sports drink. To better accommodate the customers and visitors, SMP has decided to open the Internet store.

You and I as a web development team will create the Internet store for Sunny Morning Products.

Also, we will provide travel information pages and a web-based database table as well.

Planning Analysis of the Web Site

Objective Develop marketing corporate web site that

provides relevant company information and allows consumers to place orders

Web site contents Company description List of products and prices List of available job positions Feedback, Order, and Search forms Travel Discussion and Web DB Table

Home Page

Employment

Products Links Travel Service

Feedback Search

Banner Contents Drink

Gift

Packs

Fruit

Gift

Packs

Gifts

Baskets

Ordering

Information

Order Form

Design of the SMP website

Creating the Sunny Web Site

Your first step is creating a web folder that will contain all the required files of the web site!!

File New New Web Site One page Web site

Location of the new web Identify location of the web site and Assign website

name: your last name + sunny. Download and save “Files for the FrontPage Lab”

Creating Home page 1

Download and Insert files Use “HomePage” word document for the index.htm

page Insert two maps (map1 and map 2) and then, change

to thumbnail size pictures Downloading time of the pictures (bottom of the

screen)

Save Your Work ! See actual codes of the web page Two ways to test the web page

Creating Home page 2 Apply background picture file

Bkgrnd.gif Type following after maps

Brighten your day. Enjoy some of our sunshine! Apply a marquee (scrolling message)

Web component Dynamic effects Marquee Background sound

Minuet.mid Insert last modified date and time right after “last

updated” phrase Automatic update.

Creating Home page 3

Apply heading 3 for followings; Welcome to the Sunny Morning Products Web Site! Brighten your day. Enjoy some of our sunshine!

Create a navigation bar at the top of the Home Page.

Two ways (vertical or button) Always organize your web folder

Move all graphic and sound files into Images folder

Creating Home page 4 Using META Tags

A META tag is an HTML tag that includes text which identifies how the web page developers wants to add the web site to a search engine’s index.

Most search engines gather information about web sites by collecting data based on HTML code entered into the HTML document by the web page developer’s. These keywords are called META tags.

Creating Home page 5 Page Properties Custom Add followings in the User variables

section; Name: description Value: Sunny Morning Products produces

Olympic Gold brand orange juice and sports drink. Check out our Sunshine Country Store

Name: Keywords orange juice, sports drink, citrus products, gifts,

holiday gifts, oranges, grapefruit

Creating the Employment page

Import partially completed HTML document employ.htm Apply heading 3 for the title of the page Apply same background color

Creating bookmarks A bookmark is a named location in a web page that

is the target of a hyperlink. Bookmarks make web pages easier to navigate Either text-based or none text-based bookmarks

Creating the Employment page Creating text-based bookmarks

Create bookmark list No bookmarks: hyperlink button bookmark Insert bookmark textbox:

Accounting Advertising MIS Customer Support

Open hyperlink dialogue box, and then book mark to each one

Creating the Employment page

Create nontext-based bookmarks Create before the contact information phrase Bookmark name text box: To Apply Using Top of Page text and button

Insert Top of Page Button (Up.gif) before the text (Top of Page)

Create before the navigation bar Bookmark name text box: Top

Creating the Employment page Type the (your) e-mail address

ychoi2@csub.edu Apply same background Copy and paste navigation bar from the

Home page and then, create hyperlink from the employment page to the home page.

Save your work

Creating a Travel Service page

Create a new page Assignment two save names

File name: Travel Page title name: Travel service

Insert graphic and text files: Travel.txt (Select Normal paragraphs from the

Convert Text dialog box) LONDON.gif and SANFRAN.gif

Place the cursor the before the letter A in “Around the world” and then insert LONDON (London tower).

Wrapping style in Left

Creating the Travel Service page

Do the same thing for the SANFRAN.gif (Golden Gate Bridge).

Place the cursor the before the letter W “World-famous Times Square”

Wrapping style in Right. Apply heading 3 to page title:

Planning a New Year Gateway! Apply same background color

Design the Links Page Do this by yourself! Create a new page and then save as Links Copy and paste the navigation bar Type Links to My Favorite Sites Type and highlight MSN - The Microsoft Network.

www.msn.com Type http://www.yahoo.com and then, type Yahoo!

to replace the selected text. Apply Same background color