MAKING WEB-PAGES USING Mozilla’s COMPOSER
1. Introduction
1. These instructions are
designed to be used with the built-in HTML editor found in the Mozilla’s suite package.
The program is called “Composer” and can be found on all of the
computers in the library computer lab.
To Download for free go to: http://www.mozilla.org/products/mozilla1.x/
(note: even if you are using a diffenect web page editor, much of what is covered here will still be useful)
2. You will need to make a page
in your set of webpages that will link to all of the
pages you create. This file is generally always called the “index” page. Please use this name for your projects as well. This
way whoever opens your folder will know what page to open to load your page.
3. You will need to either use a
floppy disk or burn your project to a cd. All files
for your webpage must be contained within one main folder with your name on it.
Within that folder you can have sub folders labeled for: docs, images, audio, video.
It will make life much easier for you when you put ALL of the media that
belongs in their project into one folder on your disk or cd.
If it’s not there, it will not show up on your page!
4. Naming files is critical to
webpage work If
you mess up, you will end up spending lots of time correcting file names so the
computer can recognize them. The keys
are:
a. all file names must be
lowercase
b. file names cannot have spaces,
dashes, periods, etc. (just letters and
numbers)
c. file names should have the
project name in them (ex: “foxinfo” or “foxintro”)
d. images and backgrounds need
to follow these rules as well (ex: “foximage1” or “foxrunning”)
2. HOW TO START
1.
Put your name (s)
on your disk and then put it into the floppy drive.
2.
Go to the MY
COMPUTER icon and select FLOPPY A to open your disk.
3.
Make a new folder
by doing the following sequence FILEàNEWàFOLDER.
4.
Give your folder
YOUR NAME.
5.
Close your disk
by CLICKING ON X TO CLOSE BOX.
YOU WILL BE SAVING ALL OF YOUR WORK IN THIS FOLDER –
DO NOT LOSE THIS DISK!! Treat the disk
with care, or will not work!
3. GETTING TO THE WEBPAGE EDITOR
WITHIN Mozilla
1.
Click on the Mozilla icon on the computer screen to open up
the program.
2.
Once open, click
once on the “Window” drop down menu and select “Composer” at the top menu.
3. You can use Composer much like a word processor. The buttons at the top of the page allow you
to change the font, size, and color of your text. Be
warned that font color and background should contrast to make your font
legible!
These are the different tools
you can use:
FORMAT – change background,
change colors of link text
FONT – text type changed here
SIZE – change size of text
COLOR – changes color of text
TEXT STYLE – bold, italics,
underlines, etc.
BULLET LIST – list of things
with dots in front
NUMBER LIST – list of things
with numbers in front
INDENT – indents text
ALIGNMENT – left, center,
right alignment
NEW – use this to start a new
page
OPEN – use this when you need
to open one of your pages from your disk
SAVE – saves your pages to
disk
PUBLISH – you won’t need this
PREVIEW – use this to see
what your page will look like on the web, and use it to check that links you
set up are working properly.
CUT – removes text so you can
paste it other places
COPY- copies text so you can
paste it other places
PASTE – places text you have
copied or cut
PRINT – prints your pages –
shouldn’t need this
FIND – finds words within
your document
LINK – links images or text
to other pages or web sites
IMAGE – use this to place
images into your web page
H. LINE – places a horizontal
line into your page
TABLE – places a table into
your page
SPELLING – checks spelling on
your page
4.
SAVING YOUR WORK FOR THE FIRST TIME:
1.
After working for
a few minutes, click on the SAVE AS button.
2.
Choose your disk
in FLOPPY A to save to. NOTE: If you don’t save onto your disk, you will
very likely lose your work. If you need
help with this, ASK!!
3.
Give your main
page the “index” title we spoke
about earlier. It should be a short name
with no spaces or capital letters. Make sure you are saving the index page into
the folder you have created for the all the content of your webpage. Fo
your pages, remember that titles should have names that are easy to identify later.
Generally graphics files associated with
a specific page also share the root of the files name with an added number such
as: EX: “fox1” and
“fox2”
4.
A second box will
appear when you save your page for the first time that asks you to give your
page a title. This title will be seen on
the browser, so it can be long and can have capital letters.
EX:
History of Malcolm X.
5. SAVING YOUR WORK AFTER
THE FIRST TIME:
1. You should save as often as possible to
avoid losing your work. Once you have
designated where you want to save your work, the computer will automatically
save to your disk again when you select SAVE from the TOOLBAR OR FILE menu.
6. THERE ARE FOUR TASKS YOU MUST BE ABLE TO DO TO MAKE A WEB-PAGE:
A. HOW TO COPY IMAGES AND BACKGROUNDS FROM THE
INTERNET AND SAVE THEM TO YOUR FILE:
Switch from “Composer”
program to the “mozila” or any internet browser
program Then type in the following URL: Remember
that if an image is expected to be on your pages it must be saved in the
project folder or it will not show!
http://www.netscape.com/assist/net_sites/bg/backgrounds.html
1.
Browse the
selections of backgrounds and choose one for your homepage.
2.
Place the arrow
over the image and RIGHT-click on the mouse.
3.
From the menu,
select SAVE IMAGE AS.
4.
A box will appear
that will allow you to choose where to save this image. Click on the BROWSE selection window and
select drive A if you are saving to your floppy.
5.
Your folder
should appear in the box. It helps to
have a folder with the name “images” to put all your images into. Click on your
folder and click on SAVE box. GIVE THIS
IMAGE A TITLE SO YOU REMEMBER WHAT IT IS – USE LOWER CASE SHORT TITLES.
6.
This same process
can be used for ANY IMAGE you find on the web that you want to use. Just follow steps 4 through 7.
B. HOW TO
PUT A BACKGROUND INTO YOUR HOMEPAGE:
1.
After you have
SAVED a background to your file, switch back to the “Composer” program.
1.
Open up the page
you want to place a background.
2.
Click on the
FORMAT part of the toolbar and select PAGE COLOR AND PROPERTY.
3.
At the bottom
half of the box that will open it says BACKGROUND IMAGE. Click on the box that says CHOOSE FILE.
4.
It will ask you
to “Choose File.” Select your disk, and
click ONCE on the file you want.
5.
Click OPEN and
then click OK.
6.
You should now
see this background on your page.
7.
If you don’t like
what you see, you can easily go back and change backgrounds by repeating steps
3-6.
8.
If you want to
simply change the color of the background, repeat step 3 but click on the COLOR
BOX next to the “Background” box at the top half of the box. Pick one of the colors in the color box and
then click OK.
9.
Try out different
colors and background images to see what you like best.
C. HOW TO PUT AN IMAGE
INTO YOUR HOMEPAGE:
1. Put the cursor where you want your
image to be.
2. Click on the IMAGE box on the tool
bar.
3. Click on CHOOSE FILE.
4. Make sure that FLOPPY A is listed in
the box at the top.
5. Click on the image file in your disk
OR IN IMAGE FOLDER.
6. Click OPEN.
7. Click OK.
8. Your image should now be in your web
page.
9. To change the size of your image,
click on the image and then click on the IMAGE box on the toolbar again.
10. Play with the DIMENSIONS box down at
the bottom.
D.
HOW
TO SET UP LINKS WITHIN YOUR PAGE:
1. Highlight the text or click on the image you want to
set up a link for.
2. Click on the LINK box on the toolbar.
3. Select CHOOSE FILE to link to one of the other pages
you have created.
4. If you want to link to a different web-site, enter
the URL
in the space next to LINK TO (you
can copy and paste the address from the web-site as a shortcut)
5. Click OK.
6. The text should now be in color and underlined.
7. You can check that the link works by selecting the
PREVIEW button on the toolbar and then clicking on the linked text.
Here are some helpful links if your want to get fancier:
MX Studio
Help – Dreamweaver and Fireworks