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

Syllabus Assignments Contacts Image File Size Help & Tutorials

 

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


To download a free version of Mozilla at home for making Webpages:
http://www.mozilla.org/products/mozilla1.x/
or just
http://www.mozilla.org
go to Mozilla 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 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.) Click under your title text.
Across the top menu bar choose Table:
a menu bar appears where you can change rows and columns and border size,
I left mine at 2 rows., 2 columns, changed border to "0"
(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 willbe visable, so you can see your tables.

6.) Click inside the top left square of your most recent table.
Along the VERY TOP menu bar, under Insert, Insert Table
Change to rows-3, column-1, border-0.
You can cahnge your tqables by clicking on the outside of the table and dragging the little squares.

7.)to create an automatic link to your email.
Hightlight your email adress. Click LINK in the top menu bar.
Type "mailto:xxx123.psu.edu" OK
(that is "mailto:yourEmailaddress")

8.) In to top left table that you created type your Name.
and your email address.

9.) Click in your next box, Type "Photos" or whatever you plan to call your photo series for assignment 3.
To create a LINK to your photos page (which you haven't yet created)
Highlight the word Photos, click on LINK along the top menu bar, type in the name you call your your photo page. probably "photos.html"
IN ORDER FOR THIS TO WORK YOU MUST SAVE THE PAGE
exactly the same way you typed it in the LINK, no CAPS OR spaces. no strange characters.

10.) Type "Final Project" in the 3rd box.
To create a LINK to your final page (which you haven't yet created)
Highlight the word "Final Projects," click on LINK along the top menu bar, type in the name you call your your final page. probably "final.html"
IN ORDER FOR THIS TO WORK YOU MUST SAVE THE PAGE
exactly the same way you typed it in the LINK, no CAPS OR spaces. no strange characters.

11.) Click inside the top RIGHT BOX to insert your picture.
ALONG THE VERY TOP MENU BAR click on INSERT, Choose IMAGE, browse in your art003 folder until you find the picture that you Emailed me. You can type in word to indicate the picture in the alternate text box. BE SUR 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!

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

13.) 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 as "
art003.html" 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