Google Sites: Create a horizontal fly-out/hover menu inside your webpage.

To jazz up your site a little bit and make navigating it a little bit easier, many web designers us a horizonatal fly-out menu option.  Fly-out menus give options as you hover your mouse over a specific location on your website like the following picture demonstrates.  I hovered my mouse over the "Student Resources" tab and then a menue appeared with links to other website links, links within my site, or even email addresses.

Tutorial

1.  Once you are logged into your Google Site, click the "More" button and choose the "Manage Site" option toward the bottom of the menu.

2.  Toward the left hand side you will see a set of options.  Look for the "General" section and then click the "Site Layout" option.

3.  Click the "Change site layout" button.

4.  There are many options to play with here, and this is a great place to go to add or take away options from your site.  For the purpose of this tutorial though just make sure the "Horizontal navigation bar" check box is checked.  Click the "OK" button.

5.  Now clic the "edite horizontal nav content" link found under the "horizontal navigation bar" section.

6.  Change the style to "Tabs."  You can sure play with the other to options "Boxes," and "Links" to see how that changes the appearance of your Navigation Menu on your web site.

7.  Now find the "Select pages to display" section.  If you are just starting then you wont see a whole bunch here, just the "Add page" and "Add URL" links.  Lets start with the "Add page" link.

8.  If you have pages built in Google Sites, they should display here.  You can even use the search bar to find a specific page.  Once you know which page you would like to appear on your Horizontal Menu click on it and then click the OK button.

9.  Now lets add a website link to your menu bar.  Click the "Add URL" link.

10.  Type in specific text that you would like to display in your menu.  Then type in either a website address or an email address in the second box.  Click OK.

11.  Once you have added all of your pages and URLs you need to organize them.  To the right of the box you will see 4 arrows and a boxed "x".  Use the up and down arrows to arrange the links in order.  Use the right or left arrows to create sub categories.  These sub categories are the fly-out menus and the categories are the menu tabs that you will initially see on your site.

12.  Example:  The "Governing board" tab that you see is my first category.  If you were to hover your mouse over the tab you would then see the sub categories, District Policies and SUSD5 File Cabinet.

Well that is really all there is to making a Horizontal fly out menu using Google Sites.

Google Sites: Create a free educational website using Google Sites.

Our district is moving away from our current web hosting solution to Google Sites.  It is free, easy to use and for those who are advances website creators, you have a lot of options to choose from.  The following education technology tutorial will demonstrate how to initially create a website and how to use templates that are already created for you.

Tutorial

1.  After logging into your Gmail account, you should see links to your Calendar, Drive/Docs, Sites, and Video.  Click the Sites link.

2.  Once you are in GSites click the "Create" button.

3.  My favorite way to create a site is to just start with a "Blank template."  However there are tons of website templates already created by other users who are educators, so for this tutorial I am going to demonstrate how to grab a Template from the gallery.

4.  After clicking on the "Browse the gallery for more" button you will be take to a screen like this.  Click on the search bar and enter a description and then hit enter or you can do what I did and click on the "Schools and Education" option which will take you to a bunch of templates that you can scroll through.

5.  Select a site template that might work for you.

6.  You will then be able to read a description of the site template and you can even click the "Preview" button to see what the site actually looks like.

7.  If this is the template you want click the "Select" button or go back to try another template.

8.  Give a title for your site.  You will notice that this title also creates a URL/link to your website.

9.  If you are creating a blank template the you can click on "Select a theme." and choose color for your site.  In this tutorial we won't worry about that.  Give a category or two about your site and then give a short description in the "Site description" box.

10.  Once you are done, click the "Create" button to get your site created. 

11.  For some reason, sometimes the site creation just sites there.  Give it 5 minutes or so and if you aren't redirected to a different page, just click "Cancel" and you will be taken back to the list of sites and your's should be there.  Hopefully though you will not have to worry about it and you will be automatically be redirected to your new website.

Your site should now be created and you can now enter the "Edit" phase.  I will be creating another tutorial shortly on how to edit and add items to your site to give it character and an aesthetic appeal.