background preloader

Google Sites I

Facebook Twitter

Make Folders. Advanced Tables - Google Sites Experts Designs Development Intranets Websites. Instructions I hopes this helps make better tables in Google Sites.

Advanced Tables - Google Sites Experts Designs Development Intranets Websites - Sites Devel...ment - Ad - Postage Stamp Feedback Examples Unformatted Table with Content Table with Content and Border Removed Table with Content, Border Removed and Centred Table with Content, Centred and Proportional Widths I've put the borders back on for clarity. Resizer - Google Design. Search google sites. All CSS Generators. Website Design. Google Sites Examples. JavaScript Popup Windows. You can use JavaScript to create popup windows.

JavaScript Popup Windows

Popup windows are different to simply opening a new browser window. If you only want to open a new browser window you can add the target="_blank" attribute within the <a> element (see this article on opening a new window in HTML). JavaScript popup windows however, are more powerful. Using JavaScript's method, you can determine what the window looks like (i.e. size, whether it has scrollbars, status bars etc). Basic JavaScript Popup Script. Center popup window on the Screen with Javascript. Material icons. Technical Integration - University Guide to Going Google. Steegle YouTube Google Sites. Themes, Colours, and Fonts - Google Sites Experts Designs Development Intranets Websites. Note: To apply any of these changes, you must be the Site Owner Change the Site Theme When you create a site, you are asked to choose a theme.

Themes, Colours, and Fonts - Google Sites Experts Designs Development Intranets Websites

A theme puts certain proportions onto the layout (e.g. the distance between the horizontal navigation bar and the page content), and it also comes with default styles, like fonts, font colours, and background images. You can change the theme of your site, and customise fonts, colours, images etc. as long as you are a site owner. Use the More button (shaped like a cog/wheel) and go to Manage Site, and then choose Themes, Colors, and Fonts (see Fig 1)Use the Base theme menu to choose your theme (see Fig 2)Use the Clear all customizations option to revert to the theme’s original state Colours and Fonts You can change the default style of your fonts in terms of size, colour and font face.

Note: if you customise Text in the Entire page section, this will override all other text customisations Background Images and Colours. Slideshow Maker - Google Apps Script Examples. 2015-10-20 - Google Sites for Schools - Part 2. Session Description: Go deeper into Google Sites as we expand your Site with content by creating a variety of pages including forms and docs, photo galleries, blogs, lists, and more.

2015-10-20 - Google Sites for Schools - Part 2

We will also cover page templates, settings, and subpages. Presenter: Eric Curts Date: October 20, 2015 - 3:30pm to 4:30pm EST Session Resources: The Life-Long Learner Blog: Add Animation to your Google Site. Need a little pop and style on your Google site?

The Life-Long Learner Blog: Add Animation to your Google Site

Well, just add some animation. You can add animated lines, animated words, and animated gifs. Before I explain how to make it happen, let me introduce you to a few sites to create or select your animated items.First, one Chrome extension that I highly recommend is Save to Google Drive. Once authorized, this extension places a copy choice item on the mouse right click menu which allows you to save images and links directly in your Google Drive.

This is important for adding the animated items to your Site. Now for the even easier part . . . on your Site, edit your page, choose insert and choose Drive. Please know that if you download your image to your device instead of your Drive, the image will not be animated. 2015-04-28 - Google Sites for Schools - Part 1. Sites Presentation - Google Slides. The Great EdTech Debate: Google Sites vs Google Classroom vs Blogger. Google Sites Course. Horizontal navigation colors. Part 1 | Part 2 | Part 3 | Part 4 | Part 5 Last time, we finished with a very plain looking Google Site with horizontal navigation to a few dummy pages: In this post, we’ll select a color scheme, and customize font and background colors on the Google Site.

Horizontal navigation colors

