1. Introduction to Web Development and Exploring FrontPage

2. Objectives Create a web page Open a web page Rename a web page
Internet and Web Review
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
Network – software and hardware necessary for two or more computers to communicate
Internet – global network of networks
WWW – system of Internet servers supporting specially formatted documents
HTML – Hypertext Markup Language
Language web documents are formatted in

5. Connecting to the Internet
Three components needed
Communications capability (modem, LAN connection)
Internet Account/ISP
Software

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

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
Internet Explorer
Mozilla FireFox
Safari
Opera

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

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 System

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

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

12. 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
What does your server support?
FrontPage extensions (support for feedback pages, hit counts, etc.)

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

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

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

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

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

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

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

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

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

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

23. FrontPage Toolbars Similarities to other Office Application Toolbars
Standard Toolbar
Formatting Toolbar
Similarities to other Office Application Toolbars
Subtle differences between FrontPage Toolbars and other Office Application Toolbars

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

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

26. 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 one
Mouse click

27. 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 client

28. 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 = “ >Click here to go to Google</a>

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

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

31. FrontPage Templates To apply a template:
Choose the Layout Tables and Cells Task Pane
Choose the Table Layout desired

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

33. The Photo Gallery (continued)
To use the Photo Gallery
Click Insert
Click Web Component
Select Photo Gallery
Select Layout
Click Finish
Insert images

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

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

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

37. Publishing a Website A floppy drive A hard drive
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)

38. Most Important Step… TEST YOUR SITE!!!
Even if you’ve examined your local site carefully, you’re still not done…
TEST YOUR SITE!!!

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

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

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

42. Summary About HTML How to create a one page website
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

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