Advanced Authoring

...and Hints & Tips?

Go to Complete List of Resources - Advanced Authoring for the links found on this page plus many additional links about each of the sub-topics.

Also see:

Add, Modify or Hide the Search Tool

Google Sites includes the search tool in the header of the basic themes and templates. If you would like to remove the Search tool or change it, go to More (gear)--> Manage Site. In the General area, one of the options is to Enable and Configure Search Options. Go to Configure Site Search:

This is where you can Enable Search or not. You can also choose to have it search within your site and/or the google.com site. The advanced options allow you to add other search providers.

Create Your Own Header

You can create your own banner image to use as the header of your site. You will need to use a graphics/image tool outside Google Sites, such as Photoshop ($), GIMP (free), or a free online tool, Pixlr. You will create the banner image, save it, and then replace the information in the header with this image file.

How do you make your banner image look good on various sizes of screens, though?

You can set the width of your site to one that many people can view on a computer and create your banner image that width. You do this in More -> Edit Site Layout. On the top menu, beside the buttons, you will see Site Width. The general consensus seems to be that a banner image (and width of page) of approximately 960 pixels looks good on most computers. The height of the image banner (and height of header) can vary, based on the design, but most people start with 150 pixels and adjust from there. That means, that the image you create might be 960 x 150 pixels.

A great video with the steps to create a banner image (in the free online tool, Pixlr) and add the image to the header in your Google Sites page is:

How to Add a Header Image to Google Sites [Jonathan Wylie] (YouTube 8:18) www.youtube.com/watch?v=j-ZIfnDfZkE

  • Some simple instructions (and this video) can be fount at Insert/Change Header Logo sites.google.com/site/amslerclassroom/insert-change-logo

  • The site for the free online tool shown in the video is Pixlr Advanced Editor http://apps.pixlr.com/editor/

Cascading Style Sheets (CSS) and STYLE Attributes

Using the STYLE Attribute with Google Sites http://siteshelp.kccloudsolutions.com/step-by-step-guides/usingthestyleattributewithgooglesites

CSS Beginner Tutorial http://www.htmldog.com/guides/css/beginner/

CSS Introduction http://www.w3schools.com/css/css_intro.asp

Other Specific Tips: forms | gadgets | iTunes | voice comments

Working with forms [Ingot] https://sites.google.com/site/sitetemplateinfo/tips/work-with-forms

Add a contact form https://sites.google.com/site/siteshelphowtos/google-sites-instructions/Gadgets/addacontactform

Google Sites: Help and Instructions to Customize Your Site: Gadgets https://sites.google.com/site/siteshelphowtos/google-sites-instructions/gadgets1

Link to iTunes https://sites.google.com/site/siteshelphowtos/google-sites-instructions/links/linktoitunes

6 Steps to Add Voice Comments to Google Docs http://www.educatorstechnology.com/2013/05/6-steps-to-add-voice-comments-to-google.html

(next)

Share a Link via G-mail, Google+, Facebook or Twitter

Help Desk: Google Sites: https://sites.google.com/site/helpdesksites/

Advanced Authoring: https://sites.google.com/site/helpdesksites/advanced-authoring