First Web Site

October 2

Warm-up: Logon to Learn 2 Type. Take the "Timed Test". When you have completed the test, minimize your screen. I will record your fastest score during this class period.

Continue with today's lesson

First Web Site Rubric
First Draft of website is due Friday, October 12

Plan a basic web page. Use the proper html code to create the page.

Design: Pages are designed using a 640 pixel wide table. This makes the content easy to read and allows for pages to print properly.

We will design our pages using a banner (to be created at a later time). The navigation for the pages will be on the left side of the page

REVIEW the Basic Web Page document. You were given this handout in class and is linked here.

Create a sketch of your first page that includes a table, a banner, a navigation area, and a content area. Once this sketch is created, then create a draft of where the html tags should be placed.

Assessment/Homework: STUDY for Basic HTML test on Wed/Thurs. Complete the draft of code for your home page.

October 3 & 4

Warm-up:

Turn in Homework to the blackbox.
Logon to the Student Server
Access QuizStar and login. (Username is the last one on your login/password page. The password is the same as the one to logon to the student server).
DO NOT BEGIN QUIZ until instructed. You may student tutorial sites at the bottom of this page until instructed to begin test

BASIC HTML Test -- Complete the test found in Quiz Star. Review the test when complete. All missed questions should be written on a sheet of paper with the correct response. These corrections must be turned in to the black box when complete.

Activities -- Read the Planning Document for your first web site. Review the RUBRIC for your first web site

Create a new folder in your folder on the student server. Name the folder first .
Open NOTEPAD
Save the file to your first folder as index.html
Generate the code created in class yesterday. You may use your handout. Save often and view your file in a browser to check whether it looks the way you want it.
Create text navigation for your three pages
- HOME
- HOBBIES, INTERESTES, GOALS, (or something of your choice)
- EMERGING TECHNOLOGIES

Temporary Banner: Use this banner as a temporary banner for your first web site. It will be replaced with an original design at a later date.

Right click on the image
Save Picture As
and save it to your first folder. A good file name is banner.gif (that should be what the file automatically saves as)

Homework -- create the content for the second page of your website. These paragraphs should be about a special interest, goal, or hobby. Two paragraphs should be an appropriate length. These are due at the beginning of class on Friday. You should have an electronic copy of these paragraphs to print during the warm-up.

October 5

Warm-up: Logon to Learn 2 Type. Take the "Timed Test" one time.

Open the file or email that contains your content on your "SPECIAL INTEREST' page. Print document. Please make sure your name is on the page, and the font you have used is AT LEAST 12 pt.

When finished, logon to student server and continue work on "HOME" page.

Goal for the day: The content paragraphs should be complete for two of the pages for your project. Follow the Content Planning document carefully to make sure that all of the criteria are met. Your navigation WORDS can be included, but you cannot create the links until the other two pages are complete.

Planning Document for your first web site.
RUBRIC for your first web site

Resources for Web Site Work: (you can use these links to embellish your web site and or get ideas. Be sure to cite any that you use.)

RUBRIC for first web site: Be sure to READ this!
Your first draft of your 'web site' is due on Friday, October 12.

October 8

Warm-up: Logon to the Student Server

link to basic code to start your web-site

Page 2 -- save index.html as another html document. The filename should describe the content of your second assignment; interests, goals, hobbies etc. Delete the "all about me" paragraphs and paste the paragraphs you did for home Wed/Thurs of last week.

Links -- Use relative links for the navigation. Since all files for this project will be saved to the first folder, relative links are the simplest to use. Relative links use the following code.

<a href="filename.html">The Navigation Word Here</a>

Homework --

Bring a digital picture of yourself. (Can be a printed copy if that is all you have).
Choose one of the ten forces that Thomas Friedman claims flattened the world. Use "The World is Flat" as a reference. Content should be at least two paragraphs long and include information learned from the first three weeks of class.
Online Resources for Emerging Technology Writing Assignment
- The World Is Flat - Wikipedia, the free encyclopedia The World Is Flat: A Brief History of the Twenty-first Century is a best-selling book by Thomas L. Friedman analyzing the progress of globalization. http://en.wikipedia.org/wiki/The_World_is_Flat
- IFTF's Future Now: Thomas Friedman on... wait for it... The World ...Emerging technologies and their implications for the future. ... The World is Flat got started when Friedman decided to visit call centers around the world, ... http://future.iftf.org/2006/05/thomas_friedman.html
- Ed-Tech Insider: The World Is Flat, Except Where It Isn't.By Tom Hoffman on May 18, 2005 in Emerging Technologies, ... Tom Friedman's new book, "The World Is Flat," has gathered some attention in the educational ... http://www.eschoolnews.com/eti/2005/05/000835.php

