Day 1

Day 2

Day 3

Day 4




Build Your Own Web Page

I.   Basic page elements (Guided Activity)
Use Format Tools on toolbar or Format Menu choices to help you do the following:

  1. Background Color & HEX code <color>
    HEX (meaning SIX) numerals or letters placed in code to create color on page
    RGB (like colors of the light spectrum) values for each letter
    0 (zero) is absence of color (e.g., 000000 is black-- no red, no greens, no blues)

  2. Alignment <align>

  3. Breaks <br>
    Pushing Enter key will skip a line between entries (double-spaced)
    Using SHIFT + Enter will drop you down only one row (single-spaced)

  4. Text
    Use the formatting tools on FrontPage to change these attributes like a word processor
    (There is one big difference: the number 1 is not the FONT size on a web editor...it is the HEADING size--it translates to size 8 pt font....look to the right in the brackets)

    *Font <font>
    Drop-down menu or Format/Font
    * Size <size>
    Use A or A to make text become larger or smaller or use Format/Font and choose a size
    *Color <color>
    Use the Color palette on the toolbar to choose a color or use Format/Font and make a selection from the menu

II.   Graphics (Lecture & Guided Activity)
Remember that each graphic is a SEPARATE file in your directory!
       Use the "yellow sunset picture" button on the toolbar or Insert, Image from the menu bar to add a saved graphic.
       FrontPage also allows you to use clipart from the Windows/FrontPage folder.  Be sure to save the files with a name you can remember!  Otherwise, your graphics will be called whatever weird numeric combination the program wants it to be named...making it difficult to find or edit later!
      Use Insert/Picture/ClipArt from the menu bar or enable the "white red-headed guy" icon on the drawing toolbar from the menu bar (Tools/Customize and check the Drawing box)

  1. Types of image formats & their capabilities/limitations
    A.  GIF -- can be transparent or animated, tends to lose some of color value, good for "cartoons" or "drawings"

    B.  JPG -- no transparency or animation, but excellent color value, good for photos

    C.  BMP -- good color value, but take up LARGE amounts of memory space; some BMPs can take up to SIX times as much memory as the same picture in GIF or JPG form

    D.  other -- TIFF, PDS, etc.  Tend to be program-specific; that is, they can only be opened or viewed by the program that created them or software by the same manufacturer.

  2. Horizontal Rules (Lines) <HR>
    Good separator lines without having to use a separate graphic file.  Color, alignment, and size can be altered.

  3. Graphics as backgrounds
    Tiled backgrounds will repeat all over screen.  Best to use a small GIF or JPG in a light color.
    Click format, background, background image (browse for the file)

    Border backgrounds also "tile" on the screen, but they are made long enough to fit the picture area only on one side of page.  You will probably need to adjust your page alignment, borders, or table so you don't have text or images covering the border.

  4. "Free" graphics
    There are many free clip-art and web graphic background collections on the web.  
    Be sure to read the rules or terms of use for each image you decide to "take", especially if you are creating a business page...the terms of use for some "FREE" graphics sites will indicate that you may not use them if you are making a site for your business.
    FREEWARE -- you can "take" the image without paying a fee
    LINKWARE -- you can "take" the image if you place a link or logo back to the source's page
    SHAREWARE -- share your credit card with them and they'll share their images with you!

    Microsoft Design Gallery -- http://dgl.microsoft.com
    ClipArtConnection -- http://www.clipartconnection.com

    Barry's ClipArt Server -- http://barrysclipart.com/
    ClipArt.Com --  http://www.clipart.com
    The Graphics Ring -- http://www.graphicsring.com

    To copy & take an image from the web: Right-click on the picture, click "Save picture as" on the pop-up menu, choose the location and directory where you want to store your new copy of the picture, click "Save"

  5. Editing Graphics within FrontPage and with free software programs
    Microsoft Paint (Start, Programs, Accessories, Paint)
    Microsoft Photo Editor (C:\Program Files\Common Files\Microsoft Shared\PhotoEd)
    Microsoft GIF Animator (Download: http://www.keyscreen.com/KeyScreen(s)6/MicroGIFanimator.htm)

    A.  sizing graphics & images
    Image size is based upon the number of pixels (little squares of color) that make up the picture you see on your screen
    B.  transparency
    C.  animation
    D.  brightness/contrast

III.   Break

IV.   Lists (Lecture & Guided Activity)

  • Lists tags can help you indent and organize the layout of your page.

  • With FrontPage, you can create numbered lists that will automatically give you the next number in the series when you click Enter, or bulleted lists that you can format with different shapes of bullets before each entry.

Dave's Interactive HTML Tutorial (MiniChapter about List tags) -- http://www.davesite.com/webstation/html/chap07.shtml
(If you go to this site, be aware that you are only allowed to print out ONE copy of each tutorial for free...after that there is a $5 fee for "extra" copies that you print)

V.   Links (Guided Activity)
Use the globe/link button on toolbar or Edit, Hyperlink to create a hyperlink to a specified location

  • Text Links <a href>

  • Graphics as links <img src> and <alt>

  • Bookmarks or "targets" and "anchors" <#>

  • Target frames (why and when to use them)

MFISD Continuing Education Course

Instructor: Shelli Spruiell