Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and Password. Enter the following web address and the Google Sites entry page will display. http://sites.google.com/ Note the Google Sites Account section outlined in red in the screen shot above. Since you already have your Google Sites Account set up, enter your complete email address (example: rpattison@wps60.org) and the password you set up for your Google Sites account and click the Sign in button. You will be taken to your main Google Sites page. Your web site (or sites) will be listed under My Sites. See the sample site outlined in red in the screen shot below. Also note the links in the upper right corner (outlined in green). You are currently on the My sites page. The Help link can be very useful! Be sure you always use the Sign out link when you are done working on your site.
To work on your site, click the site name link (outlined in red above) and your site will open to the home page. The sample below is a blank home page that was based on a blank template; it does not yet have content added to it. NOTE: You should have a PLAN for your site before you begin to develop it. One suggestion is that you create an outline or diagram/storyboard of what you want on your site and how you want it organized. You should also list all of your major navigation items since they will be your first level pages. Be sure that you check the Waukegan Web Editor Guidelines (Web Site Publishing Standards and Classroom Web Site Requirements and Recommendations) and review Copyright information on the Web Central site at https://intra.wps60.org/webcentral/ before you begin to create your site. The WHS Library Site sample that we will use for these instructions was already a well-organized web site. We will plan to rebuild it using similar navigation and layout on Google Sites. Here is a screen shot of the original Manila WHS Library web site:
Select Site Colors and Fonts Since we already have a good idea about the color scheme, fonts and link settings for the new WHS Library Google Site, we will start by setting those options as close to the current site as possible. From your site manager, select Manage Site from the More actions dropdown menu in the upper right side of the screen. Then use the left column navigation to select Colors and Fonts under Site appearance. From there, you will find many options in the scrolling window. Click on each item that you want to review and/or change. If you select the Custom radio button, choices will be displayed. You can either pick colors from the palette or enter the HEX value. Since we want specific colors for the library site, we will enter the HEX colors. (See the Color Wheel under Web Tools on Web Central for HEX codes for specific colors.) In the sample below, the Page Link Color is being set to a custom value.
After changing many of the Theme Defaults to what we want for the WHS Library Site, the Preview looks like the screen shot below. Be sure you click the Save Changes button (outlined in red) to save before you return to your site. Advanced Tip: If you want to create your own header using a graphic editor (like Photoshop or the online PIXLR Editor), you can upload it and set it up on your site. To make the new Google Sites WHS Library Site match the old Manila site, we created a simple header and then used Site header background image under Manage Site, Colors and Fonts, Site header to upload it to the new site. (Note: Set repeat for NONE and position for left and top.)
Edit Home Page Next we will add some content to our home page. Click the Edit Page button (outlined in red below). When the Editor opens, you will see four dropdown menus and a row of tools along the top of the web page window (outlined in red below). Start entering the information you want to display on your home page. Here are some tips about how the text above was entered and some easy changes you can make. 1. You can change or remove the word home by just selecting and typing over it or deleting it. 2. You can write a sentence or a paragraph describing your site just by clicking in the editor text box and typing in the information you want. Press Return to start a new paragraph.
3. To create a bulleted list such as the one above, click the icon for Bullet List (outlined in blue above) and then type your list. To exit Bullet List, just press Return two times. 4. To Bold and/or Color your text headings, select the text and use the B (bold) icon (outlined in green above) to create bold and the A dropdown (outlined in pink above) to add color. 5. To create a link, select the text you want to link and then click the word LINK in the Editor toolbar. a. A new Create Link window will open. b. To link to a Web Address, click to highlight Web Address in the left column (outlined in red below). c. Enter the complete URL including the http://. (Sample outlined in blue below.) d. Click the OK button (outlined in green below) and you will be returned to your web page with the link displayed. e. Click anywhere on the page to continue editing the page. 6. To insert an image: a. Place your cursor where you want to insert the image. b. Select Image from the Insert dropdown menu. c. The Add an Image window will open. d. Accept the default: Uploaded Images e. Click the Browse button and navigate to locate the image you want to display. f. Click Open. g. Click OK (outlined in red below) to insert the image onto your web page at the position of your cursor.
IMPORTANT!! Your image should be sized correctly, named correctly and saved in a small format before you upload it. Instructions for Resizing and Saving images for the web can be found on the Web Central site. When you have all the content you want entered onto your home page, be sure to click the SAVE button in the upper right of the Editor. You will be returned to the display of the page. Advanced Tip: If you are familiar with HTML, you can also do some advanced editing. In order to match the layout of the Manila WHS Library site as closely as possible, I used Table (dropdown menu) and HTML (toolbar icon) to create the spacing and design in the screen shot below.
END NOTES: This is the end of the Google Sites: Site Creation and Home Page Design. If you want to take a break, click the Sign out link in the upper right corner of the browser window. If you want to continue creating and adding content to your site, open the next set of instructions, Google Sites: Additional Pages and Managing Content. IMPORTANT NOTE: One of the selections under your Google Site Settings is Monetize. Do NOT set up Google s AdSense on your web site. You may not profit in any way from a Waukegan classroom, team or school department web site.