October 9

Warm-up: Logon to the Student Server

link to basic code to start your web-site

Goal for the day: The content paragraphs should be complete for ALL three pages for your project. Follow the Content Planning document carefully to make sure that all of the criteria are met. You should complete the index.html, check the rubric to make sure all criteria has been met, then save this file two times. Save the file with an appropriate file name for your interests page. Save the file again as tech.html. You should then edit the content to reflect the appropriate text.

Continue developing your site. You can review html codes at various tutorial sites to make your page "look" the way you want it to.

When the basic page is complete, you should spend time reading the tutorials listed at the end of this page.

October 10-11

Warm-Up: Change the Colors of links:

Access the following URL: http://www.davesite.com/webstation/html/chap05.shtml
Read the directions carefully and type the code suggested in the interactive box. Note the color change of the links. Note that these tags are all placed in the body tag.

Try changing the code using various web safe colors: http://www.w3schools.com/html/html_colors.asp

If you finish early, check out the following link:
Good Color Combinations for the Body of your HTML page

Objective: Discuss use of images for the Web

Activities: Scan image or use a digital photograph to use for your web site.

Discuss image size
Compression
Levels, contrast and brightness

Insert image to website. Discuss vertical and horizontal spacing and alignment. Make sure students know that images on the web are copyrighted and CANNOT be used on their web site.

Activity: 10 Step Picture Prep Guide

You will use either a digital image YOU brought as homework, a scanned image that you brought to class to scan, a picture taken in class, OR the picture I took at the beginning of the year. Read the lesson above. All steps will be covered in class. If you are absent, you are responsible for making up this class BEFORE next Thursday, October 19

Picasa is software that helps you instantly find, edit and share all the pictures on your PC. Good software to edit images at home.
A free software download from Google.

Import a picture into PhotoShop, crop, then resize it to a specified size.

logon to the student server, navigate to the @pickup folder, copy, then paste MCV-001S.jpg to your html folder.
turn monitors off, and view the Crop & Resize a Picture video as a class.

When movie is completed, you will watch this video on your computer and perform the steps as the instructor goes through them. You can pause at any time if you are having trouble keeping up with the page. Note that you will using the student server rather than a floppy disk. You should have enough experience working with the server to navigate properly.

file needed to work through tutorial is MVC-001S.jpg (you can right-click and save image as...)
perform all steps modeled in the video. You can pause the video at any time. Picture must be complete by the end of class.
Save image as enedited.jpg to you html folder on the student server.

Homework/Follow Up:

sample project page
sample code for page

October 12

Warm-Up: Review RUBRIC.

Assignment: Complete all three pages of website by the end of class.

October 15

