Introduction to Web
Development and
Exploring FrontPage 2003
Robert Grauer and Maryann Barber
Modified by A. Clark (USA)
Committed
to Shaping the Next Generation of IT Experts.1
Exploring FrontPage 2003 - Grauer and Barber
Objectives

Use FrontPage to:






Create a web page
Open a web page
Rename a web page
Define HTML - View and modify source code
Format text and paragraphs - Add visual
elements to a page
Add hyperlinks that reference Internal and
External Links
Exploring FrontPage 2003 - Grauer and Barber
2
Objectives (continued)

Create a web page using:







Templates
Themes
Layout Tables
Add active elements to a web page
Understand FrontPage Views
Print a website from Navigation View
Publish the website to floppy disk
Exploring FrontPage 2003 - Grauer and Barber
3
Internet Review



Internet – global network of networks
WWW – system of Internet servers
supporting specially formatted documents
HTML – Hypertext Markup Language


Language web documents are formatted in
Weather, sports, email, reference info,
entertainment, financial services and much
more!
Exploring FrontPage 2003 - Grauer and Barber
4
Internet Usage Statistics
WORLD INTERNET USAGE AND POPULATION STATISTICS
World Regions
Africa
Population
( 2004 Est.)
Internet
Internet
Usage,
Usage,
( Year 2000 ) Latest Data
User
Penetration
Growth
(%
( 2000Population )
2004 )
% of
World
12,937,100 186.6 %
1.4 %
1.6 %
3,607,499,800
114,303,000 257,898,314 125.6 %
7.1 %
31.7 %
Europe
730,894,078
103,096,093 230,886,424 124.0 %
31.6 %
28.4 %
Middle East
258,993,600
17,325,900 227.8 %
6.7 %
2.1 %
North America
325,246,100
108,096,800 222,165,659 105.5 %
68.3 %
27.3 %
Latin America/
Caribbean
541,775,800
18,068,919
55,930,974 209.5 %
10.3 %
6.9 %
32,540,909
7,619,500
15,787,221 107.2 %
48.5 %
1.9 %
Asia
Oceania
WORLD TOTAL
893,197,200
6,390,147,487
4,514,400
5,284,800
360,983,512 812,931,592 125.2 %
12.7 % 100.0 %
NOTES: (1) Internet Usage and Population Statistics were updated on September 30, 2004. (2) For detailed
regional data, click on each World Region. (3) Demographic (population) numbers are based on data
contained in the web site gazetteer.de. (4) Internet usage information comes from data published by
Nielsen//NetRatings, by International Telecommunications Union, by NICs and other reliable sources. (5)
Data from this site may be cited, giving the due credit and establishing an active link back to
InternetWorldStats.com.
Source: http://www.internetworldstats.com/stats.htm
Exploring FrontPage 2003 - Grauer and Barber
5
Connecting to the Internet

Three components needed



Communications capability (modem, LAN
connection)
Internet Account/ISP
Software
Exploring FrontPage 2003 - Grauer and Barber
6
Activities & Issues


Downloading – transfer from an outside
source to your computer
Uploading – transfer from your computer to
another device


FTP programs
Vulnerabilities – viruses and worms

Antivirus programs
Exploring FrontPage 2003 - Grauer and Barber
7
Components of the Web



Web Server – stores hypertext/hypermedia
documents and makes them available
Web Client – PC or device used to access
files held on web servers
Web Browser – software application used
to locate and display web docs


Netscape Navigator
Internet Explorer
Exploring FrontPage 2003 - Grauer and Barber
8
Web Documents and Web Sites





Formatted in HTML
Hyperlink tags used to link multiple HTML docs
together and to connect to other web sites
Web Page – one HTML document
Web Site – collection of related web pages
Home Page – main page of a web site; also
defined as the first page displayed when you
open your browser
Exploring FrontPage 2003 - Grauer and Barber
9
Addressing on the Web



Every device on a network has an IP address
 Unique 32-bit numeric address identifying a
specific device
Domain name address – text name identifying one
or more IP addresses (ex: Microsoft.com represents
about a dozen IP addresses)
Domain Name Addresses are translated into IP
addresses by a Domain Name Service
Exploring FrontPage 2003 - Grauer and Barber
10
URLs


Uniform Resource Locator – Identifies
document residing on a web server
Parts




Transfer protocol (http or ftp)
Domain name of host server
Pathname (if applicable)
File name of document
http://www.webopedia.com/TERM/U/URL.htm
Exploring FrontPage 2003 - Grauer and Barber
11
Elements of a Web Browser





Same program components as many other apps
Scroll bars
Status bars
Tool bar
 Home, history, back, forward, reload/refresh,
