June 01, 2006

Everybody! Wrapping up your sites!

Today is the last day to work on your individual websites. I hope you have all learned something about basic HTML and the steps that go into creating a personal page for the web. You should all have an active index page (a homepage) in your folder on the shared server that can be linked together. We also have a few pictures we should organize on a club page.

Everyone should understand the following:

Using the Internet safely.
How to protect your identity and not get hurt on the web.
How to keep from downloading spyware and other viruses from websites.
How to search smartly and safely.

Understanding Webpages
What is a browser?
What is a URL?
What is HTML?
How do you use HTML to make a link to a webpage?
How do you use HTML to make a link to an image?
How do you copy and save images from the Internet?
What is a server?
How can you use MSPaint to prepare images for the web?
How do you add sound to a webpage?
How do you make links between pages or to other websites?
How to plan multi-page websites.
How to use and export websites from Publisher.
How to tell a story with words and pictures.

"Fair Use" of Web Resources
What is copyright?
Who owns the pictures and songs you find on the web?
How can you use them fairly?

Posted by Eleanor Ramsay at 01:18 PM

May 25, 2006

Last Day to work on your sites

Everyone should spend this week working on their personal site.

If you are using Publisher, you need to export your site as HTML

If you are using Freewebs, you still need to have an HTML page in your folder. On that index you should have at least one banner or piece of art you have created yourself and a link to your freewebs page.

I want everyone to be contributing to the group pages too. We need information about the clubs and some banner art for the site made.

Next week we will show our sites to each other!

Posted by Eleanor Ramsay at 03:49 PM

May 18, 2006

21st Century Web Club Group Site

Today:
Let's create an original banner for each school's club. You can make the banners in cooltext, kidpix, word, wordart or any other online banner making source we've played with. I want to see your creativity at work!

Also. VERY IMPORTANT
Each participant in Web Club needs to have an index (web) page at the server that they have made. If you are one of the kids using freewebs to create a site, you still need to create a basic page for the server. Only server-based pages will be part of the final group site.

Today, everyone should also begin wrapping up their personal pages. Remember, if you are using Publisher to create your pages, you will need to export it to HTML. I'll go over that with you.

Your pages should include:
At least one banner or piece of art that you have created yourself.
Links to pages where you got art from, and pages you like to visit.
One interactive thing. A game or video code, music, questionaire, something for your visitors to do when they visit your page.

Here is a good video code site.
http://www.muvids.com
This one seems to have a lot of music to choose from and does not contain the pop-ups and spyware that some of the other sites have. Talk to me about how to add more than one video on a page.

Here is a site with some games you can put on your site.
http://www.gamereign.net/

Of course, these pages have a lot of advertising and pop-ups on them. Remember, do NOT play banner games or click on any pop-ups!! Really! Never! This is especially important when you are looking at websites at home!

There are also some java-based games on the server. Those can be put on your pages too. Not sure how? Ask me.

Posted by Eleanor Ramsay at 01:36 PM

May 04, 2006

Making a Club Site

It's time to begin thinking about putting a site together for the 21st Century clubs. We will work together on this. Each student is expected to contribute something to the club site (design, banner art, pictures, writing) but can keep working on their own websites too.

Today:
On your HTML index page (or a new Publisher page), list the clubs you are taking and write a short paragraph about the one you like the most. What club is it? What do you do in the club? Why is it your favorite club? This page must be in your folder on the school shared server, not on any outside web pages you have.

We will combine these pages into one page of our club page.

Posted by Eleanor Ramsay at 02:43 PM

April 24, 2006

Favorite Sites and Website plans

Use the handouts to write about your favorite sites and plan your website.

Everyone should have a good start on their site. I will make sure each of you is working toward a goal. Use the My Website handout to decide on what you will focus your site on and keep track of stuff you find to put on it.

We will begin working on our group site soon. I want to make sure everybody has a chance to create their own personal site first.

Posted by Eleanor Ramsay at 02:58 PM

April 10, 2006

Adding pages, sounds and making things move

SO, now that you've got a pretty good start to your pages, you can begin customizing and adding sound and movement to it.

Sound

We will use the embed tag. You can also use the bgsound tag, but it only works with Internet Explorer (not any of the other web browsers)

Example:
(This will add the sound and create a small controller for turning it on and off)
<embed src="thesong.mp3" loop="true" autoplay="false" width="145" height="60"/>

This will add the sound without the controller:
<embed src="thesong.mp3" loop="true" hidden="true" autoplay="true" />

With the BGSOUND tag:
<BGSOUND SRC="thesong.mp3" loop="infinite" AUTOSTART="true"/>

Movement
We will explore animation during the next few weeks.

Today, use the story board sheet to plan out a short animation.
Visit the Flipbook site. Try making a short animation and saving it.
(you can use somerville21@gmail.com for the email address)

Also, you can create animations with KidPix and export them as either flash or QTmovies.

What happens in your story?

Something moves from point A to B
Something grows
Something changes from one thing to another
Characters interact

