ONTU.org is Fun Lifehacks

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
Guide to Google Sites Classic Mode, Not Modern Mode. Introduction...\\
* This roycebarber.com article covers some basic edits to your site. For saving money and time by editing your own website.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Know Your Theme Terminology (Image)

{{:tech:x2.png?direct&800x442}}\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
What is Google Sites?\\
* Sites.Google.Com is a website maker! Technically it's a C.M.S. (Content Management System). It's one of many ways to build a website. It's a greatly simplified version of professional systems (like drupal.org), and does not have many advanced features.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Preliminary Check\\
.\\
* Decide what Google account to make your website with. Your favorite Gmail account may be the account to use, if your computer is often logged into that account anyway. Later on, you can allow other Google accounts to edit your site.\\
* Write down your new site address, as well as the Username and Password to access it.\\
* You know you're logged in when you see the white toolbar across the top of your website.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Anatomy of Your Website\\
.\\
* Header: The very top of your website. All you can add is your logo, which when clicked goes to your start page. \\
.\\
* Footer: The very bottom of your website. You may add text, images, and a few other things, but not widgets. \\
.\\
* Navigation Buttons: Your site navigation menu, can be Horizontal buttons across the top of your site, or Vertical buttons down the side of your site. \\
.\\
* Theme: The graphics and sizing of your site. \\
.\\
* Sub Pages: Every page can have pages under it. Kind of like Windows folders. \\
.\\
* Site Map: A listing of all pages on your website. \\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Basic Features of Google Sites\\
.\\
* Google Sites allows formatted text, menu's, YouTube videos, Google+ content, art gallery, very simple spreadsheets, contact form, Paypal cart (I've not tested this), calendar, charts, presentation, street map, drawings, insert a Google Group, file downloads, Google Drive downloads, and more.\\
.\\
* White Toolbar: When logged into Google Sites, at your site, you notice a big white toolbar across the top. You won't see this toolbar on others sites.\\
.\\
The White Toolbar: Preview Mode and Edit Mode (Screenshot, click to view full image)\\
.\\
https://sites.google.com/site/barbertube/tutor/concepts/google-sites-guide/GoogleSites%20Tutorial2.png\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
The White Toolbar: Preview Mode and Edit Mode (image)

