Transcript MS FrontPage 1: Developing a web site for the Sunny Morning Products

MS FrontPage 1:
Developing a web site for the Sunny
Morning Products
Yong Choi
CSU
Bakersfield
View Bars




Page View shows the files and folders of the
website as Windows Explorer would. We will use
this view while working on our website.
Folders View shows only the folders of the
website.
Reports View shows a brief report on the web
site.
Navigation View shows the links between pages.
View Bars


Hyperlinks View shows the pages that have
inbound links to the current document and pages
that have outbound links to the current document.
Tasks View is a to-do list for the web developer
working on the website.
Page View



You can edit in WYSIWYG (What You See Is What
You Get) fashion by using the Normal tab.
Write HTML directly by using the HTML tab.
Preview your page as it will appear when viewed by a
site visitor by using the Preview tab.
Managerial Mistakes of Web


Designing web site because your senior VP
told so.
Underestimating the strategic impact of the
web.


New ways of doing business such as true
globalization
Forgetting budget for maintenance.
Technical Mistakes of Web



Outsourcing to multiple agencies
Slow server response times
Slow loading due to large graphics


Too large to navigate



Provide an option to download pictures separately
Not too simple and chaotic
Do not use every possible font, color and features for less
distracting
Also see EC project # 2 design guidelines…..
3 Most Popular Picture Formats

GIF (Graphics Interchange Format)


PNG (Portable Network Graphics)


Suitable for scanned photos and pictures with smaller file
sizes.
Very similar to GIF but patent and license free
JPG or JPEG (Joint Photographic Expert Group)

Suitable for large pictures because it converts them to a
format with smaller file sizes.
2 Most Popular Sound Formats

WAV


MIDI (Musical Instrument Digital Interface)



The standard file format for sound on personal computers.
Used by the eletronic music industry for controlling devices
that emit music, such as synthesizers and sound cards.
A WAV file usually produce quality sound than a MIDI
file.
MIDI files are smaller than WAV files.
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 Olympic Gold brand fresh
orange juice and thirst-quencher 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
Design of the SMP
Home Page
Employment
Products
Banner
Links
Contents
Travel
Service
Feedback
Search
Drink
Fruit
Gifts
Ordering
Gift
Gift
Baskets
Information
Packs
Packs
Order Form
Creating the Sunny Web Site

Your first step is creating a web folder that
can contain all the necessary files of the web
site!!


File  New  Web
Location of the new web
C:\sunny + your last name
 Then, cut and paste into My
Documents folder

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 ! What Happens !


See actual codes of the web page
Two ways to test the web page
Creating Home page 2

Apply background color file


Type following after maps



Brighten your day. Enjoy some of our sunshine!
Apply a marquee (scrolling message)
 Web component  Dynamic effects  Marquee
Background sound


Bkgrnd.gif
Minuet.mid
Insert last modified date and time right after “last
updated” phrase

Automatic update.
Creating Home page 3

Apply heading 3 for followings;



Create a navigation bar at the top of the Home Page.


Welcome to the Sunny Morning Products Web Site!
Brighten your day. Enjoy some of our sunshine!
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
Create navigation bar
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


Download “employment page” file
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
 [email protected]
Apply same background
Amanda wants you to create a hyperlink from the
Employment web page to the Home Page and and
one from the Home Page to the Employment web
page.
Save your work
Creating a Travel Service page

Create a new page


Save as Travel
Import graphic and text files:

Travel.txt (Select Normal paragraphs from the Convert Text
dialog box)



Fix the third paragraph !
LONDON.gif and SANFRAN.gif
Place the cursor the before the letter A in “Aound 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 “Worldfamous Times Square”
Wrapping style in Right.
Apply heading 3 to page title:

Planning a New Year Gateway!
Design the Links Page




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