Web Greeting Card Help

Here is a step by step guide you can use. There is no need to use this guide if you'd rather work in a different order. All the skills you needed were taught earlier in this module here

Here is a sample website

• If you don’t already have a folder called my_public_html , create one (See  the Getting started video)

• Download two pictures to the my_public_html folder. (See the first part of the add a picture movie)

• Create an empty new page:

• Open SeaMonkey and take the window menu and then the composer option.
• Chose file / new.

• 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 greeting and hit save.
• If it asks you to replace, press okay.
• You now have a new, empty greeting.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)

· If Seamonkey is refusing to show pictures, you can close all your seamonkey windows and open it again. This works if your pictures are in the same folder as your index, and your picture links have no path: see video showing how to show pictures in composer

• 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 Seamonkey 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. See this video for fixing background picture

• Remember that your page will be seen in different window sizes, so be sure your background picture will not interfere with the page content. To lighten your picture, see this lighten your background with google drawing video

• 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)

• Create the link to another site: (see the create a link to a web site movie)

• Type the name of another site (without the www)

• 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.

• 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.

• 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.

· Create an empty page2.html:

o Open Seamonkey and take the window menu and then the composer option

o Type "See my second page"

o Insert a table using Table/ Insert and set the borders to 5. Type anything you want in the table cells

o Choose file / save as, and it will ask for a title.

o Type page2 and press ok.

o 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.

§ You should also see index.html in that folder.

o Type the filename page2 and hit save. You now have a new, empty page2.

· Change the greeting page to have a link to your new page: ( see the link from web greeting card to second page video)

o Open SeaMonkey and hit window composer

o Choose file / open file and double click on the greeting page

o Somewhere on the page, type "go to another page"

o Highlight "go to another page" and hit insert / link

o Click the choose file button and double click on page2. Make sure you do not see a path.

o File / Save

· Change the original index page to have a link to your greeting page: ( see add link to index video )

o Open SeaMonkey and hit window composer

o Choose file / open file and double click on the index page

o Somewhere on the page, type "go to web greeting card"

o Highlight "go to web greeting card" and hit insert / link

o Click the choose file button and double click on greeting. Make sure you do not see a path.

o File / Save

• Now, you can upload your pages to panther: (See copy files from your pc back to panther movie)
• Open Filezilla

• Connect to panther by choosing file / site manager/ and clicking on your site and hitting connect. If your site manager is not set up, click here to see the ftp guide or go back to the change web assignment instructions where you first set up the site manager.

• Change FileZilla's "local site" to c:\my_public_html or whatever folder you used to hold your web pages that you just created.
• In Filezills's remote site, double click on public_html to be sure that is the folder being displayed. See index.html
• See that the "remote site" is now /home/<your account>/public_html. This is Very important.
• Drag all files in my_public_html into public_html right over the index.html filename.
• (If your new files are not displayed, right click on the index.html in my_public_html and choose open with notepad to be sure that one is the right one. Then, drag it over from left to right again)

• Check it: (See the check your work movie)
• Open Internet Explorer or any web browser

• Type home.adelphi.edu/~<your user> and press Enter

• Press F5 to refresh
• See your webcard and click on all links.
• If your website says "forbidden" or 403 error: follow this video or the instructions below:
• change file and folder permissions on your public_html and index.html:
• right click (or control click on mac) on public_html on the right (remote) side.
• choose "file attributes" or "file permissions"
• In the numeric value box, type 755
• Click Ok
• highlight all the files in the public_html folder and right click (or control click on mac).
• choose "file attributes" or "file permissions"
• In the numeric value box, type 644
• Click Ok
• check your website again.
• Call someone else to look at it (to be sure they don't see any red x's. If they see a red x and you do not, it means you have a link directly to your computer, instead of a relative link. Look at your picture in seamonkey and see a path starting with c:. Remove the path and upload the index again. It is the web page that holds the path, not the picture.
• For any problems, see web debug tips AND web skills or fix your pictures

• Share your web address with me in moodle.
• Copy your web address into a document.
• If you had trouble, describe it in that document.
• Upload that document to indicate you are done.

Perhaps this index of skills videos will help