Exploring FrontPage 2003 - Grauer and Barber
1Committed to Shaping the Next Generation of IT
Experts.
Introduction to Web Development and
Exploring FrontPage 2003
Robert Grauer and Maryann BarberModified by A. Clark (USA)
Exploring FrontPage 2003 - Grauer and Barber
2
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
3
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
4
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
5
Internet Usage Statistics
WORLD INTERNET USAGE AND POPULATION STATISTICS
World Regions Population ( 2004 Est.)
Internet Usage,
( Year 2000 )
Internet Usage,
Latest Data
User Growth ( 2000-2004 )
Penetration (%
Population )
% of World
Africa 893,197,200 4,514,400 12,937,100 186.6 % 1.4 % 1.6 %
Asia 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 5,284,800 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 %
Oceania 32,540,909 7,619,500 15,787,221 107.2 % 48.5 % 1.9 %
WORLD TOTAL 6,390,147,487 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
6
Connecting to the Internet
Three components needed Communications capability (modem, LAN
connection) Internet Account/ISP Software
Exploring FrontPage 2003 - Grauer and Barber
7
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
8
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
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 Links Photos
My Family Pictures
Resume
My Dog
Exploring FrontPage 2003 - Grauer and Barber
18
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
19
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
20
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
21
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
22
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
23
Hypertext Markup Language
FrontPage allows a user in Code View to: View code Enter code Modify code
Code View Button
HTML Code is color coded
Exploring FrontPage 2003 - Grauer and Barber
24
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
25
FrontPage Toolbars
Similarities to other Office Application Toolbars
Subtle differences between FrontPage Toolbars and other Office Application Toolbars
Standard Toolbar
Formatting Toolbar
Exploring FrontPage 2003 - Grauer and Barber
26
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
27
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
28
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
From Here To Here
With oneMouse click
Exploring FrontPage 2003 - Grauer and Barber
29
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
30
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
31
Themes
Create consistency in style Speed up page design Can be customized Can be created from scratch
Exploring FrontPage 2003 - Grauer and Barber
32
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
33
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
34
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
35
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
36
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
37
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
38
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
39
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
40
Most Important Step…
Even if you’ve examined your local site carefully, you’re still not done…
Exploring FrontPage 2003 - Grauer and Barber
41
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
42
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
43
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
44
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
45
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
46
Questions?