Tech 2 Final Project Instructions:


Create a website that features our classrooms with at least 4 pages with text, graphics, and hyperlinks.
  • Welcome page (index.html)
  • Centers (centers.html)
  • Student Work (studentwork.html)
  • Current Events (currentevents.html)

Publish this website to the Internet.

Step 1: Create the index page.


The index page is the welcome page for your website.  It will be the first page your users will see.

1.  Open Mozilla and Select "File->New->Composer Page" from the menu bar.
2.  Type a Welcome Message.  For example:

Greetings and Welcome to Lastname's Class!  Our mission is to engage in learning!  Please check out our classroom centers and our student's hard work!



3.  Select "File-Save" from the Menu Bar
4.  Type "Welcome to Ms. Lastname's Class" in the window.
5.  Type "index.html" in the File Name.
6.  Navigate to "Web Pages" folder in your Tech 2 folder.
7.  Select "Save"

Step 2:  Selecting and editing a Picture for your index page.

1.  Minimize your composer page.
2.  Navigate to your picture's folder and select a photograph of your classroom.
3.  Double click to open the picture file.
4.  Select "File-Save As"
5.  Navigate to your "Web Pages" folder in your Tech 2 folder.
6.  Rename your picture "indexclassphoto.jpg"
7.  Click "Save"
8.  Select "Image->Resize" from menu bar.
9.  Set image size to 25%.
10. Click "OK"
11.  Select "File-Save"
12.  Exit Microsoft Photo Editor.

Step 3:  Adding the picture to your index page.

1.  Maximize Mozilla Composer to return to your index.html page.
2.  Select "Insert-Image" from the menu bar.
3.  Select "Choose File" and navigate to the "indexclassphoto.jpg" picture you made in Step 2.
4.  Select "indexclassphoto.jpg" and click "OK"
5.  Check the "Don't Use Alternate Text" Box
6.  Click "OK"
7.  Picture will now appear in your Index Page.  Adjust size of picture as needed.
8.  Left click the picture once.
9.  Click the "center" icon on the toolbar to center the picture.
10.  Left Click below the picture and press enter once.
11.  Click the Left icon to alight the text back to the left.
12.  Select "File-Save" to save your work.

Step 4:  Adding links to your index page.

1.  Type the following below your picture:

Lastname's Class Centers
Student Work
Current Events

2.  Highlight "Lastname's Class Centers"
3.  Right Click highlighted text.
4.  Select "Create Link"
5.  Type "centers.html" in the window.
6.  Click "OK"

7.  Highlight "Student Work"
8.  Right Click
9.  Select "Create Link"
10.  Type "studentwork.html" in the window.
11.  Click "OK"

12.  Highlight "Current Events"
13.  Right Click
14.  Select "Create Link"
15.  Type "currentevents.html" in the window.
16.  Click "OK"

17.  Select "File-Save" from the menu bar to save your work!

Step 5:  Create your Centers Page.

Your have finished your Index page.  Now you will create your sub-pages:
1.  Select "File-New" from the menu bar.
2.  Select "File-Save"
3.  Title the Page "Ms. Lastname's Class Centers"
4.  Navigate to your "Web Page" folder.  (You should already be there!)
4.  Type "centers.html" in the file name area.
5.  Click "OK"
6.  Type:

Ms. Lastname's Class Centers

at the top of the page.

Step 6: Inserting Pictures in the Centers Page.

1.  Follow the procedure for Step 3 and add at least 2 pictures to your Centers Page.
2.  Make sure you resize and save the pictures in your "Web Page" folder.
3.  Type regular text labels beneath each picture to identify the Center.

Step 7:  Creating a Link back to the Index Page.

At each sub-page you should include a link back to the Home Page (index.html) 

1.  Type "Home" at the bottom of the page.
2.  Highlight "Home"
3.  Right Click
4.  Select "Create Link"
5.  Type: "index.html"
6.  Click "OK"
7.  Select "File-Save" and save your work!

Step 8:  Create your Student Work Page.

1.  Select "File-New" from the menu bar.
2.  Select "File-Save"
3.  Title the Page "Ms. Lastname's Student Work"
4.  Navigate to your "Web Page" folder.  (You should already be there!)
4.  Type "studentwork.html" in the file name area.
5.  Click "OK"
6.  Type:

Ms. Lastname's Student Work

at the top of the page.

Step 9: Inserting Pictures in the Student Work Page.

1.  Follow the procedure for Step 3 and add at least 2 pictures to your Centers Page.
2.  Make sure you resize and save the pictures in your "Web Page" folder.
3.  Type regular text labels beneath each picture to identify the Center.

Step 10:  Creating a Link back to the Index Page.

At each sub-page you should include a link back to the Home Page (index.html) 

1.  Type "Home" at the bottom of the page.
2.  Highlight "Home"
3.  Right Click
4.  Select "Create Link"
5.  Type: "index.html"
6.  Click "OK"
7.  Select "File-Save" and save your work!

Step 11: Create your Current Events Page.

1.  Select "File-New" from the menu bar.
2.  Select "File-Save"
3.  Title the Page "Ms. Lastname's Current Events"
4.  Navigate to your "Web Page" folder.  (You should already be there!)
4.  Type "currentevents.html" in the file name area.
5.  Click "OK"
6.  Type:

Ms. Lastname's Current Events

at the top of the page.

7.  Type a simple list of Current Events.  You could do a daily schedule or your specials for the week.  Simply make something up!

Step 12:  Extra Credit!

1.  Figure out how to add clip art to your web page.
    (Hint! ...)

Step 13:  Creating a Link back to the Index Page.

At each sub-page you should include a link back to the Home Page (index.html) 

1.  Type "Home" at the bottom of the page.
2.  Highlight "Home"
3.  Right Click
4.  Select "Create Link"
5.  Type: "index.html"
6.  Click "OK"
7.  Select "File-Save" and save your work!

YES!!! You have completed your 4 page Web Site.  Exit Composer and save all your work.
Open Internet Explorer and navigate to your web page folder.
Test all your web pages and links and see if they work!

Step 14: Last Step!  Uploading your Web Site to the internet for all the world to see!!!