Add Standard Content to a Page

Formatting overview

Formatting Overview Video - Watch the video below for some of the basics of formatting your pages

When you start editing a page on your site, you can format the page with the following:

• Formatted text
• Links
• Tables
• Images
• Table of contents
• Subpage listing

Format text on a page

You can format text on a page in your site just as you would on a standard document.

From the formatting toolbar, you can:

• Choose a font

• Select the size of text

• Add general formatting such as bold, italics, and underline

• Change the text color

• Change the text background color

Additionally, you can format paragraphs of text as numbered or bulleted lists, indentations, and horizontal spacing.

Add links to a page

You can insert a link anywhere on a page on your site using the Link icon on the formatting toolbar Or by clicking on 'Link' within the Insert menu.

The Create link window allows you to choose from three types of links. The first two are pages within your site and pages outside of your site. The third is a link to an Apps Script.

• Existing page: this option will list 3 tabs of links on your site - pages you've recently edited, pages that anyone on the site has recently edited, or a full list of pages within your site.

• Web address: if you are linking to a URL, select this option. This will allow you to paste or type in a URL

• Apps Script: If you have added Apps Scripts to your site from Manage Site > Apps Scripts, then you can link to a script from this location.

If you choose to link to an existing page within your site, the link will show up as the page name.

If you type in a web address, the link will appear as the full URL.

You can have a link appear as text instead of a page name or full URL, just follow these steps:

1. Select the text you would like to appear as a link (e.g., View the library page).

1. Click the Link icon on the formatting toolbar or click the Insert menu and select Link.
2. If you would like to link to an existing page, select it from the Existing page category. If you would like to link to another URL, click the 'Web address' and type or paste in the full URL.
3. Click Ok.

The text you highlighted will now appear as a hyperlink going to the page you selected.

You can access the link settings at any time by placing your cursor anywhere within a hyperlinked text and clicking the Change link that appears.

In the insert link menu, you can change the link location or check whether you would like the link to open in a new window.

To remove a link from a text selection, place your cursor anywhere within the hyperlinked text and click the Remove link that appears.

Please note: This will only remove the hyperlink from the text, not the text itself.

Insert a table on a page

Tables are useful for controlling the alignment and position of content on your web page.

You can insert a table on a page with rows and columns anywhere on your page, just follow these steps:

1. Make sure you are in editing mode on your page (if you see the Save or Cancel buttons, you are in editing mode, otherwise, click the Edit page button).
2. Place your cursor at the point on the page you want to insert a table.
3. Click Table in the Sites toolbar.
4. Select Insert table and mouse over the 'size' of the table you would like to insert by clicking on the bottom right corner of your desired table size.

Your table will appear on your page and you can begin adding content.

To add new columns or rows, click on the cell closest to the part of the table where you would like to add another row or column. Click the Table option in the Sites toolbar and select Insert [column/row] [right/left or up/down].

To remove columns or rows, click on the desired row or column, click the Table option in the Sites toolbar and select Delete row/column.

To delete the table, click on a cell anywhere in the table, click the Table option in the Sites toolbar and select Delete table.

Resizing your table:

You can resize individual columns or rows by clicking on a cell and using the resize tools on the border of the cell.

Another way to adjust the size of one row or one column within a table is to edit the HTML.

• Click on the HTML icon on the tool bar within the Page Editor.
• Replace the "60px" with whatever number you want the size to be for whichever column or row you want to edit.
• Once you've finished making your changes click "Update" and your changes should appear.

Please keep in mind that the table feature auto sizes depending on what content you place in it. In most cases, the table will resize proportionally correct for what has been input and shouldn't require manual re-sizing. Also, if you remove the width attribute from every cell in a column, the browser will automatically resize the cells based on content width.

Insert an image on a page

You can insert an image while in edit mode (if you see the Save or Cancel buttons in the top right, you are in edit mode. If not, click the Edit page button).

To insert an image, click on the Insert option in the Sites toolbar and selecting Image.

Then either browse for the image on your machine or upload it from a specific web address. All images are scrubbed for vulnerabilities and converted to either JPG or PNG.

