Exploring FrontPage 2003 - Grauer and Barber 1 Committed to Shaping the Next Generation of IT...

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)


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


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


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!


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


6

Connecting to the Internet

Three components needed Communications capability (modem, LAN

connection) Internet Account/ISP Software


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


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


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


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


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


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


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


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.)


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


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.


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


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)


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


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


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


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>


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


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


25

FrontPage Toolbars

Similarities to other Office Application Toolbars

Subtle differences between FrontPage Toolbars and other Office Application Toolbars

Standard Toolbar

Formatting Toolbar


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.


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


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


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


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>


31

Themes

Create consistency in style Speed up page design Can be customized Can be created from scratch


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


33

FrontPage Templates

To apply a template: Choose the Layout Tables

and Cells Task Pane Choose the Table Layout

desired


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


35

The Photo Gallery (continued)

To use the Photo Gallery Click Insert Click Web Component Select Photo Gallery Select Layout Click Finish

Insert images


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.


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


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.


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)


40

Most Important Step…

Even if you’ve examined your local site carefully, you’re still not done…


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


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)


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.


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


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


46

Questions?

Date post:	26-Dec-2015
Category:	Documents
Upload:	calvin-solomon-briggs
View:	216 times
Download:	1 times