{{:tech:z1.png?direct&1280x192}}\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
White Toolbar in Preview Mode\\
.\\
* Preview Mode is the default state, before clicking the Edit pencil icon. There is Edit Page, Create New Page, More, and Share. \\
.\\
* Edit Page: Your website goes from Preview Mode to Edit Mode, where you can add content.\\
.\\
* Create New Page: Create a page and decide where it's stored.\\
.\\
* Share: Manage who can see your site, who can edit your site. Click "Enable page level permissions" if you'd like to have a private page only you can see. \\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
White Toolbar in Edit Mode\\
.\\
* Edit Mode happens after clicking the Edit pencil icon. There is Insert, Format, Table, and Layout. Under those four menu's is a simple text editor bar. Notice the Undo/Redo icons at the start, for when you make mistakes. Notice the "Tx" icon at the end, it removes formatting.\\
.\\
* Insert: Place content and widgets.\\
.\\
* Format: Simple headings options. "Table of contents" widget uses Headings only.\\
.\\
* Table: Make a simple table.\\
.\\
* Layout: Instantly change the columns \\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Misc Terminology\\
.\\
* \\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Create a New Site\\
.\\
* Google Sites allows you to make numerous sites on your Google account.\\
* Create a site: Navigate your browser to, sites.google.com and select a site to edit, or press CREATE. Many site names are taken.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Let Friends Edit Your Site\\
.\\
* Click Share when in Preview Mode rather than Edit Mode. Now notice "Who has access" and the Google accounts listed. Those people can freely edit your site and view private pages. Notice "Invite People" at the bottom, where you may add more friends.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Permissions: Make a Page Private (I need to research this process further)\\
.\\
* To make a page private, you need to enable "Custom Permissions", which means only you and those you choose as site admins can view that page. Here is what you do: Click Share when in Preview Mode rather than Edit Mode. Click "Enable Page Level Permissions" at the top right. Click "Turn on Page-Level Permissions". Wait for the yellow Processing banner to finish. Note the listing of your pages, select your desired page. Click a small button titled "Change". Now notice "Use Same Permissions As..." is likely selected, so change it to "Use Custom Permissions". Press OK. I need to research this further, but I think your page is now Semi-Private, only available to gmail addresses you mark as being able to edit your site. Your page is no longer public.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Permissions: Make the Entire Site Private\\
.\\
*\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Themes and Layout\\
.\\
* If you mess up a theme, press CANCEL, do not press SAVE.\\
.\\
* To modify the theme or settings of your site, ensure you are in Preview Mode (where you can't type into your page). Click the "More" button at the top right, and these three items are theme or layout related;\\
.\\
1. Page Settings: Show or hide a few minor parts of the specific page you're on. \\
.\\
2. Edit Site Layout: Decide on Horizontal or Vertical navigation buttons, make a custom header or footer. Decide the width of your content area.\\
.\\
3. Manage Site: Site settings, theme settings, change to a different theme, manage attachments (photos or files taking up space), or edit who you share the site with.\\
.\\
Terminology for when you click Themes from Manage Site...\\
.\\
* Theme: You are allowed two background images, plus an additional Content Area (where you type text) background image, and a header logo, and a short background image for your header.\\
.\\
* Entire Page: Select text and font colors for your entire site. Select up to two background images: Background is the furthest away, and Wrapper is slightly closer to you. The page you're looking at uses both, the blue water background is "Background Image", and the white fire is "Wrapper Image". You can set the images to repeat or only show once.\\
.\\
* Site Header: Here you decide to either use a header color or an image, and the font options of header text.\\
.\\
* Content Area: Where your text and widgets aka gadgets live. On this very page, behind this text is a white background image, which is the Content Area.\\
.\\
* Content Area Gadgets: Any gadgets you place in your content area.\\
.\\
* SideBar Gadgets: Any gadgets you place on your Vertical Navigation Sidebar.\\
.\\
* Horizontal Navigation: Edit your Horizontal Navigation Buttons at the top of your site. There are no widgets aka gadgets here.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Back Up Your Site\\
.\\
* Before making major or risky changes to a site, go into Preview Mode and click More, Manage Site, and locate the "Copy Site" button. Copying a site, saves a backup of your site as a new site. \\
.\\
* Copies are easily deleted, but it's nice to have them around. I save a copy using a simple name such as "Backup Feb-21-2014".\\
.\\
* With a copy of your site, you can experiment with themes, with zero danger to your real site.\\
.\\
* One reason for limiting the huge photos and files in a website, is that the backup will also be smaller and easy to manage. You may use a Google+ Photo Gallery on your site, taking up none of your GoogleSites storage space.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
Most Popular Image Formats\\
.\\
* PNG: A popular website standard. It's what I save all my photos with because it can be opened by most software and safely saved over numerous times. Has smooth transparencies and layers, excellent for websites. Usually uncompressed or only slightly compressed. Not suitable for some industrial printing due to no CMYK color profile, but most people will never use CMYK.\\
.\\
* JPG: Popular web standard. Nice small file size. Often overly compressed, showing blurry artifacts and colors bleeding. Saving over a JPG, even using High Quality compression, still lowers it's detail. JPG is always lossy. Inexpensive "Point and Shoot" cameras can only save as JPG. \\
.\\
* PSD: Lossless. Photoshop's project format. Saves a project including selections, transparency, layers, effects, and many settings. Not readable by most software. Large file size.\\
.\\
* RAW: Lossless. Professional camera format. Not readable by most software. Uncompressed, so massive file size. No transparencies or layers.\\
.\\
* GIF: An old web standard. Limited to 256 colors, making images highly splotchy and ugly. Animated. Can have 1 transparent color. Animation viewable in web browsers, but usually not outside the web. Gif images look far better as greyscale.\\
.\\
* BMP and TIFF: Lossless. Old PC standard, uncompressed, not used on web. Industrial design teams often use TIFF because it's uncompressed, but the file size is huge.\\
.\\
* SVG: Vector format, meaning mathematical lines and gradients rather than a photo. Sometimes used for technical schematics or clipart. Can be scaled to any size without losing clarity. Can be converted to Adobe Flash.\\
.\\
* Image Compression: Lossy VS Lossless: Lossy image compression, leaves all kinds of icky blurry artifacts. Lossless compression, means there is little to no blurry artifacts. When you save an image, you often have a choice to use compression to save file space, but doing so may ruin a good image. Using minimal to no compression is best, but the file size is far larger. A highly compressed JPG image, looks horrible. A minimally compressed JPG looks good, but every time you save it, you lose a slight amount of detail. So JPG is a lossy format, it's great for the web because the file size is small. \\
.\\
* Photoshop Caution: When closing an image in Photoshop, it asks if you wish to save. It might be saving over your source file, even if your had already saved the image as a different file name. \\
.\\
* Adobe Bridge and Adobe Camera Raw: Bridge is a simple photo organizer software (aka boring. why not just use folders?), often offering a useful "Open in Camera Raw" plugin when you right-click certain file types. Camera Raw is a plugin to quickly fix photographs. Camera Raw can only open a few image formats, and can only save as DNG (digital negative), JPG, TIFF, and PSD (photoshop).\\
.\\
* Additional Info: I found a handy site explaining Image Formats; http://www.frontlineprinting.com/HelpCenterImages.asp\\
.\\
.\\
.\\
.\\
.\\
.\\
.\\
. \\
Additional Help\\
.\\
In Preview Mode, click MORE and Sites Help.
ONTU.org is Fun Lifehacks

User Tools

Site Tools

Page Tools
