I use Google Sites exclusively when creating a website for my classes or for personal use. I find the user interface very straightforward and easy to use. The seamless integration of Google Docs, Youtube, and gadgets make the sites highly customizable, and accessible from nearly any mobile device.
As someone who’s been designing webpages from scratch since elementary school, I find the vast majority of the default themes provided by Google… well, ugly. So last winter, I decided to find a way to make my sites look cleaner, and more professional.
Here are the themes I made for my sites:
For each site, I wanted to
- Create a custom header/logo
- Use horizontal navigation, and incorporate it into my design
- Utilize a web-friendly color scheme
- Remove excess text and gadgets for a clean interface
All you really need to create the custom theme is a simple image editing program (such as freeware GIMP) and an attractive color scheme (from Colourlovers). I don’t have any particular expertise in graphic design, and I tend to design logos using only text.
In this post, I will show you how to set up your basic site.
1. Log into your Google Account, or create a new one.
2. Go to http://sites.google.com, and click “Create a New Site.”
3. Select “Blank Template,” then name your site, and customize your URL so that it is unique.
4. Choose the “Blank Slate” Theme
This is the easiest theme to build upon.
Your site will look something like this:
It is helpful to create a few pages so that you can see what your design will look like with horizontal navigation. Click “Create page,” and Name your page. The page template you select is not important, as you can change it later.
7. Remove Default Title
Click on the “More Actions” dropdown menu, and select “Manage Site.” (alternatively, type “g + m” from your site). Click on “General” in the Site Settings sidebar, and uncheck “Show site name at top of pages.” We will make our own! Click “Save Changes.”
Your site now looks like this:
8. Set up horizontal navigation.
While still in “Manage Site” click on “Site Layout” under “Site Appearance.”
Your default settings include a header, side bar, and system footer. We want to replace the side bar with horizontal navigation and add a custom footer. Click “Change site layout.” In this menu, check “Horizontal navigation,” uncheck “Sidebar,” and check “Footer.” We will fiddle with the header in the Pt 2 of this series.
Click “OK, then “Save Changes.” Your site layout will now look like this:
9. Add Pages to Horizontal Navigation
While the sidebar automatically alphabetically populates with your pages, you have to manually add pages to horizontal navigation. From the “Site Layout” page, click “edit content” in the horizontal navigation box.
Click “Add Page” to add each page you created one by one. You can rearrange the pages by using the up and down arrows. You can create subpages (drop-down menus) by clicking the right arrow.
You can also link to an external page from the horizontal navigation by using “Add URL”
Click “OK” and “Save Changes,” then “Return to Site.” Your site will look like this:
It may not look like much now, but in the next post I’ll show you how to:
- Customize header dimensions
- Select a color scheme
- Create a page wrapper (header/background)