HTML Templates
(hints for customising your pages even more.)

Posted by Eleanor Ramsay at 03:16 PM

April 07, 2006

Friday Club: West Somerville

Update: The files were found and restored to their proper location. So, all is well again. :-)

The student Web Club folders were accidently deleted from the shared server. We probably won't be able to get them back until Tuesday, so today let's work on two things.

Animations. We can use FlipBook today to explore simple frame-by-frame animation.
Students who would prefer to use a storyboard can draw their animations and I will scan then and make GIFanimations from them for you (you can download free software to make these at home).

Planning Your Web Pages
Before web designers create websites, they plan them out and decide how many pages the site will be and how those pages will link together. Use the planning handout to organize your site ideas.

Posted by Eleanor Ramsay at 02:20 PM

April 03, 2006

Your First Web Pages

Today we will make our first web page using simple HTML codes, called tags. All webpages use these tags.

Note If you are taking this class for a second time, you should know how to write a simple HTML page from scratch. Do this exercise or open your existing index.html page and add some images and hotlinks to it, or you may help your fellow club members.

Making your first page:

1) Find your folder in Web Club pages on the school server.

2) Open Notepad (windows simple text editor) to write your HTML page

3) Follow the directions on the My First Webpage handout. Add some of your own text to the page.

4) Save the page as index.html (not txt!)
Important: You will need to save and open your page while Notepad is set to show "all filetypes" for it to work correctly.

5) Your page should show the Explorer "E" icon (because it's HTML), click it to open it in the Internet Explorer browser.

Wow!
Once you have your first page ready, it is time to add a link to the art you made last week.

Look at the Handout Formatting Your Page to learn how to do this.

Posted by Eleanor Ramsay at 01:51 PM

March 27, 2006

Welcome to Web Club - Spring Session

In this club we will learn to make webpages and digital art, will explore fun sites and learn some animation basics. I will post the club activity every week here in the club "blog." Sometimes we'll use this site to write comments or post places we find on the web that we think are cool. We will only use first names or nicknames here.

Today we will use art, type and collage to express our uniqueness. We will make a self portrait that may be a drawing, an autograph or "tag" or a combination of art and words. Explore some of the online creation tools linked from the club's links page or on this page. Or, follow the links at the top of this page.

"Avatar" is the name for the small graphics that represent people online. People use these on Bulletin Boards, or in online role playing games. Sometimes they are cartoons, or they might be a picture of an animal, flower or plant or your favorite sport. There really are no rules. Perhaps you want to draw your avatar by hand and scan it in (I can take pictures of anything you want to save for the web).
If you have done this project before, how else could you create a self-portrait?

1) Create a Self portrait

Cool Places to Get Started:

There are aleady a bunch of great online art making sites on our links page. Look on the Explore Art Page for some links. Or, try making something in Paint and saving it as a .png or .jpg.


Portrait Illustration Maker
Anime-style portrait avatar creator from Japan.
Make sure you save the picture
(right click on the picture and select "save picture as" and save that).
Here's one I made of me (with my cat) ---->

With the Portrait Avatar Maker
You can make avatars with little bodies and props

Punky Avatar Maker
Punk/graffiti-style text and shape avatars. This site also features BlinkieMakers, for making little animated icons! You might want to use something like these on your pages.

Use the Cool Text Logo Generator to make all sorts of text graphics. Try playing with your name!

Fractus, is a website that features patterned button icons made from Fractals. You can use these on your site too. There are also some cool 360° panoramas here. You can explore Fractals at CoolMath4Kids

Try drawing a picture with your name using the Typedrawing program.

What about combining some of these things?

At most of these sites, you can save your icon by choosing "save as" and saving it to your local folder. You want to save it as a .png, .jpg or a .gif file.

You can open these in MSPaint and play with them some more, or combine different things.

Some sites have other instructions on how to save your pictures. If there is no way to save what you have created, use "print scrn" to save it to your computer, then open it in Paint, select "paste" to paste the image, crop it, and save it.

2) Create a folder on your computer with your name to store your images.

3) Save or move your name art to the folder.
(If you use paper/markers I will digitize your art for you).

4) "Upload" - copy it - to the school server in the 21st Century Web Club folder.

My Computer > shared server > save work here > 12st Century Web Club Fall 2005 > your school folder

Posted by Eleanor Ramsay at 01:49 PM

March 23, 2006

Last Classes of Winter Session!

This week is the last week for this winter session of Web Club.

If you look at the shared server pages, you'll see that there is an index linking your sites together. If you have been using Publisher to make your site, you need to Export it so it will link to the index. It is not a real website until you publish (export) it.

Take a look at what your peers have done! Also, check out the animations, if you haven't yet.

Everyone should understand the following concepts by now:

Safe Surfing (how to use the Internet safely)
What is a browser?
What is a URL?
What is HTML?
How do you copy and save images from the Internet?
How can you use MSPaint to prepare images for the web?
How do you add sound to a webpage?
How do you make links between pages or to other websites?
How to plan multiple page websites
How can you make a simple flipbook animation move?
while the Winter Hill students didn't get to make their own GIFanimations, everyone should understand the idea.

