Netscape Composer: Another Tool For Your Educational Toolbox

1
Netscape ComposerAnother Tool For Your
Educational Toolbox

• A Presentation By
• Kevin Kearney
• Netscape Composer
• Web Searching Made Easy
• Combining the two
• Student/Teacher Web Pages

2
Starting Netscape Composer
Starting Netscape Composer (1 of 2)
1. Click on Start 2. Select Netscape Communicator
Professional Edition 3. Then select Netscape
Composer
3
Starting Netscape Composer
Starting Netscape Composer (2 of 2)
This is the window that will appear on your
monitor.
Netscape Composer Window
4
Typing Text
Typing Text (1 of 2)
1. At the blinking cursor you are now ready to
start typing text.
(1) Blinking Cursor
5
Typing Text
Typing Text (2 of 2)
1. Type the words Here is my text.
(1) Type text
6
Bold, Italics, Underline
Bold, Italics, Underline (1 of 5)
1. Type the words Bold Italics Underline
(1) Type the words Bold, Italics, Underline
7
Bold, Italics, Underline
Bold, Italics, Underline (2 of 5)
1. Highlight the word Bold by holding down the
left mouse button and dragging the mouse. 2.
Release the left mouse button. 3. Click the
8
Bold, Italics, Underline
Bold, Italics, Underline (3 of 5)
1. Highlight the word Italics by holding down the
left mouse button and dragging the mouse. 2.
Release the left mouse button. 3. Click the
9
Bold, Italics, Underline
Bold, Italics, Underline (4 of 5)
1. Highlight the word Underline by holding down
the left mouse button and dragging the mouse. 2.
Release the left mouse button. 3. Click the
10
Bold, Italics, Underline
Bold, Italics, Underline (5 of 5)
1. You should now have text that is Bold,
Italics, and Underlined
Changed Text
11
Replacing Text
Replacing Text (1 of 1)
1. Highlight the words Bold, Italic, and
Underline 2. Release the left mouse click. 3.
Type Here is my text.
(3) Type Here is my text
12
Changing the Font Type
Changing the Font Type (1 of 5)
1. The default Font Type is Variable
Width However what you are reading is Comic Sans
MS
1. Default Font Type
13
Changing the Font Type
Changing the Font Type (2 of 5)
1. Highlight your text by placing the pointer at
the beginning of the text and dragging it to the
end of the text (while holding the left mouse
button). 2. Release the left Mouse button.
14
Changing the Font Type
Changing the Font Type (3 of 5)
1. On your Formatting Toolbar click on the down
arrow in the Font Type Property box (next to
Variable Width)
15
Changing the Font Type
Changing the Font Type (4 of 5)
1. Click repeatedly to scroll the list down. 2.
Select the font of your choice by clicking on it
i.e. Century Gothic.
16
Changing the Font Type
Changing the Font Type (5 of 5)
1. Text has changed from Variable Width font to
Century Gothic.
1. Changed Text Type Century Gothic
17
Changing the Font Size
Changing the Font Size (1 of 4)
The default Font Size is 12 point
18
Changing the Font Size
Changing the Font Size (2 of 4)
1. Highlight the word my by placing the pointer
at the beginning of the text and dragging it to
the end of the text (while holding the left mouse
button). 2. Release the left mouse button
19
Changing the Font Size
Changing the Font Size (3 of 4)
1. On the Formatting Tool Bar click the down
arrow in the Font Size Property box (next to 12)
2. Select the font size of your choice by
clicking on it. Try 24
20
Changing the Font Size
Changing the Font Size (4 of 4)
1. The highlighted text (the word my) has been
changed from size 12 font to size 24.
1. Changed Text Size 24 point
21
Undoing a Change
Undoing a Change (1 of 2)
1. Click on Edit.
22
Undoing a Change
Undoing a Change (2 of 2)
1. Select Undo.
23
Changing the Font Color
Changing the Font Color (1 of 3)
1. Highlight your text Here is by placing the
pointer at the beginning of the text and dragging
it to the end of the text (while holding the left
mouse button). 2. Release the left mouse button.
24
Changing the Font Color
Changing the Font Color (2 of 3)
1. On the Formatting Toolbar, click on the down
arrow in the Font Color Property box (next to the
black box) 2. Select the font color of your
choice by clicking on it - i.e. orange.
25
Changing the Font Color
Changing the Font Color (3 of 3)
1. The text has been changed from Black to
orange 2. The color chosen i.e. orange
2. Color chosen
1. Text is Red
26
Saving Your Work
Saving Your Work (1 of 10)
1. Click on File on your toolbar (this will drop
down a gray menu). 2. Select Save As
27
Saving Your Work
Saving Your Work (2 of 10)
You will now see the Save As window. The
different parts of the window are 1. Location
to save in. 2. Creating a New Folder 3. File
Name 4. File Type 5. Save button
1. Location
2. New Folder
5. Save Button
3. File Name
4. File Type
28
Saving Your Work
Saving Your Work (3 of 10)
Select the Location in which you wish to save
your work 1. Select the down arrow for a menu of
your drives. 2. Select (C)
29
Saving Your Work
Saving Your Work (4 of 10)
In your (C) drive you will see all the existing
folders. It is a good idea to have a new folder
for each page or group of pages that you create.
Existing folders on c drive
30
Saving Your Work
Saving Your Work (5 of 10)
1. Click the New Folder icon. This will create a
new folder titled New Folder 2. Type WebPage as
the new folder name and press Enter
2. Type WebPage and press Enter
NOTE when you name a Folder, be as brief as
possible and avoid spaces and characters other
than letters and numbers. Your Folder Name is
case sensitive so you must pay attention to
capital letters.
31
Saving Your Work
Saving Your Work (6 of 10)
1. Click once on your new folder called
WebPage 2. Click Open
32
Saving Your Work
Saving Your Work (7 of 10)
You are now in your new folder and must give your
web page a name. This is called a File Name. 1.
Type Homepage.html 2. Click Save
Your new folder
(1) Type Homepage.html
NOTE when you name a File, be as brief as
possible and avoid spaces and characters other
than letters and numbers. Your File Name is case
sensitive so you must pay attention to capital
letters.
33
Saving Your Work
Saving Your Work (8 of 10)
You are now now asked to add a title that will
appear at the top of your web page.
Type Janes Web Page.
It is a good idea for your title to be easily
identifiable for example Janes Web Page instead
of just Homepage. 1. Type Janes Web Page 2.
Click OK
34
Saving Your Work
Saving Your Work (9 of 10)
You are now now back at your web page. You will
now see 1. Your new Title 2. Your File
Location 3. Your File Name
3. File Name Homepage.html
1. Title Janes Homepage
2. File Location c/WebPage/
35
Quick-Saving Your Work
Saving Your Work (10 of 10)
Once you have given your web page a file name,
you can Quick-Save your work. To do this
simply click on the Save icon on your toolbar.
It is recommended that you frequently save your
work so as to avoid losing large portions of your
work.
Save Button - Allows for Quick-Saving
36
Inserting an Image
Inserting an Image (1 of 7)
1. Click on Insert 2. Select Image This will open
the Image Properties Window.
37
Inserting an Image
Inserting an Image (2 of 7)
The Image Properties Window allows you to 1.
Choose your image from your file 2. Align how
your text will wrap around the image 3. Change
the image size 4. Place a border around your
image.
1. Select an Image
2. Align Text
3. Re-size
4. Border/Space around image
38
Inserting an Image
Inserting an Image (3 of 7)
1. Click on Choose File This will open the Choose
Image File Window
39
Inserting an Image
Inserting an Image (4 of 7)
In the Choose Image File Window find the image of
your choice and 1. Click on the image i.e.
happy2.jpg 2. Click Open This will take you back
to the Image Properties Window
40
Inserting an Image
Inserting an Image (5 of 7)
In the Image Properties Window 1. You will see
the image location i.e. this image is on the c
drive, in a folder named graphics, and it is
called happy2.jpg 2. Select bottom right 3. Click
OK
1. Image Location
NOTE Your images should be placed in the same
folder as the web page they will appear on.
41
Inserting an Image
Inserting an Image (6 of 7)
Your image should now appear on your page with a
cursor next to it. You can now start typing text
(or enter another image). 1. Type Text aligned
to the bottom right.
(1) Type Text aligned to the bottom right.
42
Inserting an Image
Inserting an Image (7 of 7)
Here is the final product of an image with the
text aligned to the right of it.
43
Resizing an Image
Resizing an Image (1 of 5)
Here is an image happy2.jpg. To insert an
image follow the steps in Inserting an Image
Image happy2.jpg
44
Resizing an Image
Resizing an Image (2 of 5)
1. Double click on the image. This action will
open the Image Properties Window.
45
Resizing an Image
Resizing an Image (3 of 5)
Once you have selected an image 1. Click in the
box that says Constrain (so that the box is
checked) 2. Click Original Size (this will show
the ratio of width to height of the image in
pixels).
Chosen image happy2.jpg
46
Resizing an Image
Resizing an Image (4 of 5)
Once you have selected Constrain the image will
change proportionately when you change either the
height or width. 1. Drag to highlight the height
2. Release the left mouse button 3. Type the new
size i.e. 145 pixels 4. Click OK
(3) Type 145
47
Resizing an Image
Resizing an Image (5 of 5)
Here is the image happy.jpg resized to 145 pixels.
Resized Image
48
Undoing Image Resize
Undoing Image Resize (1 of 1)
1. Click on Edit 2. Select Undo
49
Inserting a Border Around an Image
Inserting a Border Around an Image (1 of 5)
Here is an image happy2.jpg. To insert an
image follow the steps in Inserting an Image
Image happy2.jpg
50
Inserting a Border around an Image
Inserting a Border Around an Image(2 of 5)
1. Double click on the image. This action will
open the Image Properties Window.
51
Inserting a Border Around an Image
Inserting a Border Around an Image (3 of 5)
Once you have selected an image you can set a
border around part (top, bottom, left, or right)
or all of it.
Chosen image happy2.jpg
Borders
52
Inserting a Border Around an Image
Inserting a Border Around an Image (4 of 5)
Once you have selected an image 1. Drag to
highlight the border you want to change
i.e. Solid Border 2. Release the left mouse
button 3. Type the number of pixels you would
like the border to be i.e. 5 4. Click OK
(3) Type 5
53
Inserting a Border Around an Image
Inserting a Border Around an Image (5 of 5)
Here is the image happy.jpg with a border of 5
pixels.
54
Deleting an Image
Deleting an Image (1 of 2)
1. Click on the image to select it 2. Press
Delete on your keyboard
(2) Press Delete on the keyboard.
55
Deleting an Image
Deleting an Image (2 of 2)
Now that your image is deleted you will have a
blinking cursor.
56
Creating a Link
Creating a Link (1 of 5)
A link allows the person viewing your page to go
from your web page to another web page. 1. Type
Kevin Kearneys Education Page (you can also
link an image which you have inserted)
1. Type Kevin Kearneys Education Page
57
Creating a Link
Creating a Link (2 of 5)
1. Drag to highlight the text (or image) 2.
Release the left mouse button 3. Click on
Link This will open the Character Properties
Window.
58
Creating a Link
Creating a Link (3 of 5)
In the Character Properties Window you will
see 1. Link Source what is to be linked The
highlighted text (or image) that will become the
link 2. Link To where the link will lead to.
1. What is to be linked (text or image)
2. Where it is to be linked to.
59
Creating a Link
Creating a Link (4 of 5)
1. At the blinking cursor type the URL of the web
page to be linked to i.e. http//www.cbv.ns.ca/sst
udies 2. Click OK (This will take you back to
your web page)
1. Type http//www.cbv.ns.ca/sstudies
60
Creating a Link
Creating a Link (5 of 5)
If you place your cursor over the highlighted
text you will see the link address (url).
Linked Text
Web Address (URL)
61
Creating an Email Link
Creating an Email Link (1 of 4)
1. Drag to highlight the link you created. 2.
Release the left mouse button. 3. Click on Link
(this will open the Character Properties Window)
62
Creating an Email Link
Creating an Email Link (2 of 4)
1. Click on Remove Link
63
Creating an Email Link
Creating an Email Link (3 of 4)
1. Type mailtokearney_at_istar.ca (no spaces) 2.
Click OK NOTE in order for an email link to
work, the email address MUST be preceded by
mailto
1. Type mailtokearney_at_istar.ca
64
Creating an Email Link
Creating an Email Link (4of 4)
1. Place your mouse over the highlighted text 2.
You will see the link address.
1. Place your cursor over the linked text
2. Your Link Address