Happy Saturday! Well I am sad to say as the summer begins to wind down for many teachers, we will be ending our Optimum Organization linky soon. Elizabeth and I decided that next week will be the official last linky, so be sure to visit and link up that one last time if you would like!
And of course you can link up today :)
Remember that class blog/website we talked about a couple of weeks ago? Well today's Optimum Organization is all about organizing that Parent Information page.
This is an example of my Classroom page. The top menu (featuring our schedule, homework, etc) has clickable links for parents to easily navigate to the information.
And it's really not hard to set up at all!
I debated on making this into a video tutorial, but I think I can go through it more thoroughly with pictures you can refer back to.
So grab a coffee or soda and get ready for a very photo-rich tutorial...
Adding Jump Links to a Page
This tutorial was created here on a page on Ladybug's Teacher Files: Jump Links. Please feel free to visit this page to see the links in action.
To begin, open a new page on your blog (though a post would work too!). We will begin with the menu bar that will appear at the very top of your page, like so:
In this example, I am just using three sections...Schedule, Homework, and Grading. If I click on the HTML tab of the page, this is what the code looks like for these sections:
Now we'll take a closer look at the code for each part, so you know exactly what to do! This pictures shows all of the code needed for one jump link, in this case for the Schedule Section:
Let's break that down a bit. This code features the link to your page (in this case, my page link is the one you see when you visit the example page). So if you have a page already set up for your parents, you will just need to copy the url of that page in this section of code:
The other important part of this code is the #schedule part, as highlighted below. This must be named for the section...so #schedule for Schedule, #grading for Grading, and so on:
The next part is the text, as you would like it to appear. Since the first jump link we have is for our class schedule, I have the word Schedule:
That last part is a non-breaking space...it just makes a space between the links. I also have little circles between each word...just to break them up a bit:
Once I have that code set up for all three sections, this is how it will look under my HTML tab:
The next part will be the code we will place further down the page...the places we will jump to.
First, we will look at the code for the jump link for Schedule:
We have the beginning of the div id, in this case for "schedule". This must have the exact name/spelling of the code you created above. Since I named it #schedule above in the top menu, it must be "schedule" here. If it is written differently, it won't jump to this point:
Those next parts are really up to you. This is the part where I centered my text for the section, made it a large font size, and made it bold:
This next part is the word as you would like it to appear on the page. Since this is our Schedule section, I kept it named Schedule:
Those last parts are the closing tags of everything you typed in. If they aren't closed properly, the code won't work properly:
Now I will just copy that section of code and paste it again two times (so I can just adjust the names of each section:
And just change it to Homework, for our second section. You will also need to change the div id...so you are making two changes to the code:
Now if you look at the three sections of code, you will see they all have their appropriate names:
So this next part may look crazy, but I want you to see how the jump links will be working. When I'm ready to add the content, all I have to do is hit Enter after Schedule and just start typing the information I want to appear:
The only thing missing right now is the Return to Top code...and that's what we will add next!
I know there is a more traditional way of doing this, but I prefer to just link back to the page itself because it is easier.
So, right under the first of the three sections, I type in the code you see highlighted below:
The font styling (I keep the font small, so it stands out a bit from the rest of the font on the page):
And the closing tags:
Once you have that code all set, all you will have to do is copy and paste it under each of your sections.
Ok, that seemed really long and tedious...I think I need jump links for this tutorial!! I hope it was clear enough and I hope it will be of help for those of you looking to organize your classroom sites.
If you have an organizational tip to share with us, please join us in the linky fun!