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:
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.
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.
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:
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.
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:
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.
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.
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
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.
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:
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:
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.
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:
You'll now have sub-menus for your pages. You can repeat this for all top level pages and subpages.
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
Tips for writing HTML with the HTML Box tool
For samples of this code in action, please visit http://support.google.com/sites/bin/answer.py?hl=en&answer=2500646