01 - The Site Manager in Google Page Creator

Now that you have signed up for a Google account, you can log in to all the different applications provided by Google. Let's sign in to the Google Page Creator at this link http://pages.google.com. After you have successfully sign in, you will be taken straight to the Site Manager. The Site Manager is simply the place where you manage the web pages that you have previously created. It is also the place when you create new pages.

Let's start with the basics of a web site. Typically a website consist of a homepage, which contains links to other pages, such as the About page, Contact page, Blog page, etc. So Let's jump right into it and begin by creating your homepage. You simply click the Create a New Page And the very first thing you are required to do is to enter Your Page's Title. Type that in and click Create and Edit. You will now enter the Page Editor where you can specify how it will look, what contents you want to display. And the screen looks like this:

Let's take a detailed look at the page layout. You have the page title right on top. Followed by the page's subtitle, which is optional. Next will be the page main content, followed finally by the footer. The initial page layout would be the default one. And if you do not like the default format, you can always change it. Before we proceed to put in the page content, let's first decide how the page layout is going to be. There's two ways of doing that. The first way is to change layout by clicking the Change Layout. There are four custom layout you can choose from. Once you have selected your layout, your new page content will take the form of the layout you have just chosen.

The second method is to use ready-made templates which contain both the layout and the colors. Click the Change Look link. This is probably the easiest way to take. And you could already see how the final look will be like. And it is also helpful to be able to view the template colors as well. To select, just click that particular template. And you will be back to the Page Editor.

Now that we have finalized our page layout, let's begin to populate the page with contents. We already have the Page Title. So we type in the optional subtitle, for the purpose of this exercise. A website slogan would make a nice page subtitle. We'll type The Best Website in Town.... Next we put in the main text in the right box. If you have some text in another document such as a text file or a Word processing document, you can just copy the text from there and paste them into the main text box. That was what I just did. Next we will type in the copyright notice in the footer box. And finally we will put some kind of a menu link on the left column box. For this exercise we will type in My Blog, My Choices of Restaurant, About Me, and Contact Me, each in a separate line below the other. For now, we just type in the plain text.

The next thing we want to do is to make our contents more appealing to look at. If all the text looks the same throughout the page, it would be rather boring to look at, wouldn't it? So let's spice things up by making use of font formatting. For this exercise we will make use of the buttons in the tool-bar

Let's start with the text in the main text box. We will highlight the word Heading and then click the heading button in the tool-bar, and select Heading from the drop-down menu choices. This will enlarge the word Heading to be a header. And if we want it to look bigger still, we will highlight the word again and click the Text Size button and select Huge just for fun. The header really stands out now. And to make it more different from the other text, we will also change its font. Highlight the word again and click Font from the tool-bar, and select Georgia from the dropdown menu. Likewise we do a similar thing with the sub-header. This time, we select the sub-Heading choice from the Headings menu.

Next we change the font of the rest of the text in the main text box to be of type Arial. And to make it stands out, we will enlarge and bold the first letter in the two paragraphs. So far this is coming along quite well. We will now format the footer. In this case, we will just right-align the copyright notice. To do that, again highlight the entire line, and then click the Align right button. (In case you are not sure what each of the buttons in the tool-bar stands for, just move your mouse cursor over each button and the description for that button will be displayed.)

We will now finish off by formatting the left column box. I mentioned that in this box, we will be putting in menu items of links to other pages. We have typed each item in separate line. As it is at this point, they are merely plain text. Let's convert them to text links. Highlight the first line My Blog and click the Link button in the tool-bar. You will now get the Edit Link window. The first entry is the Text to Display. This is the description that will be displayed when you hover the mouse cursor over the link. The default will be the original text, in this case My Blog. You may change it to any description, but keep it short though.

The next input to define is the Link to: . There are four type of links here that you can use:

• Your pages - this define the page that you want to take the user when he/she clicks this link. This page may or may be already exist. If not, you can create this new page by defining the page name and then clicking the Add Page button.
• Your files - If you wish the user to download a certain file from your website, then you specify the file name here. That file may not be on your server yet, in which case you can Upload a file. If you know the name and location of the file, type it in the box. Otherwise it is recommended that you click the Browse... button and you can select the file that you want to upload.
• Web address - this defines the url that you want to bring the user to. Typically this will be a url external to your website. Meaning that the page you will be redirecting to doesn't reside on your website.
• Email address - known as the email link. This is the email address that you want the user to write an email to, for whatever reason. When someone clicks this link, what happens next is the browser will open up the user's email program, and go into the New Message mode, with the email address already entered into the email.

For our exercise, we will choose the first type of link Your pages. At this point let's add a few names to the list that we will create later. In the Create New Page box , enter My Blog and then click the Add Page. The page will now be added to the list on the right hand side. Do the same for Restaurants and finally About. These two names will be used later. Click Ok next. Now you will see in the left column box, the line My Blog is now underlined. And a menu also appears under the link, for you to make changes to this link if necessary or to delete the link.

We will do the same for the next two menu links, My Choices of Restaurant and About Me. We highlight each line (one at a time) and click the Link button in the tool-bar, and the select the appropriate page to be directed to. For My Choices of Restaurant, select Restauants and click Ok. Likewise for About Me, select the About page and click Ok. now we see all three links underlined.

And now the final link, Contact Me. This will be slightly different from the first three links, which are of the type "Your pages". We want it such that when a user click Contact Me, they will be presented with a new email message form to email to you. In this case, the link will be of the type Email Address, and you will need to define the email address to email to, in order to contact you. For this exercise, I will enter the email address as me@example.com.

That's it. At this point, your website is still not accessible to the public yet, until you first publish it by clicking the Publish button. But before you do that, you could also preview your page to see how it actually looks like when it is published. Click the Preview button. This will open the page in a new browser window. If you click any of the first three links, you will get a page message that says something like that page isn't there yet. That is because we have not created those pages. But if you click the Contact Me link, it will open up your email program and present you with an empty new email message, with your email address already specified.

Now in your Page Editor, click the Back to Site Manager link, and the page should look like as shown below. There is the homepage you have just created. And there are also three new pages that Page Creator created for you when you added the Page links - About, My Blog and Restaurants :

If you have arrived at this point and have not given up yet, congratulations! You have just created your first homepage for your website.
In the next tutorial we will be looking at how to add images to your web page.