Web: Greeting card page HELP
Here is a simple step guide you can use. There is no need to use this
guide if you'd rather work in a different order.
If you get stuck in here: e-mail yourself the web card AND
all the pictures so you have something to work with in class; Also, post to the webhelp
discussion board.
you
can skip to page 2 stepping guide
A stepping guide: (some of these steps refer to movies here)
- Download two pictures to the
my_public_html folder. (See the first part of
the add a picture
movie)
- Create an empty index.html:
- Open mozilla (or SeaMonkey) and
take the window menu and then the composer option.
- Choose file / save
as, and it will ask for a title.
- Type web greeting
from <your name> and press <ok>.
- Navigate to the my_public_html folder using the down arrow key next
to "save in" at the top of the screen. Click until my_public_html is in the "save in" box.
- Type the filename
index and hit save.
- If it asks you to
replace, press okay.
- You now have a new,
empty index.html. (Following the steps below, you will make this your web
card, and then upload it to panther to replace the index you had.)
- Now, you can create the web
page itself:
- Write a quick
greeting to the person (i.e. just type: Happy Birthday Kris)
- Insert image and
choose the first picture. (See the add a picture movie)
- Write 10 things you
remember doing with that person (or some other list of about 10 items
that will mean something to the receiver)
- Insert the background
using: Format / page colors and background and choose the second picture.
(See the set a background
picture movie).
- If you make a
mistake, remember that Mozilla Composer has a problem with changing the
background picture. You must clear out the filename, press save, and
then you can change it to a new filename.
- Create the email
link:
- highlight the words
for the link
- and then choose
insert / link
- Open internet
explorer and look at the web site you want to reach.
- Copy the address in
internet explorer with edit / copy.
- Back in Mozilla,
highlight the name of the site and insert link and paste (using CTRL V)
the copied address into the link.
- Put your cursor at
the top of the page and insert / named anchor and call it top1.
- Type Top of Page
somewhere at the bottom of the page. Highlight that and insert / link
and then hit the down arrow and double click top1.
- Check your title.
- Format / Page title
/ see that it says "Web Greeting from your name to the person are
sending this to" (see the
title set movie)
- File / Save.
- Connect to panther by
choosing file / site manager/ and clicking on your site and hitting
connect. If your site is not set up, click
here to see the ftp guide
- Change FileZilla's "local site" to
c:\my_public_html
- Change FileZilla's "remote site" to /home/<your
account>/public_html. This is Very
important.
- Drag all files in my_public_html into public_html
(left to right)
- In Filezills's remote site, double click on public_html to be sure that is the folder being
displayed. See index.html (If you don't see any index.html be sure
you saved your webcard as index.html and drag
it over again.) (If your new file is not displayed, right click on the
index.html in my_public_html and be sure that
one is the right one. Then, drag it over from left to right again)
- Now, Check it: (See
the check
your work movie)
- Type
www.adelphi.edu/~<your user> and press Enter
- Press F5 to refresh
- See your webcard
- Call someone else to
look at it (to be sure they don't get any red x's)
-
o
A stepping guide for page 2: (this
video will help you start an extra page)
- Create an empty page2.html:
- Open mozilla (or SeaMonkey) and
take the window menu and then the composer option.
- Choose file / save
as, and it will ask for a title.
- Type web greeting
page 2 and press ok.
- Navigate to the my_public_html folder using the down arrow key next
to "save in" at the top of the screen. Click until my_public_html is in the "save in" box.
- Type the filename
page2 and hit save.
- You now have a new,
empty page2.
- Now, you can create the web
page itself:
- Add a background:
Format / page colors and background and choose a background picture. (See
the set a background
picture movie)
o
Create the email link:
§
Type contact me,
§
highlight the words for the link
§
and then choose insert / link
§
type "mailto:" followed by the email
address. There should be no spaces. (See the create a link to e-mail
movie)
o
Create the link to the top of page: (see the create a link to another spot in
your own page movie)
§
Put your cursor at the top of the page and
insert / named anchor and call it top1.
§
Type Top of Page somewhere at the bottom of the
page. Highlight that and insert / link and then hit the down arrow and double
click top1.
o
Copy some html from another source.
- Change the original index
page to have a link to your new page:
- Open mozilla (or SeaMonkey) and
hit window composer
- Choose file / open
file and double click on the index page
- Somewhere on the
page, type "go to another page"
- Highlight "go
to another page" and hit insert / link
- Click the choose
file button and double click on page2
- File / Save
- Now, you can upload your
pages to panther: (See copy
files from your pc back to panther movie)
- Connect to panther
by choosing file / site manager/ and clicking on your site and hitting
connect. If your site is not set up, click
here to see the ftp guide
- Change FileZilla's "local site" to
c:\my_public_html
- Change FileZilla's "remote site" to /home/<your
account>/public_html. This is Very
important.
- Drag all files in my_public_html into public_html
(left to right)
- In Filezills's remote site, double click on public_html to be sure that is the folder being
displayed. See index.html (If you don't see any index.html be sure
you saved your webcard as index.html and drag
it over again.) (If your new file is not displayed, right click on the
index.html in my_public_html and be sure that
one is the right one. Then, drag it over from left to right again)
- Now, Check it: (See the check
your work movie)
- Type
www.adelphi.edu/~<your user> and press Enter
- Press F5 to refresh
- See your webcard
- Click on the link to
your other page
- Call someone else to
look at it (to be sure you don't get any red x's)
- For any problems, see
web debug tips AND web
skills
-
Extra you can do: Embed a You Tube video in your page:
Search You Tube for a video. On the right side, see the embed box. Copy that
code.
§
Choose the insert menu option
§
Choose "html " to insert html
§
Paste the youtube embed code you copied from the
you tube site into here.
§
Return to view / normal (You will not see the video until you browse.)
- Download 1 picture
and use irfanview to create a smaller or larger
picture - so you have a thumbnail and a big picture.
- Download at least one
more picture to the same folder as your index (see the first part of
add a picture movie)
- Use irfanview to create a different sized copy of that picture
(see add
a thumbnail for instructions)
- Open irfanview
File / open and click on the picture
Image / resize & resample
Under "set new size", choose inches,
and then click 1.
Choose ok
Choose file / save as (NOT save)
Navigate using the down arrow next to "save in" at the top
to the folder with your original picture.
Add "thumb" to the "filename" box at the bottom.
(i.e. picthumb)
Exit irfanview.
-
In Composer: Add a small image:
- Insert image and choose
the smaller picture. (See the add a picture movie)
- click
the appearance tab and type border length of 10 (If you do not
see the appearance tab, right click on the picture and choose
image properties.)
- click
the link tab and click choose file and then change the type
to images to choose the bigger picture.
- be sure the "show
border around linked image" button is checked
- choose ok