HOME
Day 1
Day 2
Day 3
Day 4
Terms
LINKS
|
DAY
2
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:
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)
http://www.barnonline.com/colorwheel.html
Alignment <align>
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)
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)
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.
Horizontal Rules (Lines) <HR>
Good separator lines without having to use a separate graphic file. Color,
alignment, and size can be altered.
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.
"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"
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
sspruiell@marblefalls.txed.net |