Posted by Eleanor Ramsay at 02:34 PM

March 02, 2006

Creating a Web Club Index

Welcome Back! Today we'll begin linking your pages together in a club index.

Each of you should be adding to your site with original art and ideas. I will work with each of you today, to help you get your site organized and give you hints on how to make if look the way you want it to. You may work with Publisher or with the HTML code. Be ready to discuss your site and club goals as we near the end of this winter session.

Those of you using Publisher will need to export your pages as HTML before they can be linked to.

Posted by Eleanor Ramsay at 01:20 PM

February 16, 2006

Using Publisher

Publisher is a Microsoft program that is already installed on all the computers at school. You can use it to create flyers, brochures and websites.

Open Publisher (Start > Programs > Publisher) select Blank Publications and then choose the web page blank. Publisher is a WYSIWYG editor. Instead of writing codes to create your pages, you select formatting icons (like in Word) to import and modify your text, images and links. You can add to and change your site, or save different versions.

Important Notes:

Unlike the pages we created by hand with HTML, Publisher stores all of your site information in a format that only it can read. When you are ready to publish to the web, you will save your site as webpages (export as HTML). Publisher will create a folder and put pages and art in it. To make changes, you will either have to open the Publisher document and re-export or make your changes to the code itself.

It is usually easier to work on your home page first. When you have the all the elements on it that you want, you can duplicate it so all the pages at your site have a similar design.

Use the planning forms (see Planning Your Pages) to organize your ideas before you start.

Basic Instructions for getting started:

Using the Quick Publication Wizard with a blank publication

1.On the File menu, click New

2. In the Catalog, click Blank Publications

3. Click the publication type you want (Web Page) and then click Create

4. In the Quick Publication Wizard pane, click the option you want

5. In the bottom pane, follow the instructions provided

6. Repeat steps 4 and 5 for each option

7. On the File menu, click Save

8. In the Save In box, save to your folder on the shared server.

9. In the File name box, type a name for your publication

10. Click Save

More Publisher Tutorials

Posted by Eleanor Ramsay at 02:10 PM

February 03, 2006

Some of Your Animations

updated
Winter Hill
(hand drawn GIFanimations)
5 4 3 2 1
Devin
Volleyball
You Dropped a Bomb on Me
Booby Trap
Grow
Basketball
Soccer
Cat Chase
A Cheeseburger
High School Musical
Crime Doesn't Pay
Hippo
Shapes

Chaulkboard Animation (group project Winter Hill)

WSNS
Fight
(these animations are hosted at the Flipbook site and may take a while to download)
LOL
Death by Daisy
Day of Doom
Evading
Fight 3690

Healey
(these animations are hosted at the Flipbook site and may take a while to download)
Tom + Jerry
The Worm... and the Mouse
Hat Guy
Matt Was Here
Cookies
Fish Animation
Dot
Faces
Dude Falling Down Stairz

Posted by Eleanor Ramsay at 01:39 PM

February 02, 2006

Organizing Your Pages

Before you try to make a multipage website, you should plan it out. Sketch out how the pages will fit together, what links you'll have. Think about what you are going to say and begin organizing your art, navigation elements, sounds, links, etc.

How will your page be a reflection of you?
Will you...

Tell a story?
Post your art?
Write about your hobbies and interests?
Create your own links page to your favorite sites?
Promote a sport or team?

Storyboards and Idea Mapping charts can be very helpful to organize your ideas
(print out any of these that help you)

Storyboard (pdf)
Website Map (pdf)
Story Map (pdf)
Cluster Word/Web Map (pdf)
Describing Wheel (pdf)

Spend today continuing to format your pages and planning. How can we work together on a club page?

Also, try playing with the Flipbook website if you haven't already. (Remember to save the link to your animation!

Posted by Eleanor Ramsay at 03:12 PM

January 26, 2006

Making things Move, Adding Sound

SO, now that you've got a pretty good start to your pages, you can begin customizing and adding sound and movement to it.

Sound

We will use the embed tag. You can also use the bgsound tag, but it only works with Internet Explorer (not any of the other web browsers)

Example:
(This will add the sound and create a small controller for turning it on and off)
<embed src="thesong.mp3" loop="true" autoplay="false" width="145" height="60"/>

This will add the sound without the controller:
<embed src="thesong.mp3" loop="true" hidden="true" autoplay="true" />

With the BGSOUND tag:
<BGSOUND SRC="thesong.mp3" loop="infinite" AUTOSTART="true"/>

Movement
We will explore animation during the next few weeks.

Today, use the story board to plan out a short animation.
Visit the Flipbook site. Try making a short animation and saving it.
(you can use somerville21@gmail.com for the email address)

Also, you can create animations with KidPix and export them as either flash or QTmovies.

What happens in your story?

Something moves from point A to B
Something grows
Something changes from one thing to another
Characters interact

