This tutorial is designed to guide Colorado State University faculty, staff and students through the process of creating a personal website in Google Apps.

Knowledge of HTML and website design is not required.

The website you create with the instructions in this tutorial will conform to website standards set by the CSU Department of Web Communications.

The website pictured on this page is an example of the design that results after following the steps in this tutorial.

You will need the following graphic files:• warnercnr_artwork.jpg• content_back.jpg• banner_back.jpg

To get these files, email the WCNR webmaster at:

help@warnercnr.colostate.edu

Creating a Personal Website in Google Apps

Create an Account & Login

To begin, point your browser to:

http://mail.rams.colostate.edu

Create an account by following the instructions on the Google Apps for CSU page. You will need to use your CSU eID.

New undergraduate students have a Google Apps account created when their eID is created.

After your account has been created, login to Google Apps with your CSU eID.

Google Apps Email

The first screen you will see is the Google Apps email.

Google Apps also gives you the ability to create and share documents, spreadsheets, presentations and calendars. And it lets you create websites.

In this tutorial, we'll focus on the website tool.

From the navigation bar at the top of the screen, select Sites.

Create Your Website

1. Choose the Blank template.

Name your site. If you named it, for example, Ram-fan, the URL of your site would be:

https://sites.google.com/a/rams.colostate.edu/Ram-fan

You can only use upper or lower case alphabet characters or numerals 0-9, or a dash "-".

Don't use spaces or other special characters.

2. Under Choose a theme,

3. select Blank Slate.

4. Select Create site.

3

2

4

1

Set Up the Home Page

You'll start with a blank template.

1. Select the Edit page button.

2. From the Layout, drop-down box, select Two column (simple)

3. Save changes from the Save button on top.

4. From the navigation column on the left side of the page, select Edit sidebar.

3

2

4

1

Sidebar and Site Layout

1. Select the Change site layout button.

2. Change Site Layout settings to:• Site width: 800px• Header height: use theme default value• Sidebar: on the right• Width: 150 pixels• Press OK

3. Under Header, Height, select the Change logo link.

2

1

3

Site Layout

In the Configure Site Logo window, select Custom Logo, and browse for the image file, warnercnr_artwork.jpg

Press OK

In the Sidebar section, under Navigation, select the edit link.

In the Configure Navigation box, • select Display title• deselect Automatically organize my navigation• Under Include a link to, deselect Sitemap and

Recent site activity.• Press OK

When new pages are added later, select Add a sidebar item to add links to the navigation sidebar in the Choose a New Page Elementbox.

Press the Save changes button.

Colors and Fonts

1. From the navigation column on the left side of the page, select the Colors & Fonts.

Settings can be changed in the long scroll box that starts with Entire page.

The settings to change under Entire Page are:

2. Page background color: select custom, type the hex value for dark beige in the bottom of the color chart: #cfbc94

3. Page font: select Trebuchet

2

1

3

Entire Page

Entire page settings (continued)

1. Page link color: select custom, select the darkest green box at the bottom(#005214)

2. Page visited link color: select custom, select the darkest orange box at the bottom(#973800)

Scroll Down to the Site header selections.

2

1

Site Header

Site header settings1. Site title color: select the white box at the top right corner.

2. Site header background image: beside Custom, browse for banner-back.jpg

2

1

Content Area

Content area settings1. Content background color: select the white box at the top right corner.

2. Content Background Image: beside Custom, browse for content-back.jpg

• change repeat to: horizontal (3)• keep horizontal position at: left• keep vertical position at: top

Content Area Gadgets - don’t change any of these.

Scroll down to Sidebar gadgets.

2

1

3

Sidebar Gadgets

Sidebar gadgets settings• Sidebar gadget font: trebuchet• Sidebar gadget link: darkest green• Sidebar gadget background color : #e1d7be• Sidebar gadget header text color: white

Colors and Fonts

Navigation gadget settings• Navigation current page background: #e1d7be• Navigation current page text color: darkest

green

Sidebar gadget settings, continued • Sidebar gadget header background color: darkest

green• Sidebar gadget line divider color: darkest green

Enter Content

Now you're ready to enter content into your template.

3. From the top right of the page, select the Edit page button.

1. At the top or bottom of the page, press the Save Changes button.

2. From the navigation column on the left side of the page, select Return to Site.

2

1

3

Enter ContentType or copy text into the columns.

Top Menu Items

1. Explore the Insert and Table menus to discover how to add photos, links, videos, tables and many other items.

2. Save all changes.

3. To add a page to your website, select Create page from the top right buttons.• Use the Web Page template• Enter a name for the page• Select Put page at the top level• Press the Create Page button, name it and press the

Create Page button.

4. Select Edit sidebar to add it to the Navigation (see page 7 for a review).• Under Navigation, select edit• Select Add page• Highlight the name of the page to add• Press OK• Use the up and down arrows to reposition menu items• Press OK, Save Changes then Return to site.

2

1

4

3

Conclusion

This concludes the tutorial on Creating a Personal Website in Google Apps.

If you have questions about this tutorial or creating personal websites in general, please contact the Warner College of Natural Resources webmaster at:

help@warnercnr.colostate.edu