Using Mozilla SeaMonkey… to Build Web Pages

Created by Desireé Caskey

View this presentation at http://www.slideshare.net

Search for Caskey

Before you Build…

Web Page Design Worksheet

Project Folder

Downloading Images

Citing Sources

Installing Software

Using Web Design Worksheet

Pre-Planning worksheet – before technology

Saves time Helps you visualize your web page Helps you plan for elements

Pictures Navigation Layout

Creating a Project Folder

Start page is named index.htm(l) Download all images/sounds into this

folder Use Relative Linking

Allows you to move your website without losing links

Name all files with lowercase and no spaces

Downloading ImagesCiting Sources

Instructions for downloading images – Mac

Instructions for downloading images – PC

Copy and paste an Internet address into your document.

Installing the necessary software Visit Mozilla.org

[http://www.mozilla.org] Other Mozilla Software SeaMonkey

Select your platform (Mac, Windows) Follow on screen instructions

Using SeaMonkey1. Launch SeaMonkey 2. From the File Menu choose New > Composer Page

HINT: Composer = EditorBuild web pages in Composer Mode

Navigator = BrowserSurf the Internet in Navigator Mode

Use the Window menu to move between Navigator & Composer

Use this menu to change the appearance of your text

Use this button to test your web pageDon’t forget to save first

Start your web page by inserting a table

Don’t forget to spell check before you publish

Insert Hyperlinks & Images

Let’s Start with a Table…Click on the Table buttonand fill out the necessary information

Save Your DocumentClick the Save button to bring up the Save Dialog Box

Put a title on your page. This is not the file name

Name your first file index.html and save it into your web page project folder

Add your content…

Decide where your navigation bar will be

Join Cells to create more space and insert graphics

Resize graphics before inserting

Tips & Tricks…working with images Download the image into your project

folder first Resize your image before adding it to

your page Make the image relative to your file

1. Choose File2. Select Don’t use alternate text3. Make sure you can see the image in the preview4. Click OK

Managing Tables…

It is easier to take away rows and columns than it is to add them.

Don’t let the shifting columns bother you.

Join Selected cells to customize the look.

Learn pixels.

Tables of different pixel width

100 pixels

300 pixels

500 pixels

Join selected cells

1. Highlight across the cells you want to join

2. From the Table menu, choose Join Selected Cells

Individual cells

Joined cells

Table Properties

•Adjust table size

•Designate number of rows and columns

•Create borders and spacing

•Align table in document

•Create a background color

Cell Properties

•Adjust height and width of each cell

•Adjust alignment of text in a cell

•Wrap text option

•Add a background color to a cell

•Click Next or Previous to work on another cell

Inserting Hyperlinks

Hyperlinks can be text or images

There are five basic types of hyperlinks: Link to a website Link to another web page on your web site Link to another document on your web site Link to a location in the same web

document Link to an email address

Link to a Web Site

Select text or image you want to make a link

Click on the Link button Type in the web address

example: http://www.billings.k12.mt.us/tilt

Link to another web page on your web site Select text or image you want to make

a link Click on the Link button Click Choose File Locate web page in your project folder Click OK

Link to another document on your web site Select text or image you want to make

a link Click on the Link button Click Choose File Locate the file in your web project

folder examples: powerpoint, pdf, word, image

Link to a location in the same web document Step 1: click in the document where you want

the link to go Step 2: Click on the Anchor button Step 3: Give your Anchor a name Select text or image you want to make a link Click on the Link button Click on the drop-down menu to select the

anchor to link to

Link to an email address

Select text or image you want to make a link

Click on the Link button Type “mailto:” and the email address

you want to link to example: mailto:caskeyd@billings.k12.mt.us