2-pagesStyles

#Lesson 2 & Project 3A
##Linking Pages and StyleSheets

Before class

---

###Teacher Preperation

• The teacher should have the html from project 2 on dash.ga.co uploaded to Cloud9

Daily Objective

• Students will be able to create an About Me website that includes four webpages and a stylesheet.

Key points

• Page hierarchy and organization
• linking a stylesheet to your site allows for easy style changes

Assessment

1. Full, 4-page "About Me" website made in Cloud9 IDE.

Vocabulary

• IDE (Integrated Development Environment)
• Stylesheet
• Hierarchy
• Linking

###References

• https://c9.io/
• http://w3schools.com
• http://dash.ga.co
• Google Presentation Slides

During class

Do-now

1. Attendance: Teacher takes student attendance at www.kinvolved.com
2. Place the starter question on the board. The starter question can be found in slide 2 of the Google presentation (see references).

Opening

“Today we are going to add multiple pages to the website you made in dash.ga.co last class. Can anyone tell me why we asked you to create this diagram at the start of class?" At this point the teacher should explain to students that pages on a website are linked similarly to the structure of people in a company. Except a website starts with an index, not an owner.

Note: The website we will be making in class will have an index, three linked pages and a stylesheet.

Introduction of new material (“I Do”)

"Last class we made a single page that could almost link to other pages using . Can someone tell me where the placeholder is in this line of HTML?"
Students should arrive to the # symbol needs to be replaced with a file path.
In order for this new file path to link to another page we need to create that page.

Guided Practice (“We Do”)

Have all students open their computers log onto their Cloud9 account. If studnets do no already have a CLoud9 account they may use this guide.
Have students create a new workspace called AboutMe. Also have the teacher's workspace open on the front board. "All together let's create proper organization for this workspace." Create the following workspace as students follow along.

At this point teachers should give a quick check for understanding to make sure all students have an organized workspace.

Now that we have our workspace organzied let's copy and paste project 2 (Jeff's Blog) to all four pages on our site and start manipulating index.html to be a personlized About Me home page.

Independent practice ("You do")

Take some time to change this site to reflect yourself AND make sure all links work properly.

During this time the teacher should circulate to assist students with their webpage. Be prepared to get questions on linking! The students will need to be taught the difference between / and ../ as this has not yet been covered. The teacher may choose to do this one-to-one with each student or use slide 5 in the Google Presentation Slides.

Be sure to tell students there will be a simple way to style all pages at once that we will be learning in a few minutes.

Introduction of new material #2 (“I Do”)

Ask students to close their laptops and give 100% attention to the board. "Do you notice how if you change the style on one page of your site you tend to mak that same cahnge to the other four pages? This is because most sites online keep the same style for all pages. We can simplify this process by linking a style.css page to our site."

Guided Practice #2 (“We Do”)

Have all students open their computers and follow along as you demonstrate creating a style.css sheet on the board. While the teacher is creating and linking this sheet they should also be explaining the process in great detail. An example speech is below.

Example speech for creating a style.css sheet "You will notice the line inside the head tag. It is telling us to link to a page called style.css to find our page styles. There is one problem, we do not have a style.css sheet and all our styles are listed right on the page."

"To fix this we will create a new file called style.css and place it in the AboutMe folder. We will now take all of the information in our style tag from our orignal pages and move it to style.css. Notice how this page is nothing but css styles."
Questions to ask:

• Why is it better to use a style.css sheet?
• What will need to be changed when linking pages other than the index to the stylesheet? Answer- you need to add ../ to get out of the current folder.

Independent practice #2 ("You do")

The rest of class can be dedicated to students completing this website using the skills they learned today.

Note: The like buttons will not work using the code from dash.ga.co. Inorder to make the buttons function the code will need to be changed. Slide 6 in Google Presentation Slides explains this process. However, you may encourage students to research this answer on their own.

Closing

Check for understanding

Leave time at the end of class for students to wrap up and ask teachers any questions they may have.

##How to Submit The teacher must ask students to share the link to their project on your school's Project Submission Form.

##Homework Students who are not complete with their site by the end of class should complete it at home for homework. Note: This project can take multiple days of class. Adjust schedule as necessary

After Class

• Look over each student's website for completion. If most students could benefit from having more time then use next class period to complete this project.
• Prepare for next lesson / hand off to next volunteer in rotation.