HTML Templates
(hints for customising your pages even more.)

Posted by Eleanor Ramsay at 02:25 PM

January 19, 2006

Working on Your Page

Now that you have all tackled the basics of HTML, you can begin to add links, images and content to your site.

Content.
What is your site about?

Links.
What sites do you want to link to?
How can you use links to connect pages of your site?
What else can you use them for. Can you tell a story with links?

Images
How can you use images to make your page interesting. Can you tell a story with images?

Today:
Add one ORIGINAL image to your page.
Add AT LEAST one link to a site you like
Add a sentence or two about what your site will be about.

Posted by Eleanor Ramsay at 01:15 PM

January 12, 2006

Your First Web Page!

Hello Club.
Today we will make our first web page using simple HTML codes, called tags. All webpages use these tags.

Making your first page:

1) Find your folder in Web Club pages on the school server.

2) Open Notepad (windows simple text editor) to write your HTML page

3) Follow the directions on the My First Webpage handout. Add some of your own text to the page.

4) Save the page as index.html (not txt!)
Important: You will need to save and open your page while Notepad is set to show "all filetypes" for it to work correctly.

5) Your page should show the Explorer "E" icon (because it's HTML), click it to open it in the Internet Explorer browser.

Wow!
Once you have your first page ready, it is time to add a link to the art you made last week.

Look at the Handout Formatting Your Page to learn how to do this.

I will help each of you with this.

Posted by Eleanor Ramsay at 03:05 PM

January 05, 2006

Welcome to the Club!: Making Self Portraits

Hope everyone had a great vacation!

In this club we will learn to make webpages and digital art and will explore fun sites and learn animation basics. I will post the club activity every week here in the club "blog." Sometimes we'll use this site to write comments or post places we find on the web that we think are cool. We will only use first names or nicknames here.

Today we will use art, type and collage to express our uniqueness. We will make a self portrait that may be a drawing, an autograph or "tag" or a combination of art and words. Explore some of the online creation tools linked from the club's links page or on this page.

"Avatar" is the name for the small graphics that represent people online. People use these on Bulletin Boards, or in online role playing games. Sometimes they are cartoons, or they might be a picture of an animal, flower or plant or your favorite sport. There really are no rules. Perhaps you want to draw your avatar by hand and scan it in (I can take pictures of anything you want to save for the web).

1) Create a Self portrait

Cool Places to Get Started:

There are aleady a bunch of great online art making sites on our links page. Look on the Explore Art Page for some links. Or, try making something in Paint and saving it as a .png or .jpg.


Portrait Illustration Maker
Anime-style portrait avatar creator from Japan.
Make sure you save the picture
(right click on the picture and select "save picture as" and save that).
Here's one I made of me (with my cat) ---->

With the Portrait Avatar Maker
You can make avatars with little bodies and props

Punky Avatar Maker
Punk/graffiti-style text and shape avatars. This site also features BlinkieMakers, for making little animated icons! You might want to use something like these on your pages.

Use the Cool Text Logo Generator to make all sorts of text graphics. Try playing with your name!

Fractus, is a website that features patterned button icons made from Fractals. You can use these on your site too. There are also some cool 360° panoramas here. You can explore Fractals at CoolMath4Kids

Try drawing a picture with your name using the Typedrawing program.

What about combining some of these things?

At most of these sites, you can save your icon by choosing "save as" and saving it to your local folder. You want to save it as a .png, .jpg or a .gif file.

You can open these in MSPaint and play with them some more, or combine different things.

Some sites have other instructions on how to save your pictures. If there is no way to save what you have created, use "print scrn" to save it to your computer, then open it in Paint, select "paste" to paste the image, crop it, and save it.

2) Create a folder on your computer with your name to store your images.

3) Save or move your name art to the folder.
(If you use paper/markers I will digitize your art for you).

4) "Upload" - copy it - to the school server in the 21st Century Web Club folder.

My Computer > shared server > save work here > 12st Century Web Club Fall 2005 > your school folder

Posted by Eleanor Ramsay at 10:07 AM

December 05, 2005

Open House Week! Dec 5-9, 2005

This week is open house! I have linked your pages together so you can see what each person has done so far. We'll keep working on our pages today too.

To make it easy to see everyone's pages, add a link on your page that goes back to the club index.

Copy this:

<a href="../index.html">Go to Club Index</a>

And put it somewhere on your pages.

Posted by Eleanor Ramsay at 02:54 PM

November 28, 2005

Review of Your Sites

Your lists of favorite sites is now online at the club: http://www.massarted.org/s21/favsites.html

This week we will take a look at each of your sites in progress and talk about what you are doing with your pages and make suggestions.

Each of you should be adding content to your pages. Decide on what you want to do (make art, tell a story, talk about games, save links, keep a journal) and keep refining your pages.

If you are writing HTML code: Remember to use the resources at the Club Pages to get codes and learn new formatting.

If you are using Publisher: Remember that you will need to export the site as HTML for it to become a real webpage.