stop, favorites, address line
Save web pages to disk or send via email
Exploring FrontPage 2003 - Grauer and Barber
12
Web Page Development



Web Page – hypertext document you see on the
web
Web site – a group of related web pages
HTML – language used to build web pages



Controls web page appearance
Web browser software translates HTML messages
and creates text, images, and plays sound based on
those commands
Sounds, graphics, and animations are separate
files referenced by the web page
Exploring FrontPage 2003 - Grauer and Barber
13
Planning Your Web Site


Begin with an outline on paper
Test on several different browsers – some
features may not be displayed the same on
all



IE
Netscape
What does your server support?

FrontPage extensions (support for feedback
pages, hit counts, etc.)
Exploring FrontPage 2003 - Grauer and Barber
14
Basic Web Design Pointers


Keep it simple – simple design, no background or
simple pattern (watermark); light backgrounds with
dark text are easier to view
Be consistent – common “look and feel” from one
page to another


Similar fonts and formats in related docs for continuity
View source code (HTML) of other sites you like to
incorporate into your pages
Exploring FrontPage 2003 - Grauer and Barber
15
Developing your Web Site






First, develop a general outline of what you want
your site to look like.
What is the site about?
Should be a collection of related pages – some
common overall theme or focus.
What is your target audience?
You want the viewer to “visit” longer.
A large number of graphics can make pages take a
long time to load.
Exploring FrontPage 2003 - Grauer and Barber
16
Organizing Your Site


A site map visually organizes how your site will be
navigated.
Also, think about organizing file and directory
structures (e.g. all photos/images into one folder).
Home Page
About Me
My Family
Links
My Dog
Photos
Resume
Pictures
Exploring FrontPage 2003 - Grauer and Barber
17
Design Stage




Add text and images just as you do in other
applications such as MS Word.
Pages are saved in HTML format
Give the page a meaningful name
Home page should usually be index.htm
(may be home.htm; depending on host
provider)
Exploring FrontPage 2003 - Grauer and Barber
18
Introduction to FrontPage
FrontPage is a website creation and
management software that:




Creates HTML (Hypertext Markup
Language)
Allows a user to format documents in a
manner similar to a word processor
Provides different views for accomplishing
different tasks
Exploring FrontPage 2003 - Grauer and Barber
19
Introduction to FrontPage
(continued)



Allows a user to add active elements, such as
marquees, to a web page
Helps a user publish a website to a server
Helps a user to manage and maintain their
published website
Exploring FrontPage 2003 - Grauer and Barber
20
Hypertext Markup Language

HTML consists of tags that are placed around
plain text.



The browser follows the instruction of the
tags
< and > symbols are used to enclose the
tags
Tags can be viewed in Code View
Exploring FrontPage 2003 - Grauer and Barber
21
Hypertext Markup Language
(continued)


Users may enter or modify HTML Tags in
Code View
Some tags come in pairs:


An Opening Tag
A Closing Tag


Some tags do not need to be closed.
Closing Tags are denoted by a slash, i.e., </b>
Exploring FrontPage 2003 - Grauer and Barber
22
Hypertext Markup Language

FrontPage
allows a user in
Code View to:



View code
Enter code
Modify code
HTML Code is
color coded
Code View
Button
Exploring FrontPage 2003 - Grauer and Barber
23
Hypertext Markup Language
(continued)

Examples of HTML Tags



<b>This is bold text</b>
<h1> This is a level one heading</h1>
<ul>This begins a list
<li>This is an item in the list </li>
 <li>This is another item</li>
 </ul>This ends the list


<p> The tag at the end of a line indicating the
next line will begin a new paragraph
Exploring FrontPage 2003 - Grauer and Barber
24
FrontPage Toolbars
Standard Toolbar
Formatting Toolbar
 Similarities to other Office Application

Toolbars
Subtle differences between FrontPage
Toolbars and other Office Application
Toolbars
Exploring FrontPage 2003 - Grauer and Barber
25
Creating your Web Site

Template or blank web




Can modify any template to custom needs
FrontPage creates site folders and default pages for
you (home page is index.htm) depending on type of
site created
In order to link pages easily, all must be part of a site
(i.e. create site first, then pages)
Some components will not work unless a site is
created first.
Exploring FrontPage 2003 - Grauer and Barber
26
Views






Page View – used when creating, editing and
formatting the content of your pages
Folders View – manage/manipulate files related
to your site
Reports View – generate reports relating to your
site
Navigation View – control/view structure of site
Hyperlinks View – map of hyperlinks included in
site
Tasks – tasks associated with creating and
maintaining site
Exploring FrontPage 2003 - Grauer and Barber
27
Hyperlinks
 The power of the web is in the ability to jump
