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 Express to change these attributes like a word processor

    *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 pallete 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 graphic.

  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, excellect 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 spearate 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 enought to fit the picture area only on one side of page.  You will probably need to adjust your page alignment 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".
    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!

    ClipArtConnection -- http://www.clipartconnection.com
    Moyra's Web Jewels -- http://www.moyra.com/jewels/minentrance.html
    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 Express 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 Express, 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