I have created an index page (links list) on the server that links to each student's index.

Posted by Eleanor Ramsay at 03:12 PM

November 21, 2005

Themes and Ideas

During club time you should be working on your site using HTML or the Publisher program.

What will you say with your website? It can be a place for your art, your writing, a collection of your favorite links. Maybe you'd like to try tell a story with your site or find resources about something that interests you.

Please also use your club time to explore the interesting sites at the club site or try make some original art and web banners at some of the artmaking sites I've linked or with KidPix or Paint.

As your sites begin to come together, we will start linking them together and thinking about a group homepage.

Posted by Eleanor Ramsay at 02:30 PM

November 14, 2005

Using Publisher to make Websites

Publisher is a Microsoft program that is already installed on all the computers at school. You can use it to create flyers, brochures and websites.

When you first open Publisher (Start > Programs > Publisher) you can either use the Wizard to walk you through your site design or select Blank Publications to begin putting a page together with your own design.

The wizard will ask questions about what pages you want at your site, what sort of personal information you want on the pages and what kind of page elements (for example: calendars, forms) you need. You should NOT put a lot of personal information on your pages. The wizard is designed more for business needs, not for student personal pages.

Unless you already know what you want your site to be about, you should probably just start with a blank page and begin playing with your text, images and links. You can add to and change your site, or save different versions.

Unlike the pages we created by hand with HTML, Publisher stores all of your site information in a format that only it can read. When you are ready to publish to the web, you will save your site as webpages (export as HTML).

Important Notes:

1. The wizard templates can be modified. You can change colors, images, placement of objects.

2. It is usually easier to work on your home page first. When you have the all the elements on it that you want, you can duplicate it so all the pages at your site have a similar design.

3. Use the planning forms (see Planning Your Pages) to organize your ideas before you start.

Basic Instructions for getting started:

Creating a publication using a wizard

1. On the File menu, click New

2. Click the Publications by Wizard tab

3. In the Wizards pane, click the type of publication you want

4. In the right pane, click the design you want

5. Click Start Wizard

6. To make changes to the publication's color scheme, layout, or personal information now, click Next and step through the wizard's questions to make the desired changes.

7. When you finish making changes, click Finish

8. In you publication replace the placeholder text and pictures with your own or with other objects.

9. On the File menu, click Save

10. In the Save In box, save to your folder on the shared server.

11. In the File name box, type a name for your publication

12. Click Save

Using the Quick Publication Wizard with a blank publication

1.On the File menu, click New

2. In the Catalog, click Blank Publications

3. Click the publication type you want (Web Page) and then click Create

4. In the Quick Publication Wizard pane, click the option you want

5. In the bottom pane, follow the instructions provided

6. Repeat steps 4 and 5 for each option

7. On the File menu, click Save

8. In the Save In box, save to your folder on the shared server.

9. In the File name box, type a name for your publication

10. Click Save

More Publisher Tutorials

Posted by Eleanor Ramsay at 01:54 PM

November 04, 2005

Planning your website

Now that you have learned how to write a basic page and attach links or images to it with HTML, it's time to begin thinking about what you want to do with your website.

Tell a story?
Post your art?
Write about your hobbies and interests?
Create your own links page to your favorite sites?
Promote a sport or team?

Before web designers begin making pages for the web, they plan out what pages they need and how the pages link to each other. They also think about how they want the site to look.

Who is the page designed for (who is its audience)?
What colors or images might be on pages?
How does someone visiting the site navigate it to find what they are looking for?

Today we will be using storyboards and idea mapping charts to plan our pages. Use the handouts I brought in or create your own idea map on a blank piece of paper. You can also use the Inspiration software to plan your website.

Storyboard (pdf)
Website Map (pdf)
Story Map (pdf)
Cluster Word/Web Map (pdf)
Describing Wheel (pdf)

Next week we'll begin using the Publisher web editor.

Posted by Eleanor Ramsay at 12:26 PM

October 28, 2005

Using the Internet, Thinking about Websites

Now that we have learned some basics about making a page with HTML and about finding, creating and linking images, we can begin thinking about why we want a webpage.

What will it be about?
What kinds of links will it have?
How would you use your website?

Today, we will spend most of class exploring and writing about some of your favorite websites.

Why do you like them?
What sort of information is there?

I will pass out a sheet for each of you to fill out. I will also work with each of you individually, to make sure everyon understands basic HTML and is ready to move to thinking about creating and organizing a website.

Posted by Eleanor Ramsay at 02:12 PM

October 21, 2005

Your First Web Page!

Hello Club.
Today we will make our first web page using simple HTML codes, called tags. All webpages use these tags.

Making your first page:

1) Find your folder in Web Club pages on the school server.

2) Open Notepad (windows simple text editor) to write your HTML page

3) Follow the directions on the My First Webpage handout. Add some of your own text to the page.

4) Save the page as index.html (not txt!)
Important: You will need to save and open your page while Notepad is set to show "all filetypes" for it to work correctly.

