Mozilla Suite 1.7 Web Browser

E-mail and newsgroup client, IRC chat client, and HTML editing

Download: http://www.mozilla.org/products/mozilla1.x/

Create a Folder Called: website1

Save All web pages & graphics inside of your website1 folder first before adding any links or images

index.htmlmath.htmllogo.gifgraphic1.jpg

Launch Mozilla Web Browser

File>New>Composer Page

A Blank Page You Can Edit Opens Up in Front of the Browser Window

Format>Page Title and Properties

Add The Title, Author, Description

File>Save As Before adding any graphics or links

• Your main homepage must be named index.html

• All lowercase letters, no spaces, and no special characters.

• Place all web pages and graphic images inside of your website1 folder (.jpg, .gif, .html) before adding any links or images to your web pages.

Format>Page Colors & Background

Default White Background & Link Colors Recommended

Insert>Table or Select the Table Icon Along the Top

Header: 1 Row, 2 Columns, 0 Border, OK

With a 0 Border The Table Edge Will Not Show When Posted

Type Your Initials in Cell 1, and The Title in Cell 2

Highlight Text, Format>Font>Select Desired Font Type

Highlight The Text, go to Format>Size>XX-Large for Heading

Logo & Title With A New Font & Resized

Table>Select>Table

Format>Table Cell Properties

Table Tab Selected to Make Changes to Your Table

Cells Tab Selected to Make Changes to Individual Cells

Cells Tab Selected, Check Background Color, Select Color

It is difficult to get the software to change colors so be sure of your choice before selecting it.

Color Choice, OK

May Need to Add Color to Each Cell Separately

Option: Select the Text Logo, Press Delete Key, to Add an Image

File>Save As

Name the Page index.html, Location Desktop, HTML, Save

Click in the Left Cell, Insert>Image, or Click Image Icon

All web pages and graphic images must be placed inside of your website1 folder before adding any links or images to work correctly.

Location Tab, Check Relative, Alternative Text Name, Choose File

Image must be in the website1 folder before adding to the web page.

Navigate to find the .gif or .jpg file placed in website1 folder

Only the Filename Should Show, Not The Path to the File

Select the Radial Button For Alternate Text, Provide a

Description of the Graphic Image

Individuals With Disabilities May Use Auditory Readers That Will Read The Text Aloud To Them

Your Graphic Image Now Appears

Click the Curser Below Heading, Insert>Table, or Table Icon

I

Row 1, Column 7, Width 100%, Border 0, OK

Type The Navigation Links Related to Your Professional Interest Area

May Be Different From Example

Highlight the Text, Format>Font>Ariel

Ariel Font Works on Both PC & Mac Platforms, Good Readability

Link Your Navigation: Select the Text in Cell 1, Insert>Link, or Icon

Your Homepage is Named index.html, OK

Name All Files With Lowercase Letters, No Spaces, No Special Characters, and Add The Correct File Extensions

Select the Text in Cell 2, Insert>Link, newname.html, OK

curriculum.html

Select the Text in Cell 3, Insert>Link, newname.html, OK

instructor.html

Select the Text in Cell 4, Insert>Link, newname.html, OK

resources.html

Select the Text in Cell 5, Insert>Link, newname.html, OK

evaluation.html

Select the Text in Cell 6, Insert>Link, newname.html, OK

standards.html

Select the Text in Cell 7, Insert>Link, newname.html, OK

sitemap.html

The Navigation Links Are Now Blue & Underlined

Table>Select>Table

Format>Table Cell Properties, Background Color

Select Desired Color, Remember it is Difficult to Change, OK

Can See the New Navigation Background Color

Select Text, Format>Font>Helvetica

Select Below Navigation, Table Icon, 1 Row, 2 Columns, OK

I

Can Add A Graphic Image to the Left Cell, & Text to Right

Click in the Left Cell, Insert>Image, or Image Icon, Choose File

Navigate to Locate the .gif or .jpg Image Saved to website1

Be Sure You Only Have the File Name and Not the Path

Provide The ALT Tag

Click in the Right Cell to Add Your Text

I

Add The Text For Your index.html Page

File>Save As, index.html to Your Desktop

File>Browse to Preview Your Page

The Preview Window Opens in Front of the Edit Window

To Create Your Other Webpages Delete the Bottom Table

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: curriculum.html

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: instructor.html

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: resources.html

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: evaluation.html

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: standards.html

Change Your Title To Match The Navigation For the Next Page

File>Save As

Example: sitemap.html

Here is an Example of the Files inside of the website1 folder

index.html

curriculum.html

instructor.htm

resources.htm

evaluation.htm

standards.htm

sitemap.htm

logomouse.gif

womangraphic.gif

File>Preview in Browser,Test the Links

After Saving & Closing Your Files, Open Mozilla

Go to File>Open File

Select: index.html inside of the website1 folder

Your Page Opens in Preview Mode

File>Edit Page to Continue Working

Page in Edit Mode

To Return to Preview go to File>Browse Page

To add an External Link: Type desired text & highlight, then select

the link icon, add full URL & OK

The Active Link is Now Blue in Color and Underlined

To Add a E-mail Link, Type Desired Text, Highlight

Click Link Icon, Type in mailto:hollandj@emporia.edu

Replace hollandj with your e-mail name

Blue Underlined E-Mail Link is Active

For Long Pages of Text Add Anchors to Avoid Scrolling

Highlight Text, Click the Link Icon, #name, Do This For Each One

Example: #block1

Type in the Names Where You Want to Jump To

Click in Front of Block 1, go to Insert>Named Anchor

I

The Anchor Name Needs to be an Exact Match Without the #

Example:

block1

The Yellow Anchor Only Shows in Preview Mode

Duplicate the Steps to Add Anchors to All Jump Areas

File>Browse Page

In the Preview Window You Can Test The Jump Anchor Links

To View the HTML Code Generated Select the Tab Below

Normal Tab to Continue Editing

Preview Tab To View & Test

Example of Files Inside of Your website1 Folder

Reminder:

All web pages and images placed inside of your website1 folder will be uploaded to your server space.

You Are Ready To Upload All Files to Your iDrive/My Files Web Server

Space

• See the iDrive/My Files Presentation Instructions

• Remember to Test Your Website After Uploading to Be Sure All Graphics Show, and All Links Work Correctly