Tech Tips Home
The Best Tech Tips And Daily Deals
Newsletter On The Internet!

Shop online 24hrs a day or call us Mon-Fri
8:30AM-4:30PM EST - 1-800-915-2088
WorldStart Tech Tip And Store Search
Email: Password: Login Remember Me

Like what you see here? Subscribe to the Tech Tips newsletter!   Email: Subscribe

Build Your Own Website with Google Sites

Monday, September 20th, 2010 by | Filed Under: Using The Internet, Web Design
 
Loading...


Social networks offer an opportunity for a presence on the web for everyone, but they don’t allow the flexibility in appearance or content that you can enjoy with your own website. Plus, your website can be shared on the social network of your choice.

I’ve been using Google products for several years, including SketchUp, Picasa, Google Books, Chrome and their free website service, Google Sites. That’s right, free. They’re not the only outfit offering free websites, but theirs offers the largest number of design options and the most user friendly tools of any that I’ve tried.

If you’d like to build your own site, you can create an account at Goggle Sites. Or, if you already have a Google account, you can sign up for one of their websites here.

When you arrive at the Create new site page, this is what you’ll see.

image

All you have to do on this page is Name your site, type in the code at the bottom, and click the Create site button. I named this site WorldStart Tips and decided to choose my theme later. Here, the Blank Template is chosen by default. The website for this demonstration can be reached at WorldStart Tips .

Now you’re ready to build your website. Many of the tools used here are similar to those used in building a document in a word processor (Microsoft Word, OpenOffice Writer, etc.). You can insert and arrange images, links, and text. In addition to that, you can also insert videos and slideshows (for a slideshow, a Picasa account is helpful). In the beginning, your home page will look like this.

image

Once the site has been created, editing is done with the 3 buttons found at the upper right corner of the page. The Create page and Edit page buttons allow you work on individual pages. The More actions button opens a submenu with many other selections. Manage site is the one I use most often.

image

I began this site by building a logo (actually, for this, I just borrowed the existing logo from the WorldStart Home page and inserted the words Computer Tips). If you’d like, you can use text provided by Google and just type in a title. However, one of the few weaknesses of Google Sites is a limited palette. There are only a half dozen fonts available, although you can copy and paste text from elsewhere. On each of the sites I’ve built, I’ve chosen to generate an image and use it as the title.

image

Once I’ve made a decision on title design, I begin to layout the page. Below, Site layout is selected from the Manage Site menu. An attractive website can be built without making any changes here, but it’s a handy tool to understand. If you’d rather just jump right in, you can skip to the next step, Selecting a Theme.

image

Then, in Site layout, click the Change site layout button under the heading Site appearance. For the time being, I’ve decided to eliminate the Header, by unchecking the box. Otherwise, everything is left in the default position. This, along with anything else, can be changed in the future. While you’re here, take a look at the other options available. The settings here offer opportunities to dramatically alter the look of your site. Once you’ve decided on your changes , and made the adjustments, click OK at the bottom.

image

Selecting a Theme

You can choose a theme by selecting Themes under the heading Site appearance. The one I chose (Slate) is one that I hope complements the title. Again, if this doesn’t work, it can always be changed.

image

I also chose Slate because I just think it looks sharp. Once a theme has been chosen, click on Save changes and Return to site.

image

Now might be a good time to tinker with some of the toolbar options. Just click the Edit page button and then click in one of the fields on the page. You can then start typing, or select the Insert menu and browse the choices. If, like me, you start by doing things you wish you hadn’t, the next section should help.

How to Undo Changes

When I’m learning something new on the computer, the first question I usually ask is “How do I undo things I’ve done?” Don’t worry; Google Sites has made allowances for that. Anything that’s done can be undone, using the undo arrow located below the Insert menu. The Ctrl+Z key combination also works to undo, just as it does in many documents.

image

