ART 003 -- Images for the Web -- Fall 2004

Syllabus Assignments Help & Tutorials
Image Editing Webpage Editing Cameras, PSU Labs,
& Computer Store
Accounts,
Web Posting/Portal

HOW TO CREATE A WEBPAGE IN MOZILLA COMPOSER

(Directions for Beginners)

HOW TO CREATE A PAGE in Mozilla Composer that will be a variation of this "art003" frontpage:
Example of art003 frontpage


MOZILLA COMPOSER: Mozilla is a webpage browser that contains a Composer.
Open Mozila>Windows>COMPOSER!
To download a free version of Mozilla at home for making Webpages:
go to
http://www.mozilla.org
go to Mozilla 1.7.3
DO NOT DOWNLOAD MOZILLA FOXFIRE
ONLY 1.7
Download according to your system (probably Windows)


1.) Open Mozilla Composer
Open Mozilla the webpage brower, look along the top menu bar,
under WINDOW open COMPOSER.

2
.) If you would like to change background color of page:
Along top menu bar, under Page Colors and Backgrounds
click Use custom colors, select background color, choose from menu that pops up.click OK.

3.) Click inside your page, and type YOUR NAME and ART 003, Images for the Web
highlight your text and choose the center text option (similiar to how you center text in Word)
Change text styles under top menu bar FORMAT fonts, text styles, size colors can be changes there.
Note: if you return space it will be a double space,
if you return while holding shift the key it is a single space

4.) It is good practice to Save frequently incase the application quits.
**ALSO ALWAYS BE SURE TO SAVE YOUR WEBPAGE BEFORE YOU IMPORT ANY IMAGES!
click Save, save page as "art003", it should automatically add ".html" to the the title so that it will read:
"art003.html" **MAKE SURE YOU SAVE IT IN YOUR ART003 FOLDER!!!
NOT INSIDE A FOLDER IN YOUR ART003 FOLDER BUT RIGHT THERE IN YOUR ART003 FOLDER.

5.)Create links to your furture assignments:
Create a Table: Across the top menu bar choose Table:
a menu bar appears where you can change rows and columns and border size,
Create a table with 4 columns and 1 row.
(you can change the properties of your tables or cells later by clicking on your table till you see the little sqares in the corners, and double clicking tilla menu bar appears, you can choose table or cell and make changes, as needed) a border of zero means nolines will appear on your webpage, but while you are working onthe page, in Mozilla, a (red) dotted line will be visable, so you can see your tables.
Type the names of your assignments in each box, such as:
Assignment 3, Assignment 4, Assignment 6, Assignment 6.
Even though we have not created the future assignment .html pages we can make the links to each assignment by highliting the text in each box and typing the name of each future page in the LINK BOX. (along the top menu bar is is LINK box)
Highlight the assignment 3 text. In the link box type in "assignment3.html"
Highlight the assignment 4 text. In the link box type in "assignment4.html"
Highlight the assignment 5 text. In the link box type in "assignment5.html"
Highlight the assignment 6 text. In the link box type in "assignment6.html"

IN ORDER FOR LINKS TO WORK YOU MUST SAVE THE PAGE
exactly the same way you typed it in the LINK box, no CAPS OR spaces. no strange characters.

6.) Save -- **ALWAYS BE SURE TO SAVE YOUR WEBPAGE BEFORE YOU IMPORT ANY IMAGES!

7.) TO INSERT AN IMAGE:
click on INSERT, Choose IMAGE, browse in your art003 folder until you find the picture that you created for assignment 1. You can type in words to indicate the picture in the alternate text box. BE SURE THE IMAGE YOU IMPORT HAS BEEN PROPERLY SIZED (no larger than 9", 72 pixels) AND THAT you IMPORTED IT FROM YOUR ART003 folder, NOT from inside a folder in your art003 folder, but right there, but you picture and you page are on the same layer, in the same folder, in your art003 folder!

8.) Reminder: So you don't lose your work so far: SAVE

9.) Once you have done this and become more confident please feel free to make your pages fancier and more interesting.You can select and highlight boxes.
Change sizes by dragging squares.
Change colors by highlighting inside boxes and clicking on the little boxes near the menu with 2 squares, to the right of where it says body text.

When you finish be sure to Save this page in your art003 folder!
BECAUSE ALL .HTMLS AND .JPGS MUST BE IN THE SAME FOLDER


Once your pages are saved, see:
How to Post Webpages on Your PSU Webspace