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)

• Create a folder called my_public_html on your c drive or the universal drive (See  the Create my_public_html  movie)

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

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

• Now, you can upload your page 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 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)
• Open Internet Explorer

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

For any problems, see web debug tips AND web skills

o

A stepping guide for Page 2 - a page about web design (this video will help you start page 2)

• Start with some research on web design

• Do a little bit of research to see what you want to put on your page. You can search for web development tools. You can search for marketing your web site. You can search for great backgrounds or buttons. Pick a couple links or pictures to put on your page.

• Create a thumbnail linked to a bigger picture: (see this movie for the entire thumbnail video)

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

• 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 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
Add a background: Format / page colors and background and choose a background picture. (See the set a background picture movie)

• To create a nice background picture, please use irfanview to either make your picture bigger, or to lighten it up, click here for instructions.
Insert a table using Table/ Insert and set the borders to 5. Type anything you want in the table.
Insert another table using Table/ Insert and set the borders to 0. Type anything you want in the table.

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.

• Search You Tube for a video on creating web sites, using seamonkey composer, editing files for the web, creating web buttons. Or you can search for any other video you like (that is not offensive). 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.)

• File / Save.
• File / Browse to see the video

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

• 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)
• Open Internet Explorer

• 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

For any problems, see web debug tips AND web skills

And fix your pictures