I’ve found Colour Lovers to be a very good site for getting ideas for web friendly color schemes. I usually start with the most loved or most viewed palettes, and choose one with good contrast. These colors may be used for background, unvisited links, visited links, content headers, or body font. For the purposes of this demo, I selected Making Coffee by Tzadkiel. I will try using the brown color (#4E3F30) for body font, the bluish color (#0CA5B0) for the header font and links, and the off white (#FEFEEB) for the background, and perhaps grey (#A5B3AA) for the horizontal navigation bar and visited links.

To set this up, I open the “Manage Site” menu (type g then m), and click on “Colors and Fonts” under Site Appearance. EdTech Chic: Creating Rollover Images in #Google Sites #BISDwired. My cousin (Hi Natalie!)

EdTech Chic: Creating Rollover Images in #Google Sites #BISDwired

Works for this cool company, Financial Social Media, that helps financial organizations harness the power of social media and digital marketing. As I was checking out their website, I happened upon their "About Us - Team Members" page and LOVED the format! Teacher's Guide on The Use of Google Sites in The Classroom. Google Sites is a great tool for creating webpages .

Teacher's Guide on The Use of Google Sites in The Classroom

"It is in fact a wiki, blog,portfolio, all rolled into one easy to use package". Google Sites brings together all of the other great Google services in that it allows users to embed Google Docs, Calendar, YouTube, Picasa albums, and much more. In this post Educational Technology and Mobile Learning is going to explore with you different ways and tips on how to tap into the educational potential of this tool and provide you with some practical ideas on how to use it with your students in the classroom. Front End Developer Playground & Code Editor in the Browser. How to Embed an Audio Player in Blogger Post - TekkiOnline. Have you ever thought of adding an audio player in blogger post?

How to Embed an Audio Player in Blogger Post - TekkiOnline

Surprisingly, Google makes it easier for you to entertain and inform readers who visit your blog on the blogger platform. With just a little snippet of an HTML5 code, you will have a full-featured Audio Player in blogger post. How does that sounds? Cool, right? Knowing how to code in HTML is actually not necessary; with just some simple edit, you can embed an audio player in blogger post. Let people see and hear your blog by embedding an audio player. Now with the introduction of HTML5 and the <audio> tag help us to add a music or an audio player a blogspot websites and post far more easier and with improved audio controls. free web tools. Embedding Google Slides as a slider in Google Sites. Add a Banner Slider - Working With Google Sites. Insert a Video - Working With Google Sites. There are a variety ways to provide your viewers access to a video you would like them to see.

Insert a Video - Working With Google Sites

Check out the options below, with videos on the right. Insert a YouTube Video This method allows you to "display" to a video that already exists on YouTube. Process: Go to the Insert menu > selectVideo > then select YouTube. You will then be provided with a space to "paste" in the URL provided at the actual location of the video. YouTube Embedded Players and Player Parameters   This document explains how to embed a YouTube player in your application and also defines the parameters that are available in the YouTube embedded player.

By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play videos using the autoplay parameter or cause a video to play repeatedly using the loop parameter. You can also use the enablejsapi parameter to enable the player to be controlled via the IFrame Player API. This page currently defines all parameters supported in any YouTube embedded player. Websitetology How To Embed An Audio File With HTML5 - Websitetology. Loading... Making a playable audio player used to mean you had to embed a Flash player or a Quicktime file into your website. Luckily, now there is a way to add a simple HTML5 code that will not only play the audio file, but will create a player that the user can control.

You will want to use HTML5 over Flash because many of your readers will be using a mobile device, and not all mobile devices are flash-enabled. We will, however, create a Flash player as our fallback in case a browser cannot handle HTML5 in this tutorial. You can also use a Quicktime file as the fallback, but keep in mind you will have to convert the file to an .mov. Websitetology How To Embed An Audio File With HTML5 - Websitetology. Creating a Podcast in Garageband / Posting on Google Sites File Cabinet Page - Publishing a Podcast. Embedding Audio Files with Dylancast. » Embed an HTML5 audio player in Google Sites. CSS3 Generator. Division of Information Technology. Google Sites for Teacher Web Pages and Student Projects - Flipped Events. Introduction to Google Sites 1. Create a Google Site or in your Google Apps account. 2. Decide on a topic for the site. Ideally this will be something that a student or teacher might use. Some ideas are: 3. Add 4 pages representing the different file types (i.e. web page, list page, announcement page, file page .)Play with changing page layoutsUse headings on your pagesOn your home page, use gadgets to bring content to the front of your web site. PLU: Designing Google Sites - Class Workshop. Google Sites Workshop. What Is It? A Google Site is an easy to set up, free website. With your Google site you or your students can: Put a variety of information together on a page: text, pictures, web links, videos.Have students comment on each other's work using the comments area of a page.Share the information with people you choose or with the world. But I've got BlackBoard. Google Sites Workshop.

Google Sites for Teacher Web Pages and Student Projects - Flipped Events. Embed or Link to Part of Youtube Video - PPT or Website. Adding a Favicon for your Google Site – 5 easy steps. I had previously made a post on how to add a Favicon to your website. In that post I linked back to a website that had directions for creating a favicon in a Google Site. Apparently that post no longer exists so I thought I would make the directions myself.

A favicon is the icon you see in the tab of your web browser. You can see in the below screenshot that I have 3 tabs open. The gmail logo is visible in the first tab, that icon is a favicon. Favicon & App Icon Generator. The definitive guide to optimize images for the web. Use the right image format The 3 most common file formats for images on the web are .jpg, .png and .gif. Here’s a brief summary of each image format and when you should use it. png: Use png images if the image has text in it, or if you need a transparent background.gif: Use gif for very small images such as a 5*5px background tile.jpg: Use this format for displaying photos, illustration images, etc. 14 Brilliant Tools for Evaluating Your Design's Colors.

Check My Colours - Analyse the color contrast of your web pages. 12 Must Have HTML5 Text Editors - Dev Code Geek. Applications are now affecting the life of individuals very steadily and evolving around the world progressively. Experts are using the various tools or techniques for building varieties of applications which promises to you to get your work to complete in an easy way.

In the market, numerous tools or software available through which you can make the applications with a good interface and even there is no need to know coding or does not require programming skills. A common man just needs to use it properly for creating an application. Among the mob of varieties of tools, HTML 5 has created their own place and also has changed the development phase completely. JS Bin - Collaborative JavaScript Debugging. HTML Editors. HTML editors are an integral part of creating websites. Whether you like to code your own HTML, or prefer to simply click and drag elements around the page, a good HTML editor will make your life easier. CSS Hover. This page explains and demonstrates how to use the CSS hover pseudo-class to achieve visual effects when the user hovers the cursor over an element.

This method is a quick and easy way to provide an effect without needing to use the JavaScript onMouseover event handler. Cascading Style Sheets (CSS) provides pseudo-classes that enable you to change the style HTML elements upon user interaction (such as hovering over or clicking an element). Links. In HTML, links (also known as "Hyperlinks") are what enables visitors to click through to another web page (or other URL). The visitor usually clicks on linked text or a linked image and that's what triggers the loading of the linked document. HTML Link Generator. HTML Tags. Portal Page with Google Sites. Administration - #BISDwired. The Virtual Classroom Project. - A Free Solution to all your PDF Problems. Wireframing on Flipboard. Aspect ratio calculator. Pixel Map Generator.

Pablo by Buffer - Design engaging images for your social media posts in under 30 seconds. Create a Javascript Popup Window. Diffen - Compare Anything. Diffen. Discern. Decide. PDF Compressor - Compress PDF Files Online. Use Google Sites to Build Your Own Digital Learning Hub. TL;DR version: As your create and curate your digital identity and online educational brand, consider using Google Sites as your digital learning hub.

Free Online Animated GIF Maker & Video Maker - Make A GIF or Video Easily. ClassTools Breaking News Generator. Embed Audio with Google Drive - By Chad Olson | June 29, 2014 | Category Tutorials. Web Design with Google Sites. Pop Up Window HTML Generator with IMG. Bootstrap Modals. Spanish Pronunciation Feedback BETA : Learn pronunciation and practice vocabulary. SANSSpace Demo. Spanish Quiz #2 ¿Cómo conociste a tus mejores amigos? Thimble by Mozilla - An online code editor for learners & educators. Made with Code.

Content Spoiler With Simple Animation. Forum: Programming: Simple HTML Code for [Show/Hide] spoilers. MaryMaloneyatGooglePalooza. Google Sites Tutorials - ARC Templates: Google Sites Templates. Color Hex Color Codes. Changing colors - Google Sites Help & Designs. Videos File Cabinet Style Page - Working With Google Sites. Google Sites Examples. Horizontal Rules - K8OMS Help Site.

Taking it to GOOGLE Street View. ShowMe. Video Lessons - Virtual Class Trips. Virtual Class Trips. Adding a Google Hangout button to my site. When visitors click it, is there anyway for it to initiate a hangout with me? Steegle. Mary Fran's Getting Started with Google Sites. Convertisseur Audio - Chrome Web Store.