EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

Student Name:

Date Submitted:

Assignment Creating a School Web Page

Items to be turned in  The page must be created in Microsoft FrontPage, and be fully compatible with the computers in the classroom. The web page, and any supporting files must be saved on a single floppy disk or zip disk.  Print a copy of the page on a laser or inkjet printer (300 dpi or higher resolution).  Be prepared to present your page to the class. Basic requirements Create a web page for a local school (K-12) in Orange, Semi- nole or Osceola counties. The page should be patterned after ex- isting pages you will research on the internet. Projects must be complete by beginning of class on December 8, 2004 .

Grading Considera- 1. Basic design patterned after existing page (on grade sheet in- tions dicate the URL of the actual site). 2. Must include at least 3 small photos or art (wallet-size to snap-shot size). 3. Must contain at least one custom background and two ani- mated gifs. 4. Must contain at least 3 active links to web sites that would be useful for a classroom. 5. Originality and thought put into web page. This includes the content, the usefulness and the appearance of the web page.

Name and URL (ad- dress) of site your page is patterned af- ter:

Page 1 of 6 EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

What is a web page? 1. A web page document (usually in hyper text markup language) plus 2. Links to a background plus 3. Links to pictures plus 4. Links to any sounds or movies.

Html text Image 01 file b background sound 01 file

Image 04 file

Image 02 file Image 04 file

Image 03 file

Page 2 of 6 EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

Online Tools & Resources

Rubrics Educational Portals &  RubiStar Hotlists  Rubric Builder  MarcoPolo  T4L Rubric Maker  Kathy Schrock's Guide for Ed- ucators Graphic Organizers  Busy Teachers' Web Site  Inspiration Software (down-  The Educator's Reference load a 30-day Trial) Desk

 Teach-nology  EduPlace More Cool Tools & Re-  Freeology - Free Graphic Or- sources ganizers  Merriam-Webster Online

 NoodleTools Worksheets/Quizzes  Electronic Reference Desk  QuizStar  MapQuest  Hot Potatoes  Measure4Measure  PuzzleMaker  Pics4Learning  TrackStar  The Amazing Picture Machine  Web Worksheet Wizard

 Worksheet Makers

Page 3 of 6 EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

Creating a Web Page Using MicroSoft FrontPage Basic Instructions: how they would be displayed. Obviously, this requires a very technical knowledge of  What is a Web Page? the language and the ability to code the A web page is a hypertext document that page without seeing what it actually looks includes text and links to other items. The like. hypertext protocol used is called “html”  There are a number of visual web creation (hyper text markup language). Without get- programs available such as Microsoft ting into details of html language, it is im- FrontPage, Macromedia Dreamweaver and portant to realize two features. Adobe GoLive. We will be using Microsoft  The text of a web page is saved in a FrontPage. The visual programs like this plain text format with special tags that make it more like using a word processor. give instructions on how it should be Even Microsoft Word can be used to create displayed. web pages, but it is not usually advisable.  These tags also include the instructions  on how to show pictures, movies and  Your web page is actually several files. In sounds. These text files with tags are in- your projects you should have at least seven terpreted by the browser so that you se files. The basic page is a “html” document, the finished results. that links to each photo, movie, sound or  The browsers most frequently used are In- any other item. That means that with your ternet Explorer and Netscape navigator. In three photos will add 3 files. With your 2 addition to interpreting your page visually, animated gifs you add two more. And your the browser gives you the ability to locate background image will add one more. web pages by their address or URL. Nor- mally, the URL will start with http://, and  Open Microsoft FrontPage. Then, Go to the will end with the file name “name.html”. File Menu and select the New command.  The web page is the basic building block in From options window that opens select, a website. They contain multiple web pages "New Page or Web", then “Blank Page”. linked to each other. One web page be- comes the opening or central page. We usu- ally call this the homepage. Its actual file name is usually “default.htm” or “in- dex.htm"”  In the project three assignment, you are de- signing a SINGLE PAGE – NOT A SITE!  Even though this is a single page on the web, it actually takes several files to make it display properly. Each picture, movie or  Once the new untitled page opens, select sound must be saved as a separate file. With Format Menu – and the Background com- the html language, you are able to link these mand. files so that they display as a single web page.  Originally all web pages were created in html language using a simple text editor. They were then viewed in a browser to see

Page 4 of 6 EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

 To insert a picture, first click the mouse at the point you want to start. Then click the "Insert Image" icon on the standard toolbar. A window opens that allows you to find the picture you want to insert.

 When you bring in a picture, you can resize it by dragging the handles. In addition, you can create a frame around the picture. A picture can be set on a page so that type wraps around it on either side. Many im- ages will allow you to select a single color  Next select the "Background Picture" box. in the photo that will be transparent so that Next click on "Browse". Open the Shared you see the page background through it. Folder/eme2040/university_highschool files  Animated gifs are actually a series of still and select “backdrop.gif””. When you click images saved in a single file that play one after another like a movie. You can insert  Next click the Center button on your format them just like any still image. The anima- toolbar. tion will only show when you view the web page in a browser like Netscape Communi- cator of Microsoft Internet Explorer.

Next, create a table to hold pictures of your  Type in the name of your page (for Exam- Staff. Select Table/Insert/Table ple, University High School). Now select the words you just typed and make the size be 18pt Bold (B).

 Press the "Return Key" several times to move down the page. Insert a picture of the school. Select Insert/Picture/From File.  Make 4 rows, 2 columns, width 65%, align- Then in the university_highschool files ment Right. folder find “uhs_entrance.jpg”

 Press the return key once, then start typing “Meet the Staff”. Make the size about 14pt Bold.

Page 5 of 6 EME 2040 Project 2 Creating a Personal Web Page Handed out 10/27/04

In rows 2 and 4 type: “Principal”, “Vice Princi- rate links to each part. These shapes be- pal” “Guidance Counselor” and “Athletic Di- come invisible in the browser. rector”. (Pic: principal.jpg) (Pic: viceprincipal.jpg) Principal Vice Principal Saving your file (Pic: guidance.jpg) (Pic coach.jpg)  Select File Menu – Save command. Name Guidance Counselor Athletic Director the file your first name + your last name, then a dot (.) + htm. For example, my file Resize the pictures to fit as much as possible. would be called: “Davidhaskins.htm”.  To create hypertext links (a link to any oth-  Save the file on your 31/2 floppy disk A. er site on the web), you first type text that  Remember; put no spaces in the file name. I will identify the site to the viewer.You can have created a special folder in our class also use a picture or art image. Then select folder for "web pages". Please save your "hyperlink" icon on the standard toolbar file in this location. HTML Guides & References

A Beginner's Guide to HTML http://www.ncsa.uiuc.edu/General/Internet/WWW/H TMLPrimer.html

Florida Schools http://www.fldoe.org/schoolmap/flash/re- gionalmap.asp?bhcp=1

 When you click "OK" you return to the page, and the text is now underlined and Educational Technology Clearinghouse color-coded to show that it links to a new The ETC is your starting point for links to educa- location. tional resources for Florida's teachers. http://etc.usf.edu/  Note: you will need to browse the internet find sites that would be suitable. I have giv- en you a few References at the right. Be sure to use the full URL that starts with the http://www… . This helps to avoid prob- lems later locating your file.

 Hyperlinks can also be created with pic- tures. In that case you would select an exist- ing image on your page, then go to the link- ing tool (globe) and click on that image.

 There is even a special kind of hyperlink called an “Image Map” that allows you to make several links on one photo. You have a special tool to draw ovals or polygons in various parts of the image an assign sepa-

Page 6 of 6