If you add a bunch of stuff you don’t like, or discover a mistake made earlier that can’t be undone this way, just click the Cancel button. Be careful here. If you click Cancel, all changes you’ve made will disappear. On the other hand, if you’re happy with the results, click Save. It’s recommended to save often anytime you’re working on a computer. Since this work in done on the web, I’ve found it to be even more important here to remember that advice. Not only do you risk losing work due to the everyday problems associated with computer work, network problems can also cause work to be lost.

Once you’ve clicked on Save or Cancel, just click the Edit page button again to return to your work.

If, in fact, you’ve made and saved many changes and wish you could turn back the clock and return to an earlier version, Google Sites has also made that possible. Just click on the More actions button and select Revision History.

image

On the right below, you can see (Revert to this version). Choose the version you want, click it and your site will revert back to that time. However, if you choose the wrong one, all the others are still available. There’s nothing so simple that I can’t figure out how to do it wrong, but Google has made it possible to correct nearly every mistake.

image

Insert an Image

Inserting an image begins by clicking on the Edit page button.

image

When the page editor loads (see below), the page looks similar to many document editors, with 4 menu selections and a toolbar for adding and editing text, links, and HTML. Click in the field on the page where you’d like to insert the image and select Insert.

image

From the Insert menu, select Image.

image

Then, in the window, Add an Image, click on the Choose File button. This opens a window to your computer files from which you can select an image. I’ve named the title file Banner. I double click on this and the image uploads to the site.

image

When the image is uploaded, the Add an Image window appears again. Click on the image thumbnail, then click OK and it will be inserted.

image

Adjusting the Image Size

Here, you’ll see that the image is pretty large. It’s placed in its original size which, in this case, is way too big.

image

When an image is selected, basic image size and location controls are shown. Below, using the Align and Size tools, the image was centered (C) in the field and set to large (L).
Another option in the image controls is Remove. If you click that, the image will be deleted from the page. But, unless you delete it from the site (more about this another time), it will remain available to add anytime, anywhere.

image

Once the image has been inserted, my page looks like this. However, even set at large, the title seems too small. To add some visual interest and proportion, a slide show has also been inserted.

image

If the preset image sizes (S, M, L) don’t give you the look you want, you can either adjust the size of the image by fiddling with the HTML, or change direction altogether and use text for your title. For the title below, I removed the image and typed WorldStart Computer Tips into a Word document in 30 pt. text (Broadway style), then copied and pasted it into the web page.

image

In this one, the size of the original title image was adjusted by clicking on the HTML button and making adjustments.

image

If you choose to adjust the size of an image manually, using HTML, click on the Edit page button and then the HTML button.

image

Amidst the gobbledygook in there, look for height and width measurements. With my title set to large, the height was 66 and the width, 400. I changed the height to 99 and the width to 600 (both 1 ½ times larger). I arrived at this by trial and error, but I made sure to keep the proportions the same. For example, if I’d made the height 150, and the width 600, the image would have been distorted. Once you’ve selected a size, click the Update button at the lower left.

image

The Sidebar

By default, the sidebar is located at the left side of the page and is generally designed to be used for site navigation. However, Text Boxes can be added to it and edited in much the same way as the rest of the site. Images, links, text, etc. can be inserted and the sidebar size can be adjusted to accommodate anything placed there.

image

Just click on Edit sidebar and look over the options available.

image

The basic options are to edit or delete the default Navigation sidebar item, or to add a new sidebar item. In this case, I’ll delete Navigation by clicking the delete link.

Then a sidebar item will be added by clicking Add a sidebar item.

image

This will bring up Choose a New Page Element, seen below.

image

Then, I’ll add a text item to the sidebar, which will then be edited by clicking on the edit link.

image

Here, I titled the Text Box Other Sites. This will be used to add links to other websites. Once other pages on this site have been added, another Text Box for links to those pages will be added. The first site added here is to the WorldStart home page. I typed in the word WorldStart and highlighted it, then clicked on the Link button.

image

To add a link, click on Web address at the left and, in the field labeled Link to this URL:, type in the address for the site you want to add (again, in this case, it’s the WorldStart home page (http://www.worldstart.com/).

image

I clicked the check box at the bottom to Open this link in a new window and then clicked the OK button.

Once you’ve added pages to your site, if you click on Existing page instead of Web address, you can add links to other pages on your site.

Like most people, I prefer doing things the easy way, although I usually begin by doing them the most difficult way. When you’re adding links to other sites, the easiest way to accomplish this is to copy the address from your browser’s address bar and paste it into the Link to this URL: field.

image

Just highlight the address and copy it (Ctrl+C) and paste (Ctrl+V) into the field shown below.

image

Click Save changes and Return to site and, you’ll see that you’ve successfully added a Text Box, given it a title, and inserted a link (a couple more links were added for the image below).

image
image

When you’re ready to add more links, just repeat this process. Multiple links can be added before saving.

Create a New Page

Once the home page looks good, you can use that as a template for other pages or, if you like, you can make each page different. In this case I chose to use the Home page (the one used as an example for this demonstration) as a template. You begin by clicking on the Create page button.

image

The window below will appear.

image

The Home page template can be found center right. I’ll be using this page to display photos, and since I’m not very creative, I’ll name the page Photos. Click on the Create Page button at the bottom of the window. Voila! A new page.

Using the technique described earlier (Insert an Image), I plugged a few photos into the page. Fortunately, the day I was working on this, our cat and few bugs outside were cooperative subjects.

image

This time I added a name to the page with text from Word, by typing the word Photos in Impact (the same font used in the title image) at 40 pt. Then I copied that and pasted it at the top of the Photos page.

It’s tempting now to just start uploading photos to the site. You may want to resist that temptation. Another of the weaknesses of Google Sites is available space. Only 100MB (megabytes) of storage space is allowed. This sounds like a lot but, depending on the sizes of images, this is only enough room for an average of 35-40 photos.

This leaves a couple options that I know of. One is to reduce the file size of the posted photos. The other is to create a Picasa account. Much more storage space is available there and, using almost none of your site space, you can insert a slideshow of those photos. This is the easier of the two options.

I’ve used both of these options several times. Either choice requires some effort, but can be accomplished with software that’s free and relatively easy to use. I use Irfanview to adjust file sizes and Picasa for the slideshows.

I hope this helps you get started on your own website.

~Kevin

Leave a Reply


Like these tips? Get them for FREE in your email!

WorldStart's Tech Tips Newsletter

  • Tech Tips Daily - Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

  • Tech Tips Weekly - If you don't want our Tech Tips newsletter every day, then sign up for this weekly newsletter to get the best information of the week. Sent on Fridays.

Other Newsletters

  • WorldStart's Daily Deals - Every week, we send out great deals in our Daily Deals newsletter. Many of these deals are exclusively for our Daily Deals newsletter subscribers and can't be found with our regular specials.

  • Just For Grins - Each issue includes a couple clean jokes, some funny quotes, and a hilarious reader's story. Newsletter is sent five days a week.


Enter Email Address:

Subscribe

Your e-mail address is safe with us!
We only use it to send you the newsletters you request. It is NEVER disclosed to a third party for any reason, ever! Plus, if you decided you don't like our newsletters (don't worry, you'll love them), unsubscribing is fast and easy.

Free Newsletter Signup



Tech Tips Daily

Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

Tech Tips Weekly

The week's best in tech and computer help. Get your issue sent to your email every Friday!

WorldStart's Daily Deals

The very best deals on the Internet! Get a new set of incredible sales every day of the week!

Just For Grins

Clean jokes, funny quotes, and hilarious comics. Sent 5 times a week straight to your email.


Subscribe


Love Worldstart? Refer A Friend!

WorldStart's Premium Membership

Tip Archive


Categories:
Archives: