July 20, 2013

Organizing Parent Information with Jump Links

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:
 And if I click on Compose, this is how it will appear:
You can add as many sections as you would like, using the same code as shown above. I have sections for each subject in our class, for example.

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:
Let's take a closer look at that one.

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:
 So I will go to Schedule and highlight it:
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:
If I click on the Compose tab, this is how they appear right now:
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:
If I hit Publish on my page, this is how it will look on the website so far:
If I click on each section, I can already jump to them:
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:
Here's a closer peek at that code. It has the original url of your parent information page:
The font styling (I keep the font small, so it stands out a bit from the rest of the font on the page):

The text you would like to appear on the page...I use "return to top":
And the closing tags:
When you click on the Compose tab, this is how it will appear:

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!

17 comments:

  1. Thanks for the walk-through of this! Coding always makes my brain go gooey - the pictures really help!

    As always, thanks for hosting. :D

    Claire
    Sorry About The Mess

    ReplyDelete
  2. Super fabulous!! I love learning more and more and you did a phenomenal job of breaking it down and making it do-able. Thank you!

    ReplyDelete
  3. I really needed this break down! Thanks for sharing!

    Janelle

    ReplyDelete
  4. THANK you so much for posting about this!! I've been wanting to try this. I'm going to give it a try.

    aurie
    First Grade Lyons' Den

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Thank you, thank you for writing this tutorial! I just added all the jump links to my website - the directions were very easy to follow :) You are awesome!

    ReplyDelete
  7. You're tutorials are always top notch. I really appreciate the effort you put into them and I used a lot of them when I set up my blog. Thanks for another one!
    ✿April✿
    Grade School Giggles

    ReplyDelete
  8. Kristen,
    Love the post! It is so helpful to see all the images because I am such a visual person. And I literally got up and refilled my coffee mug when you told me to! LOL! I am having a link on my blog with tips for newbie bloggers, and this post fits perfectly. You can visit my page and see if you want to link up!
    Thanks!
    Kristin
    Fifth Grade Ramblings

    ReplyDelete
  9. Wow!! This is such an amazing post with a step-by-step tutorial! Thank you so much for making it look so easy:)
    ~Holly
    Fourth Grade Flipper

    ReplyDelete
  10. I LOVE you. I spent the time getting this set up this morning and it was so worth it. Thank you 100x over for your clear instructions!

    ReplyDelete
  11. Quick question...how did you get your widgets to only show on your main home page? I can't figure this out and my searches haven't produced anything useful. I need to remove them because they cover my calendar widget and a couple others. If you can help it would be awesome!

    Thanks

    ReplyDelete
  12. hey couldn’t be counted under any of the separately-defined “Cash Inflows” categories, so the only way those inflows could be counted is if they’re netting off outflows under a master agreement. Personally,Pass bee Media wallet

    ReplyDelete
  13. I ENJOY you. We used some time having this kind of set up this 90 degree 3D-holoshow system morning and yes it seemed to be so more than worth it. Many thanks 100x over for your obvious recommendations!

    ReplyDelete
  14. Water is an essential part in life. And this type of project is very useful in maintaining a clean source of quality water plano dentist

    ReplyDelete
  15. well, this is really a nice post.I really like the way you start and conclude your thoughts. Thank you so much for this information.Chicago limousine services

    ReplyDelete
  16. Great blog! I really love how it is easy on my eyes and the information are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day!Pest Control

    ReplyDelete
  17. First of all Good day! I would just like to give thanks to the admin who posted this one I really appreciate it thank you.AntiRetailHome

    ReplyDelete