Subscribe to our mailing list

Get the news right in your inbox!

Organizing Parent Information with Jump Links

July 20, 2013 No Comments

Organizing Parent Information with Jump Links

July 20, 2013 No Comments
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!
ladybugsteacherfiles

All posts

No Comments

Leave a Reply

About Me

Welcome to Ladybug's Teacher Files! I started this blog in 2010 as a way to share resources and collaborate with teachers. I hope you will find something that can be of help in your classroom! -Kristen

Instagram

  • Anyone else using iReady this year?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I’m looking to add a little more accountability/motivation for my students, so this week we are going to start tracking our usage. My fourth graders will store their sheets in their binders so their data is kept private, then I’ll send it home in our weekly folders so parents can see progress as well.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What do you do for iReady accountability? I would love to hear more ideas!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Please click the link in my profile if you’d like a copy of this sheet for your class (http://bit.ly/ireadysheet).
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
  • This closet!!! It has NEVER been organized in all my years in this classroom!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Honestly, I would pile things in there and slam the door fast, in hopes the pile wouldn’t collapse 😂
⠀⠀⠀⠀⠀⠀⠀⠀⠀
So I FINALLY got some shelving and sorted everything into bins...and I am in heaven.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Now if only all bins were the same color blue...
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#imjoking #actuallyimnot #typeateacher #kindoforganized #kindofnot #iteachfourth #iteach4th #iteach456
  • Need a last-minute valentines gift for your class?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Or is it just me who is frantically doing this now? 😂
⠀⠀⠀⠀⠀⠀⠀⠀⠀
These are some editable coupons I shared years ago on my blog that are perfect for those no-cost presents. I’ve been saving our scholastic points, so everyone is getting a coupon to choose a book for our classroom library tomorrow. 📖❤️
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Please click the link in my profile if you would like a copy! I hope some of you can use them!! (http://bit.ly/EditableValentinesCoupons)
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#lastminute #howisitmidfebruary #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
  • Binders, folders, or notebooks?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Over the years I’ve become a binders kind of girl...I tried to go with notebooks again this fall and it wasn’t the same. There’s just something about having everything all in one place.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
So in January, I switched back to binders and I’m so glad I did. I use prenumbered tabs which saves A TON of time in setting them up (see the last pic). I try to number the handouts in the bottom corner to match the tab number it belongs in (when I remember to 😉) but really it’s a great exercise in following directions as papers are handed out if I don’t remember to number them.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
My fourth graders LOVE their binders...my students from last year mention them when they come back to visit (it was actually thanks to them I got binders again, since they enjoyed them so much). Next fall, it’ll be binders from the start for us!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Do you like binders, folders, or notebooks? Or a combination?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#classroommanagement #classroomorganization #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
  • I received a few questions on how to get the day count on @planbookcom, so I wanted to share it here (it’s super quick!).
⠀⠀⠀⠀⠀⠀⠀⠀⠀
If you go into the Display settings, you will find a drop down menu under “Date Styling”.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Click the check box next to “show school day counter” and you should be all set!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I have a couple of blog posts about planbook and I’m working in some updated ones to share soon...anything in particular you’d like to see more about?
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#teacherplanner #classroomorganization #classroommanagement #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram
  • Did you know you can add little check boxes to Google Sheets? ✅
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I’m REALLY trying to get more ahead in my lesson planning so I can have my weekends free...and this little check box tool is helping with just that!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I set up a Sheets doc with each subject area I need to plan for. In the second column, I added the check boxes (you can find them under Insert).
⠀⠀⠀⠀⠀⠀⠀⠀⠀
It’s a really nice feature for those little checklists you want to reuse each week! Now back to lesson planning 😬
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#classroommanagement #classroomorganization #lessonplanning #iteachfourth #iteach4th #iteach456 #teachersfollowteachers #teachersofinstagram

Follow @ladybugsteacherfiles

Recent Posts

Archives

Popular Topics

×