Once an image is included on a page, you may access controls for changing its size, alignment and whether text wraps around it by clicking on the image in edit mode.

The controls then appear as links directly below the image. There are 3 properties you can modify

• Alignment: Choose how the image is aligned on the page - Left, Center, or Right.
• Size: Choose a preset size in Google Sites as small, medium, or large. You can also choose to display the original size of the image.
• Wrap: Turn on the ability to wrap text around the image.

The image is automatically linked to itself, allowing users to render it full screen by clicking it. (You can change where the image links to by clicking on Change).

If you don't see the word change- highlight he image and then click on the link icon. Then same options for links will appear as with any other link

You may also manually resize the image on the page within the HTML source view by including attributes for width, height or both within the img src tag, such as: width="800px" . Click on the HTML icon on the toolbar while in edit mode to access the HTML code.

Add a table of contents to a page

Google Sites can automatically generate a table of contents for your page based on text heading styles. A table of contents can be a useful tool for visitors on your site to jump to sections on your page that are interesting or relevant.

To automatically create a table of contents for your page, follow these steps:

1. To set a heading style for a selection of text, click on the Format menu and select the appropriate header size.

1. To insert a table of contents, place the cursor where you would like the table of contents to appear. Then click on the Insert menu and select Table of contents.

1. Select the width and the level you wish to display in the table of contents

1. Upon saving the page, a table of contents will appear where the cursor was placed.

Edit Table of Content Gadget settings

You can edit the width, levels, and layout properties of the Table of Contents gadget at any time, just follow these steps:

1. While editing the page, click on the Table of Contents gadget.

1. The gadget controls then appear as links directly below the gadget. There are 2 properties you can modify:

Remove the Table of Contents gadget

You can remove a table of contents by clicking anywhere inside the table of contents while editing the page and clicking the X link that appears.

Please note: If you find any entries blank (table of contents numbers but no corresponding text), select the problematic text and click the Remove formatting (T) button. This strips conflicting formatting tags that are preventing the table of contents from being generated completely.

Add a subpage listing gadget

In addition to creating sub-menus within the navigation menus, you can also add a subpage listing gadget for automatically generating index pages based on site structure. Like the sidebar navigation, it is configurable to a depth of your choosing. Site collaborators can add the gadget to any page by going to: "Edit page" -> "Insert" menu -> "Subpage listing."

Add a subpage listing

To add a listing to a main page with links to the subpages, follow these steps:

1. Click the top level page in the sidebar, then click the Edit page button.
2. Click Insert > Subpage listing.
3. Enter the title of the main page in the Title field. Select the appearance of the listing and click Save.

You'll now have sub-menus for your pages. You can repeat this for all top level pages and subpages.

Insert custom HTML, CSS, and Javascript

Use the HTML Box tool to customize the appearance of your site.

With the HTML Box tool, you can add HTML, CSS and Javascript into a Google Sites page. The tool lets you add functional CSS and Javascript to customize the look and feel of your Google Site. For example, you could create image carousels, custom menus, submission forms and jQuery-based widgets.

This tool is different than using the HTML button in the toolbar when you’re editing a page, as the HTML button allows you to make small edits to HTML and inline CSS, but it does not allow you to write custom Javascript.

Insert custom HTML, CSS and Javascript

1. Go to the Google Sites page that you’d like to embed HTML in.
2. Go to the Insert menu and select HTML Box.
3. In the dialog that opens, add HTML, CSS and/or Javascript code.
4. When you’re done, click Save.
5. To preview your embedded HTML, click Save on the Google Site page.

Tips for writing HTML with the HTML Box tool

• To make sure that your code is error free, we’ll show you errors underlined in red as you type.
• You can reference any public image on the Internet in your HTML embed, such as an image hosted in Picasa. Keep Google program policies and copyright laws in mind whenever you reference a public image.
• Code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes.
• You can link script tags to jQuery (For example,https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js). Versions 1.5 and 1.6 are supported.

For samples of this code in action, please visit http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646