Warm-Up:
Read the following carefully -- (including all inks for PhotoShop.
10 Step Picture Prep Guide

You will use either a digital image YOU brought as homework, a scanned image that you brought to class to scan, a picture taken in class, OR the picture I took at the beginning of the year.

All steps will be covered in class. If you are absent, you are responsible for making up this class BEFORE next Wednesday, October 17

Save all images to your first folder. If you did not bring an image from home for class, there is a picture in the @pickup folder you can use. If you need to scan an image, you can do this in class.

Image Scanning Directions

File/Import/HP Scan Jet

Color Image

Scan

Prep Your Photos for the Web
Tips for taking your photos from your camera to the Web

How To Remove Red Eye in Photoshop (any Version)

The code for inserting an image is

<img src="filename.jpg">

Save your file and view in a browser (F12). Right click on image and choose properties to determine the width and height of image. Include an alt tag for handicap users and for those that off the images. Add this information to your code.

<img src= "filename.jpg" width = "?" height="?" alt="?">

If you want your image on the left or right side of your page, then align = "left" or align="right". You should include some horizontal spacing so the text does not run into your image.

<img src="filename" width = "?" height="?" alt="?" align="left" hspace="7">

Create links to each of your five web pages in your web folder. It is preferred to use a navigation bar and or 'buttons' rather than simple text links. This was the style that you were deciding in class last week.

Discuss and Review checklist at the beginning of class.
Review Grading Rubric for the draft of your First Web Site

October 16

warm-up: Open Photoshop and review tool names

Assignment:

Photoshop Tool Quiz. Label the default tool names marked on quiz. When complete, turn in to the black box.

Compare and Contrast the Good and Bad Design features discussed in the first two links below.

Good Web Design Features
Bad Design Features

Find an example of a web site that used at least one GOOD design and one the illustrates at least one BAD design.

Images on the Web You will be required to have at least one original image on each page of your website. This image should be created by you, or taken by you using a digital camera. No exceptions.

Link review -- review the html code for inserting images on the web. Insert an image on your homepage. The image should be cropped and sized appropriately. You can review the image video from Wed/Thur of last week if necessary. Images should be aligned so the text is beside it. Enough horizontal space should be included so the text does not run into the image.

Read the information linked about image placement. Hit the back button when you are finished. You may find it beneficial to write down the appropriate code for the image.

Review

Open image in Photoshop.
"Save image for the Web"
Choose .jpg if it is a photograph or a .gif if it is a graphic.
Crop image
Resize appropriately
Apply any of the 10 steps learned in class Monday
Save image again.
Insert image into your web page.
Use codes from the link above.

Banner: You should create your own original banner. This can be done in Photoshop, or you can use one of the sites below. The width of the banner should be 640 pixels. The height should be between 100-175 pixels, depending on the design. If you use one of the banner generating sites, the image may need to be resized in photoshop. The actual banner should be saved to your first file.

My Banner Maker

Banner Break

To save banner, right click on the image, and save to your first folder. Not the type of image it is. If it is a .bmp or a .png, you should open it in Photoshop and "Save for the Web" as a .gif or a .jpg. The type will depend on whether it is an image or a graphic.

Homework: Entire site WITH images and banners is due this Friday, October 19

10/17 - 10/18 Web Design -- Good vs. Bad

Warm-up: Logon to Learn 2 Type. Take the "Timed Test".

Assignment:

RUBRIC for first web site: Be sure to READ this! Your 'web site' is due on Friday, October 19.

Class presentations will be October 22& 23. Each student will present their website to their peers. You will be responsible for

Objective--Demonstrate navigation of First Web Site, discuss technological aspects and explain all html features /java applets used in site.

Presentation -- Peer evaluation using associated rubric for first web site.
Each student should navigate through site, discuss content and all html/java applets used. Check for permissions to use any images and/or scripts. Each student will have 3 minutes to present site.

warm-up: Read Web Page Redo -- handout given in class. Prepare to discuss.
Send an email for the Student Portal email with 3 key points you learned from the reading.

Objective: Review Good and Bad web design from Robin Williams' text and the following web sites

warm-up: Logon to student server and open the document for your classwork from the @pickup folder. The file is named design.doc. (Must have word to open this document)

Complete the design.doc during class today. You should be able to edit using Word after opening it from the @pickup folder. An alternative is to open your portal email account. You should have an email from me with an attached file. Save this file to your html folder on the student server. The filename should not be changed. It is design.doc.

Use the peer evaluations from Mon/Tues to modify websites. Your entire site will be published on Friday. The technology fee assessed at the beginning of the year MUST be paid in order for you to have access to the class server. NO EXCEPTIONS.

objective: Web Site should be ready for publishing. Work on any of the itenms on the checklist that are not complete. When you have ALL checks, then make sure that I check your pages for completion. This must be done be the end of the period.

extras: Consider using some design items that have been discussed during class this week. Your site should have some continuity so your audience will know that all of the pages were designed by the same person. Their should be evidence of a color scheme. The banners should match this and tie the site together. You are welcome to use some of the ideas found at the following URLs.

warm-up: Logon to the The Source and check your progress report grade and verify absences for the second six weeks.

Warm-Up: Copy the following information on the login sheet that you keep in your notebook. This information MUST be written down EXACTLY as it appears. Keep this in your notebook at all times and bring it to class each day.

(Technology Application fee must be paid before web site is made public)
Please print copy of technology fee letter to parents if you need to take care of this!

Web Design Test -- Complete the test found in Quiz Star. Review the test when complete. All missed questions should be written on a sheet of paper with the correct response. For true/false question, write the correct statement for any questions that were incorrect. These corrections must be turned in to the black box when complete.