FrontPage

1
FrontPage

• Creating Web pages
• with tools

2
Creating Web pages with Microsoft FrontPage

• What Microsoft FrontPage can do
• The Two Parts of FrontPage FrontPage Explorer
  Area and FrontPage Editor Area
• Creating Web Pages with FrontPage
• Working with Links and Lists
• Using Images

3
What Can It Do?

• FrontPage is a powerful WYSIWYG (What You See Is
  What You Get) tool for creating and managing Web
  sites. It provides web authoring and editing
  features in an intuitive way for both lazy people
  and professionals to create dynamic Web sites.
  Almost all you want in a Web site can be done by
  the use of FrontPage. It supports most of the
  latest Internet technologies. Although it
  supports most of the Netscape features, it works
  better with the Internet Explorer.

4
FrontPage 2000/2002(XP)

• FrontPage 98/2000/2002 is made up of two parts
• 1) FrontPage Explorer, which works much like the
  Windows Explorer, provides multiple ways to view
  and manage a site.
• 2) FrontPage Editor is a tool to create and edit
  Web pages. It fully supports image formats and
  displays images as they appear in the published
  Web page.

5
Creating Pages with FrontPage

• Creating Web pages and webs are fairly easy with
  FrontPage 2000/2002. You can start from scratch
  to create entire new pages with all kinds of
  personal touches. Or you can create Web sites
  using Templates and Wizards. The templates
  include
• Corporate Presence
• Customer Support
• Discussion
• Personal
• Project

6
Starting from A Single Page

• Lets get started with a single page from
  scratch.
• First, select a single page without using any
  template.
• Then, create a few pages linked to the home page
  by using the navigation in Explorer.
• Finally, go to the home page to do some editing.

7
Hands-on Job with a Page

• Background color
• Fonts and front sizes with the Head
• Headings
• Paragraphs
• Text alignment
• Tables

8
Links and Lists

• Links
• Creating links
• Editing links
• Lists
• Simple lists
• Nested lists

9
Using Image (1)

• Considerations in using images
• GIF (Graphics Interchange Format) vs. JPEG (Joint
  Photographic Experts Group). Normally, GIF
  files, which support only 256 colors, are smaller
  than JPEG files and are better for graphics.
  JPEG files, which support millions of collors,
  are better for photos.
• Size of images. Keep the size and the file
  small too. The 14-second rule for the entire
  page to load.
• PNG file format (http//www.libpng.org/pub/png/)

10
What is PNG?

• PNG (Portable Network Graphics) is a file format
  for image compression that, in time, is expected
  to replace the Graphics Interchange Format (GIF)
  that is widely used on today's Internet. Owned by
  Unisys, the GIF format and its usage in
  image-handling software involves licensing or
  other legal considerations. (Web users can make,
  view, and send GIF files freely but they can't
  develop software that builds them without an
  arrangement with Unisys.) The PNG format, on the
  other hand, was developed by an Internet
  committee expressly to be patent-free. It
  provides a number of improvements over the GIF
  format.
• Like a GIF, a PNG file is compressed in lossless
  fashion (meaning all image information is
  restored when the file is decompressed during
  viewing). A PNG file is not intended to replace
  the JPEG format, which is "lossy" but lets the
  creator make a trade-off between file size and
  image quality when the image is compressed.
  Typically, an image in a PNG file can be 10 to
  30 more compressed than in a GIF format.
• The PNG format includes these features
• You can not only make one color transparent, but
  you can control the degree of transparency (this
  is also called "opacity").
• Interlacing (see interlaced GIF) of the image is
  supported and is faster in developing than in the
  GIF format.
• Gamma correction allows you to "tune" the image
  in terms of color brightness required by specific
  display manufacturers.
• Images can be saved using true colour as well as
  in the palette and gray-scale formats provided by
  the GIF.
• Unlike the GIF89a, the PNG format doesn't support
  animation since it can't contain multiple images.
  The PNG is described as "extensible," however.
  Software houses will be able to develop
  variations of PNG that can contain multiple,
  scriptable images.

11
Using Image (2)

• Importing images
• Import from the File menu in the Explorer
• Pick a source
• Sizing images (Appearance in Image Properties)
• Placing images (Image Properties)

12
Using Image (3)

• Background image (Background in Page Properties)
• full page background
• portion background
• Source http//www.fg-a.com/african_art_ba.shtml

13
Creating a frame page

• Now, lets try to create a three-frame page by
  using FrontPage.
• The most commonly used design (or template) is a
  three-part frame, with the top, the left side and
  the main body.

14
Using CCTGlobal manuals

• A more step-by-step approach
• http//www.cctglobal.com
• Include training manuals of FrontPage,
  Dreamweaver, and Flash!!
• Give them a try if you do not have a reference
  book. Do try to check out a reference book
  (Chinese or English) from the library as a
  reference.

15
Interactive Compoments

• Marquees
• Banner ad management
• http//www.allfreelogos.com/468freebanners/
• a site on which you can make your banner ads
• Hover buttons
• Forms