from one page or site to another page or site
 This ability comes in the form of hyperlinks
To Here
From Here
With one
Mouse click
Exploring FrontPage 2003 - Grauer and Barber
28
Hyperlinks (continued)

Types of hyperlinks




Internal hyperlink – link to other pages within your
web site; allows visitor to navigate your site
Bookmark – internal hyperlink to a spot on the
same page used to redirect the viewer
 Two step process (create bookmark then
hyperlink)
External hyperlink – link to another site on the
web (external to yours)
Mail to: links – link used to invoke default email
client
Exploring FrontPage 2003 - Grauer and Barber
29
Hyperlinks (continued)
 The code behind a hyperlink


Internal link - <a href = “faq.htm” >Click here to
go the FAQ page</a>
External Link - <a href =
“http://www.google.com” >Click here to go to
Google</a>
Exploring FrontPage 2003 - Grauer and Barber
30
Themes




Create consistency in style
Speed up page design
Can be customized
Can be created from scratch
Exploring FrontPage 2003 - Grauer and Barber
31
FrontPage Templates

Templates simplify and speed up page
creation by providing:






Page settings
Page formats
Page elements
Templates utilize multi-columned tables for
layout
Users can define their own templates
Additional templates are available for
download from Microsoft.com
Exploring FrontPage 2003 - Grauer and Barber
32
FrontPage Templates

To apply a template:


Choose the Layout Tables
and Cells Task Pane
Choose the Table Layout
desired
Exploring FrontPage 2003 - Grauer and Barber
33
The Photo Gallery




Uses thumbnail images to display pictures
on a web
Several layouts to choose from
Thumbnail images save downloading time
Pictures can be edited within the Photo
Gallery
Exploring FrontPage 2003 - Grauer and Barber
34
The Photo Gallery (continued)

To use the Photo Gallery






Click Insert
Click Web Component
Select Photo Gallery
Select Layout
Click Finish
Insert images
Exploring FrontPage 2003 - Grauer and Barber
35
Designing a Corporate Website
 Page Design Basics - plan before beginning

Top Down Design


Define the overall website – Develop the overall
structure first
Break it down into smaller, more manageable
pieces - Develop individual pages.
Exploring FrontPage 2003 - Grauer and Barber
36
Shared Borders

FrontPage provides Shared Borders that are
used to display banners and link bars.


Shared borders add consistency - They can
be shared among all pages in a site.
The Corporate Presence Wizard includes
Shared Borders automatically
Exploring FrontPage 2003 - Grauer and Barber
37
Other components




Marquee – scrolling area of text or animated
message, usually used to welcome visitors to
your site
Time/date stamp – automatically log when
page was last updated
Included Content – displays content of a
referenced document or file
Other – search engines, hit counters, applets,
plug-ins, photo gallery, link bars, etc.
Exploring FrontPage 2003 - Grauer and Barber
38
Publishing a Website



The Publish Web Command allows a user to
publish a web page to a web server.
A user cannot simply copy his or her files to a
server
A user may also publish a web page to:



A floppy drive
A hard drive
Jump drive (space permitting)
Exploring FrontPage 2003 - Grauer and Barber
39
Most Important Step…

Even if you’ve examined your local site
carefully, you’re still not done…
Exploring FrontPage 2003 - Grauer and Barber
40
How to make an annoying web
site







Use very small fonts
Make one word many different colors
Overuse italics and boldface
Misspell words
Use too many graphics
Use large graphics
Use annoying background colors
Exploring FrontPage 2003 - Grauer and Barber
41
Annoying web site pointers (cont)





Use background pictures that are not
transparent and place text on top
Include broken links and/or too many links
Overuse animated gifs
Overuse bullets
Include annoying MIDI files (music)
Exploring FrontPage 2003 - Grauer and Barber
42
Pointers for good web page
design





Create an outline of your site. All pages should
be related with a common look and theme.
Keep your site focused; each page should have
one distinct theme; related themes should be
linked from other pages.
Look at other web pages for ideas.
Know which tools are supported by your web
host.
Know your target audience.
Exploring FrontPage 2003 - Grauer and Barber
43
Summary
 Lessons learned in this chapter:





About HTML
How to create a one page website
Add, modify and format text in a website
Create hyperlinks to both Internal and External
sites
Insert a marquee into a website
Exploring FrontPage 2003 - Grauer and Barber
44
Summary (continued)






Use Templates and Themes
Use the Photo Gallery Feature
Insert Interactive Buttons
Work in different FrontPage Views
Use a Web Wizard
Publish a website
Exploring FrontPage 2003 - Grauer and Barber
45
Questions?
Exploring FrontPage 2003 - Grauer and Barber
46