Hexidecimal color tools
![Picture](/uploads/1/6/0/0/16007664/5351476.jpeg?139)
HexColorTool.com
This is not really a project, but a very nice resource for choosing colors. HexColorTool allows you to key in the 6 digit hexidecimal code for a color and then choose a percentage to lighten or darken the color. Once you click submit, the program will produce a multitude of variations based on that initial percentage you selected. Really neat!
ColorSchemeDesigner.com
This web site allows you to create a color palette of complimentary or contrasting colors that work well together. You choose the initial color and then decide how many additional colors you need in the palette. The cool thing about this site is once you get your palette chosen you can download the palette as an .html file and save it in the same folder as your site. That way you have immediate access to it at all times. No need to remember or recreate! This site also gives you colors for various types of color blindness.
Color Blender
This site also allows you to create a color palette. You choose two colors and then choose how many colors you want in your palette (the site calls these midpoints). Simply click on the blend button and the palette is created for you!
Color and Emotion Chart
This a a neat tool to give to students to help them when choosing a color scheme for their web sites.
Color in Motion
This web site was a final exam project created by an art student several years ago. I used this site, along with the attached activity, to introduce color to the students. It is an interactive, entertaining site and the students really enjoy checking it out. This is also a great activity to leave if you have to be out! :-)
Color In Motion Handout
This is not really a project, but a very nice resource for choosing colors. HexColorTool allows you to key in the 6 digit hexidecimal code for a color and then choose a percentage to lighten or darken the color. Once you click submit, the program will produce a multitude of variations based on that initial percentage you selected. Really neat!
ColorSchemeDesigner.com
This web site allows you to create a color palette of complimentary or contrasting colors that work well together. You choose the initial color and then decide how many additional colors you need in the palette. The cool thing about this site is once you get your palette chosen you can download the palette as an .html file and save it in the same folder as your site. That way you have immediate access to it at all times. No need to remember or recreate! This site also gives you colors for various types of color blindness.
Color Blender
This site also allows you to create a color palette. You choose two colors and then choose how many colors you want in your palette (the site calls these midpoints). Simply click on the blend button and the palette is created for you!
Color and Emotion Chart
This a a neat tool to give to students to help them when choosing a color scheme for their web sites.
Color in Motion
This web site was a final exam project created by an art student several years ago. I used this site, along with the attached activity, to introduce color to the students. It is an interactive, entertaining site and the students really enjoy checking it out. This is also a great activity to leave if you have to be out! :-)
Color In Motion Handout
Fireworks to Dreamweaver two-part tutorial
![Picture](/uploads/1/6/0/0/16007664/9980519.png?123)
These two tutorials take you through the process of creating a web site layout using Fireworks and then using that layout to create a web site using Dreamweaver. The site has both a CS4 version of both tutorials and a CS5 version.
Fireworks CS5 Tutorial
Dreamweaver CS5 Tutorial
I created a handout of the online tutorial that made the assignment easier for the students to follow. This handout was initially created from the CS4 tutorial and I have since edited it for CS5. You may notice that the images are not updated to the CS5 version of the tutorial. No worries. The tutorial works exactly the same. I am including a link to all the sliced and exported images so you have the option of skipping the Fireworks Tutorial and going straight to the Dreamweaver Tutorial.
Link to Sliced and Exported Images
Fireworks CS5 Tutorial
Dreamweaver CS5 Tutorial
I created a handout of the online tutorial that made the assignment easier for the students to follow. This handout was initially created from the CS4 tutorial and I have since edited it for CS5. You may notice that the images are not updated to the CS5 version of the tutorial. No worries. The tutorial works exactly the same. I am including a link to all the sliced and exported images so you have the option of skipping the Fireworks Tutorial and going straight to the Dreamweaver Tutorial.
Link to Sliced and Exported Images
Google Sites Activity
![Picture](/uploads/1/6/0/0/16007664/3085498.jpg?157)
The original idea for this activity came from Tonya Skinner at Jackson High School. Students follow the directions to create a Google Web Site. We use this site to practice blogging. Once the site was created, I gave the students a topic for four Fridays and they had to write about the topic. If you look at the students examples, you can see what the topics were that I used. The students wrote about their strengths in technology, their opinion about Google Glass (we watched a video on this), and more. This was a really successful project.
Project Directions
Student Example
Student Example
Project Directions
Student Example
Student Example
top 100 websites presentation using simplebooklet.com
![Picture](/uploads/1/6/0/0/16007664/4153715.png?102)
PC Magazine published a Top 100 Web Sites of the Year. As a "beginning of the semester" activity, I divide the list of site up among the students. Each student must research the sites given and prepare a casual presentation on at least two of the sites they researched. A couple of pointers for you: some sites will be blocked at school; students have to research those sites at home; be sure to give presentation pointers, such as, use a 20 pt font or larger, consider font color, no paragraphs, etc.; use a screen capture program such as SnagIt or Snipping Tool to take screen shots of parts of the site; also, I allow students to work in pairs if they want to.
To use simplebooklet.com, students must have IE9, Google Chrome, or Firefox. Simplebooklet.com will not work with IE8 or lower. Google Chrome and Firefox are free downloads, but you may need to check with your Technology Coordinator.
Top 100 Websites Project
Example Presentation One
Example Presentation Two
To use simplebooklet.com, students must have IE9, Google Chrome, or Firefox. Simplebooklet.com will not work with IE8 or lower. Google Chrome and Firefox are free downloads, but you may need to check with your Technology Coordinator.
Top 100 Websites Project
Example Presentation One
Example Presentation Two
notepad ++
![Picture](/uploads/1/6/0/0/16007664/1354101.jpg?143)
Use this free downloadable program to key XHTML, CSS, and JavaScript. It is similar to Notepad (which comes free on your Windows computer) but has some really nice advanced features that make it an awesome tool for keying code. It color codes the tag pairs so students can make sure tags have been closed successfully, it numbers each line of code, and it allows for previewing in multiple browsers. I will never go back to using Notepad. This is my web creation tool!
Download Notepad ++
Download Notepad ++
history of html using prezi
![Picture](/uploads/1/6/0/0/16007664/2397071.jpg?171)
Original Instructions created by Theresa Friedman
History Information
20 Years Ago, The First Public Web Page Wen Live. Now It's Back
The First YouTube Video
Introduction to Web Design PowerPoint
Introduction to Web Design PowerPoint Student Notes
History Information
20 Years Ago, The First Public Web Page Wen Live. Now It's Back
The First YouTube Video
Introduction to Web Design PowerPoint
Introduction to Web Design PowerPoint Student Notes
NYTimes Web Evaluation Activity
![Picture](/uploads/1/6/0/0/16007664/2744015.jpg?126)
I didn't get a chance to do this activity this year, but it is a good one and I am putting on my list to work in next year.
Web Evaluation Activity
Web Evaluation Activity
Graphics Editing Tutorials for Fireworks
![Picture](/uploads/1/6/0/0/16007664/815900.png?131)
graphics editing tutorials for flash
![Picture](/uploads/1/6/0/0/16007664/5019324.png?129)
Hexjibber.com
tv.adobe.com
IncredibleTutorials.com
How to Draw a Car (this is just a video with no detailed instructions. I challanged one of my advanced students to try to recreate the car and she did an awesome job!)
Philicia's Car
Philicia's Car Flash Animation
tv.adobe.com
IncredibleTutorials.com
How to Draw a Car (this is just a video with no detailed instructions. I challanged one of my advanced students to try to recreate the car and she did an awesome job!)
Philicia's Car
Philicia's Car Flash Animation
Banner ads activity
![Picture](/uploads/1/6/0/0/16007664/789361.jpg?170)
This doesn't really require any Web 2.0 tools, but banner ads are everywhere. Having students create banner ads is a great way to teach simple animated .gifs and also to teach about banner ads as a marketing tool for web sites on the internet.
Banner Ad PowerPoint
Banner Ad Project
Sample Banner Ad One
Sample Banner Ad Two
Sample Banner Ad Three
Sample Banner Ad Four
Interesting Article Explaining How Web Advertising Works
Banner Ad PowerPoint
Banner Ad Project
Sample Banner Ad One
Sample Banner Ad Two
Sample Banner Ad Three
Sample Banner Ad Four
Interesting Article Explaining How Web Advertising Works
evaluating web sites activity
![Picture](/uploads/1/6/0/0/16007664/6054463.png?76)
A lesson plan created by TheConsultants-E. This is a step-by-step activity that teaches students how to evaluate web sites for reliability.
Lesson Plan
The Pacific Northwest Tree Octopus Site
Seven Steps to Determining the Validity of a Web Source (includes a .pdf poster to download)
Lesson Plan
The Pacific Northwest Tree Octopus Site
Seven Steps to Determining the Validity of a Web Source (includes a .pdf poster to download)
creating animated gifs online
![Picture](/uploads/1/6/0/0/16007664/8705046.jpg?179)
Gicker.com
Example from Gicker.com
How to make animated gifs using GIMP (a tutorial from MakeUseOf.com)
Downloading GIMP (a free graphics editing tool)
Picasion.com
Example from Picasion.com
Example from Gicker.com
How to make animated gifs using GIMP (a tutorial from MakeUseOf.com)
Downloading GIMP (a free graphics editing tool)
Picasion.com
Example from Picasion.com
Online web creation tools
![Picture](/uploads/1/6/0/0/16007664/9403372.jpg?176)
Mozilla Thimble
A great way to have your students create live web sites using HTML code. The sites are published for free. Students must have access to Mozilla Firefox. There are other tools available from Mozilla including, Popcorn, which works with video, and X-Ray Goggles, which allows you to explore and "remix' any web site.
Weebly
Weebly allows you to create websites based on predesigned templates. You can publish for free or you can
purchase a domain name for a small fee. This site you are looking at was created for free from Weebly. It is so
simple to use!
Wix
Claims to be easy to use, with no coding, and easily customizable. I know Wix is a popular web development
tool that has been around a good long time. It is a tried and true tool that you can depend on!
A great way to have your students create live web sites using HTML code. The sites are published for free. Students must have access to Mozilla Firefox. There are other tools available from Mozilla including, Popcorn, which works with video, and X-Ray Goggles, which allows you to explore and "remix' any web site.
Weebly
Weebly allows you to create websites based on predesigned templates. You can publish for free or you can
purchase a domain name for a small fee. This site you are looking at was created for free from Weebly. It is so
simple to use!
Wix
Claims to be easy to use, with no coding, and easily customizable. I know Wix is a popular web development
tool that has been around a good long time. It is a tried and true tool that you can depend on!