5) Your page should show the Explorer "E" icon (because it's HTML), click it to open it in the Internet Explorer browser.

Wow!
Once you have your first page ready, it is time to add a link to the art you made last week.

Look at the Handout Formatting Your Page to learn how to do this.

I will help each of you with this.

Posted by Eleanor Ramsay at 01:24 PM

October 13, 2005

Fall 2005 21st Century Web Club!

Hi Everybody! Welcome back to the club.

We will be exploring the Internet and learning how to create webpages. We'll also be creative with online art and music making tools and will play games and explore learning sites that might make doing homework more fun.

I will post the club activity every week here in the club "blog." Sometimes we'll use this site to write comments or post places we find on the web that we think are cool. We will only use first names or nicknames here.

We will follow the club rules and the Rules for Online Safety

Today's Activity: Identity Project

1) Using the “cooltext” site (ignore the ads!), or some of the artmaking sites linked from the Somerville 21 Web Club home make an orginal graphic using your name. You can make more than one.

Or try drawing a picture with your name using the Typedrawing program.

You can also use Microsoft Paint or KidPix on the computers here at school (or even markers, paper and pencils!) create a name card. Be as creative as you want.

2) Create a folder on your computer with your name to store your images.

3) Save or move your name art to the folder.
(If you use paper/markers I will digitize your art for you).

4) "Upload" - copy it - to the school server in the 21st Century Web Club folder.

My Computer > shared server > save work here > 12st Century Web Club Fall 2005 > your school folder

Next week we will begin learning HTML - the codes you use to make webpages. You can take a sneak peak by following the links from the club home.

updated: 10/18/05

Posted by Eleanor Ramsay at 10:31 PM

May 16, 2005

Club Update: Stuff you should know

There are only a few more sessions of Web Club left this year!

By now most of you should have created a few webpages or a site you are somewhat happy with. Remember that this is just a beginning! You can continue to work on your pages in Publisher (or export it as HTML and then open your site in another web editor, like Nvu or Dreamweaver, for example).

Today:

Stuff you should understand by now:


Posted by Eleanor Ramsay at 02:23 PM

May 13, 2005

Group Web Site in Progress

Everyone should continue to contribute to the group page by helping with the design, creating heads and logos and creating a page about the web club. What did you like the most? What did you learn?

Your websites will be linked from the group site for the final event. We will discuss different options for getting your website online, including getting your parents permission and staying safe on the Internet, during the last two sessions. Each person will get a disk with their work on it.

If you haven't spent much time exploring the links from the Club homepage, spend some time there today checking out some of the sites. There are some new ones to explore and these sites have lots of information and interactive elements to help you get the most out of this club, and help with homework and your other classes.

Posted by Eleanor Ramsay at 12:12 PM

May 08, 2005

Using KidPix Art on Your Webpages

You can use pictures and animation you make in KidPix on your webpages. Here's how.

Saving Pictures as a gif or jpg:

Launch Kid Pix:
OPEN desired picture
Go to FILE and select EXPORT a GRAPHIC
Name your file. Notice, you can select the gif format for pictures or the jpeg format for photographs.
Click on SAVE

Exporting KidPix SlideShows as Quicktim Movies:

Launch Kid Pix
OPEN desired SlideShow
Go to FILE and select SAVE as a QUICKTIME MOVIE
That movie can be linked from a webpage

Posted by Eleanor Ramsay at 03:02 PM

May 02, 2005

Only 5 classes left!

Today we will discuss working as a group on a website about the 21st Century Clubs. We will need to create a team to design the site and create templates (in Publisher), photograph the other clubs, create headers and logos for the group site and write some short descriptions of the different clubs.

Keep working on your own websites today, and sign up to be part of the team.

The final Club celebration will be Friday, June 10.

Posted by Eleanor Ramsay at 02:29 PM

April 25, 2005

Club Do's and Don'ts

Welcome back from vacation. Everyone should be working on their websites using Publisher or (if they prefer) by handwriting their HTML using Notepad. Organize your ideas and use paper to sketch out your site. All the pros sketch out their ideas before working.

A few things to remember as you work during this club:

Posted by Eleanor Ramsay at 01:36 PM

April 04, 2005

Working on your Website

By now, all of you should be working in Publisher to design and plan your website. Your site does not have to be complicated. Think of what you want to use it for. Everyone should spend all club time working on their sites. Next week you will show your site (in progress, it does not have to be finished) with the class.

Here are some ideas:

Post your poetry, lyrics or creative writing.
The web makes it easy to get "published" and share your work. The web's Non-Linear Hypertext (links) can add a new twist to a story by letting you write different endings, or allowing the reader to go through the story in different ways by clicking hotlinked words in the story. (I can show you how to do this).

Create a personal page centered around a hobby or interest
Gather resources, links and images for a hobby or interest. Why is it interesting to you? How would you make a reader of your page interested too?

Tell a story with images.
Make your own images, or collect images and then tell a story with them. You can try this with just 3 images, or many images.

Work on a group project
Work on one website project as a team. Some can be working on writing the text, or preparing the pictures, while another person is designing the site and creating the navigation. Most large web projects are produced by teams working together.

Make a links page
With your favorite links. Explain why each is important to you. Include some of the links from the club's main page. Spend some more time at those links, and add the one's you like.

Make a "proof of concept" website for a game
Before teams of game designers begin working on a new game, they sketch out storyboards of the game's action, characters, "backstory," and plotlines. You can create pages for a game you might design, using the storyboard to design the game and then posting the images and storyboards on your webpages (I will help you scan the images).

Posted by Eleanor Ramsay at 02:12 PM

April 03, 2005

Saving and Exporting Publisher Webpages

Publisher saves your webpages in its own format (.pub) that only it can open. When you are ready to publish your pages on the web, choose File > Save as Web Page. Save your webpages in a folder (example: "eleanor-website") next to your .pub file. Those pages can be previewed in IE and posted to a web host.

We will not post any of your pages to the web until later this spring.

Important Note about using Publisher: In Publisher, you can create Hypertext Markup Language (HTML) pages, but you cannot open and edit the HTML pages in Publisher after they are created. If you want to use Publisher to create and publish a website, save a copy of your document as a publication file (.pub). If you want to make more changes to your website, you can edit the .pub file and then re-export the HTML pages.

If you don't have Publisher at home: You can open the HTML pages that Publisher makes in another Web editor, such as Dreamweaver or the free Nvu editor. You can edit and continue to work on your HTML pages in those editors instead of Publisher, but you will not be able to open those HTML pages in Publisher anymore.

Posted by Eleanor Ramsay at 09:53 PM

March 28, 2005

Using Publisher

Publisher is a Microsoft program that is already installed on all the computers at school. You can use it to create flyers, brochures and webpages. When you first open Publisher (Start > Programs > Publisher) you can either use the Wizard to walk you through your site design or select Blank Publications to begin putting a page together with your own design.

The wizard will ask you questions about what pages you want at your site, what sort of personal information you want on the pages and what kind of page elements (for example: calendars, forms) you need. You should NOT put a lot of personal information on your pages. The wizard is designed more for business needs, not for student personal pages.

Unless you already know what you want your site to be about, you should probably just start with a blank page and begin playing with your text, images and links. You can add to and change your site, or save different versions.

Unlike the pages we created by hand with HTML, Publisher stores all of your site information in a format that only it can read. When you are ready to publish to the web, you will save your site as webpages.

Important Notes:

1. The wizard templates can be modified. You can change colors, images, placement of objects.

2. It is usually easier to work on your home page first. When you have the all the elements on it that you want, you can duplicate it so all the pages at your site have a similar design.

3. Use the planning forms (see Planning Your Pages) to organize your ideas before you start.

Basic Instructions for getting started:

Creating a publication using a wizard

1. On the File menu, click New

2. Click the Publications by Wizard tab

3. In the Wizards pane, click the type of publication you want

4. In the right pane, click the design you want

5. Click Start Wizard

6. To make changes to the publication's color scheme, layout, or personal information now, click Next and step through the wizard's questions to make the desired changes.

7. When you finish making changes, click Finish

8. In you publication replace the placeholder text and pictures with your own or with other objects.

9. On the File menu, click Save

10. In the Save In box, select the folder where you want to save the new publication

11. In the File name box, type a name for your publication

12. Click Save

Using the Quick Publication Wizard with a blank publication

1.On the File menu, click New

2. In the Catalog, click Blank Publications

3. Click the publication type you want (Web Page) and then click Create

4. In the Quick Publication Wizard pane, click the option you want

5. In the bottom pane, follow the instructions provided

6. Repeat steps 4 and 5 for each option

7. On the File menu, click Save

8. In the Save In box, select the folder where you want to save the new publication

9. In the File name box, type a name for your publication

10. Click Save

More Publisher Tutorials

Posted by Eleanor Ramsay at 02:12 PM

March 18, 2005

Planning Your Pages

Now that most of you have learned how to write a basic page and attach links or images to it, it's time to begin thinking about what you want to do with your website.

Tell a story?
Post your art?
Write about your hobbies and interests?
Create your own links page to your favorite sites?
Promote a sport or team?

Before web designers begin making pages for the web, they plan out what pages they need and how the pages link to each other. They also think about how they want the site to look. Who is the page designed for (who is its audience)? What colors or images might be on pages? How does someone visiting the site navigate it?

Today we will be using storyboards and idea mapping charts to plan our pages. Use the handouts I brought in or create your own idea map on a blank piece of paper. You can also use the Inspiration software to plan your website.

Storyboard (pdf)
Website Map (pdf)
Story Map (pdf)
Cluster Word/Web Map (pdf)
Describing Wheel (pdf)

Next week we'll begin using the Publisher web editor.

Posted by Eleanor Ramsay at 01:30 PM

March 11, 2005

Getting Fancy

I've created a page with three basic templates you can use to begin making more complicated pages. Remember, HTML is the code language that browsers (like Internet Explorer) read to display all the links, games and and pictures you find on web pages.

HTML Templates Page

Spend today continuing to work on making a page and adding images or links. Once we get the hang of this, we can begin to plan out a more complicated website. I usually sketch out my webpages before I write any HTML code. Explore some of the art links at the club site to create images or graphic text for your site.

Keeping organized is also very important. Make a folder in the My Documents folder, call it your name, put ALL your pages and images in that folder. Then you can link them together.

Note: Even if you have your own folder at school it is sometimes easier to use the My Documents folder while you're working and then copy your work to your own folder when you are done. If you do not have your own folder, you can save your work to the folders I have made in the My Computer > Shared > Save Work Here >Somerville 21 Web Club > Healy (or WSNS) > YourName -- make a folder for your work if I haven't yet.

Posted by Eleanor Ramsay at 01:02 PM

March 09, 2005

Tips for Using Paint

Use Paint to modify images you create at some of the art links (use print screen to copy and then paste into a blank Paint page) or to create your own original art.

Paint can be found under Start > Programs > Accessories > Paint or from the task bar.

From the Paint Help:

To change the size of your picture
On the Image menu, click Attributes.
Under Units, click the unit of measurement you want to use for the width and height.
Type the measurements in Width and Height.

Notes
You can also resize your picture by dragging the image resize handles, located at the bottom right corner and along the bottom and right sides of your picture.

If your current picture is bigger than the new size, the picture is cut from the right side and bottom to fit within the smaller area. If your current picture is smaller than the new size, the extra area is filled with the selected background color.

Posted by Eleanor Ramsay at 10:15 PM

March 07, 2005

Your First Page

Lets try making a page and attaching a picture to it

1) Make a folder in the My Documents area, call it your first name.

2) Make an HTML page.
Use Notepad to write your HTML code
My First Webpage
Formatting Your Page

3) Add some text and link your avatar, or another picture to your page (see the Formatting Your Page page for how to do it). Make sure the picture is in your folder with your HTML page.

4) Save the page as index.html (not txt!)
Important: You will need to save and open your page while Notepad is set to show "all filetypes" for it to work correctly.

5) Your page should show the Explorer "E" icon (because it's HTML), click it to open it in the Internet Explorer browser.

That's how a simple page is made and displayed.

Posted by Eleanor Ramsay at 02:17 PM

February 28, 2005

Express Yourself!

Welcome back to the Club! Hope everyone had a great vacation.

Today we will spend most of club time thinking about how we can use art to express our uniqueness. Explore making or finding art for your webpages using some of the online creation tools linked from the club's links page or on this page. A fun place to start is by making an Avatar.

First, please make a Name Card. Write your name on one of the cards. You can illustrate the card too, if you want. Save this card, it will help me learn all your names.

Second, lets make an Electronic Name Card or "Avatar"

Avatars are the name that has been given to the small graphics that represent people online. People use these on Bulletin Boards, or in online role playing games. Sometimes they are cartoons, or they might be a picture of an animal, flower or plant or your favorite sport. Maybe it's your autograph or tag. Maybe it's something you haven't even thought of yet. There really are no rules. Perhaps you want to draw your avatar by hand and scan it in (I can take pictures of anything you want to save for the web).

Cool Places to Get Started:

There are aleady a bunch of great online art making sites on our links page. Look under Explore Art. Or, try making something in Painter and saving it as a .jpg. Avatars are usually small, between 50 pixels square and 100 pixels square, make yours bigger if you want, especially if it is going at the top of your web page.


Portrait Illustration Maker
Anime-style portrait avatar creator from Japan.
Make sure you save the picture
(right click on the picture and select "save picture as" and save that).
Here's one I made of me (with my cat).

With the Portrait Avatar Maker
You can make avatars with little bodies and props

Punky Avatar Maker
Punk/graffiti-style text and shape avatars. This site also features BlinkieMakers, for making little animated icons! You might want to use something like these on your pages.

Use the Cool Text Logo Generator to make all sorts of text graphics. Try playing with your name!

Fractus, is a website that features patterned button icons made from Fractals. You can use these on your site too. There are also some cool 360° panoramas here. You can explore Fractals at CoolMath4Kids

Or, take a look at these: Zeldman's Free Icons Gallery (mostly weird little portraits). Zeldman is a well-known web designer but he lets people use these on their sites for free.

What about combining some of these things into you own original logo?

At most of these sites, you can save your icon by choosing "save as" and saving it to your local folder. You want to save it as either a .jpg or a .gif file. You can open these in Painter and play with them some more, or combine different things. Some sites have other instructions on how to save your pictures. If you need to mail it and don't have an email address, use the somerville21@gmail.com address. If there is no way to save what you have created, use "print scrn" to save it to your computer, then open it in Painter, select "paste" to paste the image, crop it, and save it.

Posted by Eleanor Ramsay at 10:27 AM