This action might not be possible to undo. Are you sure you want to continue?
Creating Web Sites with Google Sites
Using any web browser, go to http://sites.google.com/ You ll need to log in with your Google Account username and password. From there select Create new site as seen in the screen to the right.
Fill in the following information: A. Site Name Decide on a name for your site. THINK! This becomes part of the URL to access your site. B. Site Description It is optional to give a description, but I would suggest that you do so. C. Mature Content If you have to think about this . . . D. Share With Select Everyone now, but you can change it in the future. E. Site Theme Whatever suits your personal tastes . . . to see more themes, click More Themes . F. Type the code You ll need to type the code word shown so Google knows you are a real person creating the site. G. Create Site Click the blue button to create your web site!
File Under: Project 3 Information/Communication Web Site
The Basic Page
This is what your web looks like with no editing to content. Even now, your site is live on the Internet and you could provide others your URL.
Creating a New Page
Google Sites lets you create multiple pages in your site and offers several different types of page templates from which to choose. Here s a brief explanation of each, taken from the Google Sites help pages: Webpage
A web page is an unstructured page where you can enter text, images, tables, and embed spreadsheets, presentations, videos, and more. The Web Page has standard formatting controls like bold, italic, underline, font control, text color, and text highlighting. You can create bulleted lists, numbered lists, and easily link to other pages in your site. You can attach documents from your hard drive to the bottom of the page, and allow other site collaborators to comment on your pages.
An Announcement page is a page which makes it easy for an individual or group to post chronological information like news, status updates, or notable events. It can be used to post organizational news, post project updates, announce new releases, post interesting links from around the web, as a simple blog, and more.
File Cabinet Page
A File Cabinet allows you to manage documents from your hard drive and organize them into folders. This can be used to organize common documents in one place. Version history is stored for documents so you can always return to an earlier version.
List pages allow you to easily track lists of information. You can choose from a list of templates or configure your own custom columns. Items can be easily added, updated, and removed.
To begin the process, click Create new page near the top-right of the screen.
A new dialogue page appears and is shown here: In this sample, I ve elected to create a new Web page named Homework and make it a top level page.
If you choose to Put page under . . . another page in your site, the new page will appear automatically in the navigation below and indented. Google Sites will also allow the user the ability to expand and collapse a list of pages under another page.
Click Create Page and Google Sites adds the new page to your site. Google Sites opens your new page in Edit mode; to exit this mode, click Save in the upper right area of the screen. Take a moment to create all the pages you ll need for your site. Don t worry about content; we ll get to that in bit.
Changing Site Navigation and the Left Sidebar
At this point, you may want to edit what your left side navigation bar shows on your site. By default, Google Sites manages the navigation automatically and creates links to pages in your site. They are listed in the left-side navigation in alphabetical order by page title. We ll learn two things: first, changing the Site Navigation links to pages in your site, then deleting and adding other sidebar elements.
To accomplish either of those tasks, begin by clicking Edit sidebar. The link is at the bottom of your left side navigation bar. The Edit Sidebar screen appears:
In this screen, you have access to a number of advanced aspects of your site. This basic tutorial is not designed to cover these aspects; however, note that you can y view and manage site content y change site setting (you can delete the entire site under General ) y Change the site s appearance (use Theme to select a new theme for your site). Explore these options to learn more.
Changing Site Navigation In the new dialogue page that appears, click edit in the Navigation element box.
The Configure Navigation pop-up dialogue box appears . . .
In this dialogue box, you can accomplish 3 things: Title: Changing the text in this box changes the name of the actual box that appears on your site s left-side navigation bar. Decide whether or not you even want a title to your navigation box by checking or un-checking the display title box. Automatically Organize My Navigation: We ll come back to this in a second. Include a link to: Checking or un-checking these boxes adds or deletes these two items/links to/from your navigation bar.
Sitemap:this will include a link to a listing of all pages in your site. You ll be able to view your site in either list format or tree format. Recent site activity: this will include a link to a listing of all recent updates you ve made to your site. Think of it as a history of your work on your web site.
More on Automatically organizing my navigation By default, Google Sites will automatically mange your navigation system by adding new pages to the navigation bar in alphabetical order and showing up to two (2) levels of pages. However, you may need to re-order the links in some non-alphabetical order. To access these links to make such changes, uncheck the box next to Automatically organize my navigation. The dialogue box refreshes with the following view: Reorder the List
To reorder the list, click a page title to select the page and use the up and down arrows to the right to move the page up or down in the list.
Put a Page Under Another Page
To make any page under another page, use the reorder system to move the page below the page it will appear under and use the right-pointing
arrow to indent the page. Reverse the indent using the left-pointing arrow.
Delete a Page from the Navigation
To delete a page from the navigation list, select the page and click the boxed X. The page link is removed immediately from the list. However, the page itself is not deleted . . . you can return a link to the page to the navigation list by clicking Add page at the bottom of the list.
Add a Link to an External URL to the Navigation List
To add a link in your navigation list to an external URL, click Add URL in the dialogue box. A new dialogue box appears asking for the URL or email and the Text to display. Fill in those two boxes and click OK. These new URLs can be managed just as other items in the list; however, note that they will NOT open in new windows.
Finished? Click OK in the dialogue box. You ll be returned to the Edit Sidebar screen where you must click Save Changes or risk losing the work you just completed. Click SAVE CHANGES! To return to your site, click Return to Site in the upper left corner. Adding Sidebar Items One thing I d like to remove from the site is the Recent Site Activity box. I think it s confusing for the user to see both it and the Site Navigation. If you ve returned to your site, clickEdit sidebar just as you did in the previous section. Locate and click Add a sidebar item .
Google Sites provides a number of different page elements that you can add to your navigation bar. We ll work with one just to give you experience; then you can explore the others on your own.
Scroll down in the list and select Add under the Countdown page element. Google Sites automatically adds the Countdown control box to your leftside naviation bar list. To manage the Countdown, click Edit in the Countdown control box. (Each page element will have a different edit screen . . . ). Name the countdown and select the date in the future to which the countdown box is counting down. Click OK . You ll not see a change in the Edit Sidebar screen, but Google Sites has added it to your site.
You can also rearrange boxes in the left side navigation bar by grabbing the 4 dots in the blue bar at the top of the item and dragging it to another position. Look for other item boxes to turn red; that s when it s OK to drop the item. When you re finished customizing, click the Save changes button in the upper left corner of this screen. To return to your site, click Return to site in the far upper left corner of this screen.
Basic Page Editing
Now that your site and all its pages are created, let s begin by adding simple text content to your home page. You ll use this process each time you want to add text to a page in your site. Click Edit page in order to add content to your site.
In this sample, there are two text boxes that can be edited: Home and Here is where . . . simply click and start typing to edit these. You can use the font style and size tools to make changes to the text. Note how most of the text tools are very similar to other word processing tools you are accustomed to. To highlight text, select the text, then click the Text Background Color icon. To change color of text itself, select the text, then click the Text Color icon
Advanced Page Editing
In addition to changing color of text and text background, you have several other options you can explore to customize the look of content on your page. This section of the tutorial will cover 3 of them: 1) creating a new pagelayout, 2) creating and using a table, and 3) inserting items on the page (images, horizontal lines, etc.). Changing the Page Layout A basic page begins with a single-column layout. Google Sites allows a number of different page layouts ranging from 1-column to 3-columns and including a variety of header, footer, and side-bar combinations. To begin, click Edit page if you are not already in edit mode on the page you wish to change.
To change the page layout, click the Layout menu and make your selection. The image below shows our previous Home page in two-column layout. Various areas of the page are highlighted using dotted-line borders; these borders are not visible when the page is viewed online.
Creating and Using a Simple Table Tables give you some measure of control over the placement of text on the page or in a portion of a multi-part page layout. In the image to the right, you see a 2 row/3 column table.
First, ensure you are in edit mode for the page to which you wish to add a table.
To create a table, click the Table menu, point to Insert Table, then select the height and width of the table. Note too how you can insert rows and columns and delete rows and columns from the menu.
In this image, the middle cell in the lower row is selected; this occurs when you click in the cell. You can change the width of a column or height of a row by grabbing and dragging the white handle-bars of the selected cell. Note that changing the width and height of one cell is not possible. Changes occur to the entire column or the entire row (or both). One other note: You cannot set the table borders to transparent; all tables will show lines around each cell.
Inserting Items on a Page
We ll learn how to insert two basic items on your web page: 1) a horizontal rule (a line running horizontally across the entire page or the column if you re using a multi-column layout) and 2) an image such as a digital photograph. Horizontal rule Horizontal rules can be used to break up a page into smaller chunks of information. Position the cursor on the line where you want your horizontal rule. Click the Insert menu and choose Horizontal Rule. The line will be placed immediately above your cursor. To delete a horizontal rule, click below the rule and use your backspace key. The image below shows a two-column layout, each with horizontal rules.
Inserting Images Putting images on a page in Google Sites is a two-step process: 1) upload the image to Google Sites and 2) insert the image. Uploading Images Any image you want to upload should be in it final form. You will not be able to crop or rotate your images once uploaded to Google Sites. In addition, images can take up a sizeable amount of storage space, so you ll want to make sure you ve resized the image to a smaller file size. This tutorial does not cover these aspects of digital imagery. Please also note that once you upload an image to your Google Sites storage, you cannot delete it from storage. Even if you don t use it in your pages, it still resides in your storage. Begin by editing the page where you want the image to appear and placing your cursor at the point where you want the image on the page. Then click the Insert menu, and clickImage.
In the dialogue box, click Uploaded images and navigate to the image you wish to upload. Select the photo and click Open.
NOTE! There is no confirmation! As soon as you click Open, the photo will be uploaded and placed on the page at the point where your cursor is located. Alternatively, you could select Web address (URL) and enter the URL of a photo you have stored online somewhere else. This works well with photos stored in places like Flickr. Just copy the URL of your photo and copy it in the URL box that appears when you select Web address (URL). Once uploaded, you may insert the same image again on this page; it is NOT available for use on other pages. If you need the same photo on a different page, you ll need to upload it again when editing that page. You ll be able to control alignment, size, and wrapping of the image on the page using the picture controls at the bottom of the image. To access the controls, simply click on an inserted image. Click off the image to hide the controls. Experiment with the Align, Size, and Wrap possibilities. To remove a photo from the page, select the photo when the page is in edit mode and click Remove in the picture control bar.
Adding Links to External Web Sites
One of the greatest aspects of web development is your ability to link to content on millions and millions of other web sites. This section will show you how to create these hyperlinks. The page you wish to include the link on must be open for editing. Begin by typing the text you wish to make a hyperlink and highlighting that text. Click the Link menu.
In the dialogue box, click Web address on the left side.
Enter the URL in the text box.
Check the Open this link in a new window if you want this.
Email Message Links To create a link that opens a new email message, follow the directions above, and use the following URL: mailto:<email_address> For example, to create my email link, I d use mailto:email@example.com Alternatively, you can simply type your email address and press enter. Google Sites will automatically create and email hyperlink. You can also create a hyperlink on one page of your site to another page in your site. Follow the same procedure to create a hyperlink as you did above, but this time click Existing page in the left side navigation of the create link dialogue box. Select the page you want to link to, decide whether or not to open in a new window (probably not a good idea), and click OK. You can also use this screen to create a new page in your site . . .
Attaching Documents and Other Files
One important aspect of your site is the ability to share documents, PDFs, and other files electronically. You upload the document/PDF/file to your site as an attachment, and others can access the document from your site. You have no control over where the link to the file is on the page: all attachments reside at the bottom of the page. Attached files do count toward your 100 Mb quota, but you can easily remove attachments from your site once they ve outlived their usefulness. Here s the process: Open the page on which you want to place the attachment. Note: you cannot add attachments to your home page . . .
Locate the Attachments area at the bottom of the page and click either Attachments or the plus sign (+) next to the word. When you do, you ll be given a simple Browse dialogue box: click the Browse button.
Locate your file, select it, and click Open. As soon as you click Open, Google Sites will automatically upload a copy of your file to your site and create a link from the actual filename.
Files are sorted chronologically by time of upload.
To remove an attached file: Too simple, really . . . just click Remove next to the attached file you no longer need on your site.
To access Google Sites help menu, click Help in the upper right corner at any time. The following help page will launch in a new browser window or tab:
Almost any additional questions can be answered by referring to the help page.
Acknowledgements This tutorial was created by Dr. Bruce Spitzer for use with his EDUC-W200 students at Indiana University South Bend in Fall 2009. All images and intellectual content remain the property of Google and Google Sites. The author makes this document freely available to the public domain through posting on Scribd.com.
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue listening from